Show title in WarningPanel depending on the error returned by the Jenkins API

Signed-off-by: Alexander Kaserbacher <alex.kaserbacher@icloud.com>

plugins/jenkins/src/components/Cards/Cards.tsx

@@ -24,7 +24,7 @@ import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { DateTime, Duration } from 'luxon';
 import React from 'react';
 import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
-import { useBuilds } from '../useBuilds';
+import { ErrorType, useBuilds } from '../useBuilds';
 import { useProjectSlugFromEntity } from '../useProjectSlugFromEntity';
 
 const useStyles = makeStyles<Theme>({
@@ -76,6 +76,23 @@ const WidgetContent = ({
   );
 };
 
+const JenkinsApiErrorPanel = ({
+  message,
+  errorType,
+}: {
+  message: string;
+  errorType: ErrorType;
+}) => {
+  let title = undefined;
+  if (errorType === ErrorType.CONNECTION_ERROR) {
+    title = "Can't connect to Jenkins";
+  } else if (errorType === ErrorType.NOT_FOUND) {
+    title = "Can't find Jenkins project";
+  }
+
+  return <WarningPanel severity="error" title={title} message={message} />;
+};
+
 export const LatestRunCard = ({
   branch = 'master',
   variant,
@@ -95,7 +112,10 @@ export const LatestRunCard = ({
           latestRun={latestRun}
         />
       ) : (
-        <WarningPanel severity="error" message={error.message} />
+        <JenkinsApiErrorPanel
+          message={error.message}
+          errorType={error.errorType}
+        />
       )}
     </InfoCard>
   );

plugins/jenkins/src/components/useBuilds.ts

@@ -18,6 +18,11 @@ import { useState } from 'react';
 import { useAsyncRetry } from 'react-use';
 import { jenkinsApiRef } from '../api';
 
+export enum ErrorType {
+  CONNECTION_ERROR,
+  NOT_FOUND,
+}
+
 export function useBuilds(projectName: string, branch?: string) {
   const api = useApi(jenkinsApiRef);
   const errorApi = useApi(errorApiRef);
@@ -25,7 +30,10 @@ 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 [error, setError] = useState<{
+    message: string;
+    errorType: ErrorType;
+  }>();
 
   const restartBuild = async (buildName: string) => {
     try {
@@ -49,7 +57,10 @@ export function useBuilds(projectName: string, branch?: string) {
 
       return build || [];
     } catch (e) {
-      setError(e);
+      const errorType = e.notFound
+        ? ErrorType.NOT_FOUND
+        : ErrorType.CONNECTION_ERROR;
+      setError({ message: e.message, errorType });
       throw e;
     }
   }, [api, errorApi, projectName, branch]);