From 7858c577939388ae7afc54d21373e080b2525914 Mon Sep 17 00:00:00 2001 From: Juga Paazmaya Date: Tue, 18 Jul 2023 13:11:23 +0300 Subject: [PATCH 1/5] Update Material UI to v5 and MUI X v6, while cleaning few issues with types Sweep with Prettier and try to find possible issues with various DataGrid methods Upgrade to MUI X v6 to get apiRef available Last use of lab package moved to core. Found the issue with DataGrid hook, was wrong method Few type fixes and one MUI warning about selector Lint hooks via ESLint plugin and found the reason for forever loop Use constant for repetetive headers Use only SVG icons, no icon font Load fonts locally lodash was not a dependency, removed its usage Prettier and this VS Code plugin conlifct and constantly format differently, hence removing the plugin Make notes how to test agent-cypress while developing it Value and its id might be undefined sometimes when looking for the selected rows Reduce issues found by ESLint Plenty of interesting formatting changes by https://github.com/coderaiser/putout Use React fragments consistently Trying to reduce complexity Correct key after variable rename Cannot use maxRows when rows are defined Small fine tuning One item had turned into a container Guided tour was not rendering No console Few Grid properties should not be used and more accessible button color Play with colors to know where to configure Update TestDetailsModal.tsx --- src/components/BuildList/index.tsx | 36 ++++++++++--------- src/components/CommentsPopper.tsx | 15 +++++--- src/components/ProjectSelect.tsx | 15 +++++--- .../ApproveRejectButtons.tsx | 11 +++--- .../TestDetailsDialog/ArrowButtons.tsx | 12 ++++--- src/components/TestDetailsDialog/DrawArea.tsx | 21 +++++++---- .../TestDetailsDialog/ImageDetails.tsx | 11 +++--- .../TestDetailsDialog/NoImageAvailable.tsx | 12 ++++--- .../TestDetailsDialog/TestDetailsModal.tsx | 17 +++++---- src/components/TestDetailsDialog/index.tsx | 9 ++--- .../TestRunList/StatusFilterOperators.tsx | 13 +++---- .../TestRunList/TagFilterOperators.tsx | 6 +--- src/components/TestVariationList.tsx | 9 ++--- src/pages/ProjectPage.tsx | 11 +++--- src/pages/TestVariationDetailsPage.tsx | 9 ++--- 15 files changed, 117 insertions(+), 90 deletions(-) diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index 9b13c3d7..db7497be 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { List, ListItemButton, @@ -34,33 +34,35 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -const PREFIX = "index"; +const PREFIX = 'index'; const classes = { listContainer: `${PREFIX}-listContainer`, listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`, - listItem: `${PREFIX}-listItem`, + 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", - }, +const Root = styled('div')(() => + ({ + [`& .${classes.listContainer}`]: { + height: "100%", + overflow: "auto", + }, - [`& .${classes.listItem}`]: { - "&:hover $listItemSecondaryAction": { - visibility: "inherit", + [`& .${classes.listItemSecondaryAction}`]: { + visibility: "hidden", }, - }, -})); + + [`& .${classes.listItem}`]: { + "&:hover $listItemSecondaryAction": { + visibility: "inherit", + }, + } + })); const BuildList: FunctionComponent = () => { + const navigate = useNavigate(); const { buildList, selectedBuild, loading, total, take } = useBuildState(); const buildDispatch = useBuildDispatch(); diff --git a/src/components/CommentsPopper.tsx b/src/components/CommentsPopper.tsx index f9b7df15..e719a69a 100644 --- a/src/components/CommentsPopper.tsx +++ b/src/components/CommentsPopper.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { Button, Popper, Fade, Paper, TextField, Badge } from "@mui/material"; import { usePopupState, @@ -7,22 +7,26 @@ import { bindPopper, } from "material-ui-popup-state/hooks"; -const PREFIX = "CommentsPopper"; +const PREFIX = 'CommentsPopper'; const classes = { popperContainer: `${PREFIX}-popperContainer`, - contentContainer: `${PREFIX}-contentContainer`, + 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 }) => ({ +const Root = styled('div')(( + { + theme + } +) => ({ [`& .${classes.popperContainer}`]: { zIndex: 1400, }, [`& .${classes.contentContainer}`]: { padding: theme.spacing(2), - }, + } })); interface IProps { @@ -34,6 +38,7 @@ export const CommentsPopper: React.FunctionComponent = ({ text, onSave, }) => { + const popupState = usePopupState({ variant: "popper", popupId: "commentPopper", diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index 2d4f0259..f95e79c3 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { FormControl, InputLabel, @@ -13,28 +13,33 @@ import { selectProject, } from "../contexts"; -const PREFIX = "ProjectSelect"; +const PREFIX = 'ProjectSelect'; const classes = { formControl: `${PREFIX}-formControl`, - input: `${PREFIX}-input`, + input: `${PREFIX}-input` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ +const Root = styled('div')(( + { + theme + } +) => ({ [`& .${classes.formControl}`]: { width: "100%", }, [`& .${classes.input}`]: { margin: theme.spacing(1), - }, + } })); const ProjectSelect: FunctionComponent<{ projectId?: string; onProjectSelect: (id: string) => void; }> = ({ projectId, onProjectSelect }) => { + const { projectList, selectedProjectId } = useProjectState(); const projectDispatch = useProjectDispatch(); diff --git a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx index aae3e439..f4d5eb89 100644 --- a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx +++ b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx @@ -1,5 +1,5 @@ import { Chip, Button } from "@mui/material"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { useSnackbar } from "notistack"; import { useHotkeys } from "react-hotkeys-hook"; import React from "react"; @@ -7,19 +7,19 @@ import { testRunService } from "../../services"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; -const PREFIX = "ApproveRejectButtons"; +const PREFIX = 'ApproveRejectButtons'; const classes = { - actionButton: `${PREFIX}-actionButton`, + actionButton: `${PREFIX}-actionButton` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ +const Root = styled('div')(() => ({ [`& .${classes.actionButton}`]: { width: 120, marginLeft: 4, marginRight: 4, - }, + } })); export const ApproveRejectButtons: React.FunctionComponent<{ @@ -29,6 +29,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ }> = ({ testRun, afterApprove, afterReject }) => { const { enqueueSnackbar } = useSnackbar(); + const approve = () => { testRunService .approveBulk([testRun.id], testRun.merge) diff --git a/src/components/TestDetailsDialog/ArrowButtons.tsx b/src/components/TestDetailsDialog/ArrowButtons.tsx index ca3bccc1..abce4832 100644 --- a/src/components/TestDetailsDialog/ArrowButtons.tsx +++ b/src/components/TestDetailsDialog/ArrowButtons.tsx @@ -1,20 +1,20 @@ import { IconButton } from "@mui/material"; -import { styled } from "@mui/material/styles"; +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"; -const PREFIX = "ArrowButtons"; +const PREFIX = 'ArrowButtons'; const classes = { button: `${PREFIX}-button`, - icon: `${PREFIX}-icon`, + icon: `${PREFIX}-icon` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ +const Root = styled('div')(() => ({ [`& .${classes.button}`]: { width: 64, height: 64, @@ -27,7 +27,7 @@ const Root = styled("div")(() => ({ [`& .${classes.icon}`]: { width: 64, height: 64, - }, + } })); export const ArrowButtons: React.FunctionComponent<{ @@ -35,6 +35,8 @@ export const ArrowButtons: React.FunctionComponent<{ selectedTestRunIndex: number; handleNavigation: (testRunId: string) => void; }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => { + + const navigateNext = () => { if (testRuns.length > selectedTestRunIndex + 1) { const next = testRuns[selectedTestRunIndex + 1]; diff --git a/src/components/TestDetailsDialog/DrawArea.tsx b/src/components/TestDetailsDialog/DrawArea.tsx index 26840189..ed98b883 100644 --- a/src/components/TestDetailsDialog/DrawArea.tsx +++ b/src/components/TestDetailsDialog/DrawArea.tsx @@ -1,6 +1,6 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { FunctionComponent, useCallback } from "react"; -import { styled } from "@mui/material/styles"; +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"; @@ -8,16 +8,20 @@ import { Grid, CircularProgress } from "@mui/material"; import { NoImagePlaceholder } from "./NoImageAvailable"; import Konva from "konva"; -const PREFIX = "DrawArea"; +const PREFIX = 'DrawArea'; const classes = { canvasContainer: `${PREFIX}-canvasContainer`, imageDetailsContainer: `${PREFIX}-imageDetailsContainer`, - progressContainer: `${PREFIX}-progressContainer`, + 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 }) => ({ +const Root = styled('div')(( + { + theme + } +) => ({ [`& .${classes.canvasContainer}`]: { overflow: "auto", backgroundColor: "white", @@ -33,7 +37,7 @@ const Root = styled("div")(({ theme }) => ({ [`& .${classes.progressContainer}`]: { minHeight: "300px", - }, + } })); export type ImageStateLoad = "loaded" | "loading" | "failed"; @@ -83,6 +87,7 @@ export const DrawArea: FunctionComponent = ({ stageScrollPosState, drawModeState, }) => { + const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; @@ -349,5 +354,9 @@ 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 f9c93cd3..ac4a0353 100644 --- a/src/components/TestDetailsDialog/ImageDetails.tsx +++ b/src/components/TestDetailsDialog/ImageDetails.tsx @@ -1,19 +1,19 @@ import React from "react"; -import { styled } from "@mui/material/styles"; +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"; -const PREFIX = "ImageDetails"; +const PREFIX = 'ImageDetails'; const classes = { container: `${PREFIX}-container`, - branchName: `${PREFIX}-branchName`, + branchName: `${PREFIX}-branchName` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ +const Root = styled('div')(() => ({ [`& .${classes.container}`]: { display: "flex", alignItems: "center", @@ -30,7 +30,7 @@ const Root = styled("div")(() => ({ textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", - }, + } })); export interface ImageDetailsProps { @@ -48,6 +48,7 @@ const ImageDetails: React.FunctionComponent = ({ branchName, ignoreAreas, }) => { + const imageSize = () => { return ( imageName && ( diff --git a/src/components/TestDetailsDialog/NoImageAvailable.tsx b/src/components/TestDetailsDialog/NoImageAvailable.tsx index 77d2060f..ce99de29 100644 --- a/src/components/TestDetailsDialog/NoImageAvailable.tsx +++ b/src/components/TestDetailsDialog/NoImageAvailable.tsx @@ -1,23 +1,25 @@ import React from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import noImage from "../../static/no-image.png"; -const PREFIX = "NoImagePlaceholder"; +const PREFIX = 'NoImagePlaceholder'; const classes = { - img: `${PREFIX}-img`, + img: `${PREFIX}-img` }; -const Root = styled("img")(() => ({ +const Root = styled('img')(() => ({ [`&.${classes.img}`]: { display: "block", marginLeft: "auto", marginRight: "auto", width: "fit-content", - }, + } })); // TODO: Use SVG and more specific text to describe reason... export const NoImagePlaceholder: React.FunctionComponent = () => { + + return ; }; diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index 4af09844..85f6211f 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { Typography, Button, @@ -53,7 +53,7 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -const PREFIX = "TestDetailsModal"; +const PREFIX = 'TestDetailsModal'; const classes = { header: `${PREFIX}-header`, @@ -65,11 +65,11 @@ const classes = { testRunDetails: `${PREFIX}-testRunDetails`, drawAreaContainer: `${PREFIX}-drawAreaContainer`, drawAreaItem: `${PREFIX}-drawAreaItem`, - imageToolbar: `${PREFIX}-imageToolbar`, + imageToolbar: `${PREFIX}-imageToolbar` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ +const Root = styled('div')(() => ({ [`& .${classes.header}`]: { position: "relative", textAlign: "left", @@ -119,7 +119,7 @@ const Root = styled("div")(() => ({ [`& .${classes.imageToolbar}`]: { paddingLeft: 5, height: 52, - }, + } })); const defaultStagePos = { @@ -146,6 +146,7 @@ const TestDetailsModal: React.FunctionComponent = ({ handleNext, handleClose, }) => { + const { enqueueSnackbar } = useSnackbar(); const testRunDispatch = useTestRunDispatch(); @@ -626,7 +627,11 @@ const TestDetailsModal: React.FunctionComponent = ({ - + diff --git a/src/components/TestDetailsDialog/index.tsx b/src/components/TestDetailsDialog/index.tsx index 9ff8ba63..376a2abd 100644 --- a/src/components/TestDetailsDialog/index.tsx +++ b/src/components/TestDetailsDialog/index.tsx @@ -1,5 +1,5 @@ import { Dialog, Typography } from "@mui/material"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import React from "react"; import { useNavigate } from "react-router"; import { useBuildState, useTestRunState } from "../../contexts"; @@ -8,19 +8,20 @@ import { BaseModal } from "../BaseModal"; import TestDetailsModal from "./TestDetailsModal"; import { TestRun } from "../../types"; -const PREFIX = "TestDetailsDialog"; +const PREFIX = 'TestDetailsDialog'; const classes = { - modal: `${PREFIX}-modal`, + modal: `${PREFIX}-modal` }; const StyledDialog = styled(Dialog)(() => ({ [`&.${classes.modal}`]: { margin: "20px 10px 10px 10px", - }, + } })); export const TestDetailsDialog: React.FunctionComponent = () => { + const { selectedTestRun, touched, diff --git a/src/components/TestRunList/StatusFilterOperators.tsx b/src/components/TestRunList/StatusFilterOperators.tsx index 627c5ac2..120320a7 100644 --- a/src/components/TestRunList/StatusFilterOperators.tsx +++ b/src/components/TestRunList/StatusFilterOperators.tsx @@ -11,15 +11,12 @@ import { GridFilterItem, GridCellParams, GridFilterOperator, - GridFilterInputValueProps, + GridFilterInputValueProps } from "@mui/x-data-grid"; import { TestStatus, TestRun } from "../../types"; -const StatusInputComponent = ({ - item, - applyValue, -}: GridFilterInputValueProps) => { +const StatusInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => { const { testRuns } = useTestRunState(); const handleFilterChange = (event: SelectChangeEvent) => { @@ -29,9 +26,7 @@ const StatusInputComponent = ({ }); }; - const filterOptions: TestStatus[] = testRuns.map( - (item: TestRun) => item.status, - ); + const filterOptions: TestStatus[] = testRuns.map((item: TestRun) => item.status); return ( @@ -56,7 +51,7 @@ const StatusInputComponent = ({ ); }; -export const StatusFilterOperators: GridFilterOperator[] = [ +export const StatusFilterOperators: GridFilterOperator[] = [ ...getGridStringOperators() .filter((operator) => operator.value === "equals") .map((operator) => ({ diff --git a/src/components/TestRunList/TagFilterOperators.tsx b/src/components/TestRunList/TagFilterOperators.tsx index ebbd575d..2e4179f4 100644 --- a/src/components/TestRunList/TagFilterOperators.tsx +++ b/src/components/TestRunList/TagFilterOperators.tsx @@ -6,11 +6,7 @@ import { } from "@mui/material"; import React from "react"; import { useTestRunState } from "../../contexts"; -import { - getGridStringOperators, - GridFilterOperator, - GridFilterInputValueProps, -} from "@mui/x-data-grid"; +import { getGridStringOperators, GridFilterOperator, GridFilterInputValueProps } from "@mui/x-data-grid"; const TagInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => { const { testRuns } = useTestRunState(); diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx index b01a5cbd..b2f96d05 100644 --- a/src/components/TestVariationList.tsx +++ b/src/components/TestVariationList.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { TestVariation } from "../types"; import { Card, @@ -18,15 +18,15 @@ import { TestVariationDetails } from "./TestVariationDetails"; import { Delete } from "@mui/icons-material"; import { BaseModal } from "./BaseModal"; -const PREFIX = "TestVariationList"; +const PREFIX = 'TestVariationList'; const classes = { card: `${PREFIX}-card`, - media: `${PREFIX}-media`, + media: `${PREFIX}-media` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")({ +const Root = styled('div')({ [`& .${classes.card}`]: { maxWidth: 345, }, @@ -45,6 +45,7 @@ const TestVariationList: React.FunctionComponent = ({ items, onDeleteClick, }) => { + const [selectedItem, setSelectedItem] = React.useState( null, ); diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index 5a2b946f..e5132910 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { styled } from "@mui/material/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,20 +16,21 @@ import { } from "../constants"; import { buildProjectPageUrl } from "../_helpers/route.helpers"; -const PREFIX = "ProjectPage"; +const PREFIX = 'ProjectPage'; const classes = { - root: `${PREFIX}-root`, + root: `${PREFIX}-root` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ +const Root = styled('div')(() => ({ [`& .${classes.root}`]: { height: "100%", - }, + } })); const ProjectPage = () => { + const { projectId } = useParams<{ projectId: string }>(); const navigate = useNavigate(); const helpDispatch = useHelpDispatch(); diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index 0d39235c..a6a271fa 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import { useParams, useNavigate } from "react-router-dom"; import { TestVariation } from "../types"; import { testVariationService, staticService } from "../services"; @@ -23,14 +23,14 @@ import { formatDateTime } from "../_helpers/format.helper"; import TestStatusChip from "../components/TestStatusChip"; import { Baseline } from "../types/baseline"; -const PREFIX = "TestVariationDetailsPage"; +const PREFIX = 'TestVariationDetailsPage'; const classes = { - media: `${PREFIX}-media`, + media: `${PREFIX}-media` }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")({ +const Root = styled('div')({ [`& .${classes.media}`]: { height: 600, objectFit: "contain", @@ -38,6 +38,7 @@ const Root = styled("div")({ }); const TestVariationDetailsPage: React.FunctionComponent = () => { + const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const { testVariationId } = useParams<{ testVariationId: string }>(); From 3c144743f0c2bbc6e5e42271b76b3e7f4708158a Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Thu, 10 Aug 2023 16:29:16 +0300 Subject: [PATCH 2/5] update --- package-lock.json | 329 ++++++++++++++++-- package.json | 3 +- src/components/BaseModal.tsx | 2 +- src/components/BuildList/index.tsx | 37 +- src/components/CommentsPopper.tsx | 35 +- src/components/Filters.tsx | 1 + src/components/Header.tsx | 2 +- src/components/LoginForm.tsx | 6 +- src/components/ProjectSelect.tsx | 40 +-- src/components/RegisterForm.tsx | 10 +- .../ApproveRejectButtons.tsx | 21 +- .../TestDetailsDialog/ArrowButtons.tsx | 25 +- src/components/TestDetailsDialog/DrawArea.tsx | 35 +- .../TestDetailsDialog/ImageDetails.tsx | 65 ++-- .../TestDetailsDialog/TestDetailsModal.tsx | 58 +-- src/components/TestVariationList.tsx | 22 +- src/index.css | 3 +- src/pages/ProfilePage.tsx | 12 +- src/pages/ProjectListPage.tsx | 2 +- src/pages/ProjectPage.tsx | 22 +- src/pages/TestVariationDetailsPage.tsx | 125 +++---- 21 files changed, 508 insertions(+), 347 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e7fefcd..677fad3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,13 +15,14 @@ "@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", "@testing-library/user-event": "^12.8.3", "file-saver": "^2.0.5", "jszip": "^3.10.1", - "konva": "^8.4.3", + "konva": "^7.2.5", "material-ui-popup-state": "^5.0.9", "notistack": "^3.0.1", "qs": "^6.11.2", @@ -625,10 +626,6 @@ "stylis": "4.2.0" } }, - "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { - "version": "0.9.1", - "license": "MIT" - }, "node_modules/@emotion/cache": { "version": "11.11.0", "license": "MIT", @@ -640,6 +637,11 @@ "stylis": "4.2.0" } }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.1", "license": "MIT", @@ -684,10 +686,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@emotion/serialize/node_modules/@emotion/hash": { - "version": "0.9.1", - "license": "MIT" - }, "node_modules/@emotion/sheet": { "version": "1.2.2", "license": "MIT" @@ -1823,6 +1821,54 @@ } } }, + "node_modules/@mui/styles": { + "version": "5.14.4", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.4.tgz", + "integrity": "sha512-I4C7q/s17h8AA9FA63oLPdEHnEQlAPNX3zGngxsOYfSLZJB/VhR2SsrkIZFzUazd6a2o2nC997lbAACn3CstKw==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.14.4", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.4", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.10.0", + "jss-plugin-camel-case": "^10.10.0", + "jss-plugin-default-unit": "^10.10.0", + "jss-plugin-global": "^10.10.0", + "jss-plugin-nested": "^10.10.0", + "jss-plugin-props-sort": "^10.10.0", + "jss-plugin-rule-value-function": "^10.10.0", + "jss-plugin-vendor-prefixer": "^10.10.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styles/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/system": { "version": "5.14.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.4.tgz", @@ -3551,6 +3597,15 @@ "node": ">= 8" } }, + "node_modules/css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "dependencies": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "node_modules/css.escape": { "version": "1.5.1", "license": "MIT" @@ -5313,6 +5368,11 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "node_modules/iconv-lite": { "version": "0.6.3", "dev": true, @@ -5536,6 +5596,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + }, "node_modules/is-inside-container": { "version": "1.0.0", "dev": true, @@ -7637,6 +7702,88 @@ "node": ">=6" } }, + "node_modules/jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", + "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/jss" + } + }, + "node_modules/jss-plugin-camel-case": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", + "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-default-unit": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", + "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-global": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", + "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-nested": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", + "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-props-sort": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", + "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-rule-value-function": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", + "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-vendor-prefixer": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", + "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.10.0" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.4", "dev": true, @@ -7670,7 +7817,9 @@ } }, "node_modules/konva": { - "version": "8.4.3", + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/konva/-/konva-7.2.5.tgz", + "integrity": "sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==", "funding": [ { "type": "patreon", @@ -7684,8 +7833,7 @@ "type": "github", "url": "https://github.com/sponsors/lavrton" } - ], - "license": "MIT" + ] }, "node_modules/language-subtag-registry": { "version": "0.3.22", @@ -9985,6 +10133,11 @@ "dev": true, "license": "MIT" }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/titleize": { "version": "3.0.0", "dev": true, @@ -11027,11 +11180,6 @@ "find-root": "^1.1.0", "source-map": "^0.5.7", "stylis": "4.2.0" - }, - "dependencies": { - "@emotion/hash": { - "version": "0.9.1" - } } }, "@emotion/cache": { @@ -11044,6 +11192,11 @@ "stylis": "4.2.0" } }, + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "@emotion/is-prop-valid": { "version": "1.2.1", "requires": { @@ -11074,11 +11227,6 @@ "@emotion/unitless": "^0.8.1", "@emotion/utils": "^1.2.1", "csstype": "^3.0.2" - }, - "dependencies": { - "@emotion/hash": { - "version": "0.9.1" - } } }, "@emotion/sheet": { @@ -11772,6 +11920,37 @@ "prop-types": "^15.8.1" } }, + "@mui/styles": { + "version": "5.14.4", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.4.tgz", + "integrity": "sha512-I4C7q/s17h8AA9FA63oLPdEHnEQlAPNX3zGngxsOYfSLZJB/VhR2SsrkIZFzUazd6a2o2nC997lbAACn3CstKw==", + "requires": { + "@babel/runtime": "^7.22.6", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.14.4", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.4", + "clsx": "^2.0.0", + "csstype": "^3.1.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.10.0", + "jss-plugin-camel-case": "^10.10.0", + "jss-plugin-default-unit": "^10.10.0", + "jss-plugin-global": "^10.10.0", + "jss-plugin-nested": "^10.10.0", + "jss-plugin-props-sort": "^10.10.0", + "jss-plugin-rule-value-function": "^10.10.0", + "jss-plugin-vendor-prefixer": "^10.10.0", + "prop-types": "^15.8.1" + }, + "dependencies": { + "clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" + } + } + }, "@mui/system": { "version": "5.14.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.4.tgz", @@ -12863,6 +13042,15 @@ "which": "^2.0.1" } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css.escape": { "version": "1.5.1" }, @@ -13956,6 +14144,11 @@ "version": "8.0.3", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.6.3", "dev": true, @@ -14079,6 +14272,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + }, "is-inside-container": { "version": "1.0.0", "dev": true, @@ -15404,6 +15602,84 @@ "version": "2.2.3", "dev": true }, + "jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", + "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", + "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.10.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", + "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-global": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", + "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-nested": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", + "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", + "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", + "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", + "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.10.0" + } + }, "jsx-ast-utils": { "version": "3.3.4", "dev": true, @@ -15428,7 +15704,9 @@ "dev": true }, "konva": { - "version": "8.4.3" + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/konva/-/konva-7.2.5.tgz", + "integrity": "sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==" }, "language-subtag-registry": { "version": "0.3.22", @@ -16781,6 +17059,11 @@ "version": "2.3.8", "dev": true }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "titleize": { "version": "3.0.0", "dev": true diff --git a/package.json b/package.json index 3e7648f0..74ccac54 100644 --- a/package.json +++ b/package.json @@ -14,13 +14,14 @@ "@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", "@testing-library/user-event": "^12.8.3", "file-saver": "^2.0.5", "jszip": "^3.10.1", - "konva": "^8.4.3", + "konva": "^7.2.5", "material-ui-popup-state": "^5.0.9", "notistack": "^3.0.1", "qs": "^6.11.2", diff --git a/src/components/BaseModal.tsx b/src/components/BaseModal.tsx index 9073cf5d..082d7740 100644 --- a/src/components/BaseModal.tsx +++ b/src/components/BaseModal.tsx @@ -38,7 +38,7 @@ export const BaseModal: React.FunctionComponent = ({ - diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index db7497be..4454c590 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { styled } from '@mui/material/styles'; +import { makeStyles, createStyles } from '@mui/styles'; import { List, ListItemButton, @@ -14,6 +14,7 @@ import { Menu, MenuItem, Box, + type Theme, } from "@mui/material"; import { MoreVert } from "@mui/icons-material"; import { @@ -34,35 +35,25 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -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}`]: { +const useStyles = makeStyles((theme: Theme) => + createStyles({ + listContainer: { height: "100%", overflow: "auto", }, - - [`& .${classes.listItemSecondaryAction}`]: { + listItemSecondaryAction: { visibility: "hidden", }, - - [`& .${classes.listItem}`]: { + listItem: { "&:hover $listItemSecondaryAction": { visibility: "inherit", }, - } - })); + }, + }), +); const BuildList: FunctionComponent = () => { - + const classes = useStyles(); const navigate = useNavigate(); const { buildList, selectedBuild, loading, total, take } = useBuildState(); const buildDispatch = useBuildDispatch(); @@ -126,7 +117,7 @@ const BuildList: FunctionComponent = () => { }, [handlePaginationChange]); return ( - + <> {loading ? ( @@ -265,7 +256,7 @@ const BuildList: FunctionComponent = () => { inputProps={{ onChange: (event: React.ChangeEvent) => setNewCiBuildId(event.target.value), - "data-testId": "newCiBuildId", + "data-testid": "newCiBuildId", }} /> @@ -324,7 +315,7 @@ const BuildList: FunctionComponent = () => { }} /> )} - + ); }; diff --git a/src/components/CommentsPopper.tsx b/src/components/CommentsPopper.tsx index e719a69a..5f444ec1 100644 --- a/src/components/CommentsPopper.tsx +++ b/src/components/CommentsPopper.tsx @@ -1,34 +1,22 @@ import React from "react"; -import { styled } from '@mui/material/styles'; -import { Button, Popper, Fade, Paper, TextField, Badge } from "@mui/material"; +import { makeStyles } from '@mui/styles'; +import { Button, Popper, Fade, Paper, TextField, Badge, type Theme } from "@mui/material"; import { usePopupState, bindToggle, bindPopper, } from "material-ui-popup-state/hooks"; -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 - } -) => ({ - [`& .${classes.popperContainer}`]: { +const useStyles = makeStyles((theme: Theme) => ({ + popperContainer: { zIndex: 1400, }, - - [`& .${classes.contentContainer}`]: { + contentContainer: { padding: theme.spacing(2), - } + }, })); + interface IProps { text: string | undefined; onSave: (comment: string) => Promise; @@ -38,7 +26,7 @@ export const CommentsPopper: React.FunctionComponent = ({ text, onSave, }) => { - + const classes = useStyles(); const popupState = usePopupState({ variant: "popper", popupId: "commentPopper", @@ -49,7 +37,7 @@ export const CommentsPopper: React.FunctionComponent = ({ React.useEffect(() => setComment(text || ""), [text]); return ( - + <> = ({ setComment(event.target.value) } inputProps={{ - "data-testId": "comment", + "data-testid": "comment", }} /> diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index f95e79c3..0d39f903 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,10 +1,11 @@ import React, { FunctionComponent } from "react"; -import { styled } from '@mui/material/styles'; +import { makeStyles, createStyles } from '@mui/styles'; import { FormControl, InputLabel, MenuItem, Select, + type Theme, type SelectChangeEvent, } from "@mui/material"; import { @@ -13,33 +14,22 @@ import { selectProject, } from "../contexts"; -const PREFIX = 'ProjectSelect'; - -const classes = { - formControl: `${PREFIX}-formControl`, - input: `${PREFIX}-input` -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled('div')(( - { - theme - } -) => ({ - [`& .${classes.formControl}`]: { - width: "100%", - }, - - [`& .${classes.input}`]: { - margin: theme.spacing(1), - } -})); +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(); @@ -50,7 +40,7 @@ const ProjectSelect: FunctionComponent<{ }, [projectId, selectedProjectId, projectDispatch]); return ( - + <> {projectList.length > 0 && ( @@ -78,7 +68,7 @@ const ProjectSelect: FunctionComponent<{ )} - + ); }; diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx index 26b8c854..6cde8c30 100644 --- a/src/components/RegisterForm.tsx +++ b/src/components/RegisterForm.tsx @@ -55,7 +55,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setFirstName(event.target.value), - "data-testId": "firstName", + "data-testid": "firstName", }} /> @@ -74,7 +74,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setLastName(event.target.value), - "data-testId": "lastName", + "data-testid": "lastName", }} /> @@ -93,7 +93,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setEmail(event.target.value), - "data-testId": "email", + "data-testid": "email", }} /> @@ -112,7 +112,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setPassword(event.target.value), - "data-testId": "password", + "data-testid": "password", }} /> @@ -125,7 +125,7 @@ const RegisterForm = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Submit diff --git a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx index f4d5eb89..5c8f2300 100644 --- a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx +++ b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx @@ -1,25 +1,18 @@ 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 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}`]: { +const useStyles = makeStyles(() => ({ + actionButton: { width: 120, marginLeft: 4, marginRight: 4, - } + }, })); export const ApproveRejectButtons: React.FunctionComponent<{ @@ -28,7 +21,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ afterReject?: () => void; }> = ({ testRun, afterApprove, afterReject }) => { const { enqueueSnackbar } = useSnackbar(); - + const classes = useStyles(); const approve = () => { testRunService @@ -66,7 +59,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 abce4832..3bd8fe42 100644 --- a/src/components/TestDetailsDialog/ArrowButtons.tsx +++ b/src/components/TestDetailsDialog/ArrowButtons.tsx @@ -1,21 +1,13 @@ 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 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}`]: { +const useStyles = makeStyles(() => ({ + button: { width: 64, height: 64, padding: 0, @@ -23,11 +15,10 @@ const Root = styled('div')(() => ({ top: "50%", zIndex: 4000, }, - - [`& .${classes.icon}`]: { + icon: { width: 64, height: 64, - } + }, })); export const ArrowButtons: React.FunctionComponent<{ @@ -35,7 +26,7 @@ export const ArrowButtons: React.FunctionComponent<{ selectedTestRunIndex: number; handleNavigation: (testRunId: string) => void; }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => { - + const classes = useStyles(); const navigateNext = () => { if (testRuns.length > selectedTestRunIndex + 1) { @@ -55,7 +46,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 ed98b883..c874aff6 100644 --- a/src/components/TestDetailsDialog/DrawArea.tsx +++ b/src/components/TestDetailsDialog/DrawArea.tsx @@ -1,43 +1,28 @@ /* 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 } from "@mui/material"; +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 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 - } -) => ({ - [`& .${classes.canvasContainer}`]: { +const useStyles = makeStyles((theme: Theme) => ({ + canvasContainer: { overflow: "auto", backgroundColor: "white", }, - - [`& .${classes.imageDetailsContainer}`]: { + imageDetailsContainer: { position: "absolute", backgroundColor: "white", zIndex: 1, padding: theme.spacing(1), height: "48px", }, - - [`& .${classes.progressContainer}`]: { + progressContainer: { minHeight: "300px", - } + }, })); export type ImageStateLoad = "loaded" | "loading" | "failed"; @@ -87,7 +72,7 @@ export const DrawArea: FunctionComponent = ({ stageScrollPosState, drawModeState, }) => { - + const classes = useStyles(); const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; @@ -355,8 +340,8 @@ export const DrawArea: FunctionComponent = ({ // TODO: Separate SVG with reason... return ( - + <> {imageName ? imageCanvas() : } - + ); }; diff --git a/src/components/TestDetailsDialog/ImageDetails.tsx b/src/components/TestDetailsDialog/ImageDetails.tsx index ac4a0353..d33be359 100644 --- a/src/components/TestDetailsDialog/ImageDetails.tsx +++ b/src/components/TestDetailsDialog/ImageDetails.tsx @@ -1,26 +1,17 @@ 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 classes = { - container: `${PREFIX}-container`, - branchName: `${PREFIX}-branchName` -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled('div')(() => ({ - [`& .${classes.container}`]: { +const useStyles = makeStyles(() => ({ + container: { display: "flex", alignItems: "center", color: "darkslategrey", }, - - [`& .${classes.branchName}`]: { + branchName: { cursor: "pointer", lineHeight: "20px", fontWeight: "bolder", @@ -30,7 +21,7 @@ const Root = styled('div')(() => ({ textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", - } + }, })); export interface ImageDetailsProps { @@ -48,14 +39,14 @@ const ImageDetails: React.FunctionComponent = ({ branchName, ignoreAreas, }) => { - + const classes = useStyles(); const imageSize = () => { return ( imageName && ( {image ? `(${image?.width} x ${image?.height})` : "Loading..."} @@ -63,29 +54,27 @@ const ImageDetails: React.FunctionComponent = ({ ); }; return ( - - - - {type === "Baseline" ? "Baseline" : "Checkpoint"} - - {imageSize()} - - - {branchName} + + + {type === "Baseline" ? "Baseline" : "Checkpoint"} + + {imageSize()} + + + {branchName} + + {ignoreAreas && ignoreAreas.length > 0 && ( + + + + - {ignoreAreas && ignoreAreas.length > 0 && ( - - - - - - )} - - + )} + ); }; diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index 85f6211f..e21c083a 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { styled } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; import { Typography, Button, @@ -53,73 +53,47 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -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}`]: { +const useStyles = makeStyles((theme) => ({ + header: { position: "relative", textAlign: "left", background: "#efefef", paddingLeft: 8, - paddingBottom: 8, }, - - [`& .${classes.footer}`]: { + footer: { background: "#efefef", }, - - [`& .${classes.scaleActions}`]: { + scaleActions: { display: "flex", alignItems: "center", }, - - [`& .${classes.testRunActions}`]: { + testRunActions: { display: "flex", alignItems: "center", alignContent: "center", }, - - [`& .${classes.testRunName}`]: { + testRunName: { fontWeight: 300, }, - - [`& .${classes.closeIcon}`]: { + closeIcon: { position: "absolute", right: "8px", }, - - [`& .${classes.testRunDetails}`]: { + testRunDetails: { paddingLeft: 8, }, - - [`& .${classes.drawAreaContainer}`]: { + drawAreaContainer: { width: "100%", height: "100%", }, - - [`& .${classes.drawAreaItem}`]: { + drawAreaItem: { padding: "0 4px", height: "100%", }, - - [`& .${classes.imageToolbar}`]: { + imageToolbar: { paddingLeft: 5, height: 52, - } + }, })); const defaultStagePos = { @@ -146,7 +120,7 @@ const TestDetailsModal: React.FunctionComponent = ({ handleNext, handleClose, }) => { - + const classes = useStyles(); const { enqueueSnackbar } = useSnackbar(); const testRunDispatch = useTestRunDispatch(); @@ -688,7 +662,7 @@ const TestDetailsModal: React.FunctionComponent = ({ ); return ( - + <> {header()} {processing && } @@ -833,7 +807,7 @@ const TestDetailsModal: React.FunctionComponent = ({ applyIgnoreArea(); }} /> - + ); }; diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx index b2f96d05..3e9be225 100644 --- a/src/components/TestVariationList.tsx +++ b/src/components/TestVariationList.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { styled } from '@mui/material/styles'; import { TestVariation } from "../types"; import { Card, @@ -17,20 +16,13 @@ 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 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}`]: { +const useStyles = makeStyles({ + card: { maxWidth: 345, }, - [`& .${classes.media}`]: { + media: { height: 140, objectFit: "contain", }, @@ -45,7 +37,7 @@ const TestVariationList: React.FunctionComponent = ({ items, onDeleteClick, }) => { - + const classes = useStyles(); const [selectedItem, setSelectedItem] = React.useState( null, ); @@ -55,7 +47,7 @@ const TestVariationList: React.FunctionComponent = ({ }; return ( - + <> {items.length === 0 && ( No variations @@ -104,7 +96,7 @@ const TestVariationList: React.FunctionComponent = ({ }} /> )} - + ); }; diff --git a/src/index.css b/src/index.css index 833f34be..7799f77b 100644 --- a/src/index.css +++ b/src/index.css @@ -5,8 +5,7 @@ body { font-family: Roboto, sans-serif; } -#root, -[data-cy-root] { +#root { height: 100%; } diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 3f5711c3..2db5f5e9 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -111,7 +111,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setFirstName(event.target.value), - "data-testId": "firstName", + "data-testid": "firstName", }} /> @@ -131,7 +131,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setLastName(event.target.value), - "data-testId": "lastName", + "data-testid": "lastName", }} /> @@ -151,7 +151,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setEmail(event.target.value), - "data-testId": "email", + "data-testid": "email", }} /> @@ -181,7 +181,7 @@ const ProfilePage = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Update @@ -216,7 +216,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setPassword(event.target.value), - "data-testId": "password", + "data-testid": "password", }} /> @@ -229,7 +229,7 @@ const ProfilePage = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Update diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx index 9f278941..691d1b3e 100644 --- a/src/pages/ProjectListPage.tsx +++ b/src/pages/ProjectListPage.tsx @@ -183,7 +183,7 @@ const ProjectsListPage = () => { setProjectEditState(projectDispatch, project); }} size="large" - data-testId="delete" + data-testid="delete" > diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index e5132910..81f8279b 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { styled } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; import { Grid, Box } from "@mui/material"; import { useParams, useNavigate } from "react-router-dom"; import BuildList from "../components/BuildList"; @@ -16,21 +16,15 @@ import { } from "../constants"; import { buildProjectPageUrl } from "../_helpers/route.helpers"; -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}`]: { +const useStyles = makeStyles(() => ({ + root: { height: "100%", - } + }, })); -const ProjectPage = () => { +const ProjectPage = () => { + const classes = useStyles(); const { projectId } = useParams<{ projectId: string }>(); const navigate = useNavigate(); const helpDispatch = useHelpDispatch(); @@ -40,7 +34,7 @@ const ProjectPage = () => { }); return ( - + <> @@ -63,7 +57,7 @@ const ProjectPage = () => { - + ); }; diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index a6a271fa..c78a3489 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,5 +1,4 @@ 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"; @@ -22,23 +21,17 @@ 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 classes = { - 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.media}`]: { +const useStyles = makeStyles({ + media: { height: 600, objectFit: "contain", }, }); const TestVariationDetailsPage: React.FunctionComponent = () => { - + const classes = useStyles(); const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const { testVariationId } = useParams<{ testVariationId: string }>(); @@ -54,69 +47,67 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { .catch((err) => enqueueSnackbar(err, { variant: "error", - }), + }) ); } }, [testVariationId, enqueueSnackbar]); return ( - - - - {testVariation && ( - - - - - {testVariation.baselines.map((baseline: Baseline) => ( - - - - - {baseline.testRun && ( - - )} - {baseline.user && ( - - {`${baseline.user.firstName} ${baseline.user.lastName} <${baseline.user.email}>`} - - )} + + + {testVariation && ( + + + + + {testVariation.baselines.map((baseline: Baseline) => ( + + + + + {baseline.testRun && ( + + )} + {baseline.user && ( - {formatDateTime(baseline.createdAt)} + {`${baseline.user.firstName} ${baseline.user.lastName} <${baseline.user.email}>`} - - - - - ))} - - )} - - - + )} + + {formatDateTime(baseline.createdAt)} + + + + + + ))} + + )} + + ); }; From 29c22148afe0ef25726bdcd11d8ed4a4558e8cf3 Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Thu, 10 Aug 2023 16:47:32 +0300 Subject: [PATCH 3/5] unused fix --- src/components/BuildList/index.tsx | 2 +- src/components/TestDetailsDialog/TestDetailsModal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index 4454c590..ad015f42 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -35,7 +35,7 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -const useStyles = makeStyles((theme: Theme) => +const useStyles = makeStyles(() => createStyles({ listContainer: { height: "100%", diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index e21c083a..037a75c6 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -53,7 +53,7 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ header: { position: "relative", textAlign: "left", From 07f54488b664657bfc85c59856ad0c68e5567e2b Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Thu, 10 Aug 2023 16:52:55 +0300 Subject: [PATCH 4/5] Update index.tsx --- src/components/BuildList/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index ad015f42..ff63a6d9 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -14,7 +14,6 @@ import { Menu, MenuItem, Box, - type Theme, } from "@mui/material"; import { MoreVert } from "@mui/icons-material"; import { From 13fd7752bb41025073a4723eb1c9f186f86cd879 Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Thu, 10 Aug 2023 17:14:29 +0300 Subject: [PATCH 5/5] Update NoImageAvailable.tsx --- .../TestDetailsDialog/NoImageAvailable.tsx | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/TestDetailsDialog/NoImageAvailable.tsx b/src/components/TestDetailsDialog/NoImageAvailable.tsx index ce99de29..f74d75bb 100644 --- a/src/components/TestDetailsDialog/NoImageAvailable.tsx +++ b/src/components/TestDetailsDialog/NoImageAvailable.tsx @@ -1,25 +1,19 @@ 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 classes = { - img: `${PREFIX}-img` -}; - -const Root = styled('img')(() => ({ - [`&.${classes.img}`]: { +const useStyles = makeStyles(() => ({ + img: { display: "block", marginLeft: "auto", marginRight: "auto", - width: "fit-content", - } + width: "50%", + }, })); // TODO: Use SVG and more specific text to describe reason... export const NoImagePlaceholder: React.FunctionComponent = () => { + const classes = useStyles(); - - return ; + return Not available; };