|
1 | 1 | import React, { FunctionComponent } from "react"; |
2 | | -import { styled } from "@mui/material/styles"; |
| 2 | +import { makeStyles, createStyles } from '@mui/styles'; |
3 | 3 | import { |
4 | 4 | List, |
5 | 5 | ListItemButton, |
@@ -34,33 +34,25 @@ import { useNavigate } from "react-router"; |
34 | 34 | import { buildTestRunLocation } from "../../_helpers/route.helpers"; |
35 | 35 | import { Tooltip } from "../Tooltip"; |
36 | 36 |
|
37 | | -const PREFIX = "index"; |
38 | | - |
39 | | -const classes = { |
40 | | - listContainer: `${PREFIX}-listContainer`, |
41 | | - listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`, |
42 | | - listItem: `${PREFIX}-listItem`, |
43 | | -}; |
44 | | - |
45 | | -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. |
46 | | -const Root = styled("div")(() => ({ |
47 | | - [`& .${classes.listContainer}`]: { |
48 | | - height: "100%", |
49 | | - overflow: "auto", |
50 | | - }, |
51 | | - |
52 | | - [`& .${classes.listItemSecondaryAction}`]: { |
53 | | - visibility: "hidden", |
54 | | - }, |
55 | | - |
56 | | - [`& .${classes.listItem}`]: { |
57 | | - "&:hover $listItemSecondaryAction": { |
58 | | - visibility: "inherit", |
| 37 | +const useStyles = makeStyles(() => |
| 38 | + createStyles({ |
| 39 | + listContainer: { |
| 40 | + height: "100%", |
| 41 | + overflow: "auto", |
| 42 | + }, |
| 43 | + listItemSecondaryAction: { |
| 44 | + visibility: "hidden", |
| 45 | + }, |
| 46 | + listItem: { |
| 47 | + "&:hover $listItemSecondaryAction": { |
| 48 | + visibility: "inherit", |
| 49 | + }, |
59 | 50 | }, |
60 | | - }, |
61 | | -})); |
| 51 | + }), |
| 52 | +); |
62 | 53 |
|
63 | 54 | const BuildList: FunctionComponent = () => { |
| 55 | + const classes = useStyles(); |
64 | 56 | const navigate = useNavigate(); |
65 | 57 | const { buildList, selectedBuild, loading, total, take } = useBuildState(); |
66 | 58 | const buildDispatch = useBuildDispatch(); |
@@ -124,7 +116,7 @@ const BuildList: FunctionComponent = () => { |
124 | 116 | }, [handlePaginationChange]); |
125 | 117 |
|
126 | 118 | return ( |
127 | | - <Root> |
| 119 | + <> |
128 | 120 | <Box height="91%" overflow="auto"> |
129 | 121 | <List> |
130 | 122 | {loading ? ( |
@@ -263,7 +255,7 @@ const BuildList: FunctionComponent = () => { |
263 | 255 | inputProps={{ |
264 | 256 | onChange: (event: React.ChangeEvent<HTMLInputElement>) => |
265 | 257 | setNewCiBuildId(event.target.value), |
266 | | - "data-testId": "newCiBuildId", |
| 258 | + "data-testid": "newCiBuildId", |
267 | 259 | }} |
268 | 260 | /> |
269 | 261 | </React.Fragment> |
@@ -322,7 +314,7 @@ const BuildList: FunctionComponent = () => { |
322 | 314 | }} |
323 | 315 | /> |
324 | 316 | )} |
325 | | - </Root> |
| 317 | + </> |
326 | 318 | ); |
327 | 319 | }; |
328 | 320 |
|
|
0 commit comments