diff --git a/package.json b/package.json index 93446c6b2..f50952eee 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "start-untyped": "TSC_COMPILE_ON_ERROR=\"true\" react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", + "update-snapshots": "react-scripts test --env=jsdom --updateSnapshot", "typecheck": "tsc --project tsconfig.json --noEmit", "prettier": "prettier --write .", "prettier-check": "prettier --check .", diff --git a/src/AllRoutes.tsx b/src/AllRoutes.tsx index be18c7019..7888a4a5b 100644 --- a/src/AllRoutes.tsx +++ b/src/AllRoutes.tsx @@ -6,9 +6,7 @@ import Drawer from '@mui/material/Drawer'; import IconButton from '@mui/material/IconButton'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import BookIcon from '@mui/icons-material/Book'; import MenuIcon from '@mui/icons-material/Menu'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; @@ -54,8 +52,8 @@ const AsyncApiExplorerRenderer = React.lazy(() => import('./components/explorer/ const drawerWidth = 360; -export const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { flex: { flex: 1, }, @@ -70,7 +68,7 @@ export const styles = theme => marginLeft: 8, }, titleShift: { - marginLeft: 2 * theme.spacing(1.0), + marginLeft: theme.spacing(2.0), }, marginRight: { marginRight: theme.spacing(1.0), @@ -131,7 +129,8 @@ export const styles = theme => padding: 0, marginLeft: 0, }, - }); + }; +}); const cirrusOpenDrawerState = atom({ key: 'CirrusOpenDrawer', @@ -139,9 +138,8 @@ const cirrusOpenDrawerState = atom({ effects_UNSTABLE: [localStorageEffect('CirrusOpenDrawer')], }); -function AllRoutes(props: WithStyles) { - let { classes } = props; - +function AllRoutes() { + let classes = useStyles(); let theme = useTheme(); const [openDrawer, setOpenDrawer] = useRecoilState(cirrusOpenDrawerState); @@ -277,4 +275,4 @@ function AllRoutes(props: WithStyles) { ); } -export default withStyles(styles)(AllRoutes); +export default AllRoutes; diff --git a/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap b/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap index ec242a8de..bc6d87f2f 100644 --- a/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap @@ -6,11 +6,11 @@ exports[`renders correctly 1`] = ` role="progressbar" > diff --git a/src/components/__tests__/__snapshots__/Logs.test.tsx.snap b/src/components/__tests__/__snapshots__/Logs.test.tsx.snap index 4a68c0aa1..f639732a6 100644 --- a/src/components/__tests__/__snapshots__/Logs.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Logs.test.tsx.snap @@ -2,10 +2,10 @@ exports[`renders correctly 1`] = `
- createStyles({ +const useStyles = makeStyles(theme => { + return { authButton: { color: theme.palette.primary.contrastText, marginLeft: 10, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { viewer: AccountInformation_viewer; } @@ -43,7 +42,8 @@ function AccountInformation(props: Props) { setAnchorEl(null); }; - let { viewer, classes } = props; + let { viewer } = props; + let classes = useStyles(); if (!viewer) { return ( @@ -95,7 +95,7 @@ function AccountInformation(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(AccountInformation), { +export default createFragmentContainer(AccountInformation, { viewer: graphql` fragment AccountInformation_viewer on User { avatarURL diff --git a/src/components/account/OwnerRepositoryList.tsx b/src/components/account/OwnerRepositoryList.tsx index 92b5343ec..130d4324b 100644 --- a/src/components/account/OwnerRepositoryList.tsx +++ b/src/components/account/OwnerRepositoryList.tsx @@ -5,8 +5,7 @@ import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import Tooltip from '@mui/material/Tooltip'; import LastDefaultBranchBuildRow from '../builds/LastDefaultBranchBuildRow'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import { Link } from 'react-router-dom'; @@ -15,22 +14,23 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { OwnerRepositoryList_info } from './__generated__/OwnerRepositoryList_info.graphql'; -import createStyles from '@mui/styles/createStyles'; -let styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { toolbar: { paddingLeft: 14, background: theme.palette.action.disabledBackground, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { info: OwnerRepositoryList_info; } let OwnerRepositoryList = (props: Props) => { - let { classes, info } = props; + let { info } = props; + let classes = useStyles(); let organizationSettings = null; @@ -67,7 +67,7 @@ let OwnerRepositoryList = (props: Props) => { ); }; -export default createFragmentContainer(withStyles(styles)(OwnerRepositoryList), { +export default createFragmentContainer(OwnerRepositoryList, { info: graphql` fragment OwnerRepositoryList_info on OwnerInfo { platform diff --git a/src/components/account/UserProfile.tsx b/src/components/account/UserProfile.tsx index 9560a1146..734590727 100644 --- a/src/components/account/UserProfile.tsx +++ b/src/components/account/UserProfile.tsx @@ -3,9 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import Tooltip from '@mui/material/Tooltip'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import { navigateHelper } from '../../utils/navigateHelper'; @@ -16,8 +14,8 @@ import Settings from '@mui/icons-material/Settings'; import OwnerPlatformIcon from '../icons/OwnerPlatformIcon'; import { List, ListItem, ListItemAvatar, ListItemText } from '@mui/material'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { title: { backgroundColor: theme.palette.action.disabledBackground, }, @@ -28,16 +26,18 @@ const styles = theme => display: 'flex', alignItems: 'center', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { user: UserProfile_user; } function UserProfile(props: Props) { const navigate = useNavigate(); - let { user, classes } = props; + let { user } = props; + let classes = useStyles(); useEffect(() => { // in case of only one owner (like only the user with no organizations) @@ -85,7 +85,7 @@ function UserProfile(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(UserProfile), { +export default createFragmentContainer(UserProfile, { user: graphql` fragment UserProfile_user on User { relatedOwners { diff --git a/src/components/account/ViewerBuildList.tsx b/src/components/account/ViewerBuildList.tsx index 473f55f11..04146e9c3 100644 --- a/src/components/account/ViewerBuildList.tsx +++ b/src/components/account/ViewerBuildList.tsx @@ -4,9 +4,8 @@ import { graphql } from 'babel-plugin-relay/macro'; import { useNavigate } from 'react-router-dom'; import { Helmet as Head } from 'react-helmet'; -import { WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import { Box, ToggleButton, ToggleButtonGroup } from '@mui/material'; -import withStyles from '@mui/styles/withStyles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; @@ -28,39 +27,42 @@ import { ViewerBuildListRefetchQuery } from './__generated__/ViewerBuildListRefe import { ViewerBuildList_viewer$key } from './__generated__/ViewerBuildList_viewer.graphql'; // todo: move custom values to mui theme adjustments -const styles = theme => ({ - paper: { - marginTop: theme.spacing(4), - padding: theme.spacing(1.0, 2.5, 1.5), - boxShadow: '0 16px 52px rgb(0 0 0 / 13%)', - borderRadius: 4 * theme.shape.borderRadius, - }, - header: { - paddingLeft: 14, - justifyContent: 'space-between', - }, - chip: { - margin: theme.spacing(0.5), - }, - cell: { - width: '100%', - maxWidth: '600px', - }, - emptyBuilds: { - margin: theme.spacing(1.0), - marginLeft: 14, - }, - padding: { - margin: theme.spacing(0.5), - }, +const useStyles = makeStyles(theme => { + return { + paper: { + marginTop: theme.spacing(4), + padding: theme.spacing(1.0, 2.5, 1.5), + boxShadow: '0 16px 52px rgb(0 0 0 / 13%)', + borderRadius: 4 * theme.shape.borderRadius, + }, + header: { + paddingLeft: 14, + justifyContent: 'space-between', + }, + chip: { + margin: theme.spacing(0.5), + }, + cell: { + width: '100%', + maxWidth: '600px', + }, + emptyBuilds: { + margin: theme.spacing(1.0), + marginLeft: 14, + }, + padding: { + margin: theme.spacing(0.5), + }, + }; }); -interface Props extends WithStyles { +interface Props { viewer: ViewerBuildList_viewer$key; } function ViewerBuildList(props: Props) { - let { viewer, classes } = props; + let { viewer } = props; + let classes = useStyles(); const pageWidth = usePageWidth(); const isNewDesign = pageWidth > 900; @@ -96,8 +98,6 @@ function ViewerBuildList(props: Props) { let navigate = useNavigate(); function buildItem(build) { - let { classes } = props; - return ( { + return { + title: { + display: 'flex', + flexGrow: 1, + }, + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskArtifacts_task; } @@ -123,7 +124,8 @@ function ArtifactsView(props: Props) { return results; } - let { task, classes } = props; + let { task } = props; + let classes = useStyles(); let { artifacts } = task; let items = []; @@ -224,4 +226,4 @@ function ArtifactsView(props: Props) { ); } -export default withStyles(styles)(ArtifactsView); +export default ArtifactsView; diff --git a/src/components/builds/BuildDetails.tsx b/src/components/builds/BuildDetails.tsx index 211df0ca4..022350bf2 100644 --- a/src/components/builds/BuildDetails.tsx +++ b/src/components/builds/BuildDetails.tsx @@ -1,6 +1,4 @@ -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardActions from '@mui/material/CardActions'; @@ -96,8 +94,8 @@ const taskCancelMutation = graphql` } `; -const styles = () => - createStyles({ +const useStyles = makeStyles(theme => { + return { gap: { paddingTop: 16, }, @@ -114,9 +112,10 @@ const styles = () => tabPanel: { padding: 0, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { build: BuildDetails_build; } @@ -132,7 +131,8 @@ function BuildDetails(props: Props) { subscription.dispose(); }; }, [props.build.id]); - const { build, classes } = props; + const { build } = props; + let classes = useStyles(); const repository = build.repository; function approveBuild() { @@ -327,7 +327,7 @@ function BuildDetails(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(BuildDetails), { +export default createFragmentContainer(BuildDetails, { build: graphql` fragment BuildDetails_build on Build { id diff --git a/src/components/builds/BuildsTable.tsx b/src/components/builds/BuildsTable.tsx index 6f438db48..4f1eb0858 100644 --- a/src/components/builds/BuildsTable.tsx +++ b/src/components/builds/BuildsTable.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo, useEffect } from 'react'; +import { memo, useEffect, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { ThemeProvider } from '@emotion/react'; import { createFragmentContainer, requestSubscription } from 'react-relay'; @@ -7,9 +7,8 @@ import { useRecoilValue } from 'recoil'; import { graphql } from 'babel-plugin-relay/macro'; import environment from '../../createRelayEnvironment'; -import { useTheme } from '@mui/material'; -import { WithStyles } from '@mui/styles'; -import { Link } from '@mui/material'; +import { Link, useTheme } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import { createTheme } from '@mui/material/styles'; import Table from '@mui/material/Table'; import Stack from '@mui/material/Stack'; @@ -18,11 +17,9 @@ import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import withStyles from '@mui/styles/withStyles'; import InfoIcon from '@mui/icons-material/Info'; import CommitIcon from '@mui/icons-material/Commit'; import Typography from '@mui/material/Typography'; -import createStyles from '@mui/styles/createStyles'; import CallSplitIcon from '@mui/icons-material/CallSplit'; import UnarchiveIcon from '@mui/icons-material/UnarchiveOutlined'; @@ -39,8 +36,8 @@ import { BuildsTable_builds } from './__generated__/BuildsTable_builds.graphql'; import BookOutlinedIcon from '@mui/icons-material/BookOutlined'; // todo: move custom values to mui theme adjustments -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { table: { tableLayout: 'auto', }, @@ -114,11 +111,10 @@ const styles = theme => padding: '1px 5px', '& *': { fontSize: '14px !important' }, }, - }); - -const styled = withStyles(styles); + }; +}); -interface Props extends WithStyles { +interface Props { builds: BuildsTable_builds; selectedBuildId?: string; setSelectedBuildId?: Function; @@ -132,7 +128,8 @@ const buildSubscription = graphql` } `; -const BuildsTable = styled(({ classes, builds = [], selectedBuildId, setSelectedBuildId }: Props) => { +const BuildsTable = ({ builds = [], selectedBuildId, setSelectedBuildId }: Props) => { + let classes = useStyles(); const themeOptions = useRecoilValue(muiThemeOptions); const muiTheme = useMemo(() => createTheme(themeOptions), [themeOptions]); @@ -155,11 +152,9 @@ const BuildsTable = styled(({ classes, builds = [], selectedBuildId, setSelected ); -}); - -interface HeadRowProps extends WithStyles {} - -const HeadRow = styled(({ classes }: HeadRowProps) => { +}; +const HeadRow = () => { + let classes = useStyles(); const durationTooltipText = ( <> Clock duration reflects elapsed time between creation of all tasks for a particular build and completion of the @@ -184,124 +179,118 @@ const HeadRow = styled(({ classes }: HeadRowProps) => { ); -}); +}; -interface BuildRowProps extends WithStyles { +interface BuildRowProps { build: BuildsTable_builds[number]; selected?: boolean; setSelectedBuildId?: Function; } -const BuildRow = styled( - memo(({ classes, build, selected, setSelectedBuildId }: BuildRowProps) => { - const theme = useTheme(); - const navigate = useNavigate(); +const BuildRow = memo(({ build, selected, setSelectedBuildId }: BuildRowProps) => { + let classes = useStyles(); + const theme = useTheme(); + const navigate = useNavigate(); - const isFinalStatus = useMemo(() => isBuildFinalStatus(build.status), [build.status]); - useEffect(() => { - if (isFinalStatus) return; - const subscription = requestSubscription(environment, { - subscription: buildSubscription, - variables: { buildID: build.id }, - }); - return () => { - subscription.dispose(); - }; - }, [build.id, isFinalStatus]); + const isFinalStatus = useMemo(() => isBuildFinalStatus(build.status), [build.status]); + useEffect(() => { + if (isFinalStatus) return; + const subscription = requestSubscription(environment, { + subscription: buildSubscription, + variables: { buildID: build.id }, + }); + return () => { + subscription.dispose(); + }; + }, [build.id, isFinalStatus]); - let rowProps; - const selectable = !!setSelectedBuildId; - if (selectable) { - rowProps = { - selected: selected, - onMouseEnter() { - if (selected) return; - setSelectedBuildId(build.id); - }, - onMouseLeave() { - setSelectedBuildId(null); - }, - }; - } else { - rowProps = { - hover: true, - }; - } + let rowProps; + const selectable = !!setSelectedBuildId; + if (selectable) { + rowProps = { + selected: selected, + onMouseEnter() { + if (selected) return; + setSelectedBuildId(build.id); + }, + onMouseLeave() { + setSelectedBuildId(null); + }, + }; + } else { + rowProps = { + hover: true, + }; + } - return ( - { - const target = e.target as HTMLElement; - if (target.closest('a')) return; - navigateBuildHelper(navigate, e, build.id); - }} - > - {/* STATUS */} - - - + return ( + { + const target = e.target as HTMLElement; + if (target.closest('a')) return; + navigateBuildHelper(navigate, e, build.id); + }} + > + {/* STATUS */} + + + - {/* REPOSITORY */} - - - - - {build.repository.name} - - - - by {build.repository.owner} - - + {/* REPOSITORY */} + + + + + {build.repository.name} + + + + by {build.repository.owner} + + - {/* COMMIT */} - - - {build.changeMessageTitle} - - - - {build.changeIdInRepo.substr(0, 7)} - - + {/* COMMIT */} + + + {build.changeMessageTitle} + + + + {build.changeIdInRepo.substr(0, 7)} + + - {/* BRANCH */} - - - {build.tag ? : } - - {shorten(build.branch)} - - - + {/* BRANCH */} + + + {build.tag ? : } + + {shorten(build.branch)} + + + - {/* DURATION */} - - {build.clockDurationInSeconds ? formatDuration(build.clockDurationInSeconds) : '—'} - - - ); - }), -); + {/* DURATION */} + + {build.clockDurationInSeconds ? formatDuration(build.clockDurationInSeconds) : '—'} + + + ); +}); export default createFragmentContainer(BuildsTable, { builds: graphql` diff --git a/src/components/builds/ConfigurationWithIssues.tsx b/src/components/builds/ConfigurationWithIssues.tsx index e7c70d5f6..f57b05677 100644 --- a/src/components/builds/ConfigurationWithIssues.tsx +++ b/src/components/builds/ConfigurationWithIssues.tsx @@ -1,8 +1,6 @@ import React, { ReactNode } from 'react'; -import { Alert, Theme } from '@mui/material'; -import createStyles from '@mui/styles/createStyles'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { Alert } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { ConfigurationWithIssues_build } from './__generated__/ConfigurationWithIssues_build.graphql'; @@ -12,8 +10,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Typography from '@mui/material/Typography'; import AccordionDetails from '@mui/material/AccordionDetails'; -const styles = (theme: Theme) => - createStyles({ +const useStyles = makeStyles(theme => { + return { configurationTable: { color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.dark, background: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, @@ -46,14 +44,16 @@ const styles = (theme: Theme) => topPadded: { paddingTop: theme.spacing(2), }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { build: ConfigurationWithIssues_build; } function ConfigurationWithIssues(props: Props) { - let { build, classes } = props; + let { build } = props; + let classes = useStyles(); if (!build.parsingResult || build.parsingResult.issues.length === 0) { return null; @@ -195,7 +195,7 @@ function ConfigurationWithIssues(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(ConfigurationWithIssues), { +export default createFragmentContainer(ConfigurationWithIssues, { build: graphql` fragment ConfigurationWithIssues_build on Build { parsingResult { diff --git a/src/components/builds/LastDefaultBranchBuildMiniRow.tsx b/src/components/builds/LastDefaultBranchBuildMiniRow.tsx index 2769719e5..26fe83ab3 100644 --- a/src/components/builds/LastDefaultBranchBuildMiniRow.tsx +++ b/src/components/builds/LastDefaultBranchBuildMiniRow.tsx @@ -4,9 +4,7 @@ import { graphql } from 'babel-plugin-relay/macro'; import environment from '../../createRelayEnvironment'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { navigateBuildHelper } from '../../utils/navigateHelper'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import BuildStatusChip from '../chips/BuildStatusChip'; @@ -22,8 +20,8 @@ const buildSubscription = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { chip: { margin: theme.spacing(1.0), }, @@ -31,9 +29,10 @@ const styles = theme => margin: theme.spacing(1.0), width: '100%', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { repository: LastDefaultBranchBuildMiniRow_repository; } @@ -52,7 +51,8 @@ function LastDefaultBranchBuildRow(props: Props) { let navigate = useNavigate(); - let { classes, repository } = props; + let { repository } = props; + let classes = useStyles(); let build = repository.lastDefaultBranchBuild; if (!build) { return null; @@ -77,7 +77,7 @@ function LastDefaultBranchBuildRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(LastDefaultBranchBuildRow), { +export default createFragmentContainer(LastDefaultBranchBuildRow, { repository: graphql` fragment LastDefaultBranchBuildMiniRow_repository on Repository { id diff --git a/src/components/builds/LastDefaultBranchBuildRow.tsx b/src/components/builds/LastDefaultBranchBuildRow.tsx index 36dd753c8..285a6735f 100644 --- a/src/components/builds/LastDefaultBranchBuildRow.tsx +++ b/src/components/builds/LastDefaultBranchBuildRow.tsx @@ -4,8 +4,7 @@ import { graphql } from 'babel-plugin-relay/macro'; import environment from '../../createRelayEnvironment'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { useNavigate } from 'react-router-dom'; import { navigateRepositoryHelper } from '../../utils/navigateHelper'; import RepositoryNameChip from '../chips/RepositoryNameChip'; @@ -23,20 +22,22 @@ const buildSubscription = graphql` } `; -const styles = theme => ({ - chip: { - margin: 4, - }, - message: { - margin: theme.spacing(1.0), - width: '100%', - }, - cell: { - padding: 4, - }, +const useStyles = makeStyles(theme => { + return { + chip: { + margin: 4, + }, + message: { + margin: theme.spacing(1.0), + width: '100%', + }, + cell: { + padding: 4, + }, + }; }); -interface Props extends WithStyles { +interface Props { repository: LastDefaultBranchBuildRow_repository; } @@ -54,7 +55,8 @@ function LastDefaultBranchBuildRow(props: Props) { }, [props.repository.id]); let navigate = useNavigate(); - let { classes, repository } = props; + let { repository } = props; + let classes = useStyles(); let build = repository.lastDefaultBranchBuild; if (!build) { return null; @@ -89,7 +91,7 @@ function LastDefaultBranchBuildRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(LastDefaultBranchBuildRow), { +export default createFragmentContainer(LastDefaultBranchBuildRow, { repository: graphql` fragment LastDefaultBranchBuildRow_repository on Repository { id diff --git a/src/components/chips/BuildBranchNameChip.tsx b/src/components/chips/BuildBranchNameChip.tsx index 5dfd59d3a..9baee46cf 100644 --- a/src/components/chips/BuildBranchNameChip.tsx +++ b/src/components/chips/BuildBranchNameChip.tsx @@ -9,28 +9,28 @@ import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { BuildBranchNameChip_build } from './__generated__/BuildBranchNameChip_build.graphql'; import { shorten } from '../../utils/text'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { Commit } from '@mui/icons-material'; import { Tooltip } from '@mui/material'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { className?: string; build: BuildBranchNameChip_build; } function BuildBranchNameChip(props: Props) { + let classes = useStyles(); let navigate = useNavigate(); let build = props.build; @@ -53,8 +53,8 @@ function BuildBranchNameChip(props: Props) { className={props.className} label={shorten(build.branch)} avatar={ - - + + } onClick={handleBranchClick} @@ -69,8 +69,8 @@ function BuildBranchNameChip(props: Props) { className={props.className} label={shorten(build.branch)} avatar={ - - + + } onClick={handleBranchClick} @@ -79,7 +79,7 @@ function BuildBranchNameChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(BuildBranchNameChip), { +export default createFragmentContainer(BuildBranchNameChip, { build: graphql` fragment BuildBranchNameChip_build on Build { id diff --git a/src/components/chips/BuildChangeChip.tsx b/src/components/chips/BuildChangeChip.tsx index a499d4e36..53fe1c014 100644 --- a/src/components/chips/BuildChangeChip.tsx +++ b/src/components/chips/BuildChangeChip.tsx @@ -7,21 +7,20 @@ import { createFragmentContainer } from 'react-relay'; import { useNavigate } from 'react-router-dom'; import { navigateBuildHelper } from '../../utils/navigateHelper'; import { BuildChangeChip_build } from './__generated__/BuildChangeChip_build.graphql'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { build: BuildChangeChip_build; className?: string; } @@ -29,12 +28,13 @@ interface Props extends WithStyles { function BuildChangeChip(props: Props) { let { build, className } = props; let navigate = useNavigate(); + let classes = useStyles(); return ( - + + } onClick={e => navigateBuildHelper(navigate, e, build.id)} @@ -44,7 +44,7 @@ function BuildChangeChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(BuildChangeChip), { +export default createFragmentContainer(BuildChangeChip, { build: graphql` fragment BuildChangeChip_build on Build { id diff --git a/src/components/chips/HookNameChip.tsx b/src/components/chips/HookNameChip.tsx index f8b189690..7c99e2f23 100644 --- a/src/components/chips/HookNameChip.tsx +++ b/src/components/chips/HookNameChip.tsx @@ -5,30 +5,30 @@ import Chip from '@mui/material/Chip'; import Functions from '@mui/icons-material/Functions'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { navigateHookHelper } from '../../utils/navigateHelper'; import { useNavigate } from 'react-router-dom'; import { HookNameChip_hook } from './__generated__/HookNameChip_hook.graphql'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { hook: HookNameChip_hook; className?: string; } let HookNameChip = (props: Props) => { - const { hook, className, classes } = props; + const { hook, className } = props; + let classes = useStyles(); let navigate = useNavigate(); return ( @@ -46,7 +46,7 @@ let HookNameChip = (props: Props) => { ); }; -export default createFragmentContainer(withStyles(styles)(HookNameChip), { +export default createFragmentContainer(HookNameChip, { hook: graphql` fragment HookNameChip_hook on Hook { id diff --git a/src/components/chips/NextCronInvocationTimeChip.tsx b/src/components/chips/NextCronInvocationTimeChip.tsx index 46485029d..640f67748 100644 --- a/src/components/chips/NextCronInvocationTimeChip.tsx +++ b/src/components/chips/NextCronInvocationTimeChip.tsx @@ -6,26 +6,26 @@ import { graphql } from 'babel-plugin-relay/macro'; import React from 'react'; import { createFragmentContainer } from 'react-relay'; import { NextCronInvocationTimeChip_settings } from './__generated__/NextCronInvocationTimeChip_settings.graphql'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { settings: NextCronInvocationTimeChip_settings; className?: string; } function NextCronInvocationTimeChip(props: Props) { + let classes = useStyles(); let nextInvocationTimestamp = props.settings.nextInvocationTimestamp; return ( - + + } /> @@ -46,7 +46,7 @@ function NextCronInvocationTimeChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(NextCronInvocationTimeChip), { +export default createFragmentContainer(NextCronInvocationTimeChip, { settings: graphql` fragment NextCronInvocationTimeChip_settings on RepositoryCronSettings { nextInvocationTimestamp diff --git a/src/components/chips/RepositoryNameChip.tsx b/src/components/chips/RepositoryNameChip.tsx index 73c31c35f..1aca498b2 100644 --- a/src/components/chips/RepositoryNameChip.tsx +++ b/src/components/chips/RepositoryNameChip.tsx @@ -7,28 +7,28 @@ import { navigateHelper } from '../../utils/navigateHelper'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { RepositoryNameChip_repository } from './__generated__/RepositoryNameChip_repository.graphql'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { useNavigate } from 'react-router-dom'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { className?: string; fullName?: boolean; repository: RepositoryNameChip_repository; } function RepositoryNameChip(props: Props) { + let classes = useStyles(); let navigate = useNavigate(); let repository = props.repository; @@ -40,8 +40,8 @@ function RepositoryNameChip(props: Props) { - + + } onClick={e => handleRepositoryClick(e, repository)} @@ -51,7 +51,7 @@ function RepositoryNameChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(RepositoryNameChip), { +export default createFragmentContainer(RepositoryNameChip, { repository: graphql` fragment RepositoryNameChip_repository on Repository { owner diff --git a/src/components/chips/RepositoryOwnerChip.tsx b/src/components/chips/RepositoryOwnerChip.tsx index 2b62e1b07..833da287f 100644 --- a/src/components/chips/RepositoryOwnerChip.tsx +++ b/src/components/chips/RepositoryOwnerChip.tsx @@ -6,28 +6,28 @@ import { navigateHelper } from '../../utils/navigateHelper'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { RepositoryOwnerChip_repository } from './__generated__/RepositoryOwnerChip_repository.graphql'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { useNavigate } from 'react-router-dom'; import GitHubIcon from '@mui/icons-material/GitHub'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { className?: string; repository: RepositoryOwnerChip_repository; } function RepositoryOwnerChip(props: Props) { + let classes = useStyles(); let navigate = useNavigate(); let repository = props.repository; @@ -39,8 +39,8 @@ function RepositoryOwnerChip(props: Props) { - + + } onClick={e => handleRepositoryClick(e, repository)} @@ -50,7 +50,7 @@ function RepositoryOwnerChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(RepositoryOwnerChip), { +export default createFragmentContainer(RepositoryOwnerChip, { repository: graphql` fragment RepositoryOwnerChip_repository on Repository { owner diff --git a/src/components/chips/TaskNameChip.tsx b/src/components/chips/TaskNameChip.tsx index fc0268c4f..2892e317f 100644 --- a/src/components/chips/TaskNameChip.tsx +++ b/src/components/chips/TaskNameChip.tsx @@ -5,31 +5,31 @@ import Chip from '@mui/material/Chip'; import Bookmark from '@mui/icons-material/Bookmark'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { TaskNameChip_task } from './__generated__/TaskNameChip_task.graphql'; import { navigateTaskHelper } from '../../utils/navigateHelper'; import { useNavigate } from 'react-router-dom'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskNameChip_task; className?: string; withNavigation?: boolean; } let TaskNameChip = (props: Props) => { - const { task, className, classes } = props; + const { task, className } = props; + let classes = useStyles(); let navigate = useNavigate(); // We use the empty handler when we won't the navigation to happen, yet it helps e.g. Vimium (http://vimium.github.io/) @@ -51,7 +51,7 @@ let TaskNameChip = (props: Props) => { ); }; -export default createFragmentContainer(withStyles(styles)(TaskNameChip), { +export default createFragmentContainer(TaskNameChip, { task: graphql` fragment TaskNameChip_task on Task { id diff --git a/src/components/chips/TaskResourcesChip.tsx b/src/components/chips/TaskResourcesChip.tsx index 60054c862..c27241619 100644 --- a/src/components/chips/TaskResourcesChip.tsx +++ b/src/components/chips/TaskResourcesChip.tsx @@ -6,27 +6,27 @@ import Tooltip from '@mui/material/Tooltip'; import Memory from '@mui/icons-material/Memory'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { TaskResourcesChip_task } from './__generated__/TaskResourcesChip_task.graphql'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { avatar: { backgroundColor: theme.palette.primary.main, }, avatarIcon: { color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskResourcesChip_task; className?: string; } function TaskResourcesChip(props: Props) { + let classes = useStyles(); let { task, className } = props; let resources = task.instanceResources; if (!resources) { @@ -40,8 +40,8 @@ function TaskResourcesChip(props: Props) { className={className} label={`${cpuPart} / ${memoryPart}`} avatar={ - - + + } /> @@ -49,7 +49,7 @@ function TaskResourcesChip(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(TaskResourcesChip), { +export default createFragmentContainer(TaskResourcesChip, { task: graphql` fragment TaskResourcesChip_task on Task { instanceResources { diff --git a/src/components/common/AppBreadcrumbs.tsx b/src/components/common/AppBreadcrumbs.tsx index 09e33abd2..ea38972e7 100644 --- a/src/components/common/AppBreadcrumbs.tsx +++ b/src/components/common/AppBreadcrumbs.tsx @@ -1,16 +1,14 @@ import * as React from 'react'; -import { WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import SvgIcon from '@mui/material/SvgIcon'; -import withStyles from '@mui/styles/withStyles'; import Typography from '@mui/material/Typography'; import InputIcon from '@mui/icons-material/Input'; import Breadcrumbs from '@mui/material/Breadcrumbs'; import GitHubIcon from '@mui/icons-material/GitHub'; import CallSplitIcon from '@mui/icons-material/CallSplit'; -import createStyles from '@mui/styles/createStyles'; import NavigateNextIcon from '@mui/icons-material/NavigateNext'; import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'; @@ -26,8 +24,8 @@ import { AppBreadcrumbs_task } from './__generated__/AppBreadcrumbs_task.graphql import { AppBreadcrumbs_info } from './__generated__/AppBreadcrumbs_info.graphql'; import { AppBreadcrumbs_viewer } from './__generated__/AppBreadcrumbs_viewer.graphql'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { root: { alignItems: 'center', }, @@ -49,11 +47,10 @@ const styles = theme => fontSize: 16, marginRight: theme.spacing(1), }, - }); - -const styled = withStyles(styles); + }; +}); -interface Props extends WithStyles { +interface Props { info?: AppBreadcrumbs_info; repository?: AppBreadcrumbs_repository; build?: AppBreadcrumbs_build; @@ -64,11 +61,12 @@ interface Props extends WithStyles { href?: string; Icon: typeof SvgIcon | React.ElementType; }>; - viewer: AppBreadcrumbs_viewer; + viewer?: AppBreadcrumbs_viewer; } const AppBreadcrumbs = (props: Props) => { - let { classes, branch, extraCrumbs, info, repository, build, task, viewer } = props; + let { branch, extraCrumbs, info, repository, build, task, viewer } = props; + let classes = useStyles(); let ownerName = task?.build?.repository?.owner || build?.repository?.owner || repository?.owner || info?.name; let platform = @@ -134,14 +132,15 @@ const AppBreadcrumbs = (props: Props) => { ); }; -interface CrumbProps extends WithStyles { +interface CrumbProps { active: boolean; name: string; href?: string; Icon: typeof SvgIcon | React.ElementType; } -const Crumb = styled(({ active, name, href, Icon, classes }: CrumbProps) => { +const Crumb = ({ active, name, href, Icon }: CrumbProps) => { + let classes = useStyles(); const className = `${classes.crumb} ${active ? classes.crumbActive : ''}`; const content = ( <> @@ -161,9 +160,9 @@ const Crumb = styled(({ active, name, href, Icon, classes }: CrumbProps) => { {content} ); -}); +}; -export default createFragmentContainer(styled(AppBreadcrumbs), { +export default createFragmentContainer(AppBreadcrumbs, { info: graphql` fragment AppBreadcrumbs_info on OwnerInfo { platform diff --git a/src/components/common/CirrusLinearProgress.tsx b/src/components/common/CirrusLinearProgress.tsx index c57a28c95..29d5f6d9d 100644 --- a/src/components/common/CirrusLinearProgress.tsx +++ b/src/components/common/CirrusLinearProgress.tsx @@ -1,24 +1,25 @@ import React from 'react'; import LinearProgress from '@mui/material/LinearProgress'; -import withStyles from '@mui/styles/withStyles'; -import { createStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { progress: { backgroundColor: theme.palette.success.main, }, - }); + }; +}); -const CirrusLinearProgress = props => { +const CirrusLinearProgress = () => { + let classes = useStyles(); return ( ); }; -export default withStyles(styles)(CirrusLinearProgress); +export default CirrusLinearProgress; diff --git a/src/components/common/TaskExecutionInfo.tsx b/src/components/common/TaskExecutionInfo.tsx index f1aad67f7..084ab2b0c 100644 --- a/src/components/common/TaskExecutionInfo.tsx +++ b/src/components/common/TaskExecutionInfo.tsx @@ -1,8 +1,7 @@ import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import React from 'react'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, YAxis } from 'recharts'; @@ -12,22 +11,25 @@ import { Box, useTheme } from '@mui/material'; import { useRecoilState } from 'recoil'; import { prefersDarkModeState } from '../../cirrusTheme'; -let styles = { - chip: { - marginTop: 4, - marginBottom: 4, - marginRight: 4, - }, -}; +const useStyles = makeStyles(theme => { + return { + chip: { + marginTop: 4, + marginBottom: 4, + marginRight: 4, + }, + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskExecutionInfo_task; } function TaskExecutionInfo(props: Props) { let theme = useTheme(); const [prefersDarkMode] = useRecoilState(prefersDarkModeState); - let { task, classes } = props; + let { task } = props; + let classes = useStyles(); if (!task.executionInfo) return null; @@ -131,7 +133,7 @@ function TaskExecutionInfo(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(TaskExecutionInfo), { +export default createFragmentContainer(TaskExecutionInfo, { task: graphql` fragment TaskExecutionInfo_task on Task { instanceResources { diff --git a/src/components/compute-credits/BillingSettingsDialog.tsx b/src/components/compute-credits/BillingSettingsDialog.tsx index aa2c67f37..3a59e8dfe 100644 --- a/src/components/compute-credits/BillingSettingsDialog.tsx +++ b/src/components/compute-credits/BillingSettingsDialog.tsx @@ -8,9 +8,7 @@ import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; import Input from '@mui/material/Input'; import InputLabel from '@mui/material/InputLabel'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Switch from '@mui/material/Switch'; import Typography from '@mui/material/Typography'; import { graphql } from 'babel-plugin-relay/macro'; @@ -24,15 +22,16 @@ import { import { BillingSettingsDialog_billingSettings } from './__generated__/BillingSettingsDialog_billingSettings.graphql'; import { Link } from '@mui/material'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { limit: { color: orange[700], '&:hover': { color: orange[900], }, }, - }); + }; +}); const saveBillingSettingsMutation = graphql` mutation BillingSettingsDialogMutation($input: BillingSettingsInput!) { @@ -48,7 +47,7 @@ const saveBillingSettingsMutation = graphql` } `; -interface Props extends WithStyles { +interface Props { billingSettings: BillingSettingsDialog_billingSettings; onClose(...args: any[]): void; @@ -57,7 +56,8 @@ interface Props extends WithStyles { } function BillingSettingsDialog(props: Props) { - const { billingSettings, classes, ...other } = props; + let classes = useStyles(); + const { billingSettings, ...other } = props; let [enabled, setEnabled] = useState(billingSettings.enabled); let [billingEmailAddress, setBillingEmailAddress] = useState(billingSettings.billingEmailAddress); let [invoiceTemplate, setInvoiceTemplate] = useState(billingSettings.invoiceTemplate); @@ -148,7 +148,7 @@ function BillingSettingsDialog(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(BillingSettingsDialog), { +export default createFragmentContainer(BillingSettingsDialog, { billingSettings: graphql` fragment BillingSettingsDialog_billingSettings on BillingSettings { ownerUid diff --git a/src/components/compute-credits/ComputeCreditsBase.tsx b/src/components/compute-credits/ComputeCreditsBase.tsx index 3f592df6b..1e68d12a3 100644 --- a/src/components/compute-credits/ComputeCreditsBase.tsx +++ b/src/components/compute-credits/ComputeCreditsBase.tsx @@ -9,9 +9,7 @@ import IconButton from '@mui/material/IconButton/IconButton'; import Typography from '@mui/material/Typography/Typography'; import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import React, { useState } from 'react'; import BillingSettingsButton from './BillingSettingsButton'; @@ -22,8 +20,8 @@ import { Helmet as Head } from 'react-helmet'; import ComputeCreditsStripeDialog from './ComputeCreditsStripeDialog'; import { Link } from '@mui/material'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { expand: { transform: 'rotate(0deg)', marginLeft: 'auto', @@ -55,9 +53,10 @@ const styles = theme => color: orange[900], }, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { transactionsComponent: JSX.Element; info?: ComputeCreditsBase_info; balanceInCredits?: string; @@ -67,7 +66,7 @@ interface Props extends WithStyles { function ComputeCreditsBase(props: Props) { let [expanded, setExpanded] = useState(false); let [openBuyCredits, setOpenBuyCredits] = useState(false); - let { classes } = props; + let classes = useStyles(); return ( @@ -128,7 +127,7 @@ function ComputeCreditsBase(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(ComputeCreditsBase), { +export default createFragmentContainer(ComputeCreditsBase, { info: graphql` fragment ComputeCreditsBase_info on OwnerInfo { ...BillingSettingsButton_info diff --git a/src/components/compute-credits/ComputeCreditsTransactionRow.tsx b/src/components/compute-credits/ComputeCreditsTransactionRow.tsx index d2ea589b7..c6801b7a8 100644 --- a/src/components/compute-credits/ComputeCreditsTransactionRow.tsx +++ b/src/components/compute-credits/ComputeCreditsTransactionRow.tsx @@ -8,8 +8,7 @@ import TaskNameChip from '../chips/TaskNameChip'; import TaskDurationChip from '../chips/TaskDurationChip'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; @@ -17,25 +16,28 @@ import TaskCreatedChip from '../chips/TaskCreatedChip'; import { navigateTaskHelper } from '../../utils/navigateHelper'; import { ComputeCreditsTransactionRow_transaction } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql'; -const styles = { - chip: { - marginTop: 4, - marginBottom: 4, - marginLeft: 4, - }, - cell: { - padding: 0, - height: '100%', - }, -}; +const useStyles = makeStyles(theme => { + return { + chip: { + marginTop: 4, + marginBottom: 4, + marginLeft: 4, + }, + cell: { + padding: 0, + height: '100%', + }, + }; +}); -interface Props extends WithStyles { +interface Props { transaction: ComputeCreditsTransactionRow_transaction; } function ComputeCreditsTransactionRow(props: Props) { let navigate = useNavigate(); - let { transaction, classes } = props; + let { transaction } = props; + let classes = useStyles(); let { task, repository } = transaction; return ( navigateTaskHelper(navigate, e, task.id)} hover={true} style={{ cursor: 'pointer' }}> @@ -60,7 +62,7 @@ function ComputeCreditsTransactionRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(ComputeCreditsTransactionRow), { +export default createFragmentContainer(ComputeCreditsTransactionRow, { transaction: graphql` fragment ComputeCreditsTransactionRow_transaction on OwnerTransaction { timestamp diff --git a/src/components/explorer/ApiExplorer.tsx b/src/components/explorer/ApiExplorer.tsx index 30bebfe8f..a75ad6999 100644 --- a/src/components/explorer/ApiExplorer.tsx +++ b/src/components/explorer/ApiExplorer.tsx @@ -1,13 +1,13 @@ import { useEffect } from 'react'; import { Helmet as Head } from 'react-helmet'; -import { useTheme as useMuiTheme, Container } from '@mui/material'; +import { Container, useTheme as useMuiTheme } from '@mui/material'; import { useTheme as useGraphiqlTheme } from '@graphiql/react'; -import { GraphiQLProvider, GraphiQLInterface } from 'graphiql'; -import { createStyles, withStyles, WithStyles } from '@mui/styles'; +import { GraphiQLInterface, GraphiQLProvider } from 'graphiql'; +import { makeStyles } from '@mui/styles'; import 'graphiql/graphiql.css'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { root: { display: 'flex', justifyContent: 'center', @@ -18,7 +18,8 @@ const styles = theme => paddingRight: theme.spacing(2.0), paddingBottom: theme.spacing(1.0), }, - }); + }; +}); const query = `\ query { @@ -48,7 +49,8 @@ const ApiExplorer = () => { ); }; -const Content = withStyles(styles)(({ classes }: WithStyles) => { +const Content = () => { + let classes = useStyles(); const muiTheme = useMuiTheme().palette.mode; const setGraphiqlTheme = useGraphiqlTheme().setTheme; @@ -67,6 +69,6 @@ const Content = withStyles(styles)(({ classes }: WithStyles) => {
); -}); +}; export default ApiExplorer; diff --git a/src/components/hooks/HookDetails.tsx b/src/components/hooks/HookDetails.tsx index 141c51cb9..d60dd0383 100644 --- a/src/components/hooks/HookDetails.tsx +++ b/src/components/hooks/HookDetails.tsx @@ -1,9 +1,7 @@ import React, { MouseEventHandler } from 'react'; import { commitMutation, createFragmentContainer } from 'react-relay'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { graphql } from 'babel-plugin-relay/macro'; import { HookDetails_hook } from './__generated__/HookDetails_hook.graphql'; import { Helmet as Head } from 'react-helmet'; @@ -43,8 +41,8 @@ const hooksRerunMutation = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { gap: { paddingTop: theme.spacing(2), }, @@ -66,14 +64,16 @@ const styles = theme => potentialError: { padding: theme.spacing(1), }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { hook: HookDetails_hook; } function HookDetails(props: Props) { - let { hook, classes } = props; + let { hook } = props; + let classes = useStyles(); let navigate = useNavigate(); @@ -221,7 +221,7 @@ function HookDetails(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(HookDetails), { +export default createFragmentContainer(HookDetails, { hook: graphql` fragment HookDetails_hook on Hook { id diff --git a/src/components/hooks/HookList.tsx b/src/components/hooks/HookList.tsx index 1fe6d8074..265881561 100644 --- a/src/components/hooks/HookList.tsx +++ b/src/components/hooks/HookList.tsx @@ -3,33 +3,33 @@ import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import HookListRow from './HookListRow'; import { FragmentRefs } from 'relay-runtime'; -import { Card, CardContent, Link, Theme, Typography } from '@mui/material'; -import createStyles from '@mui/styles/createStyles'; +import { Card, CardContent, Link, Typography } from '@mui/material'; import { HookType } from './HookType'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; -const styles = (theme: Theme) => - createStyles({ +const useStyles = makeStyles(theme => { + return { pre: { color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.dark, background: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, padding: theme.spacing(0.5), }, - }); + }; +}); interface Hook { readonly timestamp: number; readonly ' $fragmentRefs': FragmentRefs<'HookListRow_hook'>; } -interface Props extends WithStyles { +interface Props { hooks: ReadonlyArray; type: HookType; } function HooksList(props: Props) { - let { hooks, type, classes } = props; + let { hooks, type } = props; + let classes = useStyles(); if (hooks.length === 0) { const hookExampleTemplate = `load("cirrus", "env", "http") @@ -109,4 +109,4 @@ def on_ENTITY_failed(ctx): ); } -export default withStyles(styles)(HooksList); +export default HooksList; diff --git a/src/components/hooks/HookListRow.tsx b/src/components/hooks/HookListRow.tsx index 4936256a7..4cf1b2c66 100644 --- a/src/components/hooks/HookListRow.tsx +++ b/src/components/hooks/HookListRow.tsx @@ -6,17 +6,15 @@ import TableRow from '@mui/material/TableRow'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { navigateHookHelper } from '../../utils/navigateHelper'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import { HookListRow_hook } from './__generated__/HookListRow_hook.graphql'; import HookStatusChip from '../chips/HookStatusChip'; import HookNameChip from '../chips/HookNameChip'; import HookCreatedChip from '../chips/HookCreatedChip'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { chip: { marginTop: theme.spacing(0.5), marginBottom: theme.spacing(0.5), @@ -29,14 +27,16 @@ const styles = theme => padding: 0, height: '100%', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { hook: HookListRow_hook; } function HookListRow(props: Props) { - let { hook, classes } = props; + let { hook } = props; + let classes = useStyles(); let navigate = useNavigate(); return ( @@ -50,7 +50,7 @@ function HookListRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(HookListRow), { +export default createFragmentContainer(HookListRow, { hook: graphql` fragment HookListRow_hook on Hook { id diff --git a/src/components/logs/InlineLogs.tsx b/src/components/logs/InlineLogs.tsx index 237052b75..27d304286 100644 --- a/src/components/logs/InlineLogs.tsx +++ b/src/components/logs/InlineLogs.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import createStyles from '@mui/styles/createStyles'; -import { withStyles, WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import { Typography } from '@mui/material'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { gapped: { paddingTop: theme.spacing(2), paddingBottom: theme.spacing(1), @@ -35,15 +34,17 @@ const styles = theme => paddingLeft: theme.spacing(1), whiteSpace: 'pre-wrap', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { readonly title: string; readonly lines: ReadonlyArray; } function InlineLogs(props: Props) { - let { title, lines, classes } = props; + let { title, lines } = props; + let classes = useStyles(); if (!lines || lines.length === 0) { lines = ['']; @@ -72,4 +73,4 @@ function InlineLogs(props: Props) { ); } -export default withStyles(styles)(InlineLogs); +export default InlineLogs; diff --git a/src/components/logs/Logs.tsx b/src/components/logs/Logs.tsx index 1bdc76bf8..7507bf227 100644 --- a/src/components/logs/Logs.tsx +++ b/src/components/logs/Logs.tsx @@ -2,14 +2,14 @@ import React from 'react'; import AnsiUp from 'ansi_up'; import { useLocation, useNavigate } from 'react-router-dom'; import classNames from 'classnames'; -import { createStyles, WithStyles, withStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import * as queryString from 'query-string'; let ansiFormatter = new (AnsiUp as any)(); ansiFormatter.use_classes = true; -let styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { logContainer: { overflowY: 'hidden', minHeight: '70px', @@ -37,9 +37,10 @@ let styles = theme => logLineHighlighted: { background: theme.palette.secondary.dark, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { logsName: string; logs: string; } @@ -77,7 +78,7 @@ function Logs(props: Props) { }); } - let { classes } = props; + let classes = useStyles(); return (
{props.logs.split('\n').map((line, index) => ( @@ -96,4 +97,4 @@ function Logs(props: Props) { ); } -export default withStyles(styles)(Logs); +export default Logs; diff --git a/src/components/metrics/MetricsChart.tsx b/src/components/metrics/MetricsChart.tsx index e15b42e60..1baeda41d 100644 --- a/src/components/metrics/MetricsChart.tsx +++ b/src/components/metrics/MetricsChart.tsx @@ -1,9 +1,7 @@ import React, { useState } from 'react'; import { graphql } from 'babel-plugin-relay/macro'; import Typography from '@mui/material/Typography'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { createFragmentContainer } from 'react-relay'; import 'react-vis/dist/style.css'; import { FlexibleWidthXYPlot, Hint, LineSeries, VerticalGridLines, XAxis, YAxis } from 'react-vis'; @@ -11,12 +9,13 @@ import Chip from '@mui/material/Chip'; import { formatDuration } from '../../utils/time'; import { MetricsChart_chart } from './__generated__/MetricsChart_chart.graphql'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { title: { 'text-align': 'center' }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { chart: MetricsChart_chart; } @@ -32,7 +31,8 @@ function intervals(intervalIncrement, maxValue) { function MetricsChart(props: Props) { let [hoveredPointIndex, setHoveredPointIndex] = useState(null); - let { chart, classes } = props; + let { chart } = props; + let classes = useStyles(); function _onNearestX(value, { index }) { setHoveredPointIndex(index); @@ -119,7 +119,7 @@ function MetricsChart(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(MetricsChart), { +export default createFragmentContainer(MetricsChart, { chart: graphql` fragment MetricsChart_chart on MetricsChart { title diff --git a/src/components/metrics/RepositoryMetricsPage.tsx b/src/components/metrics/RepositoryMetricsPage.tsx index 28d739429..1a3e7bc52 100644 --- a/src/components/metrics/RepositoryMetricsPage.tsx +++ b/src/components/metrics/RepositoryMetricsPage.tsx @@ -1,9 +1,7 @@ import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; import { createFragmentContainer } from 'react-relay'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import RepositoryMetricsCharts from './RepositoryMetricsCharts'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; @@ -18,8 +16,8 @@ import { RepositoryMetricsPage_repository } from './__generated__/RepositoryMetr import { MetricsQueryParameters } from './__generated__/RepositoryMetricsChartsQuery.graphql'; import { Helmet as Head } from 'react-helmet'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { title: { 'text-align': 'center' }, settingGap: { paddingTop: 16, @@ -28,15 +26,17 @@ const styles = theme => margin: theme.spacing(1), minWidth: 180, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { repository: RepositoryMetricsPage_repository; } function RepositoryMetricsPage(props: Props) { let [parameters, setParameters] = useState({}); - let { repository, classes } = props; + let { repository } = props; + let classes = useStyles(); function handleChange(event) { setParameters({ @@ -140,7 +140,7 @@ function cleanEmptyOrNullValues(obj) { return result; } -export default createFragmentContainer(withStyles(styles)(RepositoryMetricsPage), { +export default createFragmentContainer(RepositoryMetricsPage, { repository: graphql` fragment RepositoryMetricsPage_repository on Repository { id diff --git a/src/components/repositories/RepositoryBuildList.tsx b/src/components/repositories/RepositoryBuildList.tsx index 085ba0297..71f3bf6ed 100644 --- a/src/components/repositories/RepositoryBuildList.tsx +++ b/src/components/repositories/RepositoryBuildList.tsx @@ -5,7 +5,7 @@ import { graphql } from 'babel-plugin-relay/macro'; import { Helmet as Head } from 'react-helmet'; import cx from 'classnames'; -import { WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import Box from '@mui/material/Box'; import Link from '@mui/material/Link'; import Table from '@mui/material/Table'; @@ -16,7 +16,6 @@ import Tooltip from '@mui/material/Tooltip'; import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import withStyles from '@mui/styles/withStyles'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import GitHubIcon from '@mui/icons-material/GitHub'; @@ -41,38 +40,40 @@ import BuildsTable from '../../components/builds/BuildsTable'; import { RepositoryBuildList_repository } from './__generated__/RepositoryBuildList_repository.graphql'; // todo: move custom values to mui theme adjustments -const styles = theme => ({ - root: { - paddingBottom: theme.spacing(16.0), - }, - paper: { - padding: theme.spacing(1.0, 2.5, 1.5), - boxShadow: '0 16px 52px rgb(0 0 0 / 13%)', - borderRadius: 4 * theme.shape.borderRadius, - }, - paperBuildsTable: { - paddingBottom: theme.spacing(4.0), - }, - header: { - paddingLeft: 14, - justifyContent: 'space-between', - }, - gap: { - paddingTop: 16, - }, - chip: { - margin: 4, - }, - cell: { - width: '100%', - maxWidth: '600px', - }, - buildsChart: { - height: 150, - }, +const useStyles = makeStyles(theme => { + return { + root: { + paddingBottom: theme.spacing(16.0), + }, + paper: { + padding: theme.spacing(1.0, 2.5, 1.5), + boxShadow: '0 16px 52px rgb(0 0 0 / 13%)', + borderRadius: 4 * theme.shape.borderRadius, + }, + paperBuildsTable: { + paddingBottom: theme.spacing(4.0), + }, + header: { + paddingLeft: 14, + justifyContent: 'space-between', + }, + gap: { + paddingTop: 16, + }, + chip: { + margin: 4, + }, + cell: { + width: '100%', + maxWidth: '600px', + }, + buildsChart: { + height: 150, + }, + }; }); -interface Props extends WithStyles { +interface Props { branch?: string; repository: RepositoryBuildList_repository; } @@ -104,8 +105,9 @@ function RepositoryBuildList(props: Props) { let navigate = useNavigate(); let [selectedBuildId, setSelectedBuildId] = useState(null); let [openCreateDialog, setOpenCreateDialog] = useState(false); - let { repository, classes } = props; - let builds = repository.builds.edges.map(edge => edge.node, styles); + let { repository } = props; + let classes = useStyles(); + let builds = repository.builds.edges.map(edge => edge.node); let repositorySettings = null; let repositoryAction = null; @@ -251,7 +253,7 @@ function RepositoryBuildList(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(RepositoryBuildList), { +export default createFragmentContainer(RepositoryBuildList, { repository: graphql` fragment RepositoryBuildList_repository on Repository @argumentDefinitions(branch: { type: "String" }) { id diff --git a/src/components/repositories/RepositoryCronSettings.tsx b/src/components/repositories/RepositoryCronSettings.tsx index 0a11141cb..2ffd0a636 100644 --- a/src/components/repositories/RepositoryCronSettings.tsx +++ b/src/components/repositories/RepositoryCronSettings.tsx @@ -7,9 +7,7 @@ import CardHeader from '@mui/material/CardHeader'; import IconButton from '@mui/material/IconButton'; import TextField from '@mui/material/TextField'; import Tooltip from '@mui/material/Tooltip'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { RepositoryCronSettings_repository } from './__generated__/RepositoryCronSettings_repository.graphql'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -69,12 +67,12 @@ const removeCronSettingsMutation = graphql` } `; -interface Props extends WithStyles { +interface Props { repository: RepositoryCronSettings_repository; } -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { chip: { marginTop: 4, marginBottom: 4, @@ -93,7 +91,8 @@ const styles = theme => roundButton: { right: 0, }, - }); + }; +}); function RepositoryCronSettings(props: Props) { let navigate = useNavigate(); @@ -164,7 +163,7 @@ function RepositoryCronSettings(props: Props) { }); } - let { classes } = props; + let classes = useStyles(); return ( @@ -262,7 +261,7 @@ function RepositoryCronSettings(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(RepositoryCronSettings), { +export default createFragmentContainer(RepositoryCronSettings, { repository: graphql` fragment RepositoryCronSettings_repository on Repository { id diff --git a/src/components/repositories/RepositorySettingsPage.tsx b/src/components/repositories/RepositorySettingsPage.tsx index 20b4714ae..f0d9eb275 100644 --- a/src/components/repositories/RepositorySettingsPage.tsx +++ b/src/components/repositories/RepositorySettingsPage.tsx @@ -6,25 +6,27 @@ import RepositorySecuredVariables from './RepositorySecuredVariables'; import RepositorySettings from './RepositorySettings'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import { RepositorySettingsPage_repository } from './__generated__/RepositorySettingsPage_repository.graphql'; import RepositoryCronSettings from './RepositoryCronSettings'; import { Link } from '@mui/material'; import RepositoryDangerSettings from './RepositoryDangerSettings'; -const styles = { - settingGap: { - paddingTop: 16, - }, -}; +const useStyles = makeStyles(theme => { + return { + settingGap: { + paddingTop: 16, + }, + }; +}); -interface Props extends WithStyles { +interface Props { repository: RepositorySettingsPage_repository; } let RepositorySettingsPage = (props: Props) => { - let { classes, repository } = props; + let classes = useStyles(); + let { repository } = props; let link = ( @@ -60,7 +62,7 @@ let RepositorySettingsPage = (props: Props) => { ); }; -export default createFragmentContainer(withStyles(styles)(RepositorySettingsPage), { +export default createFragmentContainer(RepositorySettingsPage, { repository: graphql` fragment RepositorySettingsPage_repository on Repository { platform diff --git a/src/components/settings/OwnerApiSettings.tsx b/src/components/settings/OwnerApiSettings.tsx index 437001041..7ec8cb5e8 100644 --- a/src/components/settings/OwnerApiSettings.tsx +++ b/src/components/settings/OwnerApiSettings.tsx @@ -6,7 +6,6 @@ import { GenerateNewOwnerAccessTokenInput, OwnerApiSettingsMutationResponse, } from './__generated__/OwnerApiSettingsMutation.graphql'; -import createStyles from '@mui/styles/createStyles'; import environment from '../../createRelayEnvironment'; import Typography from '@mui/material/Typography'; import TextField from '@mui/material/TextField'; @@ -16,7 +15,7 @@ import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardContent from '@mui/material/CardContent'; import { Link } from '@mui/material'; -import { withStyles, WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import OwnerScopedTokenDialog from './OwnerScopedTokenDialog'; const generateNewTokenMutation = graphql` @@ -27,21 +26,22 @@ const generateNewTokenMutation = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { textField: { width: '100%', marginLeft: theme.spacing(1.0), marginRight: theme.spacing(1.0), }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { info: OwnerApiSettings_info; } function OwnerApiSettings(props: Props) { - let { classes } = props; + let classes = useStyles(); let existingTokenComponent = null; let [newToken, setNewToken] = useState(null); let [openDialog, setOpenDialog] = useState(false); @@ -115,7 +115,7 @@ function OwnerApiSettings(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(OwnerApiSettings), { +export default createFragmentContainer(OwnerApiSettings, { info: graphql` fragment OwnerApiSettings_info on OwnerInfo { platform diff --git a/src/components/settings/OwnerScopedTokenDialog.tsx b/src/components/settings/OwnerScopedTokenDialog.tsx index cc9e1cbd3..38da65f00 100644 --- a/src/components/settings/OwnerScopedTokenDialog.tsx +++ b/src/components/settings/OwnerScopedTokenDialog.tsx @@ -7,9 +7,7 @@ import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; import Input from '@mui/material/Input'; import InputLabel from '@mui/material/InputLabel'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Switch from '@mui/material/Switch'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; @@ -22,14 +20,15 @@ import { } from './__generated__/OwnerScopedTokenDialogMutation.graphql'; import TextField from '@mui/material/TextField'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { textField: { width: '100%', marginLeft: theme.spacing(1.0), marginRight: theme.spacing(1.0), }, - }); + }; +}); const generateNewScopedAccessTokenMutation = graphql` mutation OwnerScopedTokenDialogMutation($input: GenerateNewScopedAccessTokenInput!) { @@ -39,7 +38,7 @@ const generateNewScopedAccessTokenMutation = graphql` } `; -interface Props extends WithStyles { +interface Props { ownerInfo: OwnerScopedTokenDialog_ownerInfo; onClose(...args: any[]): void; @@ -48,7 +47,8 @@ interface Props extends WithStyles { } function OwnerScopedTokenDialog(props: Props) { - const { classes, ...other } = props; + let classes = useStyles(); + const { ...other } = props; let [readOnly, setReadOnly] = useState(true); let [expirationDays, setExpirationDays] = useState(null); let [repositoryNames, setRepositoryNames] = useState(''); @@ -138,7 +138,7 @@ function OwnerScopedTokenDialog(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(OwnerScopedTokenDialog), { +export default createFragmentContainer(OwnerScopedTokenDialog, { ownerInfo: graphql` fragment OwnerScopedTokenDialog_ownerInfo on OwnerInfo { platform diff --git a/src/components/settings/OwnerSettings.tsx b/src/components/settings/OwnerSettings.tsx index 162f554df..8c2961542 100644 --- a/src/components/settings/OwnerSettings.tsx +++ b/src/components/settings/OwnerSettings.tsx @@ -2,9 +2,7 @@ import React from 'react'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import Paper from '@mui/material/Paper'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Typography from '@mui/material/Typography'; import Toolbar from '@mui/material/Toolbar'; import OwnerComputeCredits from '../compute-credits/OwnerComputeCredits'; @@ -18,22 +16,24 @@ import CardHeader from '@mui/material/CardHeader'; import { Card, CardActions, CardContent } from '@mui/material'; import Button from '@mui/material/Button'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { title: { backgroundColor: theme.palette.action.disabledBackground, }, settingGap: { paddingTop: 16, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { info: OwnerSettings_info; } function OwnerSettings(props: Props) { - let { info, classes } = props; + let { info } = props; + let classes = useStyles(); if (!info) { return Can't find information this organization!; @@ -91,7 +91,7 @@ function OwnerSettings(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(OwnerSettings), { +export default createFragmentContainer(OwnerSettings, { info: graphql` fragment OwnerSettings_info on OwnerInfo { platform diff --git a/src/components/tasks/TaskCommandList.tsx b/src/components/tasks/TaskCommandList.tsx index d858180ce..585c6b01c 100644 --- a/src/components/tasks/TaskCommandList.tsx +++ b/src/components/tasks/TaskCommandList.tsx @@ -5,7 +5,6 @@ import TaskCommandLogs from './TaskCommandLogs'; import { formatDuration } from '../../utils/time'; import { isTaskCommandExecuting, isTaskCommandFinalStatus } from '../../utils/status'; import DurationTicker from '../common/DurationTicker'; -import withStyles from '@mui/styles/withStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Accordion from '@mui/material/Accordion'; import AccordionDetails from '@mui/material/AccordionDetails'; @@ -17,23 +16,25 @@ import * as queryString from 'query-string'; import { TaskCommandList_task } from './__generated__/TaskCommandList_task.graphql'; import { ItemOfArray } from '../../utils/utility-types'; import { useLocation } from 'react-router-dom'; -import { createStyles, WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; import { Box, useTheme } from '@mui/material'; import { useRecoilValue } from 'recoil'; import { prefersDarkModeState } from '../../cirrusTheme'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { details: { padding: 0, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskCommandList_task; } function TaskCommandList(props: Props) { + let classes = useStyles(); let task = props.task; let commands = task.commands; @@ -105,7 +106,7 @@ function TaskCommandList(props: Props) {
- + @@ -121,7 +122,7 @@ function TaskCommandList(props: Props) { return
{commandComponents}
; } -export default createFragmentContainer(withStyles(styles)(TaskCommandList), { +export default createFragmentContainer(TaskCommandList, { task: graphql` fragment TaskCommandList_task on Task { id diff --git a/src/components/tasks/TaskCommandLogs.tsx b/src/components/tasks/TaskCommandLogs.tsx index 87ac1b668..7c198cf3d 100644 --- a/src/components/tasks/TaskCommandLogs.tsx +++ b/src/components/tasks/TaskCommandLogs.tsx @@ -8,9 +8,7 @@ import { subscribeTaskCommandLogs } from '../../rtu/ConnectionManager'; import CirrusCircularProgress from '../common/CirrusCircularProgress'; import { isTaskCommandFinalStatus } from '../../utils/status'; import Tooltip from '@mui/material/Tooltip'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined'; import Fab from '@mui/material/Fab'; @@ -28,8 +26,8 @@ function cacheURL(taskId: string, cacheHit) { return 'https://api.cirrus-ci.com/v1/task/' + taskId + '/caches/' + cacheHit.key + '.tar.gz'; } -let styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { actionButtons: { position: 'absolute', right: 0, @@ -42,9 +40,10 @@ let styles = theme => openButton: { fontSize: 20, }, - }); + }; +}); -interface RealTimeLogsProps extends WithStyles { +interface RealTimeLogsProps { taskId: string; command: { name: string; @@ -70,7 +69,8 @@ function TaskCommandRealTimeLogs(props: RealTimeLogsProps) { return () => closable(); }, [realTimeLogs, props.taskId, props.command.name, additionalLogs]); - let { classes, taskId, command, initialLogLines, executionInfo } = props; + let { taskId, command, initialLogLines, executionInfo } = props; + let classes = useStyles(); let inProgress = !isTaskCommandFinalStatus(command.status); @@ -117,7 +117,7 @@ function TaskCommandRealTimeLogs(props: RealTimeLogsProps) { ); } -interface TaskCommandLogsProps extends WithStyles { +interface TaskCommandLogsProps { taskId: string; command: { name: string; @@ -165,4 +165,4 @@ function TaskCommandLogs(props: TaskCommandLogsProps) { ); } -export default withStyles(styles)(TaskCommandLogs); +export default TaskCommandLogs; diff --git a/src/components/tasks/TaskCommandsProgress.tsx b/src/components/tasks/TaskCommandsProgress.tsx index 4844caee1..edb311a7b 100644 --- a/src/components/tasks/TaskCommandsProgress.tsx +++ b/src/components/tasks/TaskCommandsProgress.tsx @@ -8,12 +8,10 @@ import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { TaskCommandsProgress_task } from './__generated__/TaskCommandsProgress_task.graphql'; import { Box } from '@mui/material'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; -import { WithStyles } from '@mui/styles'; +import { makeStyles } from '@mui/styles'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { progressBar: { backgroundColor: 'transparent', width: '100%', @@ -22,15 +20,17 @@ const styles = theme => progressBarElement: { minHeight: theme.spacing(1.5), }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskCommandsProgress_task; className?: string; } function TaskCommandsProgress(props: Props) { - let { task, classes } = props; + let { task } = props; + let classes = useStyles(); let [totalDuration, setTotalDuration] = useState( task.statusDurations.reduce((sum, statusDuration) => sum + statusDuration.durationInSeconds, 0), ); @@ -99,7 +99,7 @@ function TaskCommandsProgress(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(TaskCommandsProgress), { +export default createFragmentContainer(TaskCommandsProgress, { task: graphql` fragment TaskCommandsProgress_task on Task { status diff --git a/src/components/tasks/TaskDetails.tsx b/src/components/tasks/TaskDetails.tsx index 316b723db..4ca7cb117 100644 --- a/src/components/tasks/TaskDetails.tsx +++ b/src/components/tasks/TaskDetails.tsx @@ -1,6 +1,4 @@ -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardActions from '@mui/material/CardActions'; @@ -129,8 +127,8 @@ const taskSubscription = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { title: { padding: 8, background: theme.palette.action.disabledBackground, @@ -155,10 +153,10 @@ const styles = theme => marginTop: theme.spacing(1.0), }, automaticReRun: { - backgroundColor: theme.palette.warning.second, + backgroundColor: theme.palette.warning.light, }, transaction: { - backgroundColor: theme.palette.success.second, + backgroundColor: theme.palette.success.light, }, tabPanel: { padding: 0, @@ -170,9 +168,10 @@ const styles = theme => rerunOptionPopup: { zIndex: 1, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskDetails_task; } @@ -191,7 +190,8 @@ function TaskDetails(props: Props) { return () => subscription.dispose(); }, [props.task.id, props.task.status]); - let { task, classes } = props; + let { task } = props; + let classes = useStyles(); let build = task.build; let repository = task.repository; @@ -587,7 +587,7 @@ function TaskDetails(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(TaskDetails), { +export default createFragmentContainer(TaskDetails, { task: graphql` fragment TaskDetails_task on Task { id diff --git a/src/components/tasks/TaskListRow.tsx b/src/components/tasks/TaskListRow.tsx index 032353867..b50756b56 100644 --- a/src/components/tasks/TaskListRow.tsx +++ b/src/components/tasks/TaskListRow.tsx @@ -10,9 +10,7 @@ import { shorten } from '../../utils/text'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { navigateTaskHelper } from '../../utils/navigateHelper'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import TaskCreatedChip from '../chips/TaskCreatedChip'; import { TaskListRow_task } from './__generated__/TaskListRow_task.graphql'; @@ -21,8 +19,8 @@ import { useTaskStatusColorMapping } from '../../utils/colors'; import { Box, Tooltip } from '@mui/material'; import { formatDuration } from '../../utils/time'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { chip: { marginTop: 4, marginBottom: 4, @@ -49,9 +47,10 @@ const styles = theme => progressBarElement: { minHeight: theme.spacing(1.5), }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { task: TaskListRow_task; showCreation: boolean; durationBeforeScheduling?: number; @@ -61,7 +60,8 @@ interface Props extends WithStyles { function TaskListRow(props: Props) { let navigate = useNavigate(); let colorMapping = useTaskStatusColorMapping(); - let { task, classes, durationBeforeScheduling, overallDuration } = props; + let { task, durationBeforeScheduling, overallDuration } = props; + let classes = useStyles(); let progress = null; if (isTaskFinalStatus(task.status) && overallDuration && task.executingTimestamp) { let scheduledDuration = Math.max(0, task.executingTimestamp - task.scheduledTimestamp) / 1000; @@ -137,7 +137,7 @@ function TaskListRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(TaskListRow), { +export default createFragmentContainer(TaskListRow, { task: graphql` fragment TaskListRow_task on Task { id diff --git a/src/components/webhooks/DeliveryInfoDialogContent.tsx b/src/components/webhooks/DeliveryInfoDialogContent.tsx index 0a3b9e652..b15034c4d 100644 --- a/src/components/webhooks/DeliveryInfoDialogContent.tsx +++ b/src/components/webhooks/DeliveryInfoDialogContent.tsx @@ -3,26 +3,26 @@ import DialogContent from '@mui/material/DialogContent/DialogContent'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import { DeliveryInfoDialogLazyContentQueryResponse } from './__generated__/DeliveryInfoDialogLazyContentQuery.graphql'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import MarkdownTypography from '../common/MarkdownTypography'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { markdown: { - color: theme.palette.contrastText, + color: theme.palette.primary.contrastText, }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { delivery: DeliveryInfoDialogLazyContentQueryResponse['webhookDelivery']; } function DeliveryInfoDialogContent(props: Props) { let [value, setValue] = React.useState(0); - const { delivery, classes } = props; + const { delivery } = props; + let classes = useStyles(); let payloadTab = ( @@ -49,4 +49,4 @@ function DeliveryInfoDialogContent(props: Props) { ); } -export default withStyles(styles)(DeliveryInfoDialogContent); +export default DeliveryInfoDialogContent; diff --git a/src/components/webhooks/DeliveryRow.tsx b/src/components/webhooks/DeliveryRow.tsx index 4a08d21c8..66190dba9 100644 --- a/src/components/webhooks/DeliveryRow.tsx +++ b/src/components/webhooks/DeliveryRow.tsx @@ -5,8 +5,7 @@ import TableRow from '@mui/material/TableRow'; import Chip from '@mui/material/Chip'; import { createFragmentContainer } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import ReportIcon from '@mui/icons-material/Report'; import SendIcon from '@mui/icons-material/Send'; import classNames from 'classnames'; @@ -15,19 +14,21 @@ import { DeliveryRow_delivery } from './__generated__/DeliveryRow_delivery.graph import Avatar from '@mui/material/Avatar'; import { useTheme } from '@mui/material'; -const styles = { - chip: { - marginTop: 4, - marginBottom: 4, - marginLeft: 4, - }, - cell: { - padding: 0, - height: '100%', - }, -}; +const useStyles = makeStyles(theme => { + return { + chip: { + marginTop: 4, + marginBottom: 4, + marginLeft: 4, + }, + cell: { + padding: 0, + height: '100%', + }, + }; +}); -interface Props extends WithStyles { +interface Props { delivery: DeliveryRow_delivery; } @@ -35,7 +36,8 @@ function DeliveryRow(props: Props) { let [showDetails, setShowDetails] = useState(false); let theme = useTheme(); - let { delivery, classes } = props; + let { delivery } = props; + let classes = useStyles(); let success = 200 <= delivery.response.status && delivery.response.status < 300; let statusColor = success ? theme.palette.success.main : theme.palette.error.main; @@ -67,7 +69,7 @@ function DeliveryRow(props: Props) { ); } -export default createFragmentContainer(withStyles(styles)(DeliveryRow), { +export default createFragmentContainer(DeliveryRow, { delivery: graphql` fragment DeliveryRow_delivery on WebHookDelivery { id diff --git a/src/components/webhooks/WebHookSettings.tsx b/src/components/webhooks/WebHookSettings.tsx index e8f1b717a..ba3df2714 100644 --- a/src/components/webhooks/WebHookSettings.tsx +++ b/src/components/webhooks/WebHookSettings.tsx @@ -9,9 +9,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import CardHeader from '@mui/material/CardHeader'; import FormControl from '@mui/material/FormControl'; -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Collapse from '@mui/material/Collapse'; import IconButton from '@mui/material/IconButton'; import classNames from 'classnames'; @@ -40,8 +38,8 @@ const securedVariableMutation = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { expand: { transform: 'rotate(0deg)', marginLeft: 'auto', @@ -52,9 +50,10 @@ const styles = theme => expandOpen: { transform: 'rotate(180deg)', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { info: WebHookSettings_info; relay: RelayPaginationProp; } @@ -63,7 +62,8 @@ function WebHookSettings(props: Props) { let [expanded, setExpanded] = useState(false); let [webhookURL, setWebhookURL] = useState(props.info.webhookSettings.webhookURL || ''); let [secretToken, setSecretToken] = useState(''); - let { info, classes } = props; + let { info } = props; + let classes = useStyles(); function saveWebhookSettings() { const variables: WebHookSettingsMutationVariables = { @@ -196,7 +196,7 @@ function WebHookSettings(props: Props) { } export default createPaginationContainer( - withStyles(styles)(WebHookSettings) as typeof WebHookSettings, + WebHookSettings as typeof WebHookSettings, { info: graphql` fragment WebHookSettings_info on OwnerInfo diff --git a/src/components/workers/PoolDetails.tsx b/src/components/workers/PoolDetails.tsx index 32a9d76dc..5b6ec212c 100644 --- a/src/components/workers/PoolDetails.tsx +++ b/src/components/workers/PoolDetails.tsx @@ -1,6 +1,4 @@ -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import { makeStyles } from '@mui/styles'; import Card from '@mui/material/Card'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useEffect, useState } from 'react'; @@ -51,8 +49,8 @@ import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline'; import { DeletePersistentWorkerInput } from './__generated__/PoolDetailsDeleteWorkerMutation.graphql'; import { UpdatePersistentWorkerInput } from './__generated__/PoolDetailsUpdateWorkerMutation.graphql'; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { gap: { paddingTop: 16, }, @@ -69,9 +67,10 @@ const styles = theme => enabledWorkerButton: { color: theme.palette.warning.main, }, - }); + }; +}); -interface PoolDetailsProps extends WithStyles { +interface PoolDetailsProps { pool: PoolDetails_pool; relay: RelayRefetchProp; } @@ -107,7 +106,8 @@ const updateWorkerMutation = graphql` function PoolDetails(props: PoolDetailsProps) { let [openEditDialog, setOpenEditDialog] = useState(false); let [registrationToken, setRegistrationToken] = useState(null); - let { pool, classes } = props; + let { pool } = props; + let classes = useStyles(); function refetchData() { props.relay.refetch({ poolId: props.pool.id }, { force: true }); @@ -390,7 +390,7 @@ function EditPersistentWorkerPoolDialog(props: DialogProps) { } export default createRefetchContainer( - withStyles(styles)(PoolDetails), + PoolDetails, { pool: graphql` fragment PoolDetails_pool on PersistentWorkerPool { diff --git a/src/scenes/Home/WelcomePage.tsx b/src/scenes/Home/WelcomePage.tsx index 9c34af3ba..a60ea463d 100644 --- a/src/scenes/Home/WelcomePage.tsx +++ b/src/scenes/Home/WelcomePage.tsx @@ -1,16 +1,16 @@ import React from 'react'; import Paper from '@mui/material/Paper'; -import withStyles from '@mui/styles/withStyles'; import { Helmet as Head } from 'react-helmet'; import MarkdownTypography from '../../components/common/MarkdownTypography'; - -const styles = theme => ({ - paper: { - padding: theme.spacing(3.0), - margin: theme.spacing(1.0), - }, +import { makeStyles } from '@mui/styles'; +makeStyles(theme => { + return { + paper: { + padding: theme.spacing(3.0), + margin: theme.spacing(1.0), + }, + }; }); - let welcomePage = props => ( @@ -24,4 +24,4 @@ let welcomePage = props => ( ); -export default withStyles(styles)(welcomePage); +export default welcomePage; diff --git a/src/scenes/Repository/Repository.tsx b/src/scenes/Repository/Repository.tsx index 1e75fa13b..6370c6f2c 100644 --- a/src/scenes/Repository/Repository.tsx +++ b/src/scenes/Repository/Repository.tsx @@ -45,7 +45,7 @@ export default function Repository(): JSX.Element { return ( <> - + ); }}