refactor: apply second round of review suggestions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs/src/alpha/hooks/useTechdocsReaderIconLinkProps.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 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 DocsIcon from '@material-ui/icons/Description';
+
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+import {
+  TECHDOCS_ANNOTATION,
+  TECHDOCS_EXTERNAL_ANNOTATION,
+} from '@backstage/plugin-techdocs-common';
+import { buildTechDocsURL } from '@backstage/plugin-techdocs-react';
+
+import { useEntity } from '@backstage/plugin-catalog-react';
+
+import { techdocsTranslationRef } from '../../translation';
+import { rootDocsRouteRef } from '../../routes';
+
+// Note: If you update this hook, please also update the "useTechdocsReaderIconLinkProps" hook
+// in the "plugins/catalog/src/components/AboutCard/AboutCard.tsx" file
+/** @alpha */
+export function useTechdocsReaderIconLinkProps() {
+  const { entity } = useEntity();
+  const viewTechdocLink = useRouteRef(rootDocsRouteRef);
+  const { t } = useTranslationRef(techdocsTranslationRef);
+
+  return {
+    label: t('aboutCard.viewTechdocs'),
+    disabled:
+      !(
+        entity.metadata.annotations?.[TECHDOCS_ANNOTATION] ||
+        entity.metadata.annotations?.[TECHDOCS_EXTERNAL_ANNOTATION]
+      ) || !viewTechdocLink,
+    icon: <DocsIcon />,
+    href: buildTechDocsURL(entity, viewTechdocLink),
+  };
+}

plugins/techdocs/src/alpha/index.tsx

@@ -41,38 +41,27 @@ import {
 } from '@backstage/plugin-catalog-react/alpha';
 import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';
 import { AddonBlueprint } from '@backstage/plugin-techdocs-react/alpha';
-import { TechDocsClient, TechDocsStorageClient } from './client';
+import { TechDocsClient, TechDocsStorageClient } from '../client';
 import {
   rootCatalogDocsRouteRef,
   rootDocsRouteRef,
   rootRouteRef,
-  viewTechDocRouteRef,
-} from './routes';
-import { TechDocsReaderLayout } from './reader';
-import {
-  attachTechDocsAddonComponentData,
-  useTechdocsReaderIconLinkProps,
-} from '@backstage/plugin-techdocs-react/alpha';
+} from '../routes';
+import { TechDocsReaderLayout } from '../reader';
+import { attachTechDocsAddonComponentData } from '@backstage/plugin-techdocs-react/alpha';
 import {
   TechDocsAddons,
   techdocsApiRef,
   techdocsStorageApiRef,
 } from '@backstage/plugin-techdocs-react';
 
-import { techdocsTranslationRef } from './translation';
-
-export { techdocsTranslationRef } from './translation';
+import { useTechdocsReaderIconLinkProps } from './hooks/useTechdocsReaderIconLinkProps';
 
 /** @alpha */
 const techdocsEntityIconLink = EntityIconLinkBlueprint.make({
   name: 'read-docs',
   params: {
-    useProps: () => {
-      return useTechdocsReaderIconLinkProps({
-        translationRef: techdocsTranslationRef,
-        externalRouteRef: viewTechDocRouteRef,
-      });
-    },
+    useProps: useTechdocsReaderIconLinkProps,
   },
 });
 
@@ -133,7 +122,7 @@ export const techDocsSearchResultListItemExtension =
         predicate: result => result.type === 'techdocs',
         component: async () => {
           const { TechDocsSearchResultListItem } = await import(
-            './search/components/TechDocsSearchResultListItem'
+            '../search/components/TechDocsSearchResultListItem'
           );
           return props =>
             compatWrapper(
@@ -154,7 +143,7 @@ const techDocsPage = PageBlueprint.make({
     defaultPath: '/docs',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('./home/components/TechDocsIndexPage').then(m =>
+      import('../home/components/TechDocsIndexPage').then(m =>
         compatWrapper(<m.TechDocsIndexPage />),
       ),
   },
@@ -182,7 +171,7 @@ const techDocsReaderPage = PageBlueprint.makeWithOverrides({
       defaultPath: '/docs/:namespace/:kind/:name',
       routeRef: convertLegacyRouteRef(rootDocsRouteRef),
       loader: async () =>
-        await import('./Router').then(({ TechDocsReaderRouter }) => {
+        await import('../Router').then(({ TechDocsReaderRouter }) => {
           return compatWrapper(
             <TechDocsReaderRouter>
               <TechDocsReaderLayout />
@@ -217,7 +206,7 @@ const techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({
         defaultTitle: 'TechDocs',
         routeRef: convertLegacyRouteRef(rootCatalogDocsRouteRef),
         loader: () =>
-          import('./Router').then(({ EmbeddedDocsRouter }) => {
+          import('../Router').then(({ EmbeddedDocsRouter }) => {
             const addons = context.inputs.addons.map(output => {
               const options = output.get(AddonBlueprint.dataRefs.addon);
               const Addon = options.component;
@@ -260,7 +249,7 @@ const techDocsNavItem = NavItemBlueprint.make({
 /** @alpha */
 export default createFrontendPlugin({
   pluginId: 'techdocs',
-  info: { packageJson: () => import('../package.json') },
+  info: { packageJson: () => import('../../package.json') },
   extensions: [
     techDocsClientApi,
     techDocsStorageApi,
@@ -277,7 +266,4 @@ export default createFrontendPlugin({
     docRoot: rootDocsRouteRef,
     entityContent: rootCatalogDocsRouteRef,
   }),
-  externalRoutes: convertLegacyRouteRefs({
-    viewTechDoc: viewTechDocRouteRef,
-  }),
 });

plugins/techdocs/src/routes.ts

@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  createRouteRef,
-  createExternalRouteRef,
-} from '@backstage/core-plugin-api';
+import { createRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
   id: 'techdocs:index-page',
@@ -31,10 +28,3 @@ export const rootDocsRouteRef = createRouteRef({
 export const rootCatalogDocsRouteRef = createRouteRef({
   id: 'techdocs:catalog-reader-view',
 });
-
-export const viewTechDocRouteRef = createExternalRouteRef({
-  id: 'view-techdoc',
-  optional: true,
-  params: ['namespace', 'kind', 'name'],
-  defaultTarget: 'techdocs.docRoot',
-});