From ec567ae7c77bc895b37f0a9e903a93573f50950d Mon Sep 17 00:00:00 2001
From: Ewe Zi Yi <36802364+deadlycoconuts@users.noreply.github.com>
Date: Fri, 28 Jul 2023 13:41:57 +0800
Subject: [PATCH] fix: Invert logic of isActiveJobStatus helper function (#354)

* Invert logic of isActiveJobStatus helper function

* Refactor delete job modal to use shared helper function
---
 .../jobs/components/modal/DeleteJobModal.js   |  9 +++----
 ui/src/jobs/list/ListEnsemblingJobsTable.js   | 24 ++++++++-----------
 ui/src/services/job/JobStatus.js              |  4 ++++
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/ui/src/jobs/components/modal/DeleteJobModal.js b/ui/src/jobs/components/modal/DeleteJobModal.js
index 49ebcda34..16ffa6acf 100644
--- a/ui/src/jobs/components/modal/DeleteJobModal.js
+++ b/ui/src/jobs/components/modal/DeleteJobModal.js
@@ -5,6 +5,7 @@ import { useTuringApi } from "../../../hooks/useTuringApi";
 import { ConfirmationModal } from "../../../components/confirmation_modal/ConfirmationModal";
 import { isEmpty } from "../../../utils/object";
 import { EuiFieldText } from "@elastic/eui";
+import { isActiveJobStatus } from "../../../services/job/JobStatus";
 
 export const DeleteJobModal = ({
   onSuccess,
@@ -38,13 +39,9 @@ export const DeleteJobModal = ({
     }
   }, [isLoaded, error, job, onSuccess, closeModal]);
 
-  const isActiveJobStatus = function(jobStatus) {
-    return ["failed", "failed_submission", "failed_building", "completed"].includes(jobStatus);
-  }
-
   return (
     <ConfirmationModal
-      title={isActiveJobStatus(job.status) ? 'Delete Ensembling Jobs' : 'Terminate Ensembling Jobs'}
+      title={isActiveJobStatus(job.status) ? "Terminate Ensembling Jobs" : "Delete Ensembling Jobs" }
       onCancel={() => setDeleteConfirmation("")}
       onConfirm={(arg) => {submitForm(arg); setDeleteConfirmation("")}}
       isLoading={isLoading}
@@ -63,7 +60,7 @@ export const DeleteJobModal = ({
             isInvalid={deleteConfirmation !== job.name} />   
         </div>
       }
-      confirmButtonText={isActiveJobStatus(job.status) ? 'Delete' : 'Terminate'}
+      confirmButtonText={isActiveJobStatus(job.status) ? "Terminate" : "Delete"}
       confirmButtonColor="danger">
       {(onSubmit) =>
         (deleteJobRef.current = openModal(onSubmit)) &&
diff --git a/ui/src/jobs/list/ListEnsemblingJobsTable.js b/ui/src/jobs/list/ListEnsemblingJobsTable.js
index 93a5b1228..e7cec9f10 100644
--- a/ui/src/jobs/list/ListEnsemblingJobsTable.js
+++ b/ui/src/jobs/list/ListEnsemblingJobsTable.js
@@ -17,7 +17,7 @@ import { useNavigate } from "react-router-dom";
 import { useConfig } from "../../config";
 import moment from "moment";
 import { DeploymentStatusHealth } from "../../components/status_health/DeploymentStatusHealth";
-import { JobStatus } from "../../services/job/JobStatus";
+import { isActiveJobStatus, JobStatus } from "../../services/job/JobStatus";
 import EnsemblersContext from "../../providers/ensemblers/context";
 import { DateFromNow } from "@caraml-dev/ui-lib";
 import { DeleteJobModal } from "../components/modal/DeleteJobModal";
@@ -68,10 +68,6 @@ export const ListEnsemblingJobsTable = ({
   const onDeleteJob = (job) => {
     deleteJobRef.current(job)
   }
-  
-  const isActiveJobStatus = function(jobStatus) {
-    return ["failed", "failed_submission", "failed_building", "completed"].includes(jobStatus);
-}
 
   const columns = [
     {
@@ -159,15 +155,15 @@ export const ListEnsemblingJobsTable = ({
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false} >
-                <EuiButtonEmpty
-                  onClick={() => onDeleteJob(item)}
-                  color={"danger"}
-                  iconType={isActiveJobStatus(item.status) ? "trash" : "minusInCircle" }
-                  iconSide="left"
-                  size="xs"
-                  isDisabled={item.status === "terminating"}>
-                  <EuiText size="xs"> {isActiveJobStatus(item.status) ? "Delete" : "Terminate" } </EuiText>
-                </EuiButtonEmpty>
+              <EuiButtonEmpty
+                onClick={() => onDeleteJob(item)}
+                color={"danger"}
+                iconType={isActiveJobStatus(item.status) ? "minusInCircle" : "trash"  }
+                iconSide="left"
+                size="xs"
+                isDisabled={item.status === "terminating"}>
+                <EuiText size="xs"> {isActiveJobStatus(item.status) ? "Terminate" : "Delete" } </EuiText>
+              </EuiButtonEmpty>
             </EuiFlexItem>
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/ui/src/services/job/JobStatus.js b/ui/src/services/job/JobStatus.js
index 8dac192af..fef9b0a67 100644
--- a/ui/src/services/job/JobStatus.js
+++ b/ui/src/services/job/JobStatus.js
@@ -46,3 +46,7 @@ export const JobStatus = Enum({
     iconType: "cross",
   }),
 });
+
+export const isActiveJobStatus = function(jobStatus) {
+  return ["pending", "building", "running", "terminating"].includes(jobStatus);
+};