From d8e2f53bab9b3e99bc607379620fd654dfd0ba12 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 8 May 2024 17:36:40 +0200
Subject: [PATCH] org: add default route target and make optional

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/green-apricots-invite.md           |  5 ++
 plugins/org/api-report-alpha.md               |  2 +-
 plugins/org/api-report.md                     |  2 +-
 .../Cards/OwnershipCard/ComponentsGrid.tsx    | 55 +++++++++++--------
 plugins/org/src/routes.ts                     |  2 +
 5 files changed, 40 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/green-apricots-invite.md

diff --git a/.changeset/green-apricots-invite.md b/.changeset/green-apricots-invite.md
new file mode 100644
index 0000000000..b5e92021b4
--- /dev/null
+++ b/.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.
diff --git a/plugins/org/api-report-alpha.md b/plugins/org/api-report-alpha.md
index 3cee584db0..8c5391d857 100644
--- a/plugins/org/api-report-alpha.md
+++ b/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;
diff --git a/plugins/org/api-report.md b/plugins/org/api-report.md
index 1960ce839b..a6926d71f2 100644
--- a/plugins/org/api-report.md
+++ b/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 };
diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
index ff16a4ab2d..69ad5bf8bb 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
+++ b/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>
       ))}
diff --git a/plugins/org/src/routes.ts b/plugins/org/src/routes.ts
index aa24c1b1cc..6ca1eb7b43 100644
--- a/plugins/org/src/routes.ts
+++ b/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',
 });