Refactor <TechDocsPageHeader/> to not use AsyncState as inputs

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>

plugins/techdocs/api-report.md

@@ -13,7 +13,7 @@ import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import { EntityName } from '@backstage/catalog-model';
 import { IdentityApi } from '@backstage/core-plugin-api';
-import { Location as Location_2 } from '@backstage/catalog-model';
+import { LocationSpec } from '@backstage/catalog-model';
 import { RouteRef } from '@backstage/core-plugin-api';
 
 // Warning: (ae-missing-release-tag) "DocsCardGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/techdocs/src/reader/components/TechDocsPage.tsx

@@ -30,7 +30,7 @@ export const TechDocsPage = () => {
 
   const techdocsApi = useApi(techdocsApiRef);
 
-  const techdocsMetadataRequest = useAsync(() => {
+  const { value: techdocsMetadataValue } = useAsync(() => {
     if (documentReady) {
       return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
     }
@@ -38,7 +38,7 @@ export const TechDocsPage = () => {
     return Promise.resolve(undefined);
   }, [kind, namespace, name, techdocsApi, documentReady]);
 
-  const entityMetadataRequest = useAsync(() => {
+  const { value: entityMetadataValue } = useAsync(() => {
     return techdocsApi.getEntityMetadata({ kind, namespace, name });
   }, [kind, namespace, name, techdocsApi]);
 
@@ -49,10 +49,8 @@ export const TechDocsPage = () => {
   return (
     <Page themeId="documentation">
       <TechDocsPageHeader
-        metadataRequest={{
-          techdocs: techdocsMetadataRequest,
-          entity: entityMetadataRequest,
-        }}
+        techDocsMetadata={techdocsMetadataValue}
+        entityMetadata={entityMetadataValue}
         entityId={{
           kind,
           namespace,

plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx

@@ -30,26 +30,23 @@ describe('<TechDocsPageHeader />', () => {
             name: 'test-name',
             namespace: 'test-namespace',
           }}
-          metadataRequest={{
-            entity: {
-              loading: false,
-              value: {
-                locationMetadata: {
-                  type: 'github',
-                  target: 'https://example.com/',
-                },
-                spec: {
-                  owner: 'test',
-                },
-              },
+          entityMetadata={{
+            locationMetadata: {
+              type: 'github',
+              target: 'https://example.com/',
             },
-            techdocs: {
-              loading: false,
-              value: {
-                site_name: 'test-site-name',
-                site_description: 'test-site-desc',
-              },
+            apiVersion: 'v1',
+            kind: 'Component',
+            metadata: {
+              name: 'test',
             },
+            spec: {
+              owner: 'test',
+            },
+          }}
+          techDocsMetadata={{
+            site_name: 'test-site-name',
+            site_description: 'test-site-desc',
           }}
         />,
         {
@@ -75,14 +72,6 @@ describe('<TechDocsPageHeader />', () => {
             name: 'test-name',
             namespace: 'test-namespace',
           }}
-          metadataRequest={{
-            entity: {
-              loading: false,
-            },
-            techdocs: {
-              loading: false,
-            },
-          }}
         />,
         {
           mountedRoutes: {
@@ -105,17 +94,9 @@ describe('<TechDocsPageHeader />', () => {
             name: 'test-name',
             namespace: 'test-namespace',
           }}
-          metadataRequest={{
-            entity: {
-              loading: false,
-            },
-            techdocs: {
-              loading: false,
-              value: {
-                site_name: 'test-site-name',
-                site_description: 'test-site-desc',
-              },
-            },
+          techDocsMetadata={{
+            site_name: 'test-site-name',
+            site_description: 'test-site-desc',
           }}
         />,
         {

plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx

@@ -15,6 +15,8 @@
  */
 
 import { EntityName, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { Header, HeaderLabel } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 import {
   EntityRefLink,
   EntityRefLinks,
@@ -22,45 +24,30 @@ import {
 } from '@backstage/plugin-catalog-react';
 import CodeIcon from '@material-ui/icons/Code';
 import React from 'react';
-import { AsyncState } from 'react-use/lib/useAsync';
 import { rootRouteRef } from '../../routes';
-import { TechDocsMetadata } from '../../types';
-
-import { Header, HeaderLabel } from '@backstage/core-components';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { TechDocsEntityMetadata, TechDocsMetadata } from '../../types';
 
 type TechDocsPageHeaderProps = {
   entityId: EntityName;
-  metadataRequest: {
-    entity: AsyncState<any>;
-    techdocs: AsyncState<TechDocsMetadata>;
-  };
+  entityMetadata?: TechDocsEntityMetadata;
+  techDocsMetadata?: TechDocsMetadata;
 };
 
 export const TechDocsPageHeader = ({
   entityId,
-  metadataRequest,
+  entityMetadata,
+  techDocsMetadata,
 }: TechDocsPageHeaderProps) => {
-  const {
-    techdocs: techdocsMetadata,
-    entity: entityMetadata,
-  } = metadataRequest;
-
-  const { value: techdocsMetadataValues } = techdocsMetadata;
-  const { value: entityMetadataValues } = entityMetadata;
-
   const { name } = entityId;
 
   const { site_name: siteName, site_description: siteDescription } =
-    techdocsMetadataValues || {};
+    techDocsMetadata || {};
 
-  const {
-    locationMetadata,
-    spec: { lifecycle },
-  } = entityMetadataValues || { spec: {} };
+  const { locationMetadata, spec } = entityMetadata || {};
+  const lifecycle = spec?.lifecycle;
 
-  const ownedByRelations = entityMetadataValues
-    ? getEntityRelations(entityMetadataValues, RELATION_OWNED_BY)
+  const ownedByRelations = entityMetadata
+    ? getEntityRelations(entityMetadata, RELATION_OWNED_BY)
     : [];
 
   const docsRootLink = useRouteRef(rootRouteRef)();

plugins/techdocs/src/types.ts

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { Entity, Location } from '@backstage/catalog-model';
+import { Entity, LocationSpec } from '@backstage/catalog-model';
 
 export type TechDocsMetadata = {
   site_name: string;
   site_description: string;
 };
 
-export type TechDocsEntityMetadata = Entity & { locationMetadata?: Location };
+export type TechDocsEntityMetadata = Entity & {
+  locationMetadata?: LocationSpec;
+};