converted to stepper states uppercase

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()
                 }}
               />

src/components/Job/JobStatus.tsx

@@ -13,23 +13,23 @@ interface JobStatusProps {
 }
 
 const getStatus = (status: string) => {
-  switch (status.toLowerCase()) {
-    case STEPPER_STATES.queued:
+  switch (status) {
+    case STEPPER_STATES.QUEDUED:
       return {
         label: "Queued",
         icon: IconRunning
       };
-    case STEPPER_STATES.running:
+    case STEPPER_STATES.RUNNING:
       return {
         label: "Running",
         icon: IconRunning
       };
-    case STEPPER_STATES.successful:
+    case STEPPER_STATES.SUCCESSFUL:
       return {
         label: "Successful",
         icon: IconSuccessful
       };
-    case STEPPER_STATES.failed:
+    case STEPPER_STATES.FAILED:
       return {
         label: "Failed",
         icon: IconFailed
@@ -43,8 +43,7 @@ const getStatus = (status: string) => {
 };
 
 export const JobStatus = ({ status }: JobStatusProps) => {
-  const convertedStatus = status ? status.toString().toLowerCase() : "";
-
+  const convertedStatus = status || "";
   const activeStep = getStatus(convertedStatus);
   const Icon = activeStep.icon;
 
@@ -54,7 +53,7 @@ export const JobStatus = ({ status }: JobStatusProps) => {
       labelPosition="right"
       LabelProps={{
         color:
-          convertedStatus === STEPPER_STATES.failed
+          convertedStatus === STEPPER_STATES.FAILED
             ? theme.palette.status.fail.main
             : "inherit"
       }}