diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 8a2b448d97..d3b29bfa86 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -34,6 +34,8 @@ import { } from '../CatalogFilter/CatalogFilter'; import { Button, makeStyles, Typography, Link } from '@material-ui/core'; import { filterGroups, defaultFilter } from '../../data/filters'; +import { Link as RouterLink } from 'react-router-dom'; +import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder'; const useStyles = makeStyles(theme => ({ contentWrapper: { @@ -72,18 +74,23 @@ const CatalogPage: FC<{}> = () => { 👋🏼 - {' '} + Welcome to Backstage, we are happy to have you. Start by checking - out our{' '} + out our getting started - {' '} + page. } /> - All your components diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index f5fa45dc7e..37c518cb6b 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -17,6 +17,8 @@ import React, { FC } from 'react'; import { Component } from '../../data/component'; import { InfoCard, Progress, Table, TableColumn } from '@backstage/core'; import { Typography, Link } from '@material-ui/core'; +import { Link as RouterLink, generatePath } from 'react-router-dom'; +import { entityRoute } from '../../routes'; const columns: TableColumn[] = [ { @@ -24,7 +26,12 @@ const columns: TableColumn[] = [ field: 'name', highlight: true, render: (componentData: any) => ( - {componentData.name} + + {componentData.name} + ), }, { diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index f495bd3146..2b986b59ea 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -18,3 +18,4 @@ export { plugin } from './plugin'; export * from './api/CatalogClient'; export * from './api/types'; export * from './types'; +export * from './routes'; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 97e470a065..1eee5efe07 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -17,11 +17,12 @@ import { createPlugin } from '@backstage/core'; import CatalogPage from './components/CatalogPage'; import ComponentPage from './components/ComponentPage/ComponentPage'; +import { rootRoute, entityRoute } from './routes'; export const plugin = createPlugin({ id: 'catalog', register({ router }) { - router.registerRoute('/', CatalogPage); - router.registerRoute('/catalog/:name/', ComponentPage); + router.addRoute(rootRoute, CatalogPage); + router.addRoute(entityRoute, ComponentPage); }, }); diff --git a/plugins/catalog/src/routes.ts b/plugins/catalog/src/routes.ts new file mode 100644 index 0000000000..79d02fefe1 --- /dev/null +++ b/plugins/catalog/src/routes.ts @@ -0,0 +1,14 @@ +import { createRouteRef } from '@backstage/core'; + +const NoIcon = () => null; + +export const rootRoute = createRouteRef({ + icon: NoIcon, + path: '/', + title: 'Catalog', +}); +export const entityRoute = createRouteRef({ + icon: NoIcon, + path: '/catalog/:name/', + title: 'Entity', +}); diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index 0b6639f40a..d0189ba7f8 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -41,9 +41,15 @@ import { useApi, errorApiRef, StructuredMetadataTable, + Header, } from '@backstage/core'; import RegisterComponentForm from '../RegisterComponentForm'; import { catalogApiRef } from '@backstage/plugin-catalog'; +import { + entityRoute, + rootRoute as catalogRootRoute, +} from '@backstage/plugin-catalog'; +import { generatePath } from 'react-router'; const useStyles = makeStyles(theme => ({ dialogPaper: { @@ -100,10 +106,8 @@ const RegisterComponentPage: FC<{}> = () => { return ( +
- - Documentation - @@ -139,9 +143,13 @@ const RegisterComponentPage: FC<{}> = () => { link: ( - /catalog/{entity.metadata.name} + {generatePath(entityRoute.path, { + name: entity.metadata.name, + })} ), }} @@ -156,7 +164,11 @@ const RegisterComponentPage: FC<{}> = () => { - diff --git a/plugins/register-component/src/index.ts b/plugins/register-component/src/index.ts index 3a0a0fe2d3..5b20cb0158 100644 --- a/plugins/register-component/src/index.ts +++ b/plugins/register-component/src/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { plugin } from './plugin'; +export { plugin, rootRoute } from './plugin'; diff --git a/plugins/register-component/src/plugin.ts b/plugins/register-component/src/plugin.ts index f32e9dc84f..9c73688a70 100644 --- a/plugins/register-component/src/plugin.ts +++ b/plugins/register-component/src/plugin.ts @@ -14,12 +14,18 @@ * limitations under the License. */ -import { createPlugin } from '@backstage/core'; +import { createPlugin, createRouteRef } from '@backstage/core'; import RegisterComponentPage from './components/RegisterComponentPage'; +export const rootRoute = createRouteRef({ + icon: () => null, + path: '/register-component', + title: 'Register component', +}); + export const plugin = createPlugin({ id: 'register-component', register({ router }) { - router.registerRoute('/register-component', RegisterComponentPage); + router.addRoute(rootRoute, RegisterComponentPage); }, }); diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx index 59eb6cff43..5d976a20b2 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx @@ -57,7 +57,7 @@ const ScaffolderPage: React.FC<{}> = () => { component={RouterLink} to="/register-component" > - Register existing entity + Register existing component diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 3a0a0fe2d3..5b20cb0158 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { plugin } from './plugin'; +export { plugin, rootRoute } from './plugin'; diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts index 31bdab2f84..b2cb305e57 100644 --- a/plugins/scaffolder/src/plugin.ts +++ b/plugins/scaffolder/src/plugin.ts @@ -14,12 +14,18 @@ * limitations under the License. */ -import { createPlugin } from '@backstage/core'; +import { createPlugin, createRouteRef } from '@backstage/core'; import ScaffolderPage from './components/ScaffolderPage'; +export const rootRoute = createRouteRef({ + icon: () => null, + path: '/create', + title: 'Create entity', +}); + export const plugin = createPlugin({ id: 'scaffolder', register({ router }) { - router.registerRoute('/create', ScaffolderPage); + router.addRoute(rootRoute, ScaffolderPage); }, });