Merge pull request #24777 from backstage/rugvip/binding-backport

core-*-api: backport support for external route ref default targets + config route binding

plugins/api-docs/src/routes.ts

@@ -26,4 +26,5 @@ export const rootRoute = createRouteRef({
 export const registerComponentRouteRef = createExternalRouteRef({
   id: 'register-component',
   optional: true,
+  defaultTarget: 'catalog-import.importPage',
 });

plugins/catalog-graph/src/routes.ts

@@ -38,4 +38,5 @@ export const catalogEntityRouteRef = createExternalRouteRef({
   id: 'catalog-entity',
   params: ['namespace', 'kind', 'name'],
   optional: true,
+  defaultTarget: 'catalog.catalogEntity',
 });

plugins/catalog/src/routes.ts

@@ -22,18 +22,21 @@ import {
 export const createComponentRouteRef = createExternalRouteRef({
   id: 'create-component',
   optional: true,
+  defaultTarget: 'scaffolder.createComponent',
 });
 
 export const viewTechDocRouteRef = createExternalRouteRef({
   id: 'view-techdoc',
   optional: true,
   params: ['namespace', 'kind', 'name'],
+  defaultTarget: 'techdocs.docRoot',
 });
 
 export const createFromTemplateRouteRef = createExternalRouteRef({
   id: 'create-from-template',
   optional: true,
   params: ['namespace', 'templateName'],
+  defaultTarget: 'scaffolder.selectedTemplate',
 });
 
 export const unregisterRedirectRouteRef = createExternalRouteRef({

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',
 });

plugins/scaffolder/src/routes.ts

@@ -22,12 +22,14 @@ import {
 export const registerComponentRouteRef = createExternalRouteRef({
   id: 'register-component',
   optional: true,
+  defaultTarget: 'catalog-import.importPage',
 });
 
 export const viewTechDocRouteRef = createExternalRouteRef({
   id: 'view-techdoc',
   optional: true,
   params: ['namespace', 'kind', 'name'],
+  defaultTarget: 'techdocs.docRoot',
 });
 
 /**