fix error panels

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/code-coverage/src/api.ts

@@ -21,6 +21,7 @@ import {
   JsonCodeCoverage,
   JsonCoverageHistory,
 } from '@backstage/plugin-code-coverage-backend';
+import { ResponseError } from '@backstage/errors';
 
 export class FetchError extends Error {
   get name(): string {
@@ -66,7 +67,9 @@ export class CodeCoverageRestApi implements CodeCoverageApi {
     init?: RequestInit,
   ): Promise<T | string> {
     const resp = await fetch(`${this.url}${input}`, init);
-    if (!resp.ok) throw await FetchError.forResponse(resp);
+    if (!resp.ok) {
+      throw await ResponseError.fromResponse(resp);
+    }
     if (resp.headers.get('content-type')?.includes('application/json')) {
       return await resp.json();
     }

plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx

@@ -38,7 +38,7 @@ import { useAsync } from 'react-use';
 import { useApi } from '@backstage/core-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { codeCoverageApiRef } from '../../api';
-import { Progress } from '@backstage/core';
+import { Progress, ResponseErrorPanel } from '@backstage/core';
 import { Alert } from '@material-ui/lab';
 import TrendingDownIcon from '@material-ui/icons/TrendingDown';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
@@ -88,8 +88,9 @@ export const CoverageHistoryChart = () => {
 
   if (loadingHistory) {
     return <Progress />;
-  } else if (errorHistory) {
-    return <Alert severity="error">{errorHistory.message}</Alert>;
+  }
+  if (errorHistory) {
+    return <ResponseErrorPanel error={errorHistory} />;
   } else if (!valueHistory) {
     return <Alert severity="warning">No history found.</Alert>;
   }

plugins/code-coverage/src/components/FileExplorer/FileContent.tsx

@@ -23,12 +23,12 @@ import { Progress } from '@backstage/core';
 import { Alert } from '@material-ui/lab';
 import { makeStyles, Paper } from '@material-ui/core';
 import { highlightLines } from './Highlighter';
-import { FileCoverage } from './FileExplorer';
 import CoverageRow from './CoverageRow';
+import { FileEntry } from '@backstage/plugin-code-coverage-backend';
 
 type Props = {
   filename: string;
-  coverage: FileCoverage;
+  coverage: FileEntry;
 };
 
 const useStyles = makeStyles(theme => ({

plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx

@@ -16,7 +16,12 @@
 
 import { useApi } from '@backstage/core-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Progress, Table, TableColumn } from '@backstage/core';
+import {
+  Progress,
+  ResponseErrorPanel,
+  Table,
+  TableColumn,
+} from '@backstage/core';
 import {
   Box,
   Card,
@@ -28,15 +33,10 @@ import {
 import React, { Fragment, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
 import { codeCoverageApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
 import DescriptionIcon from '@material-ui/icons/Description';
 import { FileContent } from './FileContent';
-
-export type FileCoverage = {
-  filename: string;
-  branchHits: { [branch: number]: number };
-  lineHits: { [line: number]: number };
-};
+import { Alert } from '@material-ui/lab';
+import { FileEntry } from '@backstage/plugin-code-coverage-backend';
 
 type FileStructureObject = Record<string, any>;
 
@@ -101,7 +101,7 @@ const formatInitialData = (value: any) => {
     coverage: value.aggregate.line.percentage,
     missing: value.aggregate.line.missed,
     tracked: value.aggregate.line.available,
-    files: value.files.map((fc: FileCoverage) => {
+    files: value.files.map((fc: FileEntry) => {
       return {
         path: '',
         filename: fc.filename,
@@ -145,7 +145,12 @@ export const FileExplorer = () => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
+  }
+  if (!value) {
+    return (
+      <Alert severity="warning">No code coverage found for ${entity}</Alert>
+    );
   }
 
   const moveDownIntoPath = (path: string) => {
@@ -230,10 +235,14 @@ export const FileExplorer = () => {
 
   const pathArray = curPath.split('/');
   const lastPathElementIndex = pathArray.length - 1;
-  const fileCoverage = value.files.find((f: FileCoverage) =>
+  const fileCoverage = value.files.find((f: FileEntry) =>
     f.filename.endsWith(curFile),
   );
 
+  if (!fileCoverage) {
+    return null;
+  }
+
   return (
     <Box mt={8}>
       <Card>