Resolve CE-2051 "Change stepper component"

Changing the Stepper component to use it from the common-ui.

Some not used components will be deleted in branch CE-2031. To not to collide with other ongoing modification I created a subtask to make sure the stepper component will be deleted: CE-2128.

src/components/Job/JobDetails.js

@@ -8,7 +8,7 @@ import {
   Container,
   Link as MuiLink
 } from "@mui/material";
-import { DeploymentStepper } from "../deployments/DeploymentStepper";
+import { Stepper } from "@ess-ics/ce-ui-common";
 import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
 import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
 import { JobBadge } from "./JobBadge";
@@ -32,6 +32,21 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   }
 }));
 
+const STATUS = {
+  queued: {
+    label: "Queued",
+    alertType: "info"
+  },
+  running: {
+    label: "Running",
+    alertType: "info"
+  },
+  successful: {
+    label: "Completed",
+    alertType: "success"
+  }
+};
+
 function createAlert(operation, job) {
   const jobDetails = new AWXJobDetails(operation.type, job);
   const message = jobDetails.message();
@@ -52,11 +67,6 @@ export function JobDetails({ operation, job }) {
 
   const [alert, setAlert] = useState(createAlert(operation, job));
 
-  const jobDetails = useMemo(
-    () => new AWXJobDetails(operation.type, job),
-    [operation, job]
-  );
-
   useEffect(() => {
     setAlert(createAlert(operation, job, finishedJob));
   }, [finishedJob, operation, job]);
@@ -134,6 +144,17 @@ export function JobDetails({ operation, job }) {
       : "-"
   };
 
+  const normalizedStatus = job?.status?.toLowerCase();
+
+  const currentStep = Object.keys(STATUS).indexOf(normalizedStatus);
+  var activeStep = STATUS[normalizedStatus] ? currentStep + 1 : currentStep;
+  const jobFailed = job?.status?.toLowerCase() === "failed";
+
+  // to show the correct failed step for an already finished operation
+  if (jobFailed) {
+    activeStep = operation?.startTime ? 1 : 0;
+  }
+
   return (
     <StyledGrid
       container
@@ -173,12 +194,10 @@ export function JobDetails({ operation, job }) {
           <CardContent>
             <div>
               {job && (
-                <DeploymentStepper
-                  activeStep={["queued", "running", "successful"].indexOf(
-                    job.status.toLowerCase()
-                  )}
-                  deploymentStart={operation.startDate}
-                  jobDetails={jobDetails}
+                <Stepper
+                  steps={Object.values(STATUS).map((it) => it.label)}
+                  activeStep={activeStep}
+                  isActiveStepFailed={jobFailed}
                 />
               )}
             </div>