diff --git a/.changeset/catalog-graph-nfs-page.md b/.changeset/catalog-graph-nfs-page.md index 3b7a999b54..fac437c641 100644 --- a/.changeset/catalog-graph-nfs-page.md +++ b/.changeset/catalog-graph-nfs-page.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-graph': patch --- -The new frontend plugin entry now exposes a display title and icon for navigation, and the catalog graph page uses the Backstage UI header when rendered in the new frontend system. +Added `title` and `icon` to the new frontend system plugin definition. diff --git a/.changeset/catalog-import-nfs-page.md b/.changeset/catalog-import-nfs-page.md index 362f74c12f..2944565205 100644 --- a/.changeset/catalog-import-nfs-page.md +++ b/.changeset/catalog-import-nfs-page.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-import': patch --- -Updated the catalog import plugin for the new frontend system with plugin title and icon metadata, and a page layout that uses Backstage UI header instead of legacy page chrome. +Added `title` and `icon` to the new frontend system plugin definition. diff --git a/plugins/catalog-graph/src/alpha.tsx b/plugins/catalog-graph/src/alpha.tsx index a71189c7ab..f1b4dbc6d0 100644 --- a/plugins/catalog-graph/src/alpha.tsx +++ b/plugins/catalog-graph/src/alpha.tsx @@ -80,8 +80,8 @@ const CatalogGraphPage = PageBlueprint.makeWithOverrides({ path: '/catalog-graph', routeRef: catalogGraphRouteRef, loader: () => - import('./components/CatalogGraphPage/CatalogGraphPage').then(m => ( - + import('./components/CatalogGraphPage').then(m => ( + )), }); }, diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index 5fb913d8d7..7e6420da1f 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx @@ -27,7 +27,6 @@ import { entityRouteRef, humanizeEntityRef, } from '@backstage/plugin-catalog-react'; -import { Header as BuiHeader } from '@backstage/ui'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; @@ -117,27 +116,22 @@ const useStyles = makeStyles( { name: 'PluginCatalogGraphCatalogGraphPage' }, ); -type CatalogGraphPageProps = { - initialState?: { - selectedRelations?: string[]; - selectedKinds?: string[]; - rootEntityRefs?: string[]; - maxDepth?: number; - unidirectional?: boolean; - mergeRelations?: boolean; - direction?: Direction; - showFilters?: boolean; - curve?: 'curveStepBefore' | 'curveMonotoneX'; - }; -} & Partial; - -type CatalogGraphPageContentProps = CatalogGraphPageProps & { - headerVariant: 'legacy' | 'bui'; -}; - -function CatalogGraphPageContent(props: CatalogGraphPageContentProps) { - const { headerVariant, ...graphPageProps } = props; - const { relationPairs, initialState, entityFilter } = graphPageProps; +export const CatalogGraphPage = ( + props: { + initialState?: { + selectedRelations?: string[]; + selectedKinds?: string[]; + rootEntityRefs?: string[]; + maxDepth?: number; + unidirectional?: boolean; + mergeRelations?: boolean; + direction?: Direction; + showFilters?: boolean; + curve?: 'curveStepBefore' | 'curveMonotoneX'; + }; + } & Partial, +) => { + const { relationPairs, initialState, entityFilter } = props; const { t } = useTranslationRef(catalogGraphTranslationRef); const navigate = useNavigate(); const classes = useStyles(); @@ -191,127 +185,93 @@ function CatalogGraphPageContent(props: CatalogGraphPageContentProps) { [catalogEntityRoute, navigate, setRootEntityNames, analytics], ); - const subtitle = rootEntityNames.map(e => humanizeEntityRef(e)).join(', '); - - const filterToggle = ( - toggleShowFilters()} - > - {t('catalogGraphPage.filterToggleButtonTitle')} - - ); - - const supportButton = ( - - {t('catalogGraphPage.supportButtonDescription')} - - ); - - const graphBody = ( - - {showFilters && ( - - - - - - - - - - )} - - - - {' '} - {t('catalogGraphPage.zoomOutDescription')} - - 0 - ? selectedKinds - : undefined - } - relations={ - selectedRelations && selectedRelations.length > 0 - ? selectedRelations - : undefined - } - mergeRelations={mergeRelations} - unidirectional={unidirectional} - onNodeClick={onNodeClick} - direction={direction} - relationPairs={relationPairs} - entityFilter={entityFilter} - className={classes.graph} - zoom="enabled" - curve={curve} - /> - - - - ); - - if (headerVariant === 'legacy') { - return ( - -
- - - {supportButton} - - {graphBody} - - - ); - } - return ( - <> - - {filterToggle} - {supportButton} - - } + +
humanizeEntityRef(e)).join(', ')} /> - {graphBody} + toggleShowFilters()} + > + {t('catalogGraphPage.filterToggleButtonTitle')} + + } + > + + {t('catalogGraphPage.supportButtonDescription')} + + + + {showFilters && ( + + + + + + + + + + )} + + + + {' '} + {t('catalogGraphPage.zoomOutDescription')} + + 0 + ? selectedKinds + : undefined + } + relations={ + selectedRelations && selectedRelations.length > 0 + ? selectedRelations + : undefined + } + mergeRelations={mergeRelations} + unidirectional={unidirectional} + onNodeClick={onNodeClick} + direction={direction} + relationPairs={relationPairs} + entityFilter={entityFilter} + className={classes.graph} + zoom="enabled" + curve={curve} + /> + + + - + ); -} - -export const CatalogGraphPage = (props: CatalogGraphPageProps) => { - return ; -}; - -export const NfsCatalogGraphPage = (props: CatalogGraphPageProps) => { - return ; }; diff --git a/plugins/catalog-import/package.json b/plugins/catalog-import/package.json index dcac78437c..028c7017e7 100644 --- a/plugins/catalog-import/package.json +++ b/plugins/catalog-import/package.json @@ -66,7 +66,6 @@ "@backstage/plugin-catalog-common": "workspace:^", "@backstage/plugin-catalog-react": "workspace:^", "@backstage/plugin-permission-react": "workspace:^", - "@backstage/ui": "workspace:^", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", diff --git a/plugins/catalog-import/src/alpha.tsx b/plugins/catalog-import/src/alpha.tsx index 315bbc36e6..dcbc8886e4 100644 --- a/plugins/catalog-import/src/alpha.tsx +++ b/plugins/catalog-import/src/alpha.tsx @@ -51,9 +51,9 @@ const catalogImportPage = PageBlueprint.make({ path: '/catalog-import', routeRef: rootRouteRef, loader: () => - import('./components/DefaultImportPage/DefaultImportPage').then(m => ( + import('./components/ImportPage').then(m => ( - + )), }, diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx index 9989bbd9b6..24a79866b3 100644 --- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx +++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx @@ -23,7 +23,6 @@ import { } from '@backstage/core-components'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { useTranslationRef } from '@backstage/frontend-plugin-api'; -import { Header as BuiHeader } from '@backstage/ui'; import Grid from '@material-ui/core/Grid'; import { useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; @@ -32,9 +31,17 @@ import { catalogImportTranslationRef } from '../../translation'; import { ImportInfoCard } from '../ImportInfoCard'; import { ImportStepper } from '../ImportStepper'; -const DefaultImportPageGrid = () => { +/** + * The default catalog import page. + * + * @public + */ +export const DefaultImportPage = () => { + const { t } = useTranslationRef(catalogImportTranslationRef); const theme = useTheme(); + const configApi = useApi(configApiRef); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const appTitle = configApi.getOptionalString('app.title') || 'Backstage'; const contentItems = [ @@ -46,23 +53,6 @@ const DefaultImportPageGrid = () => { , ]; - return ( - - {isMobile ? contentItems : [...contentItems].reverse()} - - ); -}; - -/** - * The default catalog import page. - * - * @public - */ -export const DefaultImportPage = () => { - const { t } = useTranslationRef(catalogImportTranslationRef); - const configApi = useApi(configApiRef); - const appTitle = configApi.getOptionalString('app.title') || 'Backstage'; - return (
@@ -75,30 +65,10 @@ export const DefaultImportPage = () => { - + + {isMobile ? contentItems : contentItems.reverse()} + ); }; - -export const NfsDefaultImportPage = () => { - const { t } = useTranslationRef(catalogImportTranslationRef); - const configApi = useApi(configApiRef); - const appTitle = configApi.getOptionalString('app.title') || 'Backstage'; - - return ( - <> - - {t('defaultImportPage.supportTitle', { appTitle })} - - } - /> - - - - - ); -}; diff --git a/plugins/kubernetes/package.json b/plugins/kubernetes/package.json index 218b38cc85..f55a5e9b57 100644 --- a/plugins/kubernetes/package.json +++ b/plugins/kubernetes/package.json @@ -66,8 +66,7 @@ "@backstage/plugin-kubernetes-common": "workspace:^", "@backstage/plugin-kubernetes-react": "workspace:^", "@backstage/plugin-permission-react": "workspace:^", - "@material-ui/core": "^4.12.2", - "@remixicon/react": "^4.6.0" + "@material-ui/core": "^4.12.2" }, "devDependencies": { "@backstage/cli": "workspace:^", diff --git a/plugins/kubernetes/src/alpha/plugin.tsx b/plugins/kubernetes/src/alpha/plugin.tsx index 17040b7b76..283961b514 100644 --- a/plugins/kubernetes/src/alpha/plugin.tsx +++ b/plugins/kubernetes/src/alpha/plugin.tsx @@ -15,7 +15,6 @@ */ import { createFrontendPlugin } from '@backstage/frontend-plugin-api'; -import { RiShipLine } from '@remixicon/react'; import { kubernetesPage } from './pages'; import { entityKubernetesContent } from './entityContents'; import { rootCatalogKubernetesRouteRef } from '../plugin'; @@ -26,10 +25,23 @@ import { kubernetesProxyApi, } from './apis'; +// Kubernetes helm wheel from Simple Icons (https://simpleicons.org/?q=kubernetes), licensed under CC0 +const KubernetesIcon = () => ( + + + +); + export default createFrontendPlugin({ pluginId: 'kubernetes', title: 'Kubernetes', - icon: , + icon: , info: { packageJson: () => import('../../package.json') }, extensions: [ kubernetesPage, diff --git a/yarn.lock b/yarn.lock index 424fa1ef8b..a1eb767437 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5245,7 +5245,6 @@ __metadata: "@backstage/plugin-catalog-react": "workspace:^" "@backstage/plugin-permission-react": "workspace:^" "@backstage/test-utils": "workspace:^" - "@backstage/ui": "workspace:^" "@material-ui/core": "npm:^4.12.2" "@material-ui/icons": "npm:^4.9.1" "@material-ui/lab": "npm:4.0.0-alpha.61" @@ -6078,7 +6077,6 @@ __metadata: "@backstage/plugin-permission-react": "workspace:^" "@backstage/test-utils": "workspace:^" "@material-ui/core": "npm:^4.12.2" - "@remixicon/react": "npm:^4.6.0" "@testing-library/dom": "npm:^10.0.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0"