diff --git a/package.json b/package.json index cdf442d..307724b 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@fontsource/roboto": "^5.0.5", "@mui/icons-material": "^5.14.0", "@mui/material": "^5.14.0", - "@mui/styles": "^5.14.4", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index fdaa83b..0eb9480 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { makeStyles, createStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { List, ListItemButton, @@ -34,26 +34,34 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -const useStyles = makeStyles(() => - createStyles({ - listContainer: { - height: "100%", - overflow: "auto", - }, - listItemSecondaryAction: { - visibility: "hidden", - }, - listItem: { - paddingRight: 48, - "&:hover $listItemSecondaryAction": { - visibility: "inherit", - }, +const PREFIX = "index"; + +const classes = { + listContainer: `${PREFIX}-listContainer`, + listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`, + listItem: `${PREFIX}-listItem`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.listContainer}`]: { + height: "100%", + overflow: "auto", + }, + + [`& .${classes.listItemSecondaryAction}`]: { + visibility: "hidden", + }, + + [`& .${classes.listItem}`]: { + paddingRight: 48, + "&:hover $listItemSecondaryAction": { + visibility: "inherit", }, - }), -); + }, +})); const BuildList: FunctionComponent = () => { - const classes = useStyles(); const navigate = useNavigate(); const { buildList, selectedBuild, loading, total, take } = useBuildState(); const buildDispatch = useBuildDispatch(); @@ -117,7 +125,7 @@ const BuildList: FunctionComponent = () => { }, [handlePaginationChange]); return ( - <> + {loading ? ( @@ -203,7 +211,6 @@ const BuildList: FunctionComponent = () => { - {menuBuild && ( {menuBuild.isRunning && ( @@ -315,7 +322,7 @@ const BuildList: FunctionComponent = () => { }} /> )} - + ); }; diff --git a/src/components/CommentsPopper.tsx b/src/components/CommentsPopper.tsx index 6e0d50a..f40b84a 100644 --- a/src/components/CommentsPopper.tsx +++ b/src/components/CommentsPopper.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Button, Popper, @@ -15,11 +15,20 @@ import { bindPopper, } from "material-ui-popup-state/hooks"; -const useStyles = makeStyles((theme: Theme) => ({ - popperContainer: { +const PREFIX = "CommentsPopper"; + +const classes = { + popperContainer: `${PREFIX}-popperContainer`, + contentContainer: `${PREFIX}-contentContainer`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(({ theme: Theme }) => ({ + [`& .${classes.popperContainer}`]: { zIndex: 1400, }, - contentContainer: { + + [`& .${classes.contentContainer}`]: { padding: theme.spacing(2), }, })); @@ -33,7 +42,6 @@ export const CommentsPopper: React.FunctionComponent = ({ text, onSave, }) => { - const classes = useStyles(); const popupState = usePopupState({ variant: "popper", popupId: "commentPopper", @@ -44,7 +52,7 @@ export const CommentsPopper: React.FunctionComponent = ({ React.useEffect(() => setComment(text || ""), [text]); return ( - <> + = ({ )} - + ); }; diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index 4e1e55e..7389f57 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,11 +1,9 @@ import React, { FunctionComponent } from "react"; -import { makeStyles, createStyles } from "@mui/styles"; import { FormControl, InputLabel, MenuItem, Select, - type Theme, type SelectChangeEvent, } from "@mui/material"; import { @@ -14,22 +12,10 @@ import { selectProject, } from "../contexts"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - formControl: { - width: "100%", - }, - input: { - margin: theme.spacing(1), - }, - }), -); - const ProjectSelect: FunctionComponent<{ projectId?: string; onProjectSelect: (id: string) => void; }> = ({ projectId, onProjectSelect }) => { - const classes = useStyles(); const { projectList, selectedProjectId } = useProjectState(); const projectDispatch = useProjectDispatch(); @@ -42,7 +28,7 @@ const ProjectSelect: FunctionComponent<{ return ( <> {projectList.length > 0 && ( - + Project @@ -50,8 +36,8 @@ const ProjectSelect: FunctionComponent<{ variant="standard" id="project-select" labelId="projectSelect" - className={classes.input} displayEmpty + sx={{m: "16px"}} value={selectedProjectId ?? ""} onChange={(event: SelectChangeEvent) => onProjectSelect(event.target.value as string) diff --git a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx index 5c8f230..2d151d4 100644 --- a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx +++ b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx @@ -1,14 +1,20 @@ import { Chip, Button } from "@mui/material"; +import { styled } from "@mui/material/styles"; import { useSnackbar } from "notistack"; import { useHotkeys } from "react-hotkeys-hook"; import React from "react"; import { testRunService } from "../../services"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ApproveRejectButtons"; -const useStyles = makeStyles(() => ({ - actionButton: { +const classes = { + actionButton: `${PREFIX}-actionButton`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.actionButton}`]: { width: 120, marginLeft: 4, marginRight: 4, @@ -21,7 +27,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{ afterReject?: () => void; }> = ({ testRun, afterApprove, afterReject }) => { const { enqueueSnackbar } = useSnackbar(); - const classes = useStyles(); const approve = () => { testRunService @@ -59,7 +64,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ useHotkeys("x", reject, [testRun]); return ( - <> + {testRun.merge && ( - + ); }; diff --git a/src/components/TestDetailsDialog/ArrowButtons.tsx b/src/components/TestDetailsDialog/ArrowButtons.tsx index 3bd8fe4..44d9320 100644 --- a/src/components/TestDetailsDialog/ArrowButtons.tsx +++ b/src/components/TestDetailsDialog/ArrowButtons.tsx @@ -1,13 +1,20 @@ import { IconButton } from "@mui/material"; +import { styled } from "@mui/material/styles"; import { NavigateNext, NavigateBefore } from "@mui/icons-material"; import React from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ArrowButtons"; -const useStyles = makeStyles(() => ({ - button: { +const classes = { + button: `${PREFIX}-button`, + icon: `${PREFIX}-icon`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.button}`]: { width: 64, height: 64, padding: 0, @@ -15,7 +22,8 @@ const useStyles = makeStyles(() => ({ top: "50%", zIndex: 4000, }, - icon: { + + [`& .${classes.icon}`]: { width: 64, height: 64, }, @@ -26,8 +34,6 @@ export const ArrowButtons: React.FunctionComponent<{ selectedTestRunIndex: number; handleNavigation: (testRunId: string) => void; }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => { - const classes = useStyles(); - const navigateNext = () => { if (testRuns.length > selectedTestRunIndex + 1) { const next = testRuns[selectedTestRunIndex + 1]; @@ -46,7 +52,7 @@ export const ArrowButtons: React.FunctionComponent<{ useHotkeys("left", navigateBefore, [selectedTestRunIndex, handleNavigation]); return ( - <> + {testRuns.length > selectedTestRunIndex + 1 && ( )} - + ); }; diff --git a/src/components/TestDetailsDialog/DrawArea.tsx b/src/components/TestDetailsDialog/DrawArea.tsx index fe37c38..42f5297 100644 --- a/src/components/TestDetailsDialog/DrawArea.tsx +++ b/src/components/TestDetailsDialog/DrawArea.tsx @@ -1,26 +1,36 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { FunctionComponent, useCallback } from "react"; +import { styled } from "@mui/material/styles"; import { Stage, Layer, Image } from "react-konva"; import Rectangle, { MIN_RECT_SIDE_PIXEL } from "../Rectangle"; import { IgnoreArea } from "../../types/ignoreArea"; import { Grid, CircularProgress, type Theme } from "@mui/material"; import { NoImagePlaceholder } from "./NoImageAvailable"; import Konva from "konva"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "DrawArea"; -const useStyles = makeStyles((theme: Theme) => ({ - canvasContainer: { +const classes = { + canvasContainer: `${PREFIX}-canvasContainer`, + imageDetailsContainer: `${PREFIX}-imageDetailsContainer`, + progressContainer: `${PREFIX}-progressContainer`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(({ theme: Theme }) => ({ + [`& .${classes.canvasContainer}`]: { overflow: "auto", backgroundColor: "white", }, - imageDetailsContainer: { + + [`& .${classes.imageDetailsContainer}`]: { position: "absolute", backgroundColor: "white", zIndex: 1, padding: theme.spacing(1), height: "48px", }, - progressContainer: { + + [`& .${classes.progressContainer}`]: { minHeight: "300px", }, })); @@ -72,7 +82,6 @@ export const DrawArea: FunctionComponent = ({ stageScrollPosState, drawModeState, }) => { - const classes = useStyles(); const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; @@ -339,5 +348,5 @@ export const DrawArea: FunctionComponent = ({ ); // TODO: Separate SVG with reason... - return <>{imageName ? imageCanvas() : }; + return {imageName ? imageCanvas() : }; }; diff --git a/src/components/TestDetailsDialog/ImageDetails.tsx b/src/components/TestDetailsDialog/ImageDetails.tsx index d33be35..879de3b 100644 --- a/src/components/TestDetailsDialog/ImageDetails.tsx +++ b/src/components/TestDetailsDialog/ImageDetails.tsx @@ -1,17 +1,24 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { Typography, Grid, IconButton } from "@mui/material"; import { WarningRounded, AltRoute } from "@mui/icons-material"; import { IgnoreArea } from "../../types/ignoreArea"; import { Tooltip } from "../Tooltip"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "ImageDetails"; -const useStyles = makeStyles(() => ({ - container: { +const classes = { + container: `${PREFIX}-container`, + branchName: `${PREFIX}-branchName`, +}; + +const StyledGrid = styled(Grid)(() => ({ + [`&.${classes.container}`]: { display: "flex", alignItems: "center", color: "darkslategrey", }, - branchName: { + + [`& .${classes.branchName}`]: { cursor: "pointer", lineHeight: "20px", fontWeight: "bolder", @@ -39,7 +46,6 @@ const ImageDetails: React.FunctionComponent = ({ branchName, ignoreAreas, }) => { - const classes = useStyles(); const imageSize = () => { return ( imageName && ( @@ -54,7 +60,7 @@ const ImageDetails: React.FunctionComponent = ({ ); }; return ( - + {type === "Baseline" ? "Baseline" : "Checkpoint"} @@ -74,7 +80,7 @@ const ImageDetails: React.FunctionComponent = ({ )} - + ); }; diff --git a/src/components/TestDetailsDialog/NoImageAvailable.tsx b/src/components/TestDetailsDialog/NoImageAvailable.tsx index f74d75b..de950cd 100644 --- a/src/components/TestDetailsDialog/NoImageAvailable.tsx +++ b/src/components/TestDetailsDialog/NoImageAvailable.tsx @@ -1,9 +1,14 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import noImage from "../../static/no-image.png"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "NoImagePlaceholder"; -const useStyles = makeStyles(() => ({ - img: { +const classes = { + img: `${PREFIX}-img`, +}; + +const Root = styled("img")(() => ({ + [`&.${classes.img}`]: { display: "block", marginLeft: "auto", marginRight: "auto", @@ -13,7 +18,5 @@ const useStyles = makeStyles(() => ({ // TODO: Use SVG and more specific text to describe reason... export const NoImagePlaceholder: React.FunctionComponent = () => { - const classes = useStyles(); - - return Not available; + return ; }; diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index 4d6238b..d2bcdf4 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Typography, Button, @@ -53,45 +53,70 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -const useStyles = makeStyles(() => ({ - header: { +const PREFIX = "TestDetailsModal"; + +const classes = { + header: `${PREFIX}-header`, + footer: `${PREFIX}-footer`, + scaleActions: `${PREFIX}-scaleActions`, + testRunActions: `${PREFIX}-testRunActions`, + testRunName: `${PREFIX}-testRunName`, + closeIcon: `${PREFIX}-closeIcon`, + testRunDetails: `${PREFIX}-testRunDetails`, + drawAreaContainer: `${PREFIX}-drawAreaContainer`, + drawAreaItem: `${PREFIX}-drawAreaItem`, + imageToolbar: `${PREFIX}-imageToolbar`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.header}`]: { position: "relative", textAlign: "left", background: "#efefef", paddingLeft: 8, paddingBottom: 8, }, - footer: { + + [`& .${classes.footer}`]: { background: "#efefef", }, - scaleActions: { + + [`& .${classes.scaleActions}`]: { display: "flex", alignItems: "center", }, - testRunActions: { + + [`& .${classes.testRunActions}`]: { display: "flex", alignItems: "center", alignContent: "center", }, - testRunName: { + + [`& .${classes.testRunName}`]: { fontWeight: 300, }, - closeIcon: { + + [`& .${classes.closeIcon}`]: { position: "absolute", right: "8px", }, - testRunDetails: { + + [`& .${classes.testRunDetails}`]: { paddingLeft: 8, }, - drawAreaContainer: { + + [`& .${classes.drawAreaContainer}`]: { width: "100%", height: "100%", }, - drawAreaItem: { + + [`& .${classes.drawAreaItem}`]: { padding: "0 4px", height: "100%", }, - imageToolbar: { + + [`& .${classes.imageToolbar}`]: { paddingLeft: 5, height: 52, }, @@ -121,7 +146,6 @@ const TestDetailsModal: React.FunctionComponent = ({ handleNext, handleClose, }) => { - const classes = useStyles(); const { enqueueSnackbar } = useSnackbar(); const testRunDispatch = useTestRunDispatch(); @@ -660,7 +684,7 @@ const TestDetailsModal: React.FunctionComponent = ({ ); return ( - <> + {header()} {processing && } @@ -805,7 +829,7 @@ const TestDetailsModal: React.FunctionComponent = ({ applyIgnoreArea(); }} /> - + ); }; diff --git a/src/components/TestDetailsDialog/index.tsx b/src/components/TestDetailsDialog/index.tsx index 0f58fc6..d8d76d0 100644 --- a/src/components/TestDetailsDialog/index.tsx +++ b/src/components/TestDetailsDialog/index.tsx @@ -1,4 +1,5 @@ import { Dialog, Typography } from "@mui/material"; +import { styled } from "@mui/material/styles"; import React from "react"; import { useNavigate } from "react-router"; import { useBuildState, useTestRunState } from "../../contexts"; @@ -6,16 +7,19 @@ import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { BaseModal } from "../BaseModal"; import TestDetailsModal from "./TestDetailsModal"; import { TestRun } from "../../types"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestDetailsDialog"; -const useStyles = makeStyles(() => ({ - modal: { +const classes = { + modal: `${PREFIX}-modal`, +}; + +const StyledDialog = styled(Dialog)(() => ({ + [`&.${classes.modal}`]: { margin: "20px 10px 10px 10px", }, })); export const TestDetailsDialog: React.FunctionComponent = () => { - const classes = useStyles(); const { selectedTestRun, touched, @@ -72,7 +76,7 @@ export const TestDetailsDialog: React.FunctionComponent = () => { } return ( - + { setNotSavedChangesModal(false); }} /> - + ); }; diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx index 3e9be22..c2a9935 100644 --- a/src/components/TestVariationList.tsx +++ b/src/components/TestVariationList.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { TestVariation } from "../types"; import { Card, @@ -16,13 +17,19 @@ import { routes } from "../constants"; import { TestVariationDetails } from "./TestVariationDetails"; import { Delete } from "@mui/icons-material"; import { BaseModal } from "./BaseModal"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestVariationList"; -const useStyles = makeStyles({ - card: { +const classes = { + card: `${PREFIX}-card`, + media: `${PREFIX}-media`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")({ + [`& .${classes.card}`]: { maxWidth: 345, }, - media: { + [`& .${classes.media}`]: { height: 140, objectFit: "contain", }, @@ -37,7 +44,6 @@ const TestVariationList: React.FunctionComponent = ({ items, onDeleteClick, }) => { - const classes = useStyles(); const [selectedItem, setSelectedItem] = React.useState( null, ); @@ -47,7 +53,7 @@ const TestVariationList: React.FunctionComponent = ({ }; return ( - <> + {items.length === 0 && ( No variations @@ -80,7 +86,6 @@ const TestVariationList: React.FunctionComponent = ({ ))} - {selectedItem && ( = ({ }} /> )} - + ); }; diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index b13e926..5a2b946 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { makeStyles } from "@mui/styles"; +import { styled } from "@mui/material/styles"; import { Grid, Box } from "@mui/material"; import { useParams, useNavigate } from "react-router-dom"; import BuildList from "../components/BuildList"; @@ -16,14 +16,20 @@ import { } from "../constants"; import { buildProjectPageUrl } from "../_helpers/route.helpers"; -const useStyles = makeStyles(() => ({ - root: { +const PREFIX = "ProjectPage"; + +const classes = { + root: `${PREFIX}-root`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled("div")(() => ({ + [`& .${classes.root}`]: { height: "100%", }, })); const ProjectPage = () => { - const classes = useStyles(); const { projectId } = useParams<{ projectId: string }>(); const navigate = useNavigate(); const helpDispatch = useHelpDispatch(); @@ -33,7 +39,7 @@ const ProjectPage = () => { }); return ( - <> + @@ -56,7 +62,7 @@ const ProjectPage = () => { - + ); }; diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index dabf3be..49ce033 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { styled } from "@mui/material/styles"; import { useParams, useNavigate } from "react-router-dom"; import { TestVariation } from "../types"; import { testVariationService, staticService } from "../services"; @@ -21,17 +22,20 @@ import { useSnackbar } from "notistack"; import { formatDateTime } from "../_helpers/format.helper"; import TestStatusChip from "../components/TestStatusChip"; import { Baseline } from "../types/baseline"; -import { makeStyles } from "@mui/styles"; +const PREFIX = "TestVariationDetailsPage"; -const useStyles = makeStyles({ - media: { +const classes = { + media: `${PREFIX}-media`, +}; + +const StyledContainer = styled(Container)({ + [`& .${classes.media}`]: { height: 600, objectFit: "contain", }, }); const TestVariationDetailsPage: React.FunctionComponent = () => { - const classes = useStyles(); const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const { testVariationId } = useParams<{ testVariationId: string }>(); @@ -53,7 +57,7 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { }, [testVariationId, enqueueSnackbar]); return ( - + {testVariation && ( @@ -109,7 +113,7 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { )} - + ); };