20000: Add test for process cancel button, rename Run Process to Run
[arvados-workbench2.git] / src / views / process-panel / process-details-card.tsx
index 06671a7a1372bdadf58e7191914e5c15cd7269a2..be046004760792d8cccc057c6684f23f892c8724 100644 (file)
@@ -63,10 +63,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         }
     },
     runButton: {
-        backgroundColor: theme.customs.colors.green700,
-        '&:hover': {
-            backgroundColor: theme.customs.colors.green800,
-        },
         padding: "0px 5px 0 0",
         marginRight: "5px",
     },
@@ -76,13 +72,22 @@ export interface ProcessDetailsCardDataProps {
     process: Process;
     cancelProcess: (uuid: string) => void;
     startProcess: (uuid: string) => void;
+    resumeOnHoldWorkflow: (uuid: string) => void;
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
 export const ProcessDetailsCard = withStyles(styles)(
-    ({ cancelProcess, startProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+    ({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+        let runAction: ((uuid: string) => void) | undefined = undefined;
+        if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
+            runAction = startProcess;
+        } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
+                    process.containerRequest.priority === 0) {
+            runAction = resumeOnHoldWorkflow;
+        }
+
         return <Card className={classes.card}>
             <CardHeader
                 className={classes.header}
@@ -106,22 +111,23 @@ export const ProcessDetailsCard = withStyles(styles)(
                     </Tooltip>}
                 action={
                     <div>
-                        {process.containerRequest.state === ContainerRequestState.UNCOMMITTED &&
+                        {runAction !== undefined &&
                             <Button
                                 variant="contained"
                                 size="small"
                                 color="primary"
                                 className={classes.runButton}
-                                onClick={() => startProcess(process.containerRequest.uuid)}>
+                                onClick={() => runAction && runAction(process.containerRequest.uuid)}>
                                 <StartIcon />
-                                Run Process
+                                Run
                             </Button>}
                         {process.container &&
-                            (process.container.state === ContainerState.RUNNING ||
-                            process.container.state === ContainerState.QUEUED) &&
+                            (process.container.state === ContainerState.QUEUED ||
+                            process.container.state === ContainerState.LOCKED ||
+                            process.container.state === ContainerState.RUNNING) &&
                             process.containerRequest.priority !== null &&
                             process.containerRequest.priority > 0 &&
-                            <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
+                            <span data-cy="process-cancel" className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
                         <ProcessStatus uuid={process.containerRequest.uuid} />
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton