Optional namespace and name as one part of URL

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

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

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

@@ -24,7 +24,7 @@ const getTestProps = (name: string) => {
   return {
     match: {
       params: {
-        name: name,
+        optionalNamespaceAndName: name,
         kind: 'Component',
       },
     },

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

@@ -40,8 +40,7 @@ const REDIRECT_DELAY = 1000;
 type ComponentPageProps = {
   match: {
     params: {
-      name: string;
-      namespace?: string;
+      optionalNamespaceAndName: string;
       kind: string;
     };
   };
@@ -55,7 +54,8 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
   const [removingPending, setRemovingPending] = useState(false);
   const showRemovalDialog = () => setConfirmationDialogOpen(true);
   const hideRemovalDialog = () => setConfirmationDialogOpen(false);
-  const { name, namespace, kind } = match.params;
+  const { optionalNamespaceAndName, kind } = match.params;
+  const [name, namespace] = optionalNamespaceAndName.split(':').reverse();
   const errorApi = useApi<ErrorApi>(errorApiRef);
 
   const catalogApi = useApi(catalogApiRef);

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/:namespace?/:kind/:name/',
+  path: '/catalog/:kind/:optionalNamespaceAndName/',
   title: 'Entity',
 });

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

@@ -54,36 +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,
-                        kind: entity.kind,
-                      })}
-                    >
-                      {generatePath(entityRoute.path, {
-                        name: entity.metadata.name,
-                        kind: entity.kind,
-                      })}
-                    </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>