Update dependencies 2

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",

src/components/BaseModal.tsx

@@ -38,7 +38,7 @@ export const BaseModal: React.FunctionComponent<IProps> = ({
         <Button onClick={onCancel} color="primary">
           Cancel
         </Button>
-        <Button type="submit" color="primary" data-testId="submitButton">
+        <Button type="submit" color="primary" data-testid="submitButton">
           {submitButtonText}
         </Button>
       </DialogActions>

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,
@@ -34,33 +34,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}`]: {
-    height: "100%",
-    overflow: "auto",
-  },
-
-  [`& .${classes.listItemSecondaryAction}`]: {
-    visibility: "hidden",
-  },
-
-  [`& .${classes.listItem}`]: {
-    "&:hover $listItemSecondaryAction": {
-      visibility: "inherit",
+const useStyles = makeStyles(() =>
+  createStyles({
+    listContainer: {
+      height: "100%",
+      overflow: "auto",
+    },
+    listItemSecondaryAction: {
+      visibility: "hidden",
+    },
+    listItem: {
+      "&:hover $listItemSecondaryAction": {
+        visibility: "inherit",
+      },
     },
-  },
-}));
+  }),
+);
 
 const BuildList: FunctionComponent = () => {
+  const classes = useStyles();
   const navigate = useNavigate();
   const { buildList, selectedBuild, loading, total, take } = useBuildState();
   const buildDispatch = useBuildDispatch();
@@ -124,7 +116,7 @@ const BuildList: FunctionComponent = () => {
   }, [handlePaginationChange]);
 
   return (
-    <Root>
+    <>
       <Box height="91%" overflow="auto">
         <List>
           {loading ? (
@@ -263,7 +255,7 @@ const BuildList: FunctionComponent = () => {
                 inputProps={{
                   onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
                     setNewCiBuildId(event.target.value),
-                  "data-testId": "newCiBuildId",
+                  "data-testid": "newCiBuildId",
                 }}
               />
             </React.Fragment>
@@ -322,7 +314,7 @@ const BuildList: FunctionComponent = () => {
           }}
         />
       )}
-    </Root>
+    </>
   );
 };
 

src/components/CommentsPopper.tsx

@@ -1,30 +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<void | string | number>;
@@ -34,6 +26,7 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
   text,
   onSave,
 }) => {
+  const classes = useStyles();
   const popupState = usePopupState({
     variant: "popper",
     popupId: "commentPopper",
@@ -44,7 +37,7 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
   React.useEffect(() => setComment(text || ""), [text]);
 
   return (
-    <Root>
+    <>
       <Badge
         color="secondary"
         variant="dot"
@@ -82,11 +75,10 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
                     setComment(event.target.value)
                   }
                   inputProps={{
-                    "data-testId": "comment",
+                    "data-testid": "comment",
                   }}
                 />
                 <Button
-                  variant="outlined"
                   onClick={() => {
                     onSave(comment).then(() => popupState.close());
                   }}
@@ -98,6 +90,6 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({
           </Fade>
         )}
       </Popper>
-    </Root>
+    </>
   );
 };

src/components/Filters.tsx

@@ -86,6 +86,7 @@ const Filters: React.FunctionComponent<IProps> = ({
     <Grid container spacing={2} alignItems="flex-end">
       <Grid item xs>
         <DebounceInput
+          variant="standard"
           fullWidth
           label="Name"
           value={query}

src/components/Header.tsx

@@ -149,7 +149,7 @@ const Header: FunctionComponent = () => {
           handleMenuClose();
           logout(authDispatch);
         }}
-        data-testId="logoutBtn"
+        data-testid="logoutBtn"
       >
         <IconButton size="small">
           <SettingsPower />

src/components/LoginForm.tsx

@@ -58,7 +58,7 @@ const LoginForm = () => {
                 inputProps={{
                   onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
                     setEmail(event.target.value),
-                  "data-testId": "email",
+                  "data-testid": "email",
                 }}
               />
             </Grid>
@@ -78,7 +78,7 @@ const LoginForm = () => {
                 inputProps={{
                   onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
                     setPassword(event.target.value),
-                  "data-testId": "password",
+                  "data-testid": "password",
                 }}
               />
             </Grid>
@@ -96,7 +96,7 @@ const LoginForm = () => {
                 type="submit"
                 color="primary"
                 variant="outlined"
-                data-testId="loginBtn"
+                data-testid="loginBtn"
               >
                 Login
               </Button>

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,28 +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();
 
@@ -45,7 +40,7 @@ const ProjectSelect: FunctionComponent<{
   }, [projectId, selectedProjectId, projectDispatch]);
 
   return (
-    <Root>
+    <>
       {projectList.length > 0 && (
         <FormControl variant="standard" className={classes.formControl}>
           <InputLabel id="projectSelect" shrink>
@@ -73,7 +68,7 @@ const ProjectSelect: FunctionComponent<{
           </Select>
         </FormControl>
       )}
-    </Root>
+    </>
   );
 };
 

src/components/RegisterForm.tsx

@@ -55,7 +55,7 @@ const RegisterForm = () => {
                 inputProps={{
                   onChange: (event: React.FormEvent<HTMLInputElement>) =>
                     setFirstName(event.target.value),
-                  "data-testId": "firstName",
+                  "data-testid": "firstName",
                 }}
               />
             </Grid>
@@ -74,7 +74,7 @@ const RegisterForm = () => {
                 inputProps={{
                   onChange: (event: React.FormEvent<HTMLInputElement>) =>
                     setLastName(event.target.value),
-                  "data-testId": "lastName",
+                  "data-testid": "lastName",
                 }}
               />
             </Grid>
@@ -93,7 +93,7 @@ const RegisterForm = () => {
                 inputProps={{
                   onChange: (event: React.FormEvent<HTMLInputElement>) =>
                     setEmail(event.target.value),
-                  "data-testId": "email",
+                  "data-testid": "email",
                 }}
               />
             </Grid>
@@ -112,7 +112,7 @@ const RegisterForm = () => {
                 inputProps={{
                   onChange: (event: React.FormEvent<HTMLInputElement>) =>
                     setPassword(event.target.value),
-                  "data-testId": "password",
+                  "data-testid": "password",
                 }}
               />
             </Grid>
@@ -125,7 +125,7 @@ const RegisterForm = () => {
                 type="submit"
                 color="primary"
                 variant="outlined"
-                data-testId="submit"
+                data-testid="submit"
               >
                 Submit
               </Button>

src/components/TestDetailsDialog/ApproveRejectButtons.tsx

@@ -1,21 +1,14 @@
 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,
@@ -28,6 +21,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{
   afterReject?: () => void;
 }> = ({ testRun, afterApprove, afterReject }) => {
   const { enqueueSnackbar } = useSnackbar();
+  const classes = useStyles();
 
   const approve = () => {
     testRunService
@@ -65,7 +59,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{
   useHotkeys("x", reject, [testRun]);
 
   return (
-    <Root>
+    <>
       {testRun.merge && (
         <Tooltip title="Will replace target branch baseline if accepted">
           <Chip
@@ -93,6 +87,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{
           Reject
         </Button>
       </Tooltip>
-    </Root>
+    </>
   );
 };