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

@@ -7,8 +7,8 @@ import {
   Container,
   Link as MuiLink
 } from "@mui/material";
-import { DeploymentStepper } from "../deployments/DeploymentStepper";
 import { KeyValueTable, SimpleAccordion } from "@ess-ics/ce-ui-common";
+import { Stepper } from "@ess-ics/ce-ui-common";
 import { JobBadge } from "./JobBadge";
 import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
 import { Link as ReactRouterLink } from "react-router-dom";
@@ -18,6 +18,21 @@ import AccessControl from "../auth/AccessControl";
 import { AWXJobDetails } from "../../api/DataTypes";
 import AlertMessages from "../IOC/AlertMessages";
 
+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();
@@ -38,11 +53,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]);
@@ -116,6 +126,12 @@ export function JobDetails({ operation, job }) {
       : "-"
   };
 
+  const normalizedStatus = job?.status?.toLowerCase();
+
+  const currentStep = Object.keys(STATUS).indexOf(normalizedStatus);
+  const activeStep = STATUS[normalizedStatus] ? currentStep + 1 : currentStep;
+  const jobFailed = job?.status?.toLowerCase() === "failed";
+
   return (
     <Grid
       container
@@ -155,12 +171,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>