/catalog/:namespace?/:kind/:name/

plugins/catalog/src/api/CatalogClient.ts

@@ -35,9 +35,20 @@ export class CatalogClient implements CatalogApi {
     const response = await fetch(`${this.apiOrigin}${this.basePath}/entities`);
     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

@@ -24,7 +24,11 @@ export const catalogApiRef = createApiRef<CatalogApi>({
 
 export interface CatalogApi {
   getEntities(): Promise<Entity[]>;
-  getEntityByName(name: string): Promise<Entity>;
+  getEntity(params: {
+    name: string;
+    namespace?: string;
+    kind: string;
+  }): Promise<Entity>;
   addLocation(type: string, target: string): Promise<AddLocationResponse>;
   getLocationByEntity(entity: Entity): Promise<Location | undefined>;
 }

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

@@ -28,7 +28,10 @@ const columns: TableColumn[] = [
     render: (componentData: any) => (
       <Link
         component={RouterLink}
-        to={generatePath(entityRoute.path, { name: componentData.name })}
+        to={generatePath(entityRoute.path, {
+          name: componentData.name,
+          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 = () => {
   return {
     match: {
       params: {
-        name: componentName,
+        name: 'componentName',
+        kind: 'Component',
       },
     },
     history: {
@@ -37,7 +38,7 @@ const errorApi = { post: () => {} };
 
 describe('ComponentPage', () => {
   it('should redirect to component table page when name is not provided', async () => {
-    const props = getTestProps('');
+    const props = getTestProps();
     await render(
       wrapInTestApp(
         <ApiProvider

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

@@ -38,6 +38,8 @@ type ComponentPageProps = {
   match: {
     params: {
       name: string;
+      namespace?: string;
+      kind: string;
     };
   };
   history: {
@@ -50,12 +52,12 @@ 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 { name, namespace, kind } = match.params;
   const errorApi = useApi<ErrorApi>(errorApiRef);
 
   const catalogApi = useApi(catalogApiRef);
   const catalogRequest = useAsync(() =>
-    catalogApi.getEntityByName(match.params.name),
+    catalogApi.getEntity({ name, namespace, kind }),
   );
 
   useEffect(() => {
@@ -67,7 +69,7 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     }
   }, [catalogRequest.error, errorApi, history]);
 
-  if (componentName === '') {
+  if (name === '') {
     history.push('/catalog');
     return null;
   }

plugins/catalog/src/routes.ts

@@ -25,6 +25,6 @@ export const rootRoute = createRouteRef({
 });
 export const entityRoute = createRouteRef({
   icon: NoIcon,
-  path: '/catalog/:name/',
+  path: '/catalog/:namespace?/:kind/:name/',
   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(),
 };
 

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

@@ -69,10 +69,12 @@ export const RegisterComponentResultDialog: FC<Props> = ({
                       component={RouterLink}
                       to={generatePath(entityRoute.path, {
                         name: entity.metadata.name,
+                        kind: entity.kind,
                       })}
                     >
                       {generatePath(entityRoute.path, {
                         name: entity.metadata.name,
+                        kind: entity.kind,
                       })}
                     </Link>
                   ),