diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 3d4f297e8e..5deced8212 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -19,6 +19,7 @@ import { AlertDisplay, OAuthRequestDialog, SignInPage, + createRouteRef, } from '@backstage/core'; import React, { FC } from 'react'; import Root from './components/Root'; @@ -30,6 +31,7 @@ import { Router as CatalogRouter } from '@backstage/plugin-catalog'; import { Router as DocsRouter } from '@backstage/plugin-techdocs'; import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql'; import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; +import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component'; import { Route, Routes, Navigate } from 'react-router'; import { EntityPage } from './components/catalog/EntityPage'; @@ -55,11 +57,16 @@ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); const deprecatedAppRoutes = app.getRoutes(); +const catalogRouteRef = createRouteRef({ + path: '/catalog', + title: 'Service Catalog', +}); + const AppRoutes = () => ( } /> } /> @@ -68,6 +75,10 @@ const AppRoutes = () => ( element={} /> } /> + } + /> {...deprecatedAppRoutes} ); diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx index 42eaeccc51..9449ac68a1 100644 --- a/packages/create-app/templates/default-app/packages/app/src/App.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx @@ -4,6 +4,7 @@ import { AlertDisplay, OAuthRequestDialog, SidebarPage, + createRouteRef, } from '@backstage/core'; import { apis } from './apis'; import * as plugins from './plugins'; @@ -11,8 +12,9 @@ import { AppSidebar } from './sidebar'; import { Route, Routes, Navigate } from 'react-router'; import { Router as CatalogRouter } from '@backstage/plugin-catalog'; import { Router as DocsRouter } from '@backstage/plugin-techdocs'; - +import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component'; import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar'; + import { EntityPage } from './components/catalog/EntityPage'; const app = createApp({ @@ -24,6 +26,12 @@ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); const deprecatedAppRoutes = app.getRoutes(); +const catalogRouteRef = createRouteRef({ + path: '/catalog', + title: 'Service Catalog', +}); + + const App: FC<{}> = () => ( @@ -42,6 +50,10 @@ const App: FC<{}> = () => ( path="/tech-radar" element={} /> + } + /> {deprecatedAppRoutes} diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx index 32213f04e4..32fa4a85c0 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx @@ -16,10 +16,15 @@ import React from 'react'; import { render, cleanup } from '@testing-library/react'; -import RegisterComponentPage from './RegisterComponentPage'; +import { RegisterComponentPage } from './RegisterComponentPage'; import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; -import { errorApiRef, ApiProvider, ApiRegistry } from '@backstage/core'; +import { + errorApiRef, + ApiProvider, + ApiRegistry, + createRouteRef, +} from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; import { MemoryRouter } from 'react-router-dom'; @@ -45,7 +50,12 @@ const setup = () => ({ ])} > - + , diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index e61f904347..032a7d5257 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, useState } from 'react'; +import React, { useState } from 'react'; import { Grid, makeStyles } from '@material-ui/core'; import { InfoCard, @@ -26,6 +26,7 @@ import { Header, SupportButton, ContentHeader, + RouteRef, } from '@backstage/core'; import RegisterComponentForm from '../RegisterComponentForm'; import { catalogApiRef } from '@backstage/plugin-catalog'; @@ -54,7 +55,11 @@ const FormStates = { } as const; type ValuesOf = T extends Record ? V : never; -const RegisterComponentPage: FC<{}> = () => { +export const RegisterComponentPage = ({ + catalogRouteRef, +}: { + catalogRouteRef: RouteRef; +}) => { const classes = useStyles(); const catalogApi = useApi(catalogApiRef); const [formState, setFormState] = useState>( @@ -130,10 +135,9 @@ const RegisterComponentPage: FC<{}> = () => { entities={result.data!.entities} onClose={() => setFormState(FormStates.Idle)} classes={{ paper: classes.dialogPaper }} + catalogRouteRef={catalogRouteRef} /> )} ); }; - -export default RegisterComponentPage; diff --git a/plugins/register-component/src/components/RegisterComponentPage/index.ts b/plugins/register-component/src/components/RegisterComponentPage/index.ts index e0757e0eee..8c325fe8b4 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/index.ts +++ b/plugins/register-component/src/components/RegisterComponentPage/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { default } from './RegisterComponentPage'; +export { RegisterComponentPage } from './RegisterComponentPage'; diff --git a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.test.tsx b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.test.tsx index 71933a0302..ae262ab866 100644 --- a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.test.tsx +++ b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.test.tsx @@ -20,6 +20,7 @@ import { cleanup, render } from '@testing-library/react'; import React, { ComponentProps } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { RegisterComponentResultDialog } from './RegisterComponentResultDialog'; +import { createRouteRef } from '@backstage/core'; const setup = ( props?: Partial>, @@ -30,6 +31,10 @@ const setup = ( {}} entities={[]} + catalogRouteRef={createRouteRef({ + path: '/catalog', + title: 'Service Catalog', + })} {...props} /> diff --git a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx index 15d0b9ced6..57b7fae9c3 100644 --- a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx +++ b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import React from 'react'; import { Dialog, DialogTitle, @@ -28,25 +28,50 @@ import { Button, } from '@material-ui/core'; import { Entity } from '@backstage/catalog-model'; -import { StructuredMetadataTable } from '@backstage/core'; -import { generatePath } from 'react-router'; -import { - entityRoute, - rootRoute as catalogRootRoute, -} from '@backstage/plugin-catalog'; +import { StructuredMetadataTable, RouteRef } from '@backstage/core'; +import { generatePath, resolvePath } from 'react-router'; +import { entityRoute } from '@backstage/plugin-catalog'; import { Link as RouterLink } from 'react-router-dom'; type Props = { onClose: () => void; classes?: Record; entities: Entity[]; + catalogRouteRef: RouteRef; }; -export const RegisterComponentResultDialog: FC = ({ +const getEntityCatalogPath = ({ + entity, + catalogRouteRef, +}: { + entity: Entity; + catalogRouteRef: RouteRef; +}) => { + const optionalNamespaceAndName = [ + entity.metadata.namespace, + entity.metadata.name, + ] + .filter(Boolean) + .join(':'); + + const relativeEntityPathInsideCatalog = generatePath(entityRoute.path, { + optionalNamespaceAndName, + kind: entity.kind, + }); + + const resolvedAbsolutePath = resolvePath( + relativeEntityPathInsideCatalog, + catalogRouteRef.path, + )?.pathname; + return resolvedAbsolutePath; +}; + +export const RegisterComponentResultDialog = ({ onClose, classes, entities, -}) => ( + catalogRouteRef, +}: Props) => ( Component Registration Result @@ -55,17 +80,7 @@ export const RegisterComponentResultDialog: FC = ({ {entities.map((entity: any, index: number) => { - const entityPath = generatePath(entityRoute.path, { - optionalNamespaceAndName: [ - entity.metadata.namespace, - entity.metadata.name, - ] - .filter(Boolean) - .join(':'), - kind: entity.kind, - selectedTabId: 'overview', - }); - + const entityPath = getEntityCatalogPath({ entity, catalogRouteRef }); return ( = ({ - diff --git a/plugins/register-component/src/components/Router.tsx b/plugins/register-component/src/components/Router.tsx new file mode 100644 index 0000000000..eee7fd3806 --- /dev/null +++ b/plugins/register-component/src/components/Router.tsx @@ -0,0 +1,29 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { Route, Routes } from 'react-router'; +import { RegisterComponentPage } from './RegisterComponentPage'; +import { RouteRef } from '@backstage/core'; + +// As we don't know which path the catalog's router mounted on +// We need to inject this from the app +export const Router = ({ catalogRouteRef }: { catalogRouteRef: RouteRef }) => ( + + } + /> + +); diff --git a/plugins/register-component/src/index.ts b/plugins/register-component/src/index.ts index 5b20cb0158..ff7857cacd 100644 --- a/plugins/register-component/src/index.ts +++ b/plugins/register-component/src/index.ts @@ -14,4 +14,5 @@ * limitations under the License. */ -export { plugin, rootRoute } from './plugin'; +export { plugin } from './plugin'; +export { Router } from './components/Router'; diff --git a/plugins/register-component/src/plugin.ts b/plugins/register-component/src/plugin.ts index 9c73688a70..17f99917c8 100644 --- a/plugins/register-component/src/plugin.ts +++ b/plugins/register-component/src/plugin.ts @@ -14,18 +14,8 @@ * limitations under the License. */ -import { createPlugin, createRouteRef } from '@backstage/core'; -import RegisterComponentPage from './components/RegisterComponentPage'; - -export const rootRoute = createRouteRef({ - icon: () => null, - path: '/register-component', - title: 'Register component', -}); +import { createPlugin } from '@backstage/core'; export const plugin = createPlugin({ id: 'register-component', - register({ router }) { - router.addRoute(rootRoute, RegisterComponentPage); - }, });