Merge remote-tracking branch 'upstream/master' into feat/techdocs-reduce-rerender

plugins/techdocs/src/client.ts

@@ -17,7 +17,7 @@
 import { EntityName } from '@backstage/catalog-model';
 import { Config } from '@backstage/config';
 import { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
-import { NotFoundError } from '@backstage/errors';
+import { NotFoundError, ResponseError } from '@backstage/errors';
 import EventSource from 'eventsource';
 import { SyncResult, TechDocsApi, TechDocsStorageApi } from './api';
 import { TechDocsEntityMetadata, TechDocsMetadata } from './types';
@@ -72,9 +72,12 @@ export class TechDocsClient implements TechDocsApi {
     const request = await fetch(`${requestUrl}`, {
       headers: token ? { Authorization: `Bearer ${token}` } : {},
     });
-    const res = await request.json();
 
-    return res;
+    if (!request.ok) {
+      throw await ResponseError.fromResponse(request);
+    }
+
+    return await request.json();
   }
 
   /**
@@ -97,9 +100,12 @@ export class TechDocsClient implements TechDocsApi {
     const request = await fetch(`${requestUrl}`, {
       headers: token ? { Authorization: `Bearer ${token}` } : {},
     });
-    const res = await request.json();
 
-    return res;
+    if (!request.ok) {
+      throw await ResponseError.fromResponse(request);
+    }
+
+    return await request.json();
   }
 }
 

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;
+};