Improve display of errors

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