From 5479e4eef0d82efbc348a901d17a6c50f6a09aa3 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Tue, 2 Feb 2021 23:27:20 -0500
Subject: [PATCH] Improve display of errors

---
 .../components/ApiExplorerTable/ApiExplorerTable.tsx | 10 ++++------
 .../src/components/CatalogTable/CatalogTable.tsx     | 12 +++++++-----
 .../lighthouse/src/components/AuditList/index.tsx    |  6 +++---
 .../techdocs/src/reader/components/TechDocsHome.tsx  |  8 +++++++-
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
index 101c28332a..743366bdcd 100644
--- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+++ b/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>
     );
   }
 
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 30a19145f2..97c7ccfa18 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/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>
     );
   }
diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx
index ce0fcdb46e..8d7f769909 100644
--- a/plugins/lighthouse/src/components/AuditList/index.tsx
+++ b/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>
     );
   }
 
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
index 2d8b5c7dcc..f2317f0b43 100644
--- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx
+++ b/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>
     );