[TechDocs] Set entity triplets to lowercase if config is set on docs tab at entity page (#8394)

* Fixes #8381, set entity triplets to lowercase if config is set on docs tab at entity page

Co-authored-by: Mehmet Mallı <mehmet.malli@trendyol.com>
Signed-off-by: mertcbilgic <mert.bilgic@trendyol.com>

* Changeset added

Co-authored-by: Mehmet Mallı <mehmet.malli@trendyol.com>
Signed-off-by: mertcbilgic <mert.bilgic@trendyol.com>

* fixes due to review

Co-authored-by: Mehmet Mallı <mehmet.malli@trendyol.com>
Co-authored-by: Güven Altunsoy <guven.altunsoy@outlook.com>
Co-authored-by: Nilgün Canbaz <nilgun.canbaz@trendyol.com>
Co-authored-by: Burcu Karagöz <burcukaragoz1515@gmail.com>
Co-authored-by: Murat Sökücü <murat.sokucu@trendyol.com>
Signed-off-by: mertcbilgic <mert.bilgic@trendyol.com>

Co-authored-by: Mehmet Mallı <mehmet.malli@trendyol.com>
Co-authored-by: Güven Altunsoy <guven.altunsoy@outlook.com>
Co-authored-by: Nilgün Canbaz <nilgun.canbaz@trendyol.com>
Co-authored-by: Burcu Karagöz <burcukaragoz1515@gmail.com>
Co-authored-by: Murat Sökücü <murat.sokucu@trendyol.com>

.changeset/techdocs-blue-vans-care.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+The problem of lowercase entity triplets which causes docs to not load on entity page is fixed.

plugins/techdocs/src/EntityPageDocs.tsx

@@ -17,15 +17,18 @@
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { Reader } from './reader';
+import { toLowerMaybe } from './helpers';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 export const EntityPageDocs = ({ entity }: { entity: Entity }) => {
+  const config = useApi(configApiRef);
   return (
     <Reader
       withSearch={false}
       entityRef={{
-        kind: entity.kind,
-        namespace: entity.metadata.namespace ?? 'default',
-        name: entity.metadata.name,
+        namespace: toLowerMaybe(entity.metadata.namespace ?? 'default', config),
+        kind: toLowerMaybe(entity.kind, config),
+        name: toLowerMaybe(entity.metadata.name, config),
       }}
     />
   );

plugins/techdocs/src/helpers.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021 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';
+
+// Lower-case entity triplets by default, but allow override.
+export function toLowerMaybe(str: string, config: Config) {
+  return config.getOptionalBoolean(
+    'techdocs.legacyUseCaseSensitiveTripletPaths',
+  )
+    ? str
+    : str.toLocaleLowerCase('en-US');
+}

plugins/techdocs/src/home/components/DocsCardGrid.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 
 import { Entity } from '@backstage/catalog-model';
-import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api';
 import { Card, CardActions, CardContent, CardMedia } from '@material-ui/core';
 import { rootDocsRouteRef } from '../../routes';
 
@@ -26,6 +26,7 @@ import {
   ItemCardGrid,
   ItemCardHeader,
 } from '@backstage/core-components';
+import { toLowerMaybe } from '../../helpers';
 
 export const DocsCardGrid = ({
   entities,
@@ -33,14 +34,7 @@ export const DocsCardGrid = ({
   entities: Entity[] | undefined;
 }) => {
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-
-  // Lower-case entity triplets by default, but allow override.
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean(
-    'techdocs.legacyUseCaseSensitiveTripletPaths',
-  )
-    ? (str: string) => str
-    : (str: string) => str.toLocaleLowerCase('en-US');
-
+  const config = useApi(configApiRef);
   if (!entities) return null;
   return (
     <ItemCardGrid data-testid="docs-explore">
@@ -59,9 +53,10 @@ export const DocsCardGrid = ({
                   to={getRouteToReaderPageFor({
                     namespace: toLowerMaybe(
                       entity.metadata.namespace ?? 'default',
+                      config,
                     ),
-                    kind: toLowerMaybe(entity.kind),
-                    name: toLowerMaybe(entity.metadata.name),
+                    kind: toLowerMaybe(entity.kind, config),
+                    name: toLowerMaybe(entity.metadata.name, config),
                   })}
                   color="primary"
                   data-testid="read_docs"

plugins/techdocs/src/home/components/DocsTable.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { useCopyToClipboard } from 'react-use';
 
-import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { useRouteRef, useApi, configApiRef } from '@backstage/core-plugin-api';
 import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
 import {
   formatEntityRefTitle,
@@ -34,6 +34,7 @@ import {
 import * as actionFactories from './actions';
 import * as columnFactories from './columns';
 import { DocsTableRow } from './types';
+import { toLowerMaybe } from '../../helpers';
 
 export const DocsTable = ({
   entities,
@@ -50,26 +51,21 @@ export const DocsTable = ({
 }) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-
-  // Lower-case entity triplets by default, but allow override.
-  const toLowerMaybe = useApi(configApiRef).getOptionalBoolean(
-    'techdocs.legacyUseCaseSensitiveTripletPaths',
-  )
-    ? (str: string) => str
-    : (str: string) => str.toLocaleLowerCase('en-US');
-
+  const config = useApi(configApiRef);
   if (!entities) return null;
 
   const documents = entities.map(entity => {
     const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
-
     return {
       entity,
       resolved: {
         docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe(entity.metadata.namespace ?? 'default'),
-          kind: toLowerMaybe(entity.kind),
-          name: toLowerMaybe(entity.metadata.name),
+          namespace: toLowerMaybe(
+            entity.metadata.namespace ?? 'default',
+            config,
+          ),
+          kind: toLowerMaybe(entity.kind, config),
+          name: toLowerMaybe(entity.metadata.name, config),
         }),
         ownedByRelations,
         ownedByRelationsTitle: ownedByRelations