CE-2128: Delete stepper component

src/components/common/stepper/StepperWithStyle.js

-import React from "react";
-import { styled } from "@mui/material/styles";
-import {
-  Stepper,
-  Step,
-  StepLabel,
-  StepConnector,
-  useMediaQuery,
-  stepConnectorClasses
-} from "@mui/material";
-import { theme } from "../../../style/Theme";
-
-const PREFIX = "StepperWithStyle";
-
-const classes = {
-  alternativeLabel: `${PREFIX}-alternativeLabel`,
-  active: `${PREFIX}-active`,
-  completed: `${PREFIX}-completed`,
-  line: `${PREFIX}-line`,
-  alternativeLabel2: `${PREFIX}-alternativeLabel2`,
-  active2: `${PREFIX}-active2`,
-  completed2: `${PREFIX}-completed2`,
-  line2: `${PREFIX}-line2`,
-  stepper: `${PREFIX}-stepper`
-};
-
-// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
-const Root = styled("div")({
-  [`& .${classes.stepper}`]: {
-    minWidth: 500,
-    width: "100%"
-  },
-  [`& .${stepConnectorClasses.alternativeLabel}`]: {
-    top: 22
-  },
-  [`& .${stepConnectorClasses.line}`]: {
-    borderWidth: 4,
-    [`&.${stepConnectorClasses.lineHorizontal}`]: {
-      // Pull in the left and right so that the dashed
-      // lines in disabled state don't interfere with
-      // dashed border of (disabled) step icon
-      marginLeft: 6,
-      marginRight: 6
-    },
-    [`&.${stepConnectorClasses.lineVertical}`]: {
-      marginLeft: 11
-    }
-  }
-});
-
-const ColorlibStepIconRoot = styled("div")(({ active, completed, error }) => ({
-  backgroundColor: "#ccc",
-  zIndex: 1,
-  color: "#fff",
-  width: 50,
-  height: 50,
-  display: "flex",
-  borderRadius: "50%",
-  justifyContent: "center",
-  alignItems: "center",
-  ...(active && {
-    background: theme.palette.status.progress,
-    boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)"
-  }),
-  ...(completed && {
-    background: theme.palette.status.ok
-  }),
-  ...(error && {
-    background: theme.palette.status.fail
-  })
-}));
-
-const ColorlibConnectorHorizontal = StepConnector;
-
-const ColorlibConnectorVertical = StepConnector;
-
-export function StepperWithStyle({ steps, activeStep, isStepFailed, icons }) {
-  const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-
-  function ColorlibStepIcon(props) {
-    const { active, completed, error, className } = props;
-
-    return (
-      <ColorlibStepIconRoot
-        {...{ active, completed, error }}
-        className={className}
-      >
-        {icons[String(props.icon)]}
-      </ColorlibStepIconRoot>
-    );
-  }
-
-  return (
-    <Root>
-      {smDown ? (
-        <Stepper
-          className={classes.stepper}
-          activeStep={activeStep}
-          orientation="vertical"
-          connector={
-            <ColorlibConnectorVertical
-              classes={{
-                alternativeLabel: classes.alternativeLabel2,
-                active: classes.active2,
-                completed: classes.completed2,
-                line: classes.line2
-              }}
-            />
-          }
-          style={{ padding: 24 }}
-        >
-          {steps.map((label, index) => {
-            const labelProps = {};
-            const stepProps = {};
-            if (isStepFailed(index)) {
-              labelProps.error = true;
-              stepProps.error = true;
-            }
-
-            return (
-              <Step key={label}>
-                <StepLabel
-                  {...labelProps}
-                  StepIconComponent={ColorlibStepIcon}
-                >
-                  {label}
-                </StepLabel>
-              </Step>
-            );
-          })}
-        </Stepper>
-      ) : null}
-      {smUp ? (
-        <Stepper
-          className={classes.stepper}
-          alternativeLabel
-          activeStep={activeStep}
-          connector={
-            <ColorlibConnectorHorizontal
-              classes={{
-                alternativeLabel: classes.alternativeLabel,
-                active: classes.active,
-                completed: classes.completed,
-                line: classes.line
-              }}
-            />
-          }
-        >
-          {steps.map((label, index) => {
-            const labelProps = {};
-            const stepProps = {};
-            if (isStepFailed(index)) {
-              labelProps.error = true;
-              stepProps.error = true;
-            }
-
-            return (
-              <Step
-                key={label}
-                {...stepProps}
-              >
-                <StepLabel
-                  {...labelProps}
-                  StepIconComponent={ColorlibStepIcon}
-                >
-                  {label}
-                </StepLabel>
-              </Step>
-            );
-          })}
-        </Stepper>
-      ) : null}
-    </Root>
-  );
-}

src/components/common/stepper/index.js

-import { StepperWithStyle } from "./StepperWithStyle";
-
-export { StepperWithStyle };
-export default StepperWithStyle;

src/components/deployments/DeploymentStepper.js

-import React from "react";
-import {
-  ScheduleOutlined,
-  RotateRightOutlined,
-  CheckCircleOutline
-} from "@mui/icons-material";
-import { StepperWithStyle } from "../common/stepper/StepperWithStyle";
-
-export function DeploymentStepper(props) {
-  let { activeStep, deploymentStart, jobDetails } = props;
-
-  const icons = {
-    1: <ScheduleOutlined />,
-    2: <RotateRightOutlined />,
-    3: <CheckCircleOutline />
-  };
-
-  const steps = [
-    jobDetails?.typeLabel() + " Queued",
-    jobDetails?.typeLabel() + " Running",
-    jobDetails?.typeLabel() + " Completed"
-  ];
-
-  const isStepFailed = (step) => {
-    if (jobDetails?.status().toLowerCase() === "failed") {
-      return step === activeStep;
-    }
-    return false;
-  };
-
-  if (jobDetails?.status().toLowerCase() === "failed") {
-    activeStep = deploymentStart ? 1 : 0;
-  }
-
-  activeStep = activeStep === 2 ? 3 : activeStep;
-
-  return (
-    <StepperWithStyle
-      steps={steps}
-      activeStep={activeStep}
-      isStepFailed={isStepFailed}
-      icons={icons}
-    />
-  );
-}

src/components/deployments/index.js

@@ -2,13 +2,11 @@ import { DeploymentBadge } from "./DeploymentBadge";
 import { DeploymentStatusIcon } from "./DeploymentIcons";
 import { DeploymentJobOutput } from "./DeploymentJobOutput";
 import { DeploymentsList, DeploymentListItem } from "./DeploymentsList";
-import { DeploymentStepper } from "./DeploymentStepper";
 
 export {
   DeploymentBadge,
   DeploymentStatusIcon,
   DeploymentJobOutput,
   DeploymentsList,
-  DeploymentListItem,
-  DeploymentStepper
+  DeploymentListItem
 };