use StepperIcons object to decide Step

src/components/Job/JobDetails.tsx

@@ -10,7 +10,8 @@ import {
   formatDateAndTime,
   EmptyValue,
   Duration,
-  Step,
+  StepperComponents,
+  STEPPER_STATES,
   AccessControl
 } from "@ess-ics/ce-ui-common";
 import { JobBadge } from "./JobBadge";
@@ -103,6 +104,9 @@ export const JobDetails = ({ operation, job }: JobDetailsProps) => {
   const [alerts, setAlerts] = useState<
     { type?: Status; message?: string; link?: string }[]
   >(operation.alerts ?? []);
+  const StepIcon = operation?.status
+    ? StepperComponents[operation.status.toLowerCase()]
+    : StepperComponents[STEPPER_STATES.unknown];
 
   const awxJob = useMemo(
     () => new AWXJobDetails(operation, operation.type),
@@ -144,7 +148,7 @@ export const JobDetails = ({ operation, job }: JobDetailsProps) => {
               >
                 Job log stream
               </Typography>
-              <Step
+              <StepIcon
                 showToolTip
                 step={{
                   state: operation?.status?.toLowerCase(),

src/components/Job/JobStatus.tsx

 import {
-  StepperEvents,
+  STEPPER_STATES,
   LabeledIcon,
   IconRunning,
   IconSuccessful,
@@ -14,22 +14,22 @@ interface JobStatusProps {
 
 const getStatus = (status: string) => {
   switch (status.toLowerCase()) {
-    case StepperEvents.queued:
+    case STEPPER_STATES.queued:
       return {
         label: "Queued",
         icon: IconRunning
       };
-    case StepperEvents.running:
+    case STEPPER_STATES.running:
       return {
         label: "Running",
         icon: IconRunning
       };
-    case StepperEvents.successful:
+    case STEPPER_STATES.successful:
       return {
         label: "Successful",
         icon: IconSuccessful
       };
-    case StepperEvents.failed:
+    case STEPPER_STATES.failed:
       return {
         label: "Failed",
         icon: IconFailed
@@ -54,7 +54,7 @@ export const JobStatus = ({ status }: JobStatusProps) => {
       labelPosition="right"
       LabelProps={{
         color:
-          convertedStatus === StepperEvents.failed
+          convertedStatus === STEPPER_STATES.failed
             ? theme.palette.status.fail.main
             : "inherit"
       }}