badges: refactoring after review from @freben.

Signed-off-by: Andreas Stenius <andreas.stenius@svenskaspel.se>

plugins/badges/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.3",
     "@backstage/core": "^0.7.1",
+    "@backstage/errors": "^0.1.1",
     "@backstage/plugin-catalog-react": "^0.1.1",
     "@backstage/theme": "^0.2.4",
     "@material-ui/core": "^4.11.0",

plugins/badges/src/api/BadgesClient.ts

@@ -16,6 +16,7 @@
 
 import { generatePath } from 'react-router';
 import { DiscoveryApi } from '@backstage/core';
+import { ResponseError } from '@backstage/errors';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { entityRoute } from '@backstage/plugin-catalog-react';
 import { BadgesApi, BadgeSpec } from './types';
@@ -29,11 +30,13 @@ export class BadgesClient implements BadgesApi {
 
   public async getEntityBadgeSpecs(entity: Entity): Promise<BadgeSpec[]> {
     const entityBadgeSpecsUrl = await this.getEntityBadgeSpecsUrl(entity);
-    const specs = (await (
-      await fetch(entityBadgeSpecsUrl)
-    ).json()) as BadgeSpec[];
+    const response = await fetch(entityBadgeSpecsUrl);
 
-    return specs;
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+
+    return await response.json();
   }
 
   private async getEntityBadgeSpecsUrl(entity: Entity): Promise<string> {

plugins/badges/src/components/EntityBadgesDialog.tsx

@@ -15,7 +15,12 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { CodeSnippet, Progress, useApi } from '@backstage/core';
+import {
+  CodeSnippet,
+  Progress,
+  ResponseErrorPanel,
+  useApi,
+} from '@backstage/core';
 import {
   Button,
   Dialog,
@@ -28,7 +33,6 @@ import {
   useTheme,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { badgesApiRef } from '../api';
@@ -80,17 +84,11 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => {
 
   return (
     <Dialog fullScreen={fullScreen} open={open} onClose={onClose}>
-      <DialogTitle id="badges-dialog-title">Entity Badges</DialogTitle>
+      <DialogTitle>Entity Badges</DialogTitle>
 
       <DialogContent>
-        {loading ? <Progress /> : null}
-
-        {error ? (
-          <Alert severity="error" style={{ wordBreak: 'break-word' }}>
-            {error.toString()}
-          </Alert>
-        ) : null}
-
+        {loading && <Progress />}
+        {error && <ResponseErrorPanel error={error} />}
         {content}
       </DialogContent>