CE-3371: Converted to stepper states uppercase

Closes CE-3371

src/components/Job/JobDetails.tsx

@@ -9,7 +9,7 @@ import {
   formatDateAndTime,
   EmptyValue,
   Duration,
-  StepperComponents,
+  SingleStateStepper,
   STEPPER_STATES,
   AccessControl
 } from "@ess-ics/ce-ui-common";
@@ -79,9 +79,6 @@ export const JobsDetails = ({ jobDetail: operation }: 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 [expanded, setExpanded] = useState(false);
 
   const awxJob = useMemo(
@@ -129,10 +126,10 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
               >
                 Job log stream
               </Typography>
-              <StepIcon
+              <SingleStateStepper
                 showToolTip
                 step={{
-                  state: operation?.status?.toLowerCase(),
+                  state: operation?.status || STEPPER_STATES.UNKNOWN,
                   label: awxJob.message()
                 }}
               />