From 6aa2b965ebce0fa000b891d8dea67fb72a0a7e80 Mon Sep 17 00:00:00 2001 From: Morgan Date: Mon, 19 Dec 2022 12:27:41 +0100 Subject: [PATCH 1/6] when looking for the page within the outlet, reject addons wrapper as well as addons, because different versions of react router use different numbers of wrappers. Should be compatible with all 6.* versions now Signed-off-by: Morgan --- plugins/techdocs-react/src/addons.tsx | 4 ++ plugins/techdocs-react/src/index.ts | 1 + plugins/techdocs/package.json | 1 + .../TechDocsReaderPage.test.tsx | 47 +++++++++++++++++++ .../TechDocsReaderPage/TechDocsReaderPage.tsx | 8 +++- 5 files changed, 59 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs-react/src/addons.tsx b/plugins/techdocs-react/src/addons.tsx index a562007260..d77f53a426 100644 --- a/plugins/techdocs-react/src/addons.tsx +++ b/plugins/techdocs-react/src/addons.tsx @@ -27,6 +27,10 @@ import { import { TechDocsAddonLocations, TechDocsAddonOptions } from './types'; +/** + * Key for each addon. + * @public + */ export const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1'; /** diff --git a/plugins/techdocs-react/src/index.ts b/plugins/techdocs-react/src/index.ts index 00ba620651..5cbab1a326 100644 --- a/plugins/techdocs-react/src/index.ts +++ b/plugins/techdocs-react/src/index.ts @@ -25,6 +25,7 @@ export { createTechDocsAddonExtension, TechDocsAddons, TECHDOCS_ADDONS_WRAPPER_KEY, + TECHDOCS_ADDONS_KEY, } from './addons'; export { techdocsApiRef, techdocsStorageApiRef } from './api'; export type { SyncResult, TechDocsApi, TechDocsStorageApi } from './api'; diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json index c3e8fdca9b..0add511f41 100644 --- a/plugins/techdocs/package.json +++ b/plugins/techdocs/package.json @@ -67,6 +67,7 @@ "@backstage/cli": "workspace:^", "@backstage/core-app-api": "workspace:^", "@backstage/dev-utils": "workspace:^", + "@backstage/plugin-techdocs-module-addons-contrib": "workspace:^", "@backstage/test-utils": "workspace:^", "@testing-library/jest-dom": "^5.10.1", "@testing-library/react": "^12.1.3", diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index 4b23075908..3d75b7defe 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -27,6 +27,11 @@ import { techdocsApiRef, techdocsStorageApiRef } from '../../../api'; import { rootRouteRef, rootDocsRouteRef } from '../../../routes'; import { TechDocsReaderPage } from './TechDocsReaderPage'; +import { Route, useParams } from 'react-router-dom'; +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; +import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; +import { Page } from '@backstage/core-components'; +import { FlatRoutes } from '@backstage/core-app-api'; const mockEntityMetadata = { locationMetadata: { @@ -66,6 +71,16 @@ const techdocsStorageApiMock: jest.Mocked = { syncEntityDocs: jest.fn(), }; +const PageMock = () => { + const { namespace, kind, name } = useParams(); + return <>{`LayoutMock: ${namespace}#${kind}#${name}`}; +}; + +jest.mock('@backstage/core-components', () => ({ + ...jest.requireActual('@backstage/core-components'), + Page: jest.fn(), +})); + const Wrapper = ({ children }: { children: React.ReactNode }) => { return ( @@ -146,4 +161,36 @@ describe('', () => { expect(rendered.getByText('techdocs reader page')).toBeInTheDocument(); }); }); + + it('should render techdocs reader page with addons', async () => { + (Page as jest.Mock).mockImplementation(PageMock); + const name = 'test-name'; + const namespace = 'test-namespace'; + const kind = 'test'; + + await act(async () => { + const rendered = await renderInTestApp( + + + } + > + + + + + + , + { + mountedRoutes, + routeEntries: ['/docs/test-namespace/test/test-name'], + }, + ); + + expect( + rendered.getByText(`LayoutMock: ${namespace}#${kind}#${name}`), + ).toBeInTheDocument(); + }); + }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 0e9b244d74..ffe95e0b7e 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx @@ -21,6 +21,7 @@ import { Page } from '@backstage/core-components'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { TECHDOCS_ADDONS_WRAPPER_KEY, + TECHDOCS_ADDONS_KEY, TechDocsReaderPageProvider, } from '@backstage/plugin-techdocs-react'; @@ -165,11 +166,14 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { if (!children) { const childrenList = outlet ? Children.toArray(outlet.props.children) : []; - const grandChildren = childrenList.flatMap( + const grandChildren = childrenList.flatMap( child => (child as ReactElement)?.props?.children ?? [], ); + const page: React.ReactNode = grandChildren.find( - grandChild => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY), + grandChild => + !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && + !getComponentData(grandChild, TECHDOCS_ADDONS_KEY), ); // As explained above, "page" is configuration 4 and is 1 From 786f1b14199fff01690929b4974136fe8192e472 Mon Sep 17 00:00:00 2001 From: Morgan Date: Mon, 19 Dec 2022 17:43:16 +0100 Subject: [PATCH 2/6] add changeset and update api-report Signed-off-by: Morgan --- .changeset/tidy-hats-begin.md | 6 ++++++ plugins/techdocs-react/api-report.md | 3 +++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/tidy-hats-begin.md diff --git a/.changeset/tidy-hats-begin.md b/.changeset/tidy-hats-begin.md new file mode 100644 index 0000000000..ee500408e1 --- /dev/null +++ b/.changeset/tidy-hats-begin.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-techdocs-react': minor +'@backstage/plugin-techdocs': patch +--- + +Support older versions of react-router diff --git a/plugins/techdocs-react/api-report.md b/plugins/techdocs-react/api-report.md index 09da4e012c..f1d6d3f177 100644 --- a/plugins/techdocs-react/api-report.md +++ b/plugins/techdocs-react/api-report.md @@ -32,6 +32,9 @@ export const SHADOW_DOM_STYLE_LOAD_EVENT = 'TECH_DOCS_SHADOW_DOM_STYLE_LOAD'; // @public export type SyncResult = 'cached' | 'updated'; +// @public +export const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1'; + // @public export const TECHDOCS_ADDONS_WRAPPER_KEY = 'techdocs.addons.wrapper.v1'; From 028f88ecb4431928aadf25dfaf794b3cebff81d5 Mon Sep 17 00:00:00 2001 From: Morgan Bentell Date: Mon, 19 Dec 2022 18:06:41 +0100 Subject: [PATCH 3/6] Update test string Signed-off-by: Morgan Bentell --- .../components/TechDocsReaderPage/TechDocsReaderPage.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index 3d75b7defe..1303901375 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -73,7 +73,7 @@ const techdocsStorageApiMock: jest.Mocked = { const PageMock = () => { const { namespace, kind, name } = useParams(); - return <>{`LayoutMock: ${namespace}#${kind}#${name}`}; + return <>{`PageMock: ${namespace}#${kind}#${name}`}; }; jest.mock('@backstage/core-components', () => ({ @@ -189,7 +189,7 @@ describe('', () => { ); expect( - rendered.getByText(`LayoutMock: ${namespace}#${kind}#${name}`), + rendered.getByText(`PageMock: ${namespace}#${kind}#${name}`), ).toBeInTheDocument(); }); }); From e0dada2000fb3609ec7e37806d1e18cbb5f7b48f Mon Sep 17 00:00:00 2001 From: Morgan Date: Mon, 19 Dec 2022 18:17:46 +0100 Subject: [PATCH 4/6] yarn lock Signed-off-by: Morgan --- yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/yarn.lock b/yarn.lock index aa82c2bf97..b70833a34e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8263,6 +8263,7 @@ __metadata: "@backstage/plugin-catalog-react": "workspace:^" "@backstage/plugin-search-common": "workspace:^" "@backstage/plugin-search-react": "workspace:^" + "@backstage/plugin-techdocs-module-addons-contrib": "workspace:^" "@backstage/plugin-techdocs-react": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" From 665c681f3ce1e6438e1448a4c8b4fc98ddbc7442 Mon Sep 17 00:00:00 2001 From: Morgan Date: Tue, 20 Dec 2022 09:55:50 +0100 Subject: [PATCH 5/6] fix tests that broke Signed-off-by: Morgan --- .../TechDocsReaderPage/TechDocsReaderPage.test.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index 1303901375..b8077c604f 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -30,9 +30,10 @@ import { TechDocsReaderPage } from './TechDocsReaderPage'; import { Route, useParams } from 'react-router-dom'; import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; -import { Page } from '@backstage/core-components'; import { FlatRoutes } from '@backstage/core-app-api'; +import { Page } from '@backstage/core-components'; + const mockEntityMetadata = { locationMetadata: { type: 'github', @@ -112,6 +113,12 @@ describe('', () => { afterEach(() => { jest.resetAllMocks(); }); + + beforeEach(() => { + const realPage = jest.requireActual('@backstage/core-components').Page; + (Page as jest.Mock).mockImplementation(realPage); + }); + it('should render a techdocs reader page without children', async () => { const rendered = await renderInTestApp( From e567de03a1c0762ce2f3f56591bff7108cb20f80 Mon Sep 17 00:00:00 2001 From: Morgan Date: Tue, 20 Dec 2022 10:03:48 +0100 Subject: [PATCH 6/6] add another test Signed-off-by: Morgan --- .../TechDocsReaderPage.test.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index b8077c604f..808cb84ccf 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -200,4 +200,31 @@ describe('', () => { ).toBeInTheDocument(); }); }); + + it('should render techdocs reader page with addons and page', async () => { + (Page as jest.Mock).mockImplementation(PageMock); + await act(async () => { + const rendered = await renderInTestApp( + + + } + > +

the page

+ + + + + + , + { + mountedRoutes, + routeEntries: ['/docs/test-namespace/test/test-name'], + }, + ); + + expect(rendered.getByText('the page')).toBeInTheDocument(); + }); + }); });