From cf25ac82c5997f8d5f6fe95fdc9b5f23e5f75f8f Mon Sep 17 00:00:00 2001
From: Imre Toth <imre.toth@ess.eu>
Date: Wed, 20 Sep 2023 08:52:51 +0200
Subject: [PATCH] CE-2128: Delete stepper component
---
.../common/stepper/StepperWithStyle.js | 176 ------------------
src/components/common/stepper/index.js | 4 -
.../deployments/DeploymentStepper.js | 45 -----
src/components/deployments/index.js | 4 +-
4 files changed, 1 insertion(+), 228 deletions(-)
delete mode 100644 src/components/common/stepper/StepperWithStyle.js
delete mode 100644 src/components/common/stepper/index.js
delete mode 100644 src/components/deployments/DeploymentStepper.js
diff --git a/src/components/common/stepper/StepperWithStyle.js b/src/components/common/stepper/StepperWithStyle.js
deleted file mode 100644
index d4267587..00000000
--- a/src/components/common/stepper/StepperWithStyle.js
+++ /dev/null
@@ -1,176 +0,0 @@
-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>
- );
-}
diff --git a/src/components/common/stepper/index.js b/src/components/common/stepper/index.js
deleted file mode 100644
index 7f1f7458..00000000
--- a/src/components/common/stepper/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { StepperWithStyle } from "./StepperWithStyle";
-
-export { StepperWithStyle };
-export default StepperWithStyle;
diff --git a/src/components/deployments/DeploymentStepper.js b/src/components/deployments/DeploymentStepper.js
deleted file mode 100644
index 3bc6665c..00000000
--- a/src/components/deployments/DeploymentStepper.js
+++ /dev/null
@@ -1,45 +0,0 @@
-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}
- />
- );
-}
diff --git a/src/components/deployments/index.js b/src/components/deployments/index.js
index 91aaacf3..be7ddbce 100644
--- a/src/components/deployments/index.js
+++ b/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
};
--
GitLab