org: add default route target and make optional

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/green-apricots-invite.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+The `catalogIndex` external route is now optional and will by default bind to the catalog index page if it is available.

plugins/org/api-report-alpha.md

@@ -10,7 +10,7 @@ import { ExternalRouteRef } from '@backstage/frontend-plugin-api';
 const _default: BackstagePlugin<
   {},
   {
-    catalogIndex: ExternalRouteRef<undefined, false>;
+    catalogIndex: ExternalRouteRef<undefined, true>;
   }
 >;
 export default _default;

plugins/org/api-report.md

@@ -70,7 +70,7 @@ export const MyGroupsSidebarItem: (props: {
 const orgPlugin: BackstagePlugin<
   {},
   {
-    catalogIndex: ExternalRouteRef<undefined, false>;
+    catalogIndex: ExternalRouteRef<undefined, true>;
   }
 >;
 export { orgPlugin };

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -69,38 +69,45 @@ const EntityCountTile = ({
   counter: number;
   type?: string;
   kind: string;
-  url: string;
+  url?: string;
 }) => {
   const classes = useStyles({ type: type ?? kind });
 
   const rawTitle = type ?? kind;
   const isLongText = rawTitle.length > 10;
 
-  return (
-    <Link to={url} variant="body2">
-      <Box
-        className={`${classes.card} ${classes.entityTypeBox}`}
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-      >
-        <Typography className={classes.bold} variant="h6">
-          {counter}
+  const tile = (
+    <Box
+      className={`${classes.card} ${classes.entityTypeBox}`}
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+    >
+      <Typography className={classes.bold} variant="h6">
+        {counter}
+      </Typography>
+      <Box sx={{ width: '100%', textAlign: 'center' }}>
+        <Typography
+          className={`${classes.bold} ${isLongText && classes.smallFont}`}
+          variant="h6"
+        >
+          <OverflowTooltip
+            text={pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
+          />
         </Typography>
-        <Box sx={{ width: '100%', textAlign: 'center' }}>
-          <Typography
-            className={`${classes.bold} ${isLongText && classes.smallFont}`}
-            variant="h6"
-          >
-            <OverflowTooltip
-              text={pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
-            />
-          </Typography>
-        </Box>
-        {type && <Typography variant="subtitle1">{kind}</Typography>}
       </Box>
-    </Link>
+      {type && <Typography variant="subtitle1">{kind}</Typography>}
+    </Box>
   );
+
+  if (url) {
+    return (
+      <Link to={url} variant="body2">
+        {tile}
+      </Link>
+    );
+  }
+  return tile;
 };
 
 export const ComponentsGrid = ({
@@ -138,7 +145,7 @@ export const ComponentsGrid = ({
             counter={c.counter}
             kind={c.kind}
             type={c.type}
-            url={`${catalogLink()}/?${c.queryParams}`}
+            url={catalogLink && `${catalogLink()}/?${c.queryParams}`}
           />
         </Grid>
       ))}

plugins/org/src/routes.ts

@@ -18,4 +18,6 @@ import { createExternalRouteRef } from '@backstage/core-plugin-api';
 
 export const catalogIndexRouteRef = createExternalRouteRef({
   id: 'catalog-index',
+  optional: true,
+  defaultTarget: 'catalog.catalogIndex',
 });