Merge pull request #9070 from backstage/rugvip/deproute

explore,catalog-graph: use entityRouteRef directly

.changeset/cyan-rice-grab.md

@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Deprecated the external `catalogEntity` route as this is now imported directly from `@backstage/plugin-catalog-react` instead.
+
+This means you can remove the route binding from your `App.tsx`:
+
+```diff
+-    bind(catalogGraphPlugin.externalRoutes, {
+-      catalogEntity: catalogPlugin.routes.catalogEntity,
+-    });
+```

.changeset/large-flowers-fetch.md

@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Deprecated the external `catalogEntity` route as this is now imported directly from `@backstage/plugin-catalog-react` instead.
+
+This means you can remove the route binding from your `App.tsx`:
+
+```diff
+-    bind(explorePlugin.externalRoutes, {
+-      catalogEntity: catalogPlugin.routes.catalogEntity,
+-    });
+```

packages/app/src/App.tsx

@@ -40,10 +40,7 @@ import {
   CatalogIndexPage,
   catalogPlugin,
 } from '@backstage/plugin-catalog';
-import {
-  CatalogGraphPage,
-  catalogGraphPlugin,
-} from '@backstage/plugin-catalog-graph';
+import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import {
   CatalogImportPage,
   catalogImportPlugin,
@@ -54,7 +51,7 @@ import {
   CostInsightsProjectGrowthInstructionsPage,
 } from '@backstage/plugin-cost-insights';
 import { orgPlugin } from '@backstage/plugin-org';
-import { ExplorePage, explorePlugin } from '@backstage/plugin-explore';
+import { ExplorePage } from '@backstage/plugin-explore';
 import { GcpProjectsPage } from '@backstage/plugin-gcp-projects';
 import { GraphiQLPage } from '@backstage/plugin-graphiql';
 import { HomepageCompositionRoot } from '@backstage/plugin-home';
@@ -114,15 +111,9 @@ const app = createApp({
       createComponent: scaffolderPlugin.routes.root,
       viewTechDoc: techdocsPlugin.routes.docRoot,
     });
-    bind(catalogGraphPlugin.externalRoutes, {
-      catalogEntity: catalogPlugin.routes.catalogEntity,
-    });
     bind(apiDocsPlugin.externalRoutes, {
       registerApi: catalogImportPlugin.routes.importPage,
     });
-    bind(explorePlugin.externalRoutes, {
-      catalogEntity: catalogPlugin.routes.catalogEntity,
-    });
     bind(scaffolderPlugin.externalRoutes, {
       registerComponent: catalogImportPlugin.routes.importPage,
     });

plugins/catalog-graph/api-report.md

@@ -49,7 +49,7 @@ export const catalogGraphPlugin: BackstagePlugin<
         kind: string;
         namespace: string;
       },
-      false
+      true
     >;
   }
 >;

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx

@@ -20,6 +20,7 @@ import {
   CatalogApi,
   catalogApiRef,
   EntityProvider,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import {
   MockAnalyticsApi,
@@ -29,7 +30,7 @@ import {
 } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { catalogEntityRouteRef, catalogGraphRouteRef } from '../../routes';
+import { catalogGraphRouteRef } from '../../routes';
 import { CatalogGraphCard } from './CatalogGraphCard';
 
 describe('<CatalogGraphCard/>', () => {
@@ -80,7 +81,7 @@ describe('<CatalogGraphCard/>', () => {
   test('renders without exploding', async () => {
     const { findByText, findAllByTestId } = await renderInTestApp(wrapper, {
       mountedRoutes: {
-        '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+        '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         '/catalog-graph': catalogGraphRouteRef,
       },
     });
@@ -99,7 +100,7 @@ describe('<CatalogGraphCard/>', () => {
       </ApiProvider>,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
           '/catalog-graph': catalogGraphRouteRef,
         },
       },
@@ -111,7 +112,7 @@ describe('<CatalogGraphCard/>', () => {
   test('renders link to standalone viewer', async () => {
     const { findByText, getByText } = await renderInTestApp(wrapper, {
       mountedRoutes: {
-        '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+        '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         '/catalog-graph': catalogGraphRouteRef,
       },
     });
@@ -133,7 +134,7 @@ describe('<CatalogGraphCard/>', () => {
       </TestApiProvider>,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
           '/catalog-graph': catalogGraphRouteRef,
         },
       },

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -23,12 +23,13 @@ import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
 import {
   formatEntityRefTitle,
   useEntity,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { makeStyles, Theme } from '@material-ui/core';
 import qs from 'qs';
 import React, { MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router';
-import { catalogEntityRouteRef, catalogGraphRouteRef } from '../../routes';
+import { catalogGraphRouteRef } from '../../routes';
 import {
   ALL_RELATION_PAIRS,
   Direction,
@@ -77,7 +78,7 @@ export const CatalogGraphCard = ({
 }) => {
   const { entity } = useEntity();
   const entityName = getEntityName(entity);
-  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);
+  const catalogEntityRoute = useRouteRef(entityRouteRef);
   const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);
   const navigate = useNavigate();
   const classes = useStyles({ height });

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx

@@ -15,7 +15,11 @@
  */
 import { RELATION_HAS_PART, RELATION_PART_OF } from '@backstage/catalog-model';
 import { analyticsApiRef } from '@backstage/core-plugin-api';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+  CatalogApi,
+  catalogApiRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 import {
   MockAnalyticsApi,
   renderInTestApp,
@@ -23,7 +27,6 @@ import {
 } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { catalogEntityRouteRef } from '../../routes';
 import { CatalogGraphPage } from './CatalogGraphPage';
 
 const navigate = jest.fn();
@@ -114,7 +117,7 @@ describe('<CatalogGraphPage/>', () => {
       wrapper,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         },
       },
     );
@@ -129,7 +132,7 @@ describe('<CatalogGraphPage/>', () => {
   test('should toggle filters', async () => {
     const { getByText, queryByText } = await renderInTestApp(wrapper, {
       mountedRoutes: {
-        '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+        '/entity/{kind}/{namespace}/{name}': entityRouteRef,
       },
     });
 
@@ -145,7 +148,7 @@ describe('<CatalogGraphPage/>', () => {
       wrapper,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         },
       },
     );
@@ -160,7 +163,7 @@ describe('<CatalogGraphPage/>', () => {
   test('should navigate to entity', async () => {
     const { getByText, findAllByTestId } = await renderInTestApp(wrapper, {
       mountedRoutes: {
-        '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+        '/entity/{kind}/{namespace}/{name}': entityRouteRef,
       },
     });
 
@@ -179,7 +182,7 @@ describe('<CatalogGraphPage/>', () => {
       </TestApiProvider>,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         },
       },
     );
@@ -202,7 +205,7 @@ describe('<CatalogGraphPage/>', () => {
       </TestApiProvider>,
       {
         mountedRoutes: {
-          '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef,
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
         },
       },
     );

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx

@@ -22,14 +22,16 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
-import { formatEntityRefTitle } from '@backstage/plugin-catalog-react';
+import {
+  entityRouteRef,
+  formatEntityRefTitle,
+} from '@backstage/plugin-catalog-react';
 import { Grid, makeStyles, Paper, Typography } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import { ToggleButton } from '@material-ui/lab';
 import React, { MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router';
-import { catalogEntityRouteRef } from '../../routes';
 import {
   ALL_RELATION_PAIRS,
   Direction,
@@ -114,7 +116,7 @@ export const CatalogGraphPage = ({
 }) => {
   const navigate = useNavigate();
   const classes = useStyles();
-  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);
+  const catalogEntityRoute = useRouteRef(entityRouteRef);
   const {
     maxDepth,
     setMaxDepth,

plugins/catalog-graph/src/routes.ts

@@ -32,8 +32,10 @@ export const catalogGraphRouteRef = createRouteRef({
  * Used to navigate from the graph to an entity.
  *
  * @public
+ * @deprecated This route is no longer used and can be removed
  */
 export const catalogEntityRouteRef = createExternalRouteRef({
   id: 'catalog-entity',
   params: ['namespace', 'kind', 'name'],
+  optional: true,
 });

plugins/explore/api-report.md

@@ -14,14 +14,14 @@ import { TabProps } from '@material-ui/core';
 
 // Warning: (ae-missing-release-tag) "catalogEntityRouteRef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const catalogEntityRouteRef: ExternalRouteRef<
   {
     name: string;
     kind: string;
     namespace: string;
   },
-  false
+  true
 >;
 
 // Warning: (ae-forgotten-export) The symbol "DomainCardProps" needs to be exported by the entry point index.d.ts
@@ -66,7 +66,7 @@ const explorePlugin: BackstagePlugin<
         kind: string;
         namespace: string;
       },
-      false
+      true
     >;
   }
 >;

plugins/explore/src/components/DomainCard/DomainCard.test.tsx

@@ -15,9 +15,9 @@
  */
 
 import { DomainEntity } from '@backstage/catalog-model';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { catalogEntityRouteRef } from '../../routes';
 import { DomainCard } from './DomainCard';
 
 describe('<DomainCard />', () => {
@@ -38,7 +38,7 @@ describe('<DomainCard />', () => {
       <DomainCard entity={entity} />,
       {
         mountedRoutes: {
-          '/catalog/:namespace/:kind/:name': catalogEntityRouteRef,
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
         },
       },
     );

plugins/explore/src/components/DomainCard/DomainCard.tsx

@@ -18,6 +18,7 @@ import {
   EntityRefLinks,
   entityRouteParams,
   getEntityRelations,
+  entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import {
   Box,
@@ -28,7 +29,6 @@ import {
   Chip,
 } from '@material-ui/core';
 import React from 'react';
-import { catalogEntityRouteRef } from '../../routes';
 
 import { Button, ItemCardHeader } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
@@ -38,7 +38,7 @@ type DomainCardProps = {
 };
 
 export const DomainCard = ({ entity }: DomainCardProps) => {
-  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);
+  const catalogEntityRoute = useRouteRef(entityRouteRef);
 
   const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
   const url = catalogEntityRoute(entityRouteParams(entity));

plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx

@@ -15,11 +15,10 @@
  */
 
 import { DomainEntity } from '@backstage/catalog-model';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
-import { catalogEntityRouteRef } from '../../routes';
 import { DomainExplorerContent } from './DomainExplorerContent';
 
 describe('<DomainExplorerContent />', () => {
@@ -44,7 +43,7 @@ describe('<DomainExplorerContent />', () => {
 
   const mountedRoutes = {
     mountedRoutes: {
-      '/catalog/:namespace/:kind/:name': catalogEntityRouteRef,
+      '/catalog/:namespace/:kind/:name': entityRouteRef,
     },
   };
 

plugins/explore/src/routes.ts

@@ -23,7 +23,11 @@ export const exploreRouteRef = createRouteRef({
   id: 'explore',
 });
 
+/**
+ * @deprecated This route is no longer used and can be removed
+ */
 export const catalogEntityRouteRef = createExternalRouteRef({
   id: 'catalog-entity',
   params: ['namespace', 'kind', 'name'],
+  optional: true,
 });