Merge pull request #1156 from spotify/shmidt-i/followup-register-flow

Change URL for the entity view

plugins/catalog/src/api/CatalogClient.ts

@@ -68,9 +68,20 @@ export class CatalogClient implements CatalogApi {
 
     return await response.json();
   }
-  async getEntityByName(name: string): Promise<DescriptorEnvelope> {
+
+  async getEntity({
+    name,
+    namespace,
+    kind,
+  }: {
+    name: string;
+    namespace?: string;
+    kind: string;
+  }): Promise<DescriptorEnvelope> {
     const response = await fetch(
-      `${this.apiOrigin}${this.basePath}/entities/by-name/Component/default/${name}`,
+      `${this.apiOrigin}${this.basePath}/entities/by-name/${kind}/${
+        namespace ?? 'default'
+      }/${name}`,
     );
     const entity = await response.json();
     if (entity) return entity;

plugins/catalog/src/api/types.ts

@@ -23,9 +23,13 @@ export const catalogApiRef = createApiRef<CatalogApi>({
 });
 
 export interface CatalogApi {
+  getEntity(params: {
+    name: string;
+    namespace?: string;
+    kind: string;
+  }): Promise<Entity>;
   getLocationById(id: String): Promise<Location | undefined>;
   getEntities(filter?: Record<string, string>): Promise<Entity[]>;
-  getEntityByName(name: string): Promise<Entity>;
   addLocation(type: string, target: string): Promise<AddLocationResponse>;
   getLocationByEntity(entity: Entity): Promise<Location | undefined>;
 }

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -30,7 +30,15 @@ const columns: TableColumn[] = [
     render: (componentData: any) => (
       <Link
         component={RouterLink}
-        to={generatePath(entityRoute.path, { name: componentData.name })}
+        to={generatePath(entityRoute.path, {
+          optionalNamespaceAndName: [
+            componentData.namespace,
+            componentData.name,
+          ]
+            .filter(Boolean)
+            .join(':'),
+          kind: componentData.kind,
+        })}
       >
         {componentData.name}
       </Link>

plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx

@@ -20,11 +20,12 @@ import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 import { catalogApiRef, CatalogApi } from '../../api/types';
 
-const getTestProps = (componentName: string) => {
+const getTestProps = (name: string) => {
   return {
     match: {
       params: {
-        name: componentName,
+        optionalNamespaceAndName: name,
+        kind: 'Component',
       },
     },
     history: {
@@ -46,7 +47,7 @@ describe('ComponentPage', () => {
             [
               catalogApiRef,
               ({
-                async getEntityByName() {},
+                async getEntity() {},
               } as unknown) as CatalogApi,
             ],
           ])}

plugins/catalog/src/components/ComponentPage/ComponentPage.tsx

@@ -40,7 +40,8 @@ const REDIRECT_DELAY = 1000;
 type ComponentPageProps = {
   match: {
     params: {
-      name: string;
+      optionalNamespaceAndName: string;
+      kind: string;
     };
   };
   history: {
@@ -53,12 +54,13 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
   const [removingPending, setRemovingPending] = useState(false);
   const showRemovalDialog = () => setConfirmationDialogOpen(true);
   const hideRemovalDialog = () => setConfirmationDialogOpen(false);
-  const componentName = match.params.name;
+  const { optionalNamespaceAndName, kind } = match.params;
+  const [name, namespace] = optionalNamespaceAndName.split(':').reverse();
   const errorApi = useApi<ErrorApi>(errorApiRef);
 
   const catalogApi = useApi(catalogApiRef);
   const { value: component, error, loading } = useAsync<Component>(async () => {
-    const entity = await catalogApi.getEntityByName(match.params.name);
+    const entity = await catalogApi.getEntity({ name, namespace, kind });
     const location = await catalogApi.getLocationByEntity(entity);
     return { ...entityToComponent(entity), location };
   });
@@ -72,7 +74,7 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     }
   }, [error, errorApi, history]);
 
-  if (componentName === '') {
+  if (name === '') {
     history.push('/catalog');
     return null;
   }

plugins/catalog/src/data/component.ts

@@ -18,6 +18,7 @@ import { ReactNode } from 'react';
 
 export type Component = {
   name: string;
+  namespace?: string;
   kind: string;
   metadata: EntityMeta;
   description: ReactNode;

plugins/catalog/src/data/utils.ts

@@ -24,6 +24,7 @@ import { Component } from './component';
 export function entityToComponent(envelope: Entity): Component {
   return {
     name: envelope.metadata.name,
+    namespace: envelope.metadata.namespace,
     kind: envelope.kind,
     metadata: envelope.metadata,
     description: envelope.metadata.annotations?.description ?? 'placeholder',

plugins/catalog/src/routes.ts

@@ -25,6 +25,6 @@ export const rootRoute = createRouteRef({
 });
 export const entityRoute = createRouteRef({
   icon: NoIcon,
-  path: '/catalog/:name/',
+  path: '/catalog/:kind/:optionalNamespaceAndName/',
   title: 'Entity',
 });

plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx

@@ -28,7 +28,7 @@ const catalogApi: jest.Mocked<typeof catalogApiRef.T> = {
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   addLocation: jest.fn((_a, _b) => new Promise(() => {})),
   getEntities: jest.fn(),
-  getEntityByName: jest.fn(),
+  getEntity: jest.fn(),
   getLocationByEntity: jest.fn(),
   getLocationById: jest.fn(),
 };

plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx

@@ -54,34 +54,39 @@ export const RegisterComponentResultDialog: FC<Props> = ({
         The following components have been succefully created:
       </DialogContentText>
       <List>
-        {entities.map((entity: any, index: number) => (
-          <React.Fragment
-            key={`${entity.metadata.namespace}-${entity.metadata.name}`}
-          >
-            <ListItem>
-              <StructuredMetadataTable
-                dense
-                metadata={{
-                  name: entity.metadata.name,
-                  type: entity.spec.type,
-                  link: (
-                    <Link
-                      component={RouterLink}
-                      to={generatePath(entityRoute.path, {
-                        name: entity.metadata.name,
-                      })}
-                    >
-                      {generatePath(entityRoute.path, {
-                        name: entity.metadata.name,
-                      })}
-                    </Link>
-                  ),
-                }}
-              />
-            </ListItem>
-            {index < entities.length - 1 && <Divider component="li" />}
-          </React.Fragment>
-        ))}
+        {entities.map((entity: any, index: number) => {
+          const entityPath = generatePath(entityRoute.path, {
+            optionalNamespaceAndName: [
+              entity.metadata.namespace,
+              entity.metadata.name,
+            ]
+              .filter(Boolean)
+              .join(':'),
+            kind: entity.kind,
+          });
+
+          return (
+            <React.Fragment
+              key={`${entity.metadata.namespace}-${entity.metadata.name}`}
+            >
+              <ListItem>
+                <StructuredMetadataTable
+                  dense
+                  metadata={{
+                    name: entity.metadata.name,
+                    type: entity.spec.type,
+                    link: (
+                      <Link component={RouterLink} to={entityPath}>
+                        {entityPath}
+                      </Link>
+                    ),
+                  }}
+                />
+              </ListItem>
+              {index < entities.length - 1 && <Divider component="li" />}
+            </React.Fragment>
+          );
+        })}
       </List>
     </DialogContent>
     <DialogActions>