From 93068f04e7ce4505b7b88d765a58eac1ba29979f Mon Sep 17 00:00:00 2001
From: Alexander Kaserbacher <alex.kaserbacher@icloud.com>
Date: Sun, 16 May 2021 11:59:48 +0200
Subject: [PATCH] capture API errors in Jenkins card and show WarningPanel

Signed-off-by: Alexander Kaserbacher <alex.kaserbacher@icloud.com>
---
 plugins/jenkins/src/components/Cards/Cards.tsx | 13 +++++++++++--
 plugins/jenkins/src/components/useBuilds.ts    |  3 +++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/plugins/jenkins/src/components/Cards/Cards.tsx b/plugins/jenkins/src/components/Cards/Cards.tsx
index f19ed608ce..31df25820e 100644
--- a/plugins/jenkins/src/components/Cards/Cards.tsx
+++ b/plugins/jenkins/src/components/Cards/Cards.tsx
@@ -17,6 +17,7 @@ import {
   InfoCard,
   InfoCardVariants,
   StructuredMetadataTable,
+  WarningPanel,
 } from '@backstage/core';
 import { LinearProgress, Link, makeStyles, Theme } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
@@ -83,11 +84,19 @@ export const LatestRunCard = ({
   variant?: InfoCardVariants;
 }) => {
   const projectName = useProjectSlugFromEntity();
-  const [{ builds, loading }] = useBuilds(projectName, branch);
+  const [{ builds, loading, error }] = useBuilds(projectName, branch);
   const latestRun = builds ?? {};
   return (
     <InfoCard title={`Latest ${branch} build`} variant={variant}>
-      <WidgetContent loading={loading} branch={branch} latestRun={latestRun} />
+      {!error ? (
+        <WidgetContent
+          loading={loading}
+          branch={branch}
+          latestRun={latestRun}
+        />
+      ) : (
+        <WarningPanel severity="error" message={error.message} />
+      )}
     </InfoCard>
   );
 };
diff --git a/plugins/jenkins/src/components/useBuilds.ts b/plugins/jenkins/src/components/useBuilds.ts
index e818d3f5a6..f119da0838 100644
--- a/plugins/jenkins/src/components/useBuilds.ts
+++ b/plugins/jenkins/src/components/useBuilds.ts
@@ -25,6 +25,7 @@ export function useBuilds(projectName: string, branch?: string) {
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(5);
+  const [error, setError] = useState<Error>();
 
   const restartBuild = async (buildName: string) => {
     try {
@@ -48,6 +49,7 @@ export function useBuilds(projectName: string, branch?: string) {
 
       return build || [];
     } catch (e) {
+      setError(e);
       throw e;
     }
   }, [api, errorApi, projectName, branch]);
@@ -60,6 +62,7 @@ export function useBuilds(projectName: string, branch?: string) {
       builds,
       projectName,
       total,
+      error,
     },
     {
       builds,