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