Merge pull request #4370 from adamdmharvey/improve-errors

chore(catalog, api-docs, techdocs, lighthouse): Improve display of unable to access data errors

.changeset/hot-pants-taste.md

@@ -0,0 +1,8 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Improve display of error messages

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx

@@ -61,7 +61,7 @@ describe('ApiCatalogTable component', () => {
       ),
     );
     const errorMessage = await rendered.findByText(
-      /Error encountered while fetching catalog entities./,
+      /Could not fetch catalog entities./,
     );
     expect(errorMessage).toBeInTheDocument();
   });

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx

@@ -22,11 +22,13 @@ import {
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
 import {
+  CodeSnippet,
   Table,
   TableColumn,
   TableFilter,
   TableState,
   useQueryParamState,
+  WarningPanel,
 } from '@backstage/core';
 import {
   EntityRefLink,
@@ -35,7 +37,6 @@ import {
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { Chip } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
 
@@ -151,11 +152,9 @@ export const ApiExplorerTable = ({
 
   if (error) {
     return (
-      <div>
-        <Alert severity="error">
-          Error encountered while fetching catalog entities. {error.toString()}
-        </Alert>
-      </div>
+      <WarningPanel severity="error" title="Could not fetch catalog entities.">
+        <CodeSnippet language="text" text={error.toString()} />
+      </WarningPanel>
     );
   }
 

plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx

@@ -50,7 +50,7 @@ describe('CatalogTable component', () => {
       ),
     );
     const errorMessage = await rendered.findByText(
-      /Error encountered while fetching catalog entities./,
+      /Could not fetch catalog entities./,
     );
     expect(errorMessage).toBeInTheDocument();
   });

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -19,7 +19,13 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
-import { Table, TableColumn, TableProps } from '@backstage/core';
+import {
+  CodeSnippet,
+  Table,
+  TableColumn,
+  TableProps,
+  WarningPanel,
+} from '@backstage/core';
 import {
   EntityRefLink,
   EntityRefLinks,
@@ -29,7 +35,6 @@ import {
 import { Chip } from '@material-ui/core';
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
-import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntities';
@@ -128,9 +133,12 @@ export const CatalogTable = ({
   if (error) {
     return (
       <div>
-        <Alert severity="error">
-          Error encountered while fetching catalog entities. {error.toString()}
-        </Alert>
+        <WarningPanel
+          severity="error"
+          title="Could not fetch catalog entities."
+        >
+          <CodeSnippet language="text" text={error.toString()} />
+        </WarningPanel>
       </div>
     );
   }

plugins/lighthouse/src/components/AuditList/index.test.tsx

@@ -162,7 +162,7 @@ describe('AuditList', () => {
           </ApiProvider>,
         ),
       );
-      const element = await rendered.findByTestId('error-message');
+      const element = await rendered.findByText(/Could not load audit list./);
       expect(element).toBeInTheDocument();
     });
   });

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -17,7 +17,6 @@ import React, { useState, useMemo, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
 import { useNavigate } from 'react-router-dom';
 import { Grid, Button } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import Pagination from '@material-ui/lab/Pagination';
 import {
   InfoCard,
@@ -28,6 +27,7 @@ import {
   HeaderLabel,
   Progress,
   useApi,
+  WarningPanel,
 } from '@backstage/core';
 
 import { lighthouseApiRef } from '../../api';
@@ -85,9 +85,9 @@ const AuditList = () => {
     content = <Progress />;
   } else if (error) {
     content = (
-      <Alert severity="error" data-testid="error-message">
+      <WarningPanel severity="error" title="Could not load audit list.">
         {error.message}
-      </Alert>
+      </WarningPanel>
     );
   }
 

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

@@ -15,12 +15,14 @@
  */
 
 import {
+  CodeSnippet,
   Content,
   Header,
   ItemCard,
   Page,
   Progress,
   useApi,
+  WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
@@ -61,7 +63,12 @@ export const TechDocsHome = () => {
           subtitle="Documentation available in Backstage"
         />
         <Content>
-          <p>{error.message}</p>
+          <WarningPanel
+            severity="error"
+            title="Could not load available documentation."
+          >
+            <CodeSnippet language="text" text={error.toString()} />
+          </WarningPanel>
         </Content>
       </Page>
     );