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](Templarian/MaterialDesign#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.
sourcegraph · Oct 26, 2021 · 6040bbc · 6040bbc
1 parent d0c56cd
commit 6040bbc
Show file tree

Hide file tree

Showing 33 changed files with 75 additions and 85 deletions.
diff --git 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<Props, State> {
                     )}
                     {this.state.blobLinesOrError && isErrorLike(this.state.blobLinesOrError) && (
                         <div className="code-excerpt-alert">
-                            <ErrorIcon className="icon-inline mr-2" />
+                            <AlertCircleIcon className="icon-inline mr-2" />
                             {this.state.blobLinesOrError.message}
                         </div>
                     )}

diff --git 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> = props => {
     const formattedTime = format(Date.parse(props.lastSyncedTime), "yyyy-MM-dd'T'HH:mm:ss")
 
     return (
-        <CloudSyncOutlineIcon
+        <WeatherCloudyClockIcon
             className={classNames(props.className, styles.lastSyncedIcon, 'icon-inline', 'text-muted')}
             data-tooltip={`Last synced: ${formattedTime}`}
         />

diff --git 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
@@ -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<Props, State> {
 
             return (
                 <HeroPage
-                    icon={ErrorIcon}
+                    icon={AlertCircleIcon}
                     title="Error"
                     className={this.props.className}
                     subtitle={

diff --git a/client/web/src/components/ExecutionLogEntry.tsx b/client/web/src/components/ExecutionLogEntry.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 React from 'react'
 
 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
@@ -40,7 +40,7 @@ export const ExecutionLogEntry: React.FunctionComponent<ExecutionLogEntryProps>
                         {logEntry.exitCode === 0 ? (
                             <CheckCircleIcon className="text-success mr-1" />
                         ) : (
-                            <ErrorIcon className="text-danger mr-1" />
+                            <AlertCircleIcon className="text-danger mr-1" />
                         )}
                     </>
                 )}

diff --git 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: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                         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: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                         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: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                         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
@@ -7,7 +7,7 @@ exports[`ErrorBoundary passes through if non-error 1`] = `
   <div
     className="icon"
   >
-    <ErrorIcon />
+    <AlertCircleIcon />
   </div>
   <div
     className="title"
@@ -49,7 +49,7 @@ exports[`ErrorBoundary renders reload page if chunk error 1`] = `
   <div
     className="icon"
   >
-    <ErrorIcon />
+    <AlertCircleIcon />
   </div>
   <div
     className="title"

diff --git a/client/web/src/components/externalServices/ExternalServiceCard.tsx b/client/web/src/components/externalServices/ExternalServiceCard.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import * as H from 'history'
+import AccountIcon from 'mdi-react/AccountIcon'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
-import UserIcon from 'mdi-react/UserIcon'
 import React from 'react'
 
 import { Link } from '@sourcegraph/shared/src/components/Link'
@@ -51,7 +51,7 @@ export const ExternalServiceCard: React.FunctionComponent<ExternalServiceCardPro
                         <small>
                             {' '}
                             by
-                            <UserIcon className="icon-inline" />
+                            <AccountIcon className="icon-inline" />
                             <Link to={namespace.url}>{namespace.namespaceName}</Link>
                         </small>
                     )}

diff --git 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<ExternalServiceNodePro
                 <div>
                     {node.namespace && (
                         <>
-                            <UserIcon className="icon-inline" />
+                            <AccountIcon className="icon-inline" />
                             <Link to={node.namespace.url}>{node.namespace.namespaceName}</Link>{' '}
                         </>
                     )}

diff --git 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
@@ -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<Props> = ({ changeset,
         <small className="text-muted">
             {changeset.__typename === 'ExternalChangeset' && changeset.syncerError ? (
                 <span data-tooltip="Expand to see details.">
-                    <ErrorIcon className="icon-inline text-danger" /> Syncing from code host failed.
+                    <AlertCircleIcon className="icon-inline text-danger" /> Syncing from code host failed.
                 </span>
             ) : (
                 <>Last synced {formatDistance(parseISO(changeset.updatedAt), _now ?? new Date())} ago.</>
             )}{' '}
             {isErrorLike(lastUpdatedAt) && (
-                <ErrorIcon data-tooltip={lastUpdatedAt.message} className="ml-2 icon-inline small" />
+                <AlertCircleIcon data-tooltip={lastUpdatedAt.message} className="ml-2 icon-inline small" />
             )}
             <span data-tooltip={tooltipText}>
                 <UpdateLoaderIcon

diff --git a/client/web/src/enterprise/batches/detail/changesets/ChangesetStatusCell.tsx b/client/web/src/enterprise/batches/detail/changesets/ChangesetStatusCell.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ArchiveIcon from 'mdi-react/ArchiveIcon'
 import AutorenewIcon from 'mdi-react/AutorenewIcon'
 import DeleteIcon from 'mdi-react/DeleteIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import SourceBranchIcon from 'mdi-react/SourceBranchIcon'
 import SourceMergeIcon from 'mdi-react/SourceMergeIcon'
 import SourcePullIcon from 'mdi-react/SourcePullIcon'
@@ -114,7 +114,7 @@ export const ChangesetStatusError: React.FunctionComponent<ChangesetStatusIconPr
     className,
 }) => (
     <div className={classNames(iconClassNames, className)}>
-        <ErrorIcon className="text-danger" />
+        <AlertCircleIcon className="text-danger" />
         {label}
     </div>
 )

diff --git 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 <ErrorIcon className="icon-inline text-danger" />
+            return <AlertCircleIcon className="icon-inline text-danger" />
         case BatchSpecWorkspaceState.COMPLETED:
             return <CheckCircleIcon className="icon-inline text-success" />
     }
@@ -321,7 +320,7 @@ const StepStateIcon: React.FunctionComponent<{ step: Step }> = ({ step }) => {
     if (step.exitCode === 0) {
         return <CheckCircleIcon className="icon-inline text-success" />
     }
-    return <ErrorIcon className="icon-inline text-danger" />
+    return <AlertCircleIcon className="icon-inline text-danger" />
 }
 
 const StepTimer: React.FunctionComponent<{ step: Step }> = ({ step }) => {
@@ -358,8 +357,8 @@ const ExecutionTimeline: React.FunctionComponent<ExecutionTimelineProps> = ({ no
             node.state === BatchSpecWorkspaceState.COMPLETED
                 ? { icon: <CheckIcon />, text: 'Finished', date: node.finishedAt, className: 'bg-success' }
                 : node.state === BatchSpecWorkspaceState.CANCELED
-                ? { icon: <ErrorIcon />, text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' }
-                : { icon: <ErrorIcon />, text: 'Failed', date: node.finishedAt, className: 'bg-danger' },
+                ? { icon: <AlertCircleIcon />, text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' }
+                : { icon: <AlertCircleIcon />, text: 'Failed', date: node.finishedAt, className: 'bg-danger' },
         ],
         [expandStage, node, now]
     )
@@ -419,7 +418,7 @@ const genericStage = <E extends { startTime: string; exitCode: number | null }>(
     const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0
 
     return {
-        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <ErrorIcon />,
+        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <AlertCircleIcon />,
         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
@@ -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 <ErrorIcon className={classNames(styles.nodeStateIcon, 'icon-inline text-danger mb-1')} />
+            return <AlertCircleIcon className={classNames(styles.nodeStateIcon, 'icon-inline text-danger mb-1')} />
     }
 }
 

diff --git 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<CodeIntelIndexTimelinePro
 
             index.state === LSIFIndexState.COMPLETED
                 ? { icon: <CheckIcon />, text: 'Finished', date: index.finishedAt, className: 'bg-success' }
-                : { icon: <ErrorIcon />, text: 'Failed', date: index.finishedAt, className: 'bg-danger' },
+                : { icon: <AlertCircleIcon />, text: 'Failed', date: index.finishedAt, className: 'bg-danger' },
         ],
         [index, now]
     )
@@ -128,7 +128,7 @@ const genericStage = <E extends { startTime: string; exitCode: number | null }>(
     const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0
 
     return {
-        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <ErrorIcon />,
+        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <AlertCircleIcon />,
         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
@@ -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: <ErrorIcon />,
+                  icon: <AlertCircleIcon />,
                   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
@@ -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<CodeIntelStateIconProps> = ({
     ) : state === LSIFUploadState.COMPLETED || state === LSIFIndexState.COMPLETED ? (
         <CheckCircleIcon className={classNames('text-success', className)} />
     ) : state === LSIFUploadState.ERRORED || state === LSIFIndexState.ERRORED ? (
-        <ErrorIcon className={classNames('text-danger', className)} />
+        <AlertCircleIcon className={classNames('text-danger', className)} />
     ) : (
         <></>
     )
diff --git 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<Props>(
 
         return !extension.registryExtension || !extension.registryExtension.viewerCanAdminister ? (
             <HeroPage
-                icon={ErrorIcon}
+                icon={AlertCircleIcon}
                 title="Unauthorized"
                 subtitle="You are not authorized to adminster this extension."
             />