PageHeader: Update to support @mdi/js (#38084)

client/vscode/src/webview/search-panel/RepoView.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo, useState } from 'react'
 
-import { mdiArrowLeft, mdiFileDocumentOutline, mdiFolderOutline } from '@mdi/js'
+import { mdiArrowLeft, mdiFileDocumentOutline, mdiFolderOutline, mdiSourceRepository } from '@mdi/js'
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import classNames from 'classnames'
-import SourceRepositoryIcon from 'mdi-react/SourceRepositoryIcon'
 import { catchError } from 'rxjs/operators'
 
 import { QueryState } from '@sourcegraph/search'
@@ -98,7 +97,7 @@ export const RepoView: React.FunctionComponent<React.PropsWithChildren<RepoViewP
                 </button>
             )}
             <PageHeader
-                path={[{ icon: SourceRepositoryIcon, text: displayRepoName(repositoryMatch.repository) }]}
+                path={[{ icon: mdiSourceRepository, text: displayRepoName(repositoryMatch.repository) }]}
                 className="mb-1 mt-3 test-tree-page-title"
             />
             {repositoryMatch.description && <Text className="mt-0 text-muted">{repositoryMatch.description}</Text>}

client/web/src/enterprise/extensions/registry/RegistryNewExtensionPage.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 
+import { mdiPuzzleOutline } from '@mdi/js'
 import classNames from 'classnames'
 import * as H from 'history'
 import HelpCircleOutline from 'mdi-react/HelpCircleOutlineIcon'
-import PuzzleOutlineIcon from 'mdi-react/PuzzleOutlineIcon'
 import { RouteComponentProps } from 'react-router'
 import { concat, Subject, Subscription } from 'rxjs'
 import { catchError, concatMap, map, tap } from 'rxjs/operators'
@@ -129,7 +129,7 @@ export const RegistryNewExtensionPage = withAuthenticatedUser(
                     <PageTitle title="Create new extension" />
                     <PageHeader
                         path={[
-                            { icon: PuzzleOutlineIcon, to: '/extensions', ariaLabel: 'Extensions' },
+                            { icon: mdiPuzzleOutline, to: '/extensions', ariaLabel: 'Extensions' },
                             { text: 'Create extension' },
                         ]}
                         description={

client/web/src/enterprise/searchContexts/CreateSearchContextPage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import MagnifyIcon from 'mdi-react/MagnifyIcon'
+import { mdiMagnify } from '@mdi/js'
 import { Redirect, RouteComponentProps } from 'react-router'
 import { Observable } from 'rxjs'
 
@@ -76,7 +76,7 @@ export const AuthenticatedCreateSearchContextPage: React.FunctionComponent<
                         className="mb-3"
                     >
                         <PageHeader.Heading as="h2" styleAs="h1">
-                            <PageHeader.Breadcrumb icon={MagnifyIcon} to="/search" aria-label="Code Search" />
+                            <PageHeader.Breadcrumb icon={mdiMagnify} to="/search" aria-label="Code Search" />
                             <PageHeader.Breadcrumb to="/contexts">Contexts</PageHeader.Breadcrumb>
                             <PageHeader.Breadcrumb>Create context</PageHeader.Breadcrumb>
                         </PageHeader.Heading>

client/web/src/enterprise/searchContexts/EditSearchContextPage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 
-import MagnifyIcon from 'mdi-react/MagnifyIcon'
+import { mdiMagnify } from '@mdi/js'
 import { RouteComponentProps } from 'react-router'
 import { Observable, of, throwError } from 'rxjs'
 import { catchError, startWith, switchMap } from 'rxjs/operators'
@@ -81,7 +81,7 @@ export const AuthenticatedEditSearchContextPage: React.FunctionComponent<
                         className="mb-3"
                         path={[
                             {
-                                icon: MagnifyIcon,
+                                icon: mdiMagnify,
                                 to: '/search',
                                 ariaLabel: 'Code Search',
                             },

client/web/src/enterprise/searchContexts/SearchContextPage.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react'
 
+import { mdiMagnify } from '@mdi/js'
 import classNames from 'classnames'
 import { debounce } from 'lodash'
-import MagnifyIcon from 'mdi-react/MagnifyIcon'
 import { RouteComponentProps } from 'react-router'
 import { catchError, startWith } from 'rxjs/operators'
 
@@ -180,7 +180,7 @@ export const SearchContextPage: React.FunctionComponent<React.PropsWithChildren<
                                 }
                             >
                                 <PageHeader.Heading as="h2" styleAs="h1">
-                                    <PageHeader.Breadcrumb icon={MagnifyIcon} to="/search" aria-label="Code Search" />
+                                    <PageHeader.Breadcrumb icon={mdiMagnify} to="/search" aria-label="Code Search" />
                                     <PageHeader.Breadcrumb to="/contexts">Contexts</PageHeader.Breadcrumb>
                                     <PageHeader.Breadcrumb>
                                         <div>

client/web/src/enterprise/searchContexts/SearchContextsListPage.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useState } from 'react'
 
-import { mdiPlus } from '@mdi/js'
+import { mdiMagnify, mdiPlus } from '@mdi/js'
 import classNames from 'classnames'
 import * as H from 'history'
-import MagnifyIcon from 'mdi-react/MagnifyIcon'
 
 import { SearchContextProps } from '@sourcegraph/search'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
@@ -91,7 +90,7 @@ export const SearchContextsListPage: React.FunctionComponent<
                     className="mb-3"
                 >
                     <PageHeader.Heading as="h2" styleAs="h1">
-                        <PageHeader.Breadcrumb icon={MagnifyIcon} to="/search" aria-label="Code Search" />
+                        <PageHeader.Breadcrumb icon={mdiMagnify} to="/search" aria-label="Code Search" />
                         <PageHeader.Breadcrumb>Contexts</PageHeader.Breadcrumb>
                     </PageHeader.Heading>
                 </PageHeader>

client/web/src/extensions/ExtensionsAreaHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import PuzzleOutlineIcon from 'mdi-react/PuzzleOutlineIcon'
+import { mdiPuzzleOutline } from '@mdi/js'
 import { RouteComponentProps } from 'react-router-dom'
 
 import { PageHeader, Button, Link, Icon } from '@sourcegraph/wildcard'
@@ -29,7 +29,7 @@ export const ExtensionsAreaHeader: React.FunctionComponent<
     <div className="container">
         {props.isPrimaryHeader && (
             <PageHeader
-                path={[{ icon: PuzzleOutlineIcon, text: 'Extensions' }]}
+                path={[{ icon: mdiPuzzleOutline, text: 'Extensions' }]}
                 actions={props.actionButtons.map(
                     ({ condition = () => true, to, icon: ButtonIcon, label, tooltip }) =>
                         condition(props) && (

client/web/src/extensions/extension/ExtensionAreaHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react'
 
+import { mdiPuzzleOutline } from '@mdi/js'
 import classNames from 'classnames'
-import PuzzleOutlineIcon from 'mdi-react/PuzzleOutlineIcon'
 import { NavLink, RouteComponentProps } from 'react-router-dom'
 
 import { isErrorLike } from '@sourcegraph/common'
@@ -96,7 +96,7 @@ export const ExtensionAreaHeader: React.FunctionComponent<React.PropsWithChildre
                                 )
                             }
                             path={[
-                                { to: '/extensions', icon: PuzzleOutlineIcon, ariaLabel: 'Extensions' },
+                                { to: '/extensions', icon: mdiPuzzleOutline, ariaLabel: 'Extensions' },
                                 { text: publisher },
                                 { text: name },
                             ]}

client/web/src/insights/Icons.tsx

@@ -1,3 +1,3 @@
-import BarChartIcon from 'mdi-react/BarChartIcon'
+import { mdiPoll } from '@mdi/js'
 
-export const CodeInsightsIcon = BarChartIcon
+export const CodeInsightsIcon = mdiPoll

client/web/src/notebooks/listPage/NotebooksListPage.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { mdiBookOutline } from '@mdi/js'
 import classNames from 'classnames'
 import * as H from 'history'
-import BookOutlineIcon from 'mdi-react/BookOutlineIcon'
 import { Redirect, useHistory, useLocation } from 'react-router'
 import { Observable } from 'rxjs'
 import { catchError, startWith, switchMap } from 'rxjs/operators'
@@ -259,7 +259,7 @@ export const NotebooksListPage: React.FunctionComponent<React.PropsWithChildren<
                     className="mb-3"
                 >
                     <PageHeader.Heading as="h2" styleAs="h1">
-                        <PageHeader.Breadcrumb icon={BookOutlineIcon}>Notebooks</PageHeader.Breadcrumb>
+                        <PageHeader.Breadcrumb icon={mdiBookOutline}>Notebooks</PageHeader.Breadcrumb>
                     </PageHeader.Heading>
                 </PageHeader>
                 {isErrorLike(importState) && (

client/web/src/notebooks/notebookPage/NotebookPage.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { mdiBookOutline } from '@mdi/js'
 import classNames from 'classnames'
-import BookOutlineIcon from 'mdi-react/BookOutlineIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
 import CloseIcon from 'mdi-react/CloseIcon'
 import { RouteComponentProps } from 'react-router'
@@ -246,7 +246,7 @@ export const NotebookPage: React.FunctionComponent<React.PropsWithChildren<Noteb
                             >
                                 <PageHeader.Heading as="h2" styleAs="h1">
                                     <PageHeader.Breadcrumb
-                                        icon={BookOutlineIcon}
+                                        icon={mdiBookOutline}
                                         to="/notebooks"
                                         aria-label="Notebooks"
                                     />

client/web/src/org/settings/codeHosts/ConnectGitHubAppPage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, HTMLAttributes } from 'react'
 
+import { mdiGithub } from '@mdi/js'
 import classNames from 'classnames'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
-import GithubIcon from 'mdi-react/GithubIcon'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { Card, CardBody, Link, PageHeader, LoadingSpinner, H3, Text } from '@sourcegraph/wildcard'
@@ -77,7 +77,7 @@ export const ConnectGitHubAppPage: React.FunctionComponent<React.PropsWithChildr
             <PageHeader
                 path={[
                     {
-                        icon: GithubIcon,
+                        icon: mdiGithub,
                         text: 'Complete your GitHub connection',
                     },
                 ]}

client/web/src/repo/tree/TreePage.tsx

@@ -1,10 +1,8 @@
 import React, { useMemo, useEffect, useState } from 'react'
 
-import { mdiCodeJson, mdiCog } from '@mdi/js'
+import { mdiCodeJson, mdiCog, mdiFolder, mdiSourceRepository } from '@mdi/js'
 import classNames from 'classnames'
 import * as H from 'history'
-import FolderIcon from 'mdi-react/FolderIcon'
-import SourceRepositoryIcon from 'mdi-react/SourceRepositoryIcon'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 import { catchError } from 'rxjs/operators'
 
@@ -259,7 +257,7 @@ export const TreePage: React.FunctionComponent<React.PropsWithChildren<Props>> =
             <div className="d-flex justify-content-between align-items-center">
                 <div>
                     <PageHeader
-                        path={[{ icon: SourceRepositoryIcon, text: displayRepoName(repo.name) }]}
+                        path={[{ icon: mdiSourceRepository, text: displayRepoName(repo.name) }]}
                         className="mb-3 test-tree-page-title"
                     />
                     {repo.description && <Text>{repo.description}</Text>}
@@ -345,7 +343,7 @@ export const TreePage: React.FunctionComponent<React.PropsWithChildren<Props>> =
                                 <RootHeaderSection tree={treeOrError} />
                             ) : (
                                 <PageHeader
-                                    path={[{ icon: FolderIcon, text: filePath }]}
+                                    path={[{ icon: mdiFolder, text: filePath }]}
                                     className="mb-3 mr-2 test-tree-page-title"
                                 />
                             )}

client/web/src/search/results/SearchResultsInfoBar.tsx

@@ -277,7 +277,13 @@ export const SearchResultsInfoBar: React.FunctionComponent<
                     className="a11y-ignore create-code-monitor-button"
                     button={
                         <>
-                            <Icon aria-hidden={true} className="mr-1" as={createCodeMonitorAction.icon} />
+                            <Icon
+                                aria-hidden={true}
+                                className="mr-1"
+                                {...(typeof createCodeMonitorAction.icon === 'string'
+                                    ? { svgPath: createCodeMonitorAction.icon }
+                                    : { as: createCodeMonitorAction.icon })}
+                            />
                             {createCodeMonitorAction.label}
                         </>
                     }
@@ -420,7 +426,13 @@ export const SearchResultsInfoBar: React.FunctionComponent<
                                 outline={true}
                                 size="sm"
                             >
-                                <Icon aria-hidden={true} className="mr-1" as={createActionButton.icon} />
+                                <Icon
+                                    aria-hidden={true}
+                                    className="mr-1"
+                                    {...(typeof createActionButton.icon === 'string'
+                                        ? { svgPath: createActionButton.icon }
+                                        : { as: createActionButton.icon })}
+                                />
                                 {createActionButton.label}
                             </ButtonLink>
                         </li>

client/web/src/search/results/createActions.ts

@@ -1,9 +1,10 @@
-import MagnifyIcon from 'mdi-react/MagnifyIcon'
+import { mdiMagnify } from '@mdi/js'
 
 import { SearchPatternType } from '@sourcegraph/search'
 import { FilterType } from '@sourcegraph/shared/src/search/query/filters'
 import { FilterKind, findFilter } from '@sourcegraph/shared/src/search/query/query'
 import { omitFilter } from '@sourcegraph/shared/src/search/query/transformer'
+import { IconType } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
 import { BatchChangesIcon } from '../../batches/icons'
@@ -12,7 +13,7 @@ import { CodeInsightsIcon } from '../../insights/Icons'
 
 export interface CreateAction {
     url: string
-    icon: React.ElementType
+    icon: IconType
     label: string
     tooltip: string
 }
@@ -35,7 +36,7 @@ export function getSearchContextCreateAction(
     searchParameters.set('q', sanitizedQuery)
     const url = `/contexts/new?${searchParameters.toString()}`
 
-    return { url, icon: MagnifyIcon, label: 'Create Context', tooltip: 'Create a search context based on this query' }
+    return { url, icon: mdiMagnify, label: 'Create Context', tooltip: 'Create a search context based on this query' }
 }
 
 export function getInsightsCreateAction(

client/wildcard/src/components/Icon/Icon.tsx

@@ -9,17 +9,26 @@ import { ICON_SIZES } from './constants'
 
 import styles from './Icon.module.scss'
 
+type PathIcon = string
+type CustomIcon = ComponentType<{ className?: string }>
+export type IconType = PathIcon | CustomIcon
+
 interface BaseIconProps extends SVGProps<SVGSVGElement> {
     /**
      * Provide a custom `svgPath` to build an SVG.
      *
      * If using a Material Design icon, simply import the path from '@mdj/js'.
      */
-    svgPath?: string
+    svgPath?: PathIcon
     /**
      * The variant style of the icon. defaults to 'sm'
      */
     size?: typeof ICON_SIZES[number]
+    /**
+     * If the icon should be styled to scale according to the surrounding text.
+     * Defaults to `true`.
+     */
+    inline?: boolean
     className?: string
     role?: AriaRole
 }
@@ -34,36 +43,42 @@ interface HiddenIconProps extends BaseIconProps {
 
 export type IconProps = HiddenIconProps | ScreenReaderIconProps
 
-// eslint-disable-next-line react/display-name
-export const Icon = React.forwardRef(({ children, className, size, role = 'img', ...props }, reference) => {
-    const iconStyle = classNames(styles.iconInline, size === 'md' && styles.iconInlineMd, className)
-
-    if (props.svgPath) {
-        const { svgPath, height = 24, width = 24, viewBox = '0 0 24 24', fill = 'currentColor', ...attributes } = props
+export const Icon = React.memo(
+    React.forwardRef(function Icon({ children, className, size, role = 'img', inline = true, ...props }, reference) {
+        const iconStyle = classNames(inline && styles.iconInline, size === 'md' && styles.iconInlineMd, className)
 
-        return (
-            <svg
-                ref={reference}
-                className={iconStyle}
-                role={role}
-                height={height}
-                width={width}
-                viewBox={viewBox}
-                fill={fill}
-                {...attributes}
-            >
-                <path d={svgPath} />
-            </svg>
-        )
-    }
+        if (props.svgPath) {
+            const {
+                svgPath,
+                height = 24,
+                width = 24,
+                viewBox = '0 0 24 24',
+                fill = 'currentColor',
+                ...attributes
+            } = props
 
-    const { as: IconComponent = 'svg', ...attributes } = props
+            return (
+                <svg
+                    ref={reference}
+                    className={iconStyle}
+                    role={role}
+                    height={height}
+                    width={width}
+                    viewBox={viewBox}
+                    fill={fill}
+                    {...attributes}
+                >
+                    <path d={svgPath} />
+                </svg>
+            )
+        }
 
-    return (
-        <IconComponent ref={reference} className={iconStyle} role={role} {...attributes}>
-            {children}
-        </IconComponent>
-    )
-}) as ForwardReferenceComponent<ComponentType<React.PropsWithChildren<MdiReactIconProps>> | ElementType, IconProps>
+        const { as: IconComponent = 'svg', ...attributes } = props
 
-Icon.displayName = 'Icon'
+        return (
+            <IconComponent ref={reference} className={iconStyle} role={role} {...attributes}>
+                {children}
+            </IconComponent>
+        )
+    }) as ForwardReferenceComponent<ComponentType<React.PropsWithChildren<MdiReactIconProps>> | ElementType, IconProps>
+)