From 6040bbcef21da2e7d5b1e12adcb8956d95206fa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juliana=20Pe=C3=B1a?= Date: Tue, 26 Oct 2021 14:26:35 -0700 Subject: [PATCH] update mdi-react, modify last sync icon (#26617) Updates `mdi-react` to latest version in order to fix #26016 - Last sync time icon has been changed to `weather-cloudy-clock` (fixes #26016) - before: ![image](https://user-images.githubusercontent.com/206864/138783780-43da183a-770d-4a3b-8cbc-b26b516dd88f.png) - after: ![image](https://user-images.githubusercontent.com/206864/138783790-66adc2f5-c851-4fa3-854c-7f808c51c7a4.png) - Some icons have been renamed in the new version of MDI: - `user` -> `account` - `users` -> `account-multiple` - `do-not-disturb` -> `minus-circle` - `error` -> `alert-circle` - The `amazon` icon has been [removed](https://github.com/Templarian/MaterialDesign/issues/5409) from the latest MDI. I've replaced with the `aws` icon which should be fine for the one scenario we use it in (adding a repo from AWS Code Commit). - before: ![image](https://user-images.githubusercontent.com/206864/138782276-22f51ed6-19c0-43b8-a91c-33b6bd7ac014.png) - after: ![image](https://user-images.githubusercontent.com/206864/138782317-8f5a0740-ac6a-4bf5-b5f0-b79fcf505816.png) - The `cancel` icon has been flipped in the latest MDI to match other icons with the same symbol and meaning (e.g. `account-cancel`) - before: ![image](https://user-images.githubusercontent.com/206864/138782743-95295273-89d3-41fb-8ece-b78e9335434a.png) - after: ![image](https://user-images.githubusercontent.com/206864/138782764-100fb24d-9755-41f0-b6dd-bc1bf170155e.png) - The `book-open-variant` icon that we use for API docs has been changed to have text in it. I have changed it to `book-open-blank-variant` so it remains blank. --- client/shared/src/components/CodeExcerpt.tsx | 4 ++-- client/shared/src/components/LastSyncedIcon.tsx | 4 ++-- client/web/src/components/ErrorBoundary.test.tsx | 2 +- client/web/src/components/ErrorBoundary.tsx | 4 ++-- client/web/src/components/ExecutionLogEntry.tsx | 4 ++-- client/web/src/components/Timeline.story.tsx | 8 ++++---- .../__snapshots__/ErrorBoundary.test.tsx.snap | 4 ++-- .../externalServices/ExternalServiceCard.tsx | 4 ++-- .../externalServices/ExternalServiceNode.tsx | 4 ++-- .../components/externalServices/externalServices.tsx | 4 ++-- .../batches/detail/changesets/ChangesetLastSynced.tsx | 6 +++--- .../batches/detail/changesets/ChangesetStatusCell.tsx | 4 ++-- .../execution/BatchSpecExecutionDetailsPage.tsx | 11 +++++------ .../src/enterprise/batches/settings/BatchSpecNode.tsx | 4 ++-- .../codeintel/detail/CodeIntelIndexTimeline.tsx | 6 +++--- .../codeintel/detail/CodeIntelUploadTimeline.tsx | 4 ++-- .../codeintel/shared/CodeIntelStateIcon.tsx | 4 ++-- .../extension/RegistryExtensionNewReleasePage.tsx | 4 ++-- .../registry/RegistryExtensionSourceBadge.tsx | 11 +---------- .../dotcom/customers/SiteAdminCustomerBillingLink.tsx | 4 ++-- .../SiteAdminProductSubscriptionBillingLink.tsx | 4 ++-- .../NewProductSubscriptionPaymentSection.tsx | 4 ++-- .../web/src/repo/docs/DocumentationExamplesList.tsx | 4 ++-- client/web/src/repo/docs/DocumentationNode.tsx | 6 +++--- .../web/src/repo/docs/DocumentationWelcomeAlert.tsx | 4 ++-- .../web/src/repo/docs/RepositoryDocumentationPage.tsx | 4 ++-- client/web/src/repo/settings/RepoSettingsArea.tsx | 4 ++-- client/web/src/repo/tree/TreePage.tsx | 8 ++++---- client/web/src/site-admin/SiteAdminMigrationsPage.tsx | 4 ++-- client/web/src/site-admin/SiteAdminOrgsPage.tsx | 4 ++-- client/web/src/site-admin/sidebaritems.ts | 4 ++-- package.json | 2 +- yarn.lock | 8 ++++---- 33 files changed, 75 insertions(+), 85 deletions(-) diff --git a/client/shared/src/components/CodeExcerpt.tsx b/client/shared/src/components/CodeExcerpt.tsx index 3c578c05a347e..aae983f6318d2 100644 --- a/client/shared/src/components/CodeExcerpt.tsx +++ b/client/shared/src/components/CodeExcerpt.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { range, isEqual } from 'lodash' -import ErrorIcon from 'mdi-react/ErrorIcon' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import React from 'react' import VisibilitySensor from 'react-visibility-sensor' import { of, combineLatest, Observable, Subject, Subscription } from 'rxjs' @@ -139,7 +139,7 @@ export class CodeExcerpt extends React.PureComponent { )} {this.state.blobLinesOrError && isErrorLike(this.state.blobLinesOrError) && (
- + {this.state.blobLinesOrError.message}
)} diff --git a/client/shared/src/components/LastSyncedIcon.tsx b/client/shared/src/components/LastSyncedIcon.tsx index cccbfdbabbad9..560cb42c4cef3 100644 --- a/client/shared/src/components/LastSyncedIcon.tsx +++ b/client/shared/src/components/LastSyncedIcon.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import format from 'date-fns/format' -import CloudSyncOutlineIcon from 'mdi-react/CloudSyncOutlineIcon' +import WeatherCloudyClockIcon from 'mdi-react/WeatherCloudyClockIcon' import React from 'react' import styles from './LastSyncedIcon.module.scss' @@ -14,7 +14,7 @@ export const LastSyncedIcon: React.FunctionComponent = props => { const formattedTime = format(Date.parse(props.lastSyncedTime), "yyyy-MM-dd'T'HH:mm:ss") return ( - diff --git a/client/web/src/components/ErrorBoundary.test.tsx b/client/web/src/components/ErrorBoundary.test.tsx index 1b6c63d6e52c1..26b9564ee2644 100644 --- a/client/web/src/components/ErrorBoundary.test.tsx +++ b/client/web/src/components/ErrorBoundary.test.tsx @@ -8,7 +8,7 @@ import { HTTPStatusError } from '@sourcegraph/shared/src/backend/fetch' import { ErrorBoundary } from './ErrorBoundary' -jest.mock('mdi-react/ErrorIcon', () => 'ErrorIcon') +jest.mock('mdi-react/AlertCircleIcon', () => 'AlertCircleIcon') jest.mock('mdi-react/ReloadIcon', () => 'ReloadIcon') const ThrowError: React.FunctionComponent = () => { diff --git a/client/web/src/components/ErrorBoundary.tsx b/client/web/src/components/ErrorBoundary.tsx index 76ad7975a0f61..6084d86f8f4df 100644 --- a/client/web/src/components/ErrorBoundary.tsx +++ b/client/web/src/components/ErrorBoundary.tsx @@ -1,6 +1,6 @@ import * as sentry from '@sentry/browser' import * as H from 'history' -import ErrorIcon from 'mdi-react/ErrorIcon' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import ReloadIcon from 'mdi-react/ReloadIcon' import React from 'react' @@ -98,7 +98,7 @@ export class ErrorBoundary extends React.PureComponent { return ( {logEntry.exitCode === 0 ? ( ) : ( - + )} )} diff --git a/client/web/src/components/Timeline.story.tsx b/client/web/src/components/Timeline.story.tsx index 065f2b13236be..9928d161ab1a3 100644 --- a/client/web/src/components/Timeline.story.tsx +++ b/client/web/src/components/Timeline.story.tsx @@ -1,7 +1,7 @@ import { storiesOf } from '@storybook/react' import { parseISO } from 'date-fns' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckIcon from 'mdi-react/CheckIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import React from 'react' import { Timeline } from './Timeline' @@ -24,7 +24,7 @@ add('Basic', () => ( date: '2020-06-15T11:15:00+00:00', }, { - icon: , + icon: , className: 'bg-danger', text: 'Second event description', date: '2020-06-15T12:20:00+00:00', @@ -36,7 +36,7 @@ add('Basic', () => ( date: '2020-06-15T13:25:00+00:00', }, { - icon: , + icon: , className: 'bg-danger', text: 'Fourth event description', date: '2020-06-15T14:30:00+00:00', @@ -66,7 +66,7 @@ add('Details', () => ( date: '2020-06-15T11:15:00+00:00', }, { - icon: , + icon: , className: 'bg-danger', text: 'Second event description', date: '2020-06-15T12:20:00+00:00', diff --git a/client/web/src/components/__snapshots__/ErrorBoundary.test.tsx.snap b/client/web/src/components/__snapshots__/ErrorBoundary.test.tsx.snap index e9bdad8ff8d27..1dfc59d48ebb6 100644 --- a/client/web/src/components/__snapshots__/ErrorBoundary.test.tsx.snap +++ b/client/web/src/components/__snapshots__/ErrorBoundary.test.tsx.snap @@ -7,7 +7,7 @@ exports[`ErrorBoundary passes through if non-error 1`] = `
- +
- +
{' '} by - + {namespace.namespaceName} )} diff --git a/client/web/src/components/externalServices/ExternalServiceNode.tsx b/client/web/src/components/externalServices/ExternalServiceNode.tsx index 73638d4445906..22680bcde250d 100644 --- a/client/web/src/components/externalServices/ExternalServiceNode.tsx +++ b/client/web/src/components/externalServices/ExternalServiceNode.tsx @@ -1,7 +1,7 @@ import * as H from 'history' +import AccountIcon from 'mdi-react/AccountIcon' import DeleteIcon from 'mdi-react/DeleteIcon' import SettingsIcon from 'mdi-react/SettingsIcon' -import UserIcon from 'mdi-react/UserIcon' import React, { useCallback, useState } from 'react' import { Link } from '@sourcegraph/shared/src/components/Link' @@ -52,7 +52,7 @@ export const ExternalServiceNode: React.FunctionComponent {node.namespace && ( <> - + {node.namespace.namespaceName}{' '} )} diff --git a/client/web/src/components/externalServices/externalServices.tsx b/client/web/src/components/externalServices/externalServices.tsx index 71a264482d8b1..5b9f34be4d4f0 100644 --- a/client/web/src/components/externalServices/externalServices.tsx +++ b/client/web/src/components/externalServices/externalServices.tsx @@ -1,6 +1,6 @@ import { Edit, FormattingOptions, JSONPath } from '@sqs/jsonc-parser' import { setProperty } from '@sqs/jsonc-parser/lib/edit' -import AmazonIcon from 'mdi-react/AmazonIcon' +import AwsIcon from 'mdi-react/AwsIcon' import BitbucketIcon from 'mdi-react/BitbucketIcon' import GithubIcon from 'mdi-react/GithubIcon' import GitIcon from 'mdi-react/GitIcon' @@ -531,7 +531,7 @@ const GITHUB_ENTERPRISE: AddExternalServiceOptions = { const AWS_CODE_COMMIT: AddExternalServiceOptions = { kind: ExternalServiceKind.AWSCODECOMMIT, title: 'AWS CodeCommit repositories', - icon: AmazonIcon, + icon: AwsIcon, jsonSchema: awsCodeCommitSchemaJSON, defaultDisplayName: 'AWS CodeCommit', defaultConfig: `{ diff --git a/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx b/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx index 24cb89ca80760..4970338bdcdc2 100644 --- a/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx +++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { formatDistance, isBefore, parseISO } from 'date-fns' -import ErrorIcon from 'mdi-react/ErrorIcon' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import InfoCircleOutlineIcon from 'mdi-react/InfoCircleOutlineIcon' import SyncIcon from 'mdi-react/SyncIcon' import React, { useState, useEffect, useCallback } from 'react' @@ -78,13 +78,13 @@ export const ChangesetLastSynced: React.FunctionComponent = ({ changeset, {changeset.__typename === 'ExternalChangeset' && changeset.syncerError ? ( - Syncing from code host failed. + Syncing from code host failed. ) : ( <>Last synced {formatDistance(parseISO(changeset.updatedAt), _now ?? new Date())} ago. )}{' '} {isErrorLike(lastUpdatedAt) && ( - + )} (
- + {label}
) diff --git a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx index 2675d163e0de7..9a49692910dcf 100644 --- a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx +++ b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx @@ -3,7 +3,6 @@ import { isArray, isEqual } from 'lodash' import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckCircleIcon from 'mdi-react/CheckCircleIcon' import CheckIcon from 'mdi-react/CheckIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import LinkVariantRemoveIcon from 'mdi-react/LinkVariantRemoveIcon' import ProgressClockIcon from 'mdi-react/ProgressClockIcon' import TimerSandIcon from 'mdi-react/TimerSandIcon' @@ -302,7 +301,7 @@ const WorkspaceStateIcon: React.FunctionComponent<{ node: Workspace }> = ({ node case BatchSpecWorkspaceState.CANCELED: case BatchSpecWorkspaceState.CANCELING: case BatchSpecWorkspaceState.FAILED: - return + return case BatchSpecWorkspaceState.COMPLETED: return } @@ -321,7 +320,7 @@ const StepStateIcon: React.FunctionComponent<{ step: Step }> = ({ step }) => { if (step.exitCode === 0) { return } - return + return } const StepTimer: React.FunctionComponent<{ step: Step }> = ({ step }) => { @@ -358,8 +357,8 @@ const ExecutionTimeline: React.FunctionComponent = ({ no node.state === BatchSpecWorkspaceState.COMPLETED ? { icon: , text: 'Finished', date: node.finishedAt, className: 'bg-success' } : node.state === BatchSpecWorkspaceState.CANCELED - ? { icon: , text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' } - : { icon: , text: 'Failed', date: node.finishedAt, className: 'bg-danger' }, + ? { icon: , text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' } + : { icon: , text: 'Failed', date: node.finishedAt, className: 'bg-danger' }, ], [expandStage, node, now] ) @@ -419,7 +418,7 @@ const genericStage = ( const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0 return { - icon: !finished ? : success ? : , + icon: !finished ? : success ? : , date: isArray(value) ? value[0].startTime : value.startTime, className: success || !finished ? 'bg-success' : 'bg-danger', expanded: expand || !(success || !finished), diff --git a/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx b/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx index e6b9da300d2fc..e84ba88bb7b12 100644 --- a/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx +++ b/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx @@ -1,11 +1,11 @@ import classNames from 'classnames' import { parseISO } from 'date-fns' import { upperFirst } from 'lodash' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CancelIcon from 'mdi-react/CancelIcon' import CheckCircleIcon from 'mdi-react/CheckCircleIcon' import ChevronDownIcon from 'mdi-react/ChevronDownIcon' import ChevronRightIcon from 'mdi-react/ChevronRightIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import TimerSandIcon from 'mdi-react/TimerSandIcon' import React, { useCallback, useState } from 'react' @@ -91,7 +91,7 @@ const StateIcon: React.FunctionComponent<{ state: BatchSpecState }> = ({ state } case BatchSpecState.FAILED: default: - return + return } } diff --git a/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx b/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx index 9b60d3b6cef6f..72fef67cd44f6 100644 --- a/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx +++ b/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx @@ -1,6 +1,6 @@ import { isArray } from 'lodash' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckIcon from 'mdi-react/CheckIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import ProgressClockIcon from 'mdi-react/ProgressClockIcon' import TimerSandIcon from 'mdi-react/TimerSandIcon' import React, { FunctionComponent, useMemo } from 'react' @@ -34,7 +34,7 @@ export const CodeIntelIndexTimeline: FunctionComponent, text: 'Finished', date: index.finishedAt, className: 'bg-success' } - : { icon: , text: 'Failed', date: index.finishedAt, className: 'bg-danger' }, + : { icon: , text: 'Failed', date: index.finishedAt, className: 'bg-danger' }, ], [index, now] ) @@ -128,7 +128,7 @@ const genericStage = ( const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0 return { - icon: !finished ? : success ? : , + icon: !finished ? : success ? : , date: isArray(value) ? value[0].startTime : value.startTime, className: success || !finished ? 'bg-success' : 'bg-danger', expanded: !(success || !finished), diff --git a/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx b/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx index 8d4dcfbdef4ee..7d08c5a978e67 100644 --- a/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx +++ b/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx @@ -1,5 +1,5 @@ +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckIcon from 'mdi-react/CheckIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import FileUploadIcon from 'mdi-react/FileUploadIcon' import ProgressClockIcon from 'mdi-react/ProgressClockIcon' import React, { FunctionComponent, useMemo } from 'react' @@ -94,7 +94,7 @@ const terminalStages = (upload: LsifUploadFields): TimelineStage[] => : upload.state === LSIFUploadState.ERRORED ? [ { - icon: , + icon: , text: 'Failed', date: upload.finishedAt, className: 'bg-danger', diff --git a/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx b/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx index 8248a4f7777cf..b82d18bf443aa 100644 --- a/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx +++ b/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckCircleIcon from 'mdi-react/CheckCircleIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import FileUploadIcon from 'mdi-react/FileUploadIcon' import TimerSandIcon from 'mdi-react/TimerSandIcon' import React, { FunctionComponent } from 'react' @@ -26,7 +26,7 @@ export const CodeIntelStateIcon: FunctionComponent = ({ ) : state === LSIFUploadState.COMPLETED || state === LSIFIndexState.COMPLETED ? ( ) : state === LSIFUploadState.ERRORED || state === LSIFIndexState.ERRORED ? ( - + ) : ( <> ) diff --git a/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx b/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx index 24a57d7277c5b..700e4d4dd340f 100644 --- a/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx +++ b/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx @@ -1,6 +1,6 @@ import * as H from 'history' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import CheckCircleIcon from 'mdi-react/CheckCircleIcon' -import ErrorIcon from 'mdi-react/ErrorIcon' import React, { useCallback, useState } from 'react' import { of, Observable, concat, from } from 'rxjs' import { fromFetch } from 'rxjs/fetch' @@ -125,7 +125,7 @@ export const RegistryExtensionNewReleasePage = withAuthenticatedUser( return !extension.registryExtension || !extension.registryExtension.viewerCanAdminister ? ( diff --git a/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx b/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx index 8a24984e72e5f..8c874cc7043e1 100644 --- a/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx +++ b/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx @@ -1,6 +1,4 @@ import classNames from 'classnames' -import DoNotDisturbIcon from 'mdi-react/DoNotDisturbIcon' -import WebIcon from 'mdi-react/WebIcon' import * as React from 'react' import { LinkOrSpan } from '@sourcegraph/shared/src/components/LinkOrSpan' @@ -8,11 +6,10 @@ import * as GQL from '@sourcegraph/shared/src/graphql/schema' export const RegistryExtensionSourceBadge: React.FunctionComponent<{ extension: Pick - showIcon?: boolean showText?: boolean showRegistryName?: boolean className?: string -}> = ({ extension, showIcon, showText, showRegistryName, className = '' }) => ( +}> = ({ extension, showText, showRegistryName, className = '' }) => ( - {showIcon && - (extension.isLocal ? ( - - ) : ( - - ))} {showText && (extension.isLocal ? 'Local' : showRegistryName ? extension.registryName : 'External')} ) diff --git a/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx b/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx index b639048e35189..81208b05cb7ad 100644 --- a/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx +++ b/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx @@ -1,4 +1,4 @@ -import ErrorIcon from 'mdi-react/ErrorIcon' +import AlertCircleIcon from 'mdi-react/AlertCircleIcon' import ExternalLinkIcon from 'mdi-react/ExternalLinkIcon' import React, { useCallback } from 'react' import { Observable } from 'rxjs' @@ -69,7 +69,7 @@ export const SiteAdminCustomerBillingLink: React.FunctionComponent = ({ c )} {isErrorLike(update) && ( - + )}