From 29d6cf0147a78a224afc0d5e3beffcfbeca33e17 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 14 Jul 2022 07:34:41 -0500 Subject: [PATCH] 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"