From 29d6cf0147a78a224afc0d5e3beffcfbeca33e17 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 07:34:41 -0500 Subject: [PATCH 1/9] fix(plugin-catalog): Fix viewTechdocLink so kind is lowercase by default in url path Signed-off-by: Jake Crews --- .changeset/fuzzy-buses-shop.md | 6 ++ .changeset/twenty-humans-visit.md | 5 ++ plugins/catalog/package.json | 1 + .../components/AboutCard/AboutCard.test.tsx | 58 +++++++++++++++++++ .../src/components/AboutCard/AboutCard.tsx | 17 ++++-- plugins/techdocs-react/api-report.md | 7 +++ plugins/techdocs-react/package.json | 1 + plugins/techdocs-react/src/helpers.ts | 38 ++++++++++++ plugins/techdocs-react/src/index.ts | 1 + yarn.lock | 24 +++++++- 10 files changed, 149 insertions(+), 9 deletions(-) create mode 100644 .changeset/fuzzy-buses-shop.md create mode 100644 .changeset/twenty-humans-visit.md create mode 100644 plugins/techdocs-react/src/helpers.ts diff --git a/.changeset/fuzzy-buses-shop.md b/.changeset/fuzzy-buses-shop.md new file mode 100644 index 0000000000..eb300d1535 --- /dev/null +++ b/.changeset/fuzzy-buses-shop.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fix link for 'View TechDocs' button on entity's page: kind should be in lowercase by default, uppercase could be enabled +if `techdocs.legacyUseCaseSensitiveTripletPaths` is set to `true`. diff --git a/.changeset/twenty-humans-visit.md b/.changeset/twenty-humans-visit.md new file mode 100644 index 0000000000..6235164602 --- /dev/null +++ b/.changeset/twenty-humans-visit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-react': patch +--- + +Add `toLowerEntityRefMaybe()` function for handling `techdocs.legacyUseCaseSensitiveTripletPaths` flag. diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index 66718424cd..135619ed75 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -44,6 +44,7 @@ "@backstage/plugin-catalog-react": "^1.1.2-next.3", "@backstage/plugin-search-common": "^0.3.6-next.0", "@backstage/plugin-search-react": "^0.2.2-next.3", + "@backstage/plugin-techdocs-react": "1.0.1-next.1", "@backstage/theme": "^0.2.16-next.1", "@backstage/types": "^1.0.0", "@material-ui/core": "^4.12.2", diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx index f2fee7d9f4..e892bf8554 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx @@ -26,6 +26,7 @@ import { CatalogApi, entityRouteRef, } from '@backstage/plugin-catalog-react'; +import { ConfigApi, configApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -393,6 +394,63 @@ describe('', () => { }, ); + expect(getByText('View TechDocs').closest('a')).toHaveAttribute( + 'href', + '/docs/default/component/software', + ); + }); + + it('renders techdocs link if techdocs.legacyUseCaseSensitiveTripletPaths is true', async () => { + const configApi: ConfigApi = new ConfigReader({ + integrations: { + github: [ + { + host: 'github.com', + token: '...', + }, + ], + }, + techdocs: { + legacyUseCaseSensitiveTripletPaths: true, + }, + }); + + const entity = { + apiVersion: 'v1', + kind: 'Component', + metadata: { + name: 'software', + annotations: { + 'backstage.io/techdocs-ref': './', + }, + }, + spec: { + owner: 'guest', + type: 'service', + lifecycle: 'production', + }, + }; + + const { getByText } = await renderInTestApp( + + + + + , + { + mountedRoutes: { + '/docs/:namespace/:kind/:name': viewTechDocRouteRef, + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + expect(getByText('View TechDocs').closest('a')).toHaveAttribute( 'href', '/docs/default/Component/software', diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index b7ccd49b31..9e0b3eabb8 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -18,6 +18,7 @@ import { ANNOTATION_EDIT_URL, ANNOTATION_LOCATION, DEFAULT_NAMESPACE, + getCompoundEntityRef, stringifyEntityRef, } from '@backstage/catalog-model'; import { @@ -26,7 +27,12 @@ import { InfoCardVariants, Link, } from '@backstage/core-components'; -import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { + alertApiRef, + configApiRef, + useApi, + useRouteRef, +} from '@backstage/core-plugin-api'; import { ScmIntegrationIcon, scmIntegrationsApiRef, @@ -50,6 +56,7 @@ import EditIcon from '@material-ui/icons/Edit'; import React, { useCallback } from 'react'; import { viewTechDocRouteRef } from '../../routes'; import { AboutContent } from './AboutContent'; +import { toLowercaseEntityRefMaybe } from '@backstage/plugin-techdocs-react'; const useStyles = makeStyles({ gridItemCard: { @@ -91,6 +98,8 @@ export function AboutCard(props: AboutCardProps) { const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); const viewTechdocLink = useRouteRef(viewTechDocRouteRef); + const config = useApi(configApiRef); + const entityRef = getCompoundEntityRef(entity); const entitySourceLocation = getEntitySourceLocation( entity, @@ -113,11 +122,7 @@ export function AboutCard(props: AboutCardProps) { icon: , href: viewTechdocLink && - viewTechdocLink({ - namespace: entity.metadata.namespace || DEFAULT_NAMESPACE, - kind: entity.kind, - name: entity.metadata.name, - }), + viewTechdocLink(toLowercaseEntityRefMaybe(entityRef, config)), }; let cardClass = ''; diff --git a/plugins/techdocs-react/api-report.md b/plugins/techdocs-react/api-report.md index 336481e922..d04b852d07 100644 --- a/plugins/techdocs-react/api-report.md +++ b/plugins/techdocs-react/api-report.md @@ -7,6 +7,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/lib/useAsync'; import { ComponentType } from 'react'; import { CompoundEntityRef } from '@backstage/catalog-model'; +import { Config } from '@backstage/config'; import { Dispatch } from 'react'; import { Entity } from '@backstage/catalog-model'; import { Extension } from '@backstage/core-plugin-api'; @@ -152,6 +153,12 @@ export interface TechDocsStorageApi { // @public export const techdocsStorageApiRef: ApiRef; +// @public +export function toLowercaseEntityRefMaybe( + entityRef: CompoundEntityRef, + config: Config, +): CompoundEntityRef; + // @public export const useShadowDomStylesLoading: (element: Element | null) => boolean; diff --git a/plugins/techdocs-react/package.json b/plugins/techdocs-react/package.json index 6ad4fe4f9c..8eeab98e2b 100644 --- a/plugins/techdocs-react/package.json +++ b/plugins/techdocs-react/package.json @@ -38,6 +38,7 @@ "@backstage/catalog-model": "^1.1.0-next.3", "@backstage/core-components": "^0.10.0-next.3", "@backstage/core-plugin-api": "^1.0.4-next.0", + "@backstage/config": "^1.0.1", "@backstage/version-bridge": "^1.0.1", "@material-ui/core": "^4.12.2", "@material-ui/lab": "4.0.0-alpha.57", diff --git a/plugins/techdocs-react/src/helpers.ts b/plugins/techdocs-react/src/helpers.ts new file mode 100644 index 0000000000..3820c2e117 --- /dev/null +++ b/plugins/techdocs-react/src/helpers.ts @@ -0,0 +1,38 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Config } from '@backstage/config'; +import { CompoundEntityRef } from '@backstage/catalog-model'; + +/** + * Lower-case entity triplets by default, but allow override. + * + * @public + */ +export function toLowercaseEntityRefMaybe( + entityRef: CompoundEntityRef, + config: Config, +) { + return config.getOptionalBoolean( + 'techdocs.legacyUseCaseSensitiveTripletPaths', + ) + ? entityRef + : { + kind: entityRef.kind.toLocaleLowerCase('en-US'), + name: entityRef.name.toLocaleLowerCase('en-US'), + namespace: entityRef.namespace.toLocaleLowerCase('en-US'), + }; +} diff --git a/plugins/techdocs-react/src/index.ts b/plugins/techdocs-react/src/index.ts index bd2edda763..00ba620651 100644 --- a/plugins/techdocs-react/src/index.ts +++ b/plugins/techdocs-react/src/index.ts @@ -51,3 +51,4 @@ export { useShadowRootElements, useShadowRootSelection, } from './hooks'; +export { toLowercaseEntityRefMaybe } from './helpers'; diff --git a/yarn.lock b/yarn.lock index cd607fcc68..8df1daee84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1549,7 +1549,7 @@ "@backstage/errors" "^1.0.0" cross-fetch "^3.1.5" -"@backstage/catalog-model@^1.0.0", "@backstage/catalog-model@^1.0.3": +"@backstage/catalog-model@^1.0.0", "@backstage/catalog-model@^1.0.3", "@backstage/catalog-model@^1.0.3-next.0": version "1.0.3" resolved "https://registry.npmjs.org/@backstage/catalog-model/-/catalog-model-1.0.3.tgz#0d7bd832add56650871b95894878540fc41a4ef9" integrity sha512-rbXdA/CI8EzpsthlSI4JonLd4RZoki7IN6tFvivjKDMlW8IVb63BJXWO4VnvHH+LLYzH4/OaL051YeoaicdqYw== @@ -1562,7 +1562,7 @@ lodash "^4.17.21" uuid "^8.0.0" -"@backstage/core-components@^0.9.0", "@backstage/core-components@^0.9.5": +"@backstage/core-components@^0.9.0", "@backstage/core-components@^0.9.5", "@backstage/core-components@^0.9.5-next.1": version "0.9.5" resolved "https://registry.npmjs.org/@backstage/core-components/-/core-components-0.9.5.tgz#5a0b34867aaee0549bfa67b39a69c09588fa3c7a" integrity sha512-kfAdN70idiEqHeH9ZQryn6C0RxJEKiRc/7srYIz0CVV88zJfc0nmZ5C/S10Gkht2xWfm95tTSw2P1vEYIBbfxg== @@ -1607,7 +1607,7 @@ zen-observable "^0.8.15" zod "^3.11.6" -"@backstage/core-plugin-api@^1.0.0", "@backstage/core-plugin-api@^1.0.3": +"@backstage/core-plugin-api@^1.0.0", "@backstage/core-plugin-api@^1.0.3", "@backstage/core-plugin-api@^1.0.3-next.0": version "1.0.3" resolved "https://registry.npmjs.org/@backstage/core-plugin-api/-/core-plugin-api-1.0.3.tgz#32ecfec2afe1a25d02d41f1813621843121c2d7a" integrity sha512-4/d9+c+AmqhY5KqsC8ikIcMsmXIcKP3+1/uT2H3/DxxJLx2sH7BvNVVqro5ZAhA7iNsuYdrfV0fHeNxGsdLuNA== @@ -1765,6 +1765,24 @@ qs "^6.9.4" react-use "^17.2.4" +"@backstage/plugin-techdocs-react@1.0.1-next.1": + version "1.0.1-next.1" + resolved "https://registry.npmjs.org/@backstage/plugin-techdocs-react/-/plugin-techdocs-react-1.0.1-next.1.tgz#c30b19e5ab622d898873406431b66890efc7877e" + integrity sha512-4tz9etAWIM5waOaTVsYgTnjNQE/kIXK1gPl/BX5Ffv644CvQ1Ll/JKIrfdMlCgC4nZuH/9vxNOa7Brzdnapf+A== + dependencies: + "@backstage/catalog-model" "^1.0.3-next.0" + "@backstage/core-components" "^0.9.5-next.1" + "@backstage/core-plugin-api" "^1.0.3-next.0" + "@backstage/version-bridge" "^1.0.1" + "@material-ui/core" "^4.12.2" + "@material-ui/lab" "4.0.0-alpha.57" + "@material-ui/styles" "^4.11.0" + jss "~10.8.2" + lodash "^4.17.21" + react-helmet "6.1.0" + react-router-dom "6.0.0-beta.0" + react-use "^17.2.4" + "@backstage/theme@^0.2.15", "@backstage/theme@^0.2.6", "@backstage/theme@^0.2.7", "@backstage/theme@^0.2.9": version "0.2.15" resolved "https://registry.npmjs.org/@backstage/theme/-/theme-0.2.15.tgz#478491c9bca9dca85d5af08767ba512eabcd3669" From e466c10399d2b33c1fdd328248528163d01058b7 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 07:44:16 -0500 Subject: [PATCH 2/9] fix versioning Signed-off-by: Jake Crews --- plugins/catalog/package.json | 2 +- .../src/components/AboutCard/AboutCard.tsx | 1 - yarn.lock | 24 +++---------------- 3 files changed, 4 insertions(+), 23 deletions(-) diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index 135619ed75..89d22ea886 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -44,7 +44,7 @@ "@backstage/plugin-catalog-react": "^1.1.2-next.3", "@backstage/plugin-search-common": "^0.3.6-next.0", "@backstage/plugin-search-react": "^0.2.2-next.3", - "@backstage/plugin-techdocs-react": "1.0.1-next.1", + "@backstage/plugin-techdocs-react": "1.0.2-next.2", "@backstage/theme": "^0.2.16-next.1", "@backstage/types": "^1.0.0", "@material-ui/core": "^4.12.2", diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 9e0b3eabb8..757b5b10a6 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -17,7 +17,6 @@ import { ANNOTATION_EDIT_URL, ANNOTATION_LOCATION, - DEFAULT_NAMESPACE, getCompoundEntityRef, stringifyEntityRef, } from '@backstage/catalog-model'; diff --git a/yarn.lock b/yarn.lock index 8df1daee84..cd607fcc68 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1549,7 +1549,7 @@ "@backstage/errors" "^1.0.0" cross-fetch "^3.1.5" -"@backstage/catalog-model@^1.0.0", "@backstage/catalog-model@^1.0.3", "@backstage/catalog-model@^1.0.3-next.0": +"@backstage/catalog-model@^1.0.0", "@backstage/catalog-model@^1.0.3": version "1.0.3" resolved "https://registry.npmjs.org/@backstage/catalog-model/-/catalog-model-1.0.3.tgz#0d7bd832add56650871b95894878540fc41a4ef9" integrity sha512-rbXdA/CI8EzpsthlSI4JonLd4RZoki7IN6tFvivjKDMlW8IVb63BJXWO4VnvHH+LLYzH4/OaL051YeoaicdqYw== @@ -1562,7 +1562,7 @@ lodash "^4.17.21" uuid "^8.0.0" -"@backstage/core-components@^0.9.0", "@backstage/core-components@^0.9.5", "@backstage/core-components@^0.9.5-next.1": +"@backstage/core-components@^0.9.0", "@backstage/core-components@^0.9.5": version "0.9.5" resolved "https://registry.npmjs.org/@backstage/core-components/-/core-components-0.9.5.tgz#5a0b34867aaee0549bfa67b39a69c09588fa3c7a" integrity sha512-kfAdN70idiEqHeH9ZQryn6C0RxJEKiRc/7srYIz0CVV88zJfc0nmZ5C/S10Gkht2xWfm95tTSw2P1vEYIBbfxg== @@ -1607,7 +1607,7 @@ zen-observable "^0.8.15" zod "^3.11.6" -"@backstage/core-plugin-api@^1.0.0", "@backstage/core-plugin-api@^1.0.3", "@backstage/core-plugin-api@^1.0.3-next.0": +"@backstage/core-plugin-api@^1.0.0", "@backstage/core-plugin-api@^1.0.3": version "1.0.3" resolved "https://registry.npmjs.org/@backstage/core-plugin-api/-/core-plugin-api-1.0.3.tgz#32ecfec2afe1a25d02d41f1813621843121c2d7a" integrity sha512-4/d9+c+AmqhY5KqsC8ikIcMsmXIcKP3+1/uT2H3/DxxJLx2sH7BvNVVqro5ZAhA7iNsuYdrfV0fHeNxGsdLuNA== @@ -1765,24 +1765,6 @@ qs "^6.9.4" react-use "^17.2.4" -"@backstage/plugin-techdocs-react@1.0.1-next.1": - version "1.0.1-next.1" - resolved "https://registry.npmjs.org/@backstage/plugin-techdocs-react/-/plugin-techdocs-react-1.0.1-next.1.tgz#c30b19e5ab622d898873406431b66890efc7877e" - integrity sha512-4tz9etAWIM5waOaTVsYgTnjNQE/kIXK1gPl/BX5Ffv644CvQ1Ll/JKIrfdMlCgC4nZuH/9vxNOa7Brzdnapf+A== - dependencies: - "@backstage/catalog-model" "^1.0.3-next.0" - "@backstage/core-components" "^0.9.5-next.1" - "@backstage/core-plugin-api" "^1.0.3-next.0" - "@backstage/version-bridge" "^1.0.1" - "@material-ui/core" "^4.12.2" - "@material-ui/lab" "4.0.0-alpha.57" - "@material-ui/styles" "^4.11.0" - jss "~10.8.2" - lodash "^4.17.21" - react-helmet "6.1.0" - react-router-dom "6.0.0-beta.0" - react-use "^17.2.4" - "@backstage/theme@^0.2.15", "@backstage/theme@^0.2.6", "@backstage/theme@^0.2.7", "@backstage/theme@^0.2.9": version "0.2.15" resolved "https://registry.npmjs.org/@backstage/theme/-/theme-0.2.15.tgz#478491c9bca9dca85d5af08767ba512eabcd3669" From aef5f69057c4ba08b0a2f7d2010b9ac599ff9923 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 09:39:41 -0500 Subject: [PATCH 3/9] change TechDocsReaderPageContext to modify entityRef for casing Signed-off-by: Jake Crews --- .changeset/twenty-humans-visit.md | 3 +- plugins/techdocs-react/src/context.test.tsx | 176 ++++++++++++++------ plugins/techdocs-react/src/context.tsx | 7 +- 3 files changed, 128 insertions(+), 58 deletions(-) diff --git a/.changeset/twenty-humans-visit.md b/.changeset/twenty-humans-visit.md index 6235164602..e543d30145 100644 --- a/.changeset/twenty-humans-visit.md +++ b/.changeset/twenty-humans-visit.md @@ -2,4 +2,5 @@ '@backstage/plugin-techdocs-react': patch --- -Add `toLowerEntityRefMaybe()` function for handling `techdocs.legacyUseCaseSensitiveTripletPaths` flag. +Add `toLowerEntityRefMaybe()` helper function for handling `techdocs.legacyUseCaseSensitiveTripletPaths` flag. +Pass modified `entityRef` to `TechDocsReaderPageContext` to handle the `techdocs.legacyUseCaseSensitiveTripletPaths` flag. diff --git a/plugins/techdocs-react/src/context.test.tsx b/plugins/techdocs-react/src/context.test.tsx index 14669dc336..efc695bff0 100644 --- a/plugins/techdocs-react/src/context.test.tsx +++ b/plugins/techdocs-react/src/context.test.tsx @@ -21,6 +21,7 @@ import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; import { TestApiProvider } from '@backstage/test-utils'; import { Entity, CompoundEntityRef } from '@backstage/catalog-model'; +import { configApiRef } from '@backstage/core-plugin-api'; import { techdocsApiRef } from './api'; import { useTechDocsReaderPage, TechDocsReaderPageProvider } from './context'; @@ -55,72 +56,137 @@ const techdocsApiMock = { getTechDocsMetadata: jest.fn().mockResolvedValue(mockTechDocsMetadata), }; -const wrapper = ({ - entityRef = { - kind: mockEntityMetadata.kind, - name: mockEntityMetadata.metadata.name, - namespace: mockEntityMetadata.metadata.namespace!!, - }, - children, -}: { - entityRef?: CompoundEntityRef; - children: React.ReactNode; -}) => ( - - - - {children} - - - -); - describe('useTechDocsReaderPage', () => { - it('should set title', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, + describe('when legacyUseCaseSensitiveTripletPaths is false', () => { + const configApiMock = { + getOptionalBoolean: jest.fn().mockReturnValue(undefined), + }; + + const wrapper = ({ + entityRef = { + kind: mockEntityMetadata.kind, + name: mockEntityMetadata.metadata.name, + namespace: mockEntityMetadata.metadata.namespace!!, + }, + children, + }: { + entityRef?: CompoundEntityRef; + children: React.ReactNode; + }) => ( + + + + {children} + + + ); - expect(result.current.title).toBe(''); + it('should set title', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, + ); - act(() => result.current.setTitle('test site title')); + expect(result.current.title).toBe(''); - await waitForNextUpdate(); + act(() => result.current.setTitle('test site title')); - expect(result.current.title).toBe('test site title'); + await waitForNextUpdate(); + + expect(result.current.title).toBe('test site title'); + }); + + it('should set subtitle', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, + ); + + expect(result.current.subtitle).toBe(''); + + act(() => result.current.setSubtitle('test site subtitle')); + + await waitForNextUpdate(); + + expect(result.current.subtitle).toBe('test site subtitle'); + }); + + it('should set shadow root', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, + ); + + // mock shadowroot + const shadowRoot = mockShadowRoot(); + + act(() => result.current.setShadowRoot(shadowRoot)); + + await waitForNextUpdate(); + + expect(result.current.shadowRoot?.innerHTML).toBe( + '

Shadow DOM Mock

', + ); + }); + + it('should set entityRef as lowercase', async () => { + const lowercaseEntityRef = { + kind: mockEntityMetadata.kind.toLocaleLowerCase(), + name: mockEntityMetadata.metadata.name.toLocaleLowerCase(), + namespace: mockEntityMetadata.metadata.namespace?.toLocaleLowerCase(), + }; + const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); + + expect(result.current.entityRef).toStrictEqual(lowercaseEntityRef); + }); }); - it('should set subtitle', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, + describe('when legacyUseCaseSensitiveTripletPaths is true', () => { + const configApiMock = { + getOptionalBoolean: jest.fn().mockReturnValue(true), + }; + + const wrapper = ({ + entityRef = { + kind: mockEntityMetadata.kind, + name: mockEntityMetadata.metadata.name, + namespace: mockEntityMetadata.metadata.namespace!!, + }, + children, + }: { + entityRef?: CompoundEntityRef; + children: React.ReactNode; + }) => ( + + + + {children} + + + ); - expect(result.current.subtitle).toBe(''); + it('entityRef is not modified', async () => { + const caseSensitiveEntityRef = { + kind: mockEntityMetadata.kind, + name: mockEntityMetadata.metadata.name, + namespace: mockEntityMetadata.metadata.namespace!!, + }; - act(() => result.current.setSubtitle('test site subtitle')); + const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); - await waitForNextUpdate(); - - expect(result.current.subtitle).toBe('test site subtitle'); - }); - - it('should set shadow root', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, - ); - - // mock shadowroot - const shadowRoot = mockShadowRoot(); - - act(() => result.current.setShadowRoot(shadowRoot)); - - await waitForNextUpdate(); - - expect(result.current.shadowRoot?.innerHTML).toBe( - '

Shadow DOM Mock

', - ); + expect(result.current.entityRef).toStrictEqual(caseSensitiveEntityRef); + }); }); }); diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 4f2fa26164..66faf858fa 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -33,11 +33,13 @@ import { createVersionedValueMap, } from '@backstage/version-bridge'; -import { useApi } from '@backstage/core-plugin-api'; +import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { techdocsApiRef } from './api'; import { TechDocsEntityMetadata, TechDocsMetadata } from './types'; +import { toLowercaseEntityRefMaybe } from './helpers'; + const areEntityRefsEqual = ( prevEntityRef: CompoundEntityRef, nextEntityRef: CompoundEntityRef, @@ -107,6 +109,7 @@ export type TechDocsReaderPageProviderProps = { export const TechDocsReaderPageProvider = memo( ({ entityRef, children }: TechDocsReaderPageProviderProps) => { const techdocsApi = useApi(techdocsApiRef); + const config = useApi(configApiRef); const metadata = useAsync(async () => { return techdocsApi.getTechDocsMetadata(entityRef); @@ -126,7 +129,7 @@ export const TechDocsReaderPageProvider = memo( const value = { metadata, - entityRef, + entityRef: toLowercaseEntityRefMaybe(entityRef, config), entityMetadata, shadowRoot, setShadowRoot, From d9522dc9eb7ff976c42b6000d6698fb39d4e41d6 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 09:43:19 -0500 Subject: [PATCH 4/9] Remove AboutCard changes Signed-off-by: Jake Crews --- .changeset/fuzzy-buses-shop.md | 6 -- plugins/catalog/package.json | 1 - .../components/AboutCard/AboutCard.test.tsx | 58 ------------------- .../src/components/AboutCard/AboutCard.tsx | 18 +++--- 4 files changed, 7 insertions(+), 76 deletions(-) delete mode 100644 .changeset/fuzzy-buses-shop.md diff --git a/.changeset/fuzzy-buses-shop.md b/.changeset/fuzzy-buses-shop.md deleted file mode 100644 index eb300d1535..0000000000 --- a/.changeset/fuzzy-buses-shop.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@backstage/plugin-catalog': patch ---- - -Fix link for 'View TechDocs' button on entity's page: kind should be in lowercase by default, uppercase could be enabled -if `techdocs.legacyUseCaseSensitiveTripletPaths` is set to `true`. diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index 89d22ea886..66718424cd 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -44,7 +44,6 @@ "@backstage/plugin-catalog-react": "^1.1.2-next.3", "@backstage/plugin-search-common": "^0.3.6-next.0", "@backstage/plugin-search-react": "^0.2.2-next.3", - "@backstage/plugin-techdocs-react": "1.0.2-next.2", "@backstage/theme": "^0.2.16-next.1", "@backstage/types": "^1.0.0", "@material-ui/core": "^4.12.2", diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx index e892bf8554..f2fee7d9f4 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx @@ -26,7 +26,6 @@ import { CatalogApi, entityRouteRef, } from '@backstage/plugin-catalog-react'; -import { ConfigApi, configApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -394,63 +393,6 @@ describe('', () => { }, ); - expect(getByText('View TechDocs').closest('a')).toHaveAttribute( - 'href', - '/docs/default/component/software', - ); - }); - - it('renders techdocs link if techdocs.legacyUseCaseSensitiveTripletPaths is true', async () => { - const configApi: ConfigApi = new ConfigReader({ - integrations: { - github: [ - { - host: 'github.com', - token: '...', - }, - ], - }, - techdocs: { - legacyUseCaseSensitiveTripletPaths: true, - }, - }); - - const entity = { - apiVersion: 'v1', - kind: 'Component', - metadata: { - name: 'software', - annotations: { - 'backstage.io/techdocs-ref': './', - }, - }, - spec: { - owner: 'guest', - type: 'service', - lifecycle: 'production', - }, - }; - - const { getByText } = await renderInTestApp( - - - - - , - { - mountedRoutes: { - '/docs/:namespace/:kind/:name': viewTechDocRouteRef, - '/catalog/:namespace/:kind/:name': entityRouteRef, - }, - }, - ); - expect(getByText('View TechDocs').closest('a')).toHaveAttribute( 'href', '/docs/default/Component/software', diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 757b5b10a6..b7ccd49b31 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -17,7 +17,7 @@ import { ANNOTATION_EDIT_URL, ANNOTATION_LOCATION, - getCompoundEntityRef, + DEFAULT_NAMESPACE, stringifyEntityRef, } from '@backstage/catalog-model'; import { @@ -26,12 +26,7 @@ import { InfoCardVariants, Link, } from '@backstage/core-components'; -import { - alertApiRef, - configApiRef, - useApi, - useRouteRef, -} from '@backstage/core-plugin-api'; +import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { ScmIntegrationIcon, scmIntegrationsApiRef, @@ -55,7 +50,6 @@ import EditIcon from '@material-ui/icons/Edit'; import React, { useCallback } from 'react'; import { viewTechDocRouteRef } from '../../routes'; import { AboutContent } from './AboutContent'; -import { toLowercaseEntityRefMaybe } from '@backstage/plugin-techdocs-react'; const useStyles = makeStyles({ gridItemCard: { @@ -97,8 +91,6 @@ export function AboutCard(props: AboutCardProps) { const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); const viewTechdocLink = useRouteRef(viewTechDocRouteRef); - const config = useApi(configApiRef); - const entityRef = getCompoundEntityRef(entity); const entitySourceLocation = getEntitySourceLocation( entity, @@ -121,7 +113,11 @@ export function AboutCard(props: AboutCardProps) { icon: , href: viewTechdocLink && - viewTechdocLink(toLowercaseEntityRefMaybe(entityRef, config)), + viewTechdocLink({ + namespace: entity.metadata.namespace || DEFAULT_NAMESPACE, + kind: entity.kind, + name: entity.metadata.name, + }), }; let cardClass = ''; From a62b31c3e68ac663ec84fe650d5ede6dee375fb2 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 10:45:46 -0500 Subject: [PATCH 5/9] fix techdocs contexts test Signed-off-by: Jake Crews --- .../components/TechDocsReaderPage/context.test.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx index 148b740205..2380724960 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/context.test.tsx @@ -22,6 +22,7 @@ import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; import { TestApiProvider } from '@backstage/test-utils'; import { Entity, CompoundEntityRef } from '@backstage/catalog-model'; +import { configApiRef } from '@backstage/core-plugin-api'; import { techdocsApiRef, TechDocsMetadata, @@ -52,6 +53,10 @@ const techdocsApiMock = { getTechDocsMetadata: jest.fn().mockResolvedValue(mockTechDocsMetadata), }; +const configApiMock = { + getOptionalBoolean: jest.fn().mockReturnValue(undefined), +}; + const wrapper = ({ entityRef = { kind: mockEntityMetadata.kind, @@ -64,7 +69,12 @@ const wrapper = ({ children: React.ReactNode; }) => ( - + {children} From b2c4aaa7b2c4f9661fc5969042221d42f3ff76f8 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 12:54:43 -0500 Subject: [PATCH 6/9] fix lowercaseEntityRefMaybe Signed-off-by: Jake Crews --- plugins/techdocs-react/src/helpers.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/plugins/techdocs-react/src/helpers.ts b/plugins/techdocs-react/src/helpers.ts index 3820c2e117..3f10fff2ba 100644 --- a/plugins/techdocs-react/src/helpers.ts +++ b/plugins/techdocs-react/src/helpers.ts @@ -25,14 +25,13 @@ import { CompoundEntityRef } from '@backstage/catalog-model'; export function toLowercaseEntityRefMaybe( entityRef: CompoundEntityRef, config: Config, -) { - return config.getOptionalBoolean( - 'techdocs.legacyUseCaseSensitiveTripletPaths', - ) - ? entityRef - : { - kind: entityRef.kind.toLocaleLowerCase('en-US'), - name: entityRef.name.toLocaleLowerCase('en-US'), - namespace: entityRef.namespace.toLocaleLowerCase('en-US'), - }; +): CompoundEntityRef { + if (config.getOptionalBoolean('techdocs.legacyUseCaseSensitiveTripletPaths')) + return entityRef; + + entityRef.kind = entityRef.kind.toLocaleLowerCase(); + entityRef.name = entityRef.name.toLocaleLowerCase(); + entityRef.namespace = entityRef.namespace.toLocaleLowerCase(); + + return entityRef; } From f0d040bb57f147a726000f0dd17fdd7b57be6ea1 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Tue, 26 Jul 2022 07:55:23 -0500 Subject: [PATCH 7/9] fix merge issue Signed-off-by: Jake Crews --- plugins/techdocs-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/techdocs-react/package.json b/plugins/techdocs-react/package.json index 4dd45f7942..75821eac88 100644 --- a/plugins/techdocs-react/package.json +++ b/plugins/techdocs-react/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@backstage/catalog-model": "^1.1.0", - "@backstage/config": "^1.0.1" + "@backstage/config": "^1.0.1", "@backstage/core-components": "^0.10.1-next.0", "@backstage/core-plugin-api": "^1.0.5-next.0", "@backstage/version-bridge": "^1.0.1", From b874bd03bb03b15d640ff9a4753e169f7e1089f0 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Tue, 26 Jul 2022 09:12:54 -0500 Subject: [PATCH 8/9] change wrapper back to global declaration Signed-off-by: Jake Crews --- plugins/techdocs-react/src/context.test.tsx | 208 +++++++++----------- 1 file changed, 88 insertions(+), 120 deletions(-) diff --git a/plugins/techdocs-react/src/context.test.tsx b/plugins/techdocs-react/src/context.test.tsx index efc695bff0..6cc5537d9e 100644 --- a/plugins/techdocs-react/src/context.test.tsx +++ b/plugins/techdocs-react/src/context.test.tsx @@ -56,137 +56,105 @@ const techdocsApiMock = { getTechDocsMetadata: jest.fn().mockResolvedValue(mockTechDocsMetadata), }; -describe('useTechDocsReaderPage', () => { - describe('when legacyUseCaseSensitiveTripletPaths is false', () => { - const configApiMock = { - getOptionalBoolean: jest.fn().mockReturnValue(undefined), - }; +const configApiMock = { + getOptionalBoolean: jest.fn().mockReturnValue(undefined), +}; - const wrapper = ({ - entityRef = { - kind: mockEntityMetadata.kind, - name: mockEntityMetadata.metadata.name, - namespace: mockEntityMetadata.metadata.namespace!!, - }, - children, - }: { - entityRef?: CompoundEntityRef; - children: React.ReactNode; - }) => ( - - - - {children} - - - +const wrapper = ({ + entityRef = { + kind: mockEntityMetadata.kind, + name: mockEntityMetadata.metadata.name, + namespace: mockEntityMetadata.metadata.namespace!!, + }, + children, +}: { + entityRef?: CompoundEntityRef; + children: React.ReactNode; +}) => ( + + + + {children} + + + +); + +describe('useTechDocsReaderPage', () => { + it('should set title', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, ); - it('should set title', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, - ); + expect(result.current.title).toBe(''); - expect(result.current.title).toBe(''); + act(() => result.current.setTitle('test site title')); - act(() => result.current.setTitle('test site title')); + await waitForNextUpdate(); - await waitForNextUpdate(); - - expect(result.current.title).toBe('test site title'); - }); - - it('should set subtitle', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, - ); - - expect(result.current.subtitle).toBe(''); - - act(() => result.current.setSubtitle('test site subtitle')); - - await waitForNextUpdate(); - - expect(result.current.subtitle).toBe('test site subtitle'); - }); - - it('should set shadow root', async () => { - const { result, waitForNextUpdate } = renderHook( - () => useTechDocsReaderPage(), - { wrapper }, - ); - - // mock shadowroot - const shadowRoot = mockShadowRoot(); - - act(() => result.current.setShadowRoot(shadowRoot)); - - await waitForNextUpdate(); - - expect(result.current.shadowRoot?.innerHTML).toBe( - '

Shadow DOM Mock

', - ); - }); - - it('should set entityRef as lowercase', async () => { - const lowercaseEntityRef = { - kind: mockEntityMetadata.kind.toLocaleLowerCase(), - name: mockEntityMetadata.metadata.name.toLocaleLowerCase(), - namespace: mockEntityMetadata.metadata.namespace?.toLocaleLowerCase(), - }; - const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); - - expect(result.current.entityRef).toStrictEqual(lowercaseEntityRef); - }); + expect(result.current.title).toBe('test site title'); }); - describe('when legacyUseCaseSensitiveTripletPaths is true', () => { - const configApiMock = { - getOptionalBoolean: jest.fn().mockReturnValue(true), - }; - - const wrapper = ({ - entityRef = { - kind: mockEntityMetadata.kind, - name: mockEntityMetadata.metadata.name, - namespace: mockEntityMetadata.metadata.namespace!!, - }, - children, - }: { - entityRef?: CompoundEntityRef; - children: React.ReactNode; - }) => ( - - - - {children} - - - + it('should set subtitle', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, ); - it('entityRef is not modified', async () => { - const caseSensitiveEntityRef = { - kind: mockEntityMetadata.kind, - name: mockEntityMetadata.metadata.name, - namespace: mockEntityMetadata.metadata.namespace!!, - }; + expect(result.current.subtitle).toBe(''); - const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); + act(() => result.current.setSubtitle('test site subtitle')); - expect(result.current.entityRef).toStrictEqual(caseSensitiveEntityRef); - }); + await waitForNextUpdate(); + + expect(result.current.subtitle).toBe('test site subtitle'); + }); + + it('should set shadow root', async () => { + const { result, waitForNextUpdate } = renderHook( + () => useTechDocsReaderPage(), + { wrapper }, + ); + + // mock shadowroot + const shadowRoot = mockShadowRoot(); + + act(() => result.current.setShadowRoot(shadowRoot)); + + await waitForNextUpdate(); + + expect(result.current.shadowRoot?.innerHTML).toBe( + '

Shadow DOM Mock

', + ); + }); + + it('should set entityRef as lowercase when legacyUseCaseSensitiveTripletPaths is false', async () => { + const lowercaseEntityRef = { + kind: mockEntityMetadata.kind.toLocaleLowerCase(), + name: mockEntityMetadata.metadata.name.toLocaleLowerCase(), + namespace: mockEntityMetadata.metadata.namespace?.toLocaleLowerCase(), + }; + const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); + + expect(result.current.entityRef).toStrictEqual(lowercaseEntityRef); + }); + + it('entityRef is not modified when legacyUseCaseSensitiveTripletPaths is true', async () => { + configApiMock.getOptionalBoolean.mockReturnValueOnce(true); + const caseSensitiveEntityRef = { + kind: mockEntityMetadata.kind, + name: mockEntityMetadata.metadata.name, + namespace: mockEntityMetadata.metadata.namespace!!, + }; + + const { result } = renderHook(() => useTechDocsReaderPage(), { wrapper }); + + expect(result.current.entityRef).toStrictEqual(caseSensitiveEntityRef); }); }); From b5a965a086a8bba2c8c3ef104bb367d2ad4ebd5b Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 26 Jul 2022 15:25:27 +0100 Subject: [PATCH 9/9] Update okta-entity-providers.yaml Signed-off-by: Brian Fletcher --- microsite/data/plugins/okta-entity-providers.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsite/data/plugins/okta-entity-providers.yaml b/microsite/data/plugins/okta-entity-providers.yaml index 714a1e4b68..93e4473fde 100644 --- a/microsite/data/plugins/okta-entity-providers.yaml +++ b/microsite/data/plugins/okta-entity-providers.yaml @@ -5,5 +5,5 @@ authorUrl: https://roadie.io/?utm_source=backstage.io&utm_medium=marketplace&utm category: Identity description: Load users and groups from Okta into the Backstage catalog. documentation: https://github.com/RoadieHQ/roadie-backstage-plugins/tree/main/plugins/backend/catalog-backend-module-okta -iconUrl: https://roadie.io/images/logos/github.png +iconUrl: https://roadie.io/images/logos/okta.png npmPackageName: '@roadiehq/catalog-backend-module-okta'