fix(register-component): pass through the catalog router ref

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 = () => (
   <Routes>
     <Navigate key="/" to="/catalog" />
     <Route
-      path="/catalog/*"
+      path={`${catalogRouteRef.path}/*`}
       element={<CatalogRouter EntityPage={EntityPage} />}
     />
     <Route path="/docs/*" element={<DocsRouter />} />
@@ -68,6 +75,10 @@ const AppRoutes = () => (
       element={<TechRadarRouter width={1500} height={800} />}
     />
     <Route path="/graphiql" element={<GraphiQLRouter />} />
+    <Route
+      path="/register-component"
+      element={<RegisterComponentRouter catalogRouteRef={catalogRouteRef} />}
+    />
     {...deprecatedAppRoutes}
   </Routes>
 );

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<{}> = () => (
   <AppProvider>
     <AlertDisplay />
@@ -42,6 +50,10 @@ const App: FC<{}> = () => (
             path="/tech-radar"
             element={<TechRadarRouter width={1500} height={800} />}
           />
+          <Route
+            path="/register-component"
+            element={<RegisterComponentRouter catalogRouteRef={catalogRouteRef} />}
+          />
           {deprecatedAppRoutes}
         </Routes>
       </SidebarPage>

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 = () => ({
         ])}
       >
         <ThemeProvider theme={lightTheme}>
-          <RegisterComponentPage />
+          <RegisterComponentPage
+            catalogRouteRef={createRouteRef({
+              path: '/catalog',
+              title: 'Service Catalog',
+            })}
+          />
         </ThemeProvider>
       </ApiProvider>
     </MemoryRouter>,

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> = T extends Record<any, infer V> ? V : never;
-const RegisterComponentPage: FC<{}> = () => {
+export const RegisterComponentPage = ({
+  catalogRouteRef,
+}: {
+  catalogRouteRef: RouteRef;
+}) => {
   const classes = useStyles();
   const catalogApi = useApi(catalogApiRef);
   const [formState, setFormState] = useState<ValuesOf<typeof FormStates>>(
@@ -130,10 +135,9 @@ const RegisterComponentPage: FC<{}> = () => {
           entities={result.data!.entities}
           onClose={() => setFormState(FormStates.Idle)}
           classes={{ paper: classes.dialogPaper }}
+          catalogRouteRef={catalogRouteRef}
         />
       )}
     </Page>
   );
 };
-
-export default RegisterComponentPage;

plugins/register-component/src/components/RegisterComponentPage/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './RegisterComponentPage';
+export { RegisterComponentPage } from './RegisterComponentPage';

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<ComponentProps<typeof RegisterComponentResultDialog>>,
@@ -30,6 +31,10 @@ const setup = (
         <RegisterComponentResultDialog
           onClose={() => {}}
           entities={[]}
+          catalogRouteRef={createRouteRef({
+            path: '/catalog',
+            title: 'Service Catalog',
+          })}
           {...props}
         />
       </ThemeProvider>

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<string, string>;
   entities: Entity[];
+  catalogRouteRef: RouteRef;
 };
 
-export const RegisterComponentResultDialog: FC<Props> = ({
+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) => (
   <Dialog open onClose={onClose} classes={classes}>
     <DialogTitle>Component Registration Result</DialogTitle>
     <DialogContent>
@@ -55,17 +80,7 @@ export const RegisterComponentResultDialog: FC<Props> = ({
       </DialogContentText>
       <List>
         {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 (
             <React.Fragment
               key={`${entity.metadata.namespace}-${entity.metadata.name}`}
@@ -91,7 +106,11 @@ export const RegisterComponentResultDialog: FC<Props> = ({
       </List>
     </DialogContent>
     <DialogActions>
-      <Button component={RouterLink} to={catalogRootRoute.path} color="default">
+      <Button
+        component={RouterLink}
+        to={`/${catalogRouteRef.path}`}
+        color="default"
+      >
         To Catalog
       </Button>
     </DialogActions>

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 }) => (
+  <Routes>
+    <Route
+      element={<RegisterComponentPage catalogRouteRef={catalogRouteRef} />}
+    />
+  </Routes>
+);

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';

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);
-  },
 });