fix: simple job control button

packages/dm-core-plugins/src/job/JobControlButton.tsx

@@ -1,7 +1,7 @@
 import { Button, CircularProgress, Icon } from '@equinor/eds-core-react'
-import { play, stop, refresh } from '@equinor/eds-icons'
+import { play, stop, refresh, IconData, calendar } from '@equinor/eds-icons'
 import { JobStatus } from '@development-framework/dm-core'
-import React, { MutableRefObject, useRef, useState } from 'react'
+import React, { MutableRefObject, useEffect, useRef, useState } from 'react'
 
 export const JobControlButton = (props: {
   jobStatus: JobStatus
@@ -13,57 +13,70 @@ export const JobControlButton = (props: {
 }) => {
   const { jobStatus, createJob, asCronJob, disabled, exists, remove } = props
   const [hovering, setHovering] = useState(false)
+  const [buttonColor, setButtonColor] = useState<
+    'primary' | 'secondary' | 'danger'
+  >('primary')
+  const [buttonIcon, setButtonIcon] = useState<IconData>(play)
   const buttonRef: MutableRefObject<HTMLButtonElement | undefined> = useRef()
   buttonRef.current?.addEventListener('mouseenter', () => setHovering(true))
   buttonRef.current?.addEventListener('mouseleave', () => setHovering(false))
 
-  const buttonText = () => {
+  useEffect(() => {
     switch (jobStatus) {
-      case JobStatus.Running:
-        return hovering ? 'Stop' : 'Running'
-      case JobStatus.Failed:
       case JobStatus.Completed:
-        return 'Re-run'
-      case JobStatus.Registered:
-        return 'Remove'
-      default:
-        return asCronJob ? 'Schedule' : 'Run'
-    }
-  }
-
-  const buttonIcon = () => {
-    switch (jobStatus) {
-      case JobStatus.Removed:
       case JobStatus.Failed:
-        return <Icon data={refresh} />
+        setButtonColor('primary')
+        setButtonIcon(asCronJob ? calendar : refresh)
+        break
       case JobStatus.Running:
+      case JobStatus.Starting:
       case JobStatus.Registered:
-        return <Icon data={stop} />
-      case JobStatus.NotStarted:
-        return <Icon data={play} />
+        setButtonColor('danger')
+        setButtonIcon(stop)
+        break
       default:
-        return <Icon data={play} />
+        setButtonColor('primary')
+        setButtonIcon(asCronJob ? calendar : play)
     }
-  }
+  }, [jobStatus, asCronJob])
 
   return (
     <Button
+      variant="contained_icon"
+      aria-label="Run"
       ref={buttonRef}
+      color={buttonColor}
       onClick={() => {
-        if (exists) {
+        if (
+          (
+            [
+              JobStatus.Running,
+              JobStatus.Starting,
+              JobStatus.Registered,
+            ] as JobStatus[]
+          ).includes(jobStatus) &&
+          exists
+        ) {
+          remove()
+        } else if (
+          ([JobStatus.Completed, JobStatus.Failed] as JobStatus[]).includes(
+            jobStatus
+          ) &&
+          exists
+        ) {
           remove()
+          createJob()
+        } else {
+          createJob()
         }
-        createJob()
       }}
-      style={{ width: '7rem' }}
       disabled={disabled}
     >
       {jobStatus === JobStatus.Running && !hovering ? (
         <CircularProgress size={16} variant="indeterminate" />
       ) : (
-        buttonIcon()
+        <Icon data={buttonIcon} />
       )}
-      {buttonText()}
     </Button>
   )
 }