Improve display of errors

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

@@ -27,6 +27,7 @@ import {
   TableFilter,
   TableState,
   useQueryParamState,
+  WarningPanel,
 } from '@backstage/core';
 import {
   EntityRefLink,
@@ -35,7 +36,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 +151,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.">
+        {error.toString()}
+      </WarningPanel>
     );
   }
 

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

@@ -19,7 +19,7 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
-import { Table, TableColumn, TableProps } from '@backstage/core';
+import { Table, TableColumn, TableProps, WarningPanel } from '@backstage/core';
 import {
   EntityRefLink,
   EntityRefLinks,
@@ -29,7 +29,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 +127,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."
+        >
+          {error.toString()}
+        </WarningPanel>
       </div>
     );
   }

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

@@ -21,6 +21,7 @@ import {
   Page,
   Progress,
   useApi,
+  WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
@@ -62,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"
+          >
+            {error.message}
+          </WarningPanel>
         </Content>
       </Page>
     );