diff --git a/.changeset/cyan-rice-grab.md b/.changeset/cyan-rice-grab.md new file mode 100644 index 0000000000..e7769636c7 --- /dev/null +++ b/.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, +- }); +``` diff --git a/.changeset/large-flowers-fetch.md b/.changeset/large-flowers-fetch.md new file mode 100644 index 0000000000..026e0ce169 --- /dev/null +++ b/.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, +- }); +``` diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 0e75008571..9be424a145 100644 --- a/packages/app/src/App.tsx +++ b/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, }); diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index 815f3427f2..e39982d2b5 100644 --- a/plugins/catalog-graph/api-report.md +++ b/plugins/catalog-graph/api-report.md @@ -49,7 +49,7 @@ export const catalogGraphPlugin: BackstagePlugin< kind: string; namespace: string; }, - false + true >; } >; diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx index 3c167946d4..7209a516a5 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx +++ b/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('', () => { @@ -80,7 +81,7 @@ describe('', () => { 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('', () => { , { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, '/catalog-graph': catalogGraphRouteRef, }, }, @@ -111,7 +112,7 @@ describe('', () => { 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('', () => { , { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, '/catalog-graph': catalogGraphRouteRef, }, }, diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 42e85a75ba..b2dfd9f9b2 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/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 }); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx index 7bd1045fff..4c7a64a7ce 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx +++ b/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('', () => { wrapper, { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, }, }, ); @@ -129,7 +132,7 @@ describe('', () => { 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('', () => { wrapper, { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, }, }, ); @@ -160,7 +163,7 @@ describe('', () => { 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('', () => { , { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, }, }, ); @@ -202,7 +205,7 @@ describe('', () => { , { mountedRoutes: { - '/entity/{kind}/{namespace}/{name}': catalogEntityRouteRef, + '/entity/{kind}/{namespace}/{name}': entityRouteRef, }, }, ); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index fdcb71d3ad..2ae7a99dd8 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/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, diff --git a/plugins/catalog-graph/src/routes.ts b/plugins/catalog-graph/src/routes.ts index 3bca6ce411..924db7fa4c 100644 --- a/plugins/catalog-graph/src/routes.ts +++ b/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, }); diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md index e985297035..412c0cc54b 100644 --- a/plugins/explore/api-report.md +++ b/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 >; } >; diff --git a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx b/plugins/explore/src/components/DomainCard/DomainCard.test.tsx index b9885f8179..df9b84820a 100644 --- a/plugins/explore/src/components/DomainCard/DomainCard.test.tsx +++ b/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('', () => { @@ -38,7 +38,7 @@ describe('', () => { , { mountedRoutes: { - '/catalog/:namespace/:kind/:name': catalogEntityRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, }, }, ); diff --git a/plugins/explore/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx index 6c531d1db1..94e4f145c3 100644 --- a/plugins/explore/src/components/DomainCard/DomainCard.tsx +++ b/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)); diff --git a/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx index 46a8f1adf2..e36bd4ddb9 100644 --- a/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.test.tsx +++ b/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('', () => { @@ -44,7 +43,7 @@ describe('', () => { const mountedRoutes = { mountedRoutes: { - '/catalog/:namespace/:kind/:name': catalogEntityRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, }, }; diff --git a/plugins/explore/src/routes.ts b/plugins/explore/src/routes.ts index d3a94ea4cd..e8b393c4f6 100644 --- a/plugins/explore/src/routes.ts +++ b/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, });