feature: add crumbIssuer option to jenkins (optional) configuration, improve the UI to show a notification after executing the action: re-build

Signed-off-by: Hasan Ozdemir <21654050+nodify-at@users.noreply.github.com>

plugins/jenkins/src/api/JenkinsApi.ts

@@ -19,7 +19,7 @@ import {
   DiscoveryApi,
   IdentityApi,
 } from '@backstage/core-plugin-api';
-import { EntityName, EntityRef } from '@backstage/catalog-model';
+import type { EntityName, EntityRef } from '@backstage/catalog-model';
 
 export const jenkinsApiRef = createApiRef<JenkinsApi>({
   id: 'plugin.jenkins.service2',
@@ -66,7 +66,7 @@ export interface Project {
   inQueue: string;
   // added by us
   status: string; // == inQueue ? 'queued' : lastBuild.building ? 'running' : lastBuild.result,
-  onRestartClick: () => Promise<void>; // TODO rename to handle.* ? also, should this be on lastBuild?
+  onRestartClick: () => Promise<Response>; // TODO rename to handle.* ? also, should this be on lastBuild?
 }
 
 export interface JenkinsApi {
@@ -106,7 +106,7 @@ export interface JenkinsApi {
     entity: EntityName;
     jobFullName: string;
     buildNumber: string;
-  }): Promise<void>;
+  }): Promise<Response>;
 }
 
 export class JenkinsClient implements JenkinsApi {
@@ -140,7 +140,7 @@ export class JenkinsClient implements JenkinsApi {
       url.searchParams.append('branch', filter.branch);
     }
 
-    const idToken = await this.identityApi.getIdToken();
+    const idToken = await this.getToken();
     const response = await fetch(url.href, {
       method: 'GET',
       headers: {
@@ -151,8 +151,8 @@ export class JenkinsClient implements JenkinsApi {
     return (
       (await response.json()).projects?.map((p: Project) => ({
         ...p,
-        onRestartClick: async () => {
-          await this.retry({
+        onRestartClick: () => {
+          return this.retry({
             entity,
             jobFullName: p.fullName,
             buildNumber: String(p.lastBuild.number),
@@ -179,7 +179,7 @@ export class JenkinsClient implements JenkinsApi {
       jobFullName,
     )}/${encodeURIComponent(buildNumber)}`;
 
-    const idToken = await this.identityApi.getIdToken();
+    const idToken = await this.getToken();
     const response = await fetch(url, {
       method: 'GET',
       headers: {
@@ -198,7 +198,7 @@ export class JenkinsClient implements JenkinsApi {
     entity: EntityName;
     jobFullName: string;
     buildNumber: string;
-  }): Promise<void> {
+  }): Promise<Response> {
     const url = `${await this.discoveryApi.getBaseUrl(
       'jenkins',
     )}/v1/entity/${encodeURIComponent(entity.namespace)}/${encodeURIComponent(
@@ -207,12 +207,17 @@ export class JenkinsClient implements JenkinsApi {
       jobFullName,
     )}/${encodeURIComponent(buildNumber)}:rebuild`;
 
-    const idToken = await this.identityApi.getIdToken();
-    await fetch(url, {
+    const idToken = await this.getToken();
+    return fetch(url, {
       method: 'POST',
       headers: {
         ...(idToken && { Authorization: `Bearer ${idToken}` }),
       },
     });
   }
+
+  private async getToken() {
+    const { token } = await this.identityApi.getCredentials();
+    return token;
+  }
 }

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -13,17 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Box, IconButton, Link, Typography, Tooltip } from '@material-ui/core';
+import React, { useState } from 'react';
+import { Box, IconButton, Link, Tooltip, Typography } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
 import { Link as RouterLink } from 'react-router-dom';
 import { JenkinsRunStatus } from '../Status';
 import { useBuilds } from '../../../useBuilds';
 import { buildRouteRef } from '../../../../plugin';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Progress, Table, TableColumn } from '@backstage/core-components';
 import { Project } from '../../../../api/JenkinsApi';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 
 const FailCount = ({ count }: { count: number }): JSX.Element | null => {
   if (count !== 0) {
@@ -173,13 +173,51 @@ const generatedColumns: TableColumn[] = [
   {
     title: 'Actions',
     sorting: false,
-    render: (row: Partial<Project>) => (
-      <Tooltip title="Rerun build">
-        <IconButton onClick={row.onRestartClick}>
-          <RetryIcon />
-        </IconButton>
-      </Tooltip>
-    ),
+    render: (row: Partial<Project>) => {
+      const ActionWrapper = () => {
+        const [isLoadingRebuild, setIsLoadingRebuild] = useState(false);
+        const alertApi = useApi(alertApiRef);
+
+        const onRebuild = async () => {
+          if (row.onRestartClick) {
+            setIsLoadingRebuild(true);
+            try {
+              const response = await row.onRestartClick();
+              const body = (await response.json()) as {
+                error?: { message: string };
+              };
+              if (response.status !== 200) {
+                alertApi.post({
+                  message: `Jenkins re-build has been failed. Reason: ${body.error?.message}`,
+                  severity: 'error',
+                });
+              } else {
+                alertApi.post({
+                  message: 'Jenkins re-build has been successfully executed',
+                  severity: 'success',
+                });
+              }
+            } finally {
+              setIsLoadingRebuild(false);
+            }
+          }
+        };
+
+        return (
+          <Tooltip title="Rerun build">
+            <>
+              {isLoadingRebuild && <Progress />}
+              {!isLoadingRebuild && (
+                <IconButton onClick={onRebuild}>
+                  <RetryIcon />
+                </IconButton>
+              )}
+            </>
+          </Tooltip>
+        );
+      };
+      return <ActionWrapper />;
+    },
     width: '10%',
   },
 ];