From b63d426ec60483c5f3d99d493e62de821eed926a Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curii.com>
Date: Wed, 29 Mar 2023 13:52:33 -0400
Subject: [PATCH] 19295: Add "Cancelling" state.

Tweak "cancel" button styling from discussion with Sarah.

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---
 src/store/processes/process.ts                   | 8 ++++++++
 src/views/process-panel/process-details-card.tsx | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index ec55535d..e6219498 100644
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -27,6 +27,7 @@ export enum ProcessStatus {
     WARNING = 'Warning',
     UNKNOWN = 'Unknown',
     REUSED = 'Reused',
+    CANCELLING = 'Cancelling',
 }
 
 export const getProcess = (uuid: string) => (resources: ResourcesState): Process | undefined => {
@@ -95,6 +96,10 @@ export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): Rea
             color = theme.customs.colors.red900;
             running = true;
             break;
+        case ProcessStatus.CANCELLING:
+            color = theme.customs.colors.red900;
+            running = true;
+            break;
         case ProcessStatus.CANCELLED:
         case ProcessStatus.FAILED:
             color = theme.customs.colors.red900;
@@ -164,6 +169,9 @@ export const getProcessStatus = ({ containerRequest, container }: Process): Proc
             return ProcessStatus.QUEUED;
 
         case container?.state === ContainerState.RUNNING:
+            if (container?.priority === 0) {
+                return ProcessStatus.CANCELLING;
+            }
             if (!!container?.runtimeStatus.error) {
                 return ProcessStatus.FAILING;
             }
diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index f339d1b3..abcbcdb4 100644
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -59,10 +59,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: '0.78rem',
     },
     cancelButton: {
-        color: theme.customs.colors.red900,
-        borderColor: theme.customs.colors.red900,
+        color: theme.palette.common.white,
+        backgroundColor: theme.customs.colors.red900,
         '&:hover': {
-            borderColor: theme.customs.colors.red900,
+            backgroundColor: theme.customs.colors.red900,
         },
         '& svg': {
             fontSize: '22px',
@@ -126,7 +126,7 @@ export const ProcessDetailsCard = withStyles(styles)(
                         {isProcessCancelable(process) &&
                             <Button
                                 data-cy="process-cancel-button"
-                                variant="outlined"
+                                variant="contained"
                                 size="small"
                                 color="primary"
                                 className={classNames(classes.actionButton, classes.cancelButton)}
-- 
2.30.2