diff --git a/src/AllRoutes.tsx b/src/AllRoutes.tsx index be18c7019..a2df96fd5 100644 --- a/src/AllRoutes.tsx +++ b/src/AllRoutes.tsx @@ -1,14 +1,12 @@ -import React, { Suspense } from 'react'; -import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'; +import React, {Suspense} from 'react'; +import {BrowserRouter, Link, Route, Routes} from 'react-router-dom'; import ActiveRepositoriesDrawer from './scenes/Header/ActiveRepositoriesDrawer'; import AppBar from '@mui/material/AppBar'; 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'; @@ -16,9 +14,9 @@ import classNames from 'classnames'; import ViewerTopRepositories from './scenes/Profile/ViewerTopRepositories'; import CirrusLinearProgress from './components/common/CirrusLinearProgress'; import ThemeSwitchButton from './components/common/ThemeSwitchButton'; -import { atom, useRecoilState } from 'recoil'; -import { localStorageEffect } from './utils/recoil'; -import { Container, Tooltip, useTheme } from '@mui/material'; +import {atom, useRecoilState} from 'recoil'; +import {localStorageEffect} from './utils/recoil'; +import {Container, Tooltip, useTheme} from '@mui/material'; import GitHubIcon from '@mui/icons-material/GitHub'; import GCPStatus from './components/status/GCPStatus'; import GitHubStatus from './components/status/GitHubStatus'; @@ -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/account/AccountInformation.tsx b/src/components/account/AccountInformation.tsx index 5a26458b3..a7efe8530 100644 --- a/src/components/account/AccountInformation.tsx +++ b/src/components/account/AccountInformation.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import Avatar from '@mui/material/Avatar'; import IconButton from '@mui/material/IconButton'; @@ -8,26 +8,25 @@ import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; -import { navigateHelper } from '../../utils/navigateHelper'; -import { useNavigate } from 'react-router-dom'; -import { AccountInformation_viewer } from './__generated__/AccountInformation_viewer.graphql'; +import {navigateHelper} from '../../utils/navigateHelper'; +import {useNavigate} from 'react-router-dom'; +import {AccountInformation_viewer} from './__generated__/AccountInformation_viewer.graphql'; import ManageAccountsIcon from '@mui/icons-material/ManageAccounts'; import DirectionsRun from '@mui/icons-material/DirectionsRun'; import Button from '@mui/material/Button'; import GitHubIcon from '@mui/icons-material/GitHub'; -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 { 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..d330f4474 100644 --- a/src/components/account/OwnerRepositoryList.tsx +++ b/src/components/account/OwnerRepositoryList.tsx @@ -5,32 +5,32 @@ 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'; +import {Link} from 'react-router-dom'; import IconButton from '@mui/material/IconButton'; 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'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {OwnerRepositoryList_info} from './__generated__/OwnerRepositoryList_info.graphql'; -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..fd72001ec 100644 --- a/src/components/account/UserProfile.tsx +++ b/src/components/account/UserProfile.tsx @@ -1,23 +1,21 @@ -import React, { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import React, {useEffect} from 'react'; +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'; +import {navigateHelper} from '../../utils/navigateHelper'; import IconButton from '@mui/material/IconButton'; -import { UserProfile_user } from './__generated__/UserProfile_user.graphql'; -import { Helmet as Head } from 'react-helmet'; +import {UserProfile_user} from './__generated__/UserProfile_user.graphql'; +import {Helmet as Head} from 'react-helmet'; import Settings from '@mui/icons-material/Settings'; import OwnerPlatformIcon from '../icons/OwnerPlatformIcon'; -import { List, ListItem, ListItemAvatar, ListItemText } from '@mui/material'; +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..efe1fbeea 100644 --- a/src/components/account/ViewerBuildList.tsx +++ b/src/components/account/ViewerBuildList.tsx @@ -1,12 +1,11 @@ -import { useState } from 'react'; -import { useRefetchableFragment } from 'react-relay'; -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 { Box, ToggleButton, ToggleButtonGroup } from '@mui/material'; -import withStyles from '@mui/styles/withStyles'; +import {useState} from 'react'; +import {useRefetchableFragment} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {useNavigate} from 'react-router-dom'; +import {Helmet as Head} from 'react-helmet'; + +import {makeStyles} from '@mui/styles'; +import {Box, ToggleButton, ToggleButtonGroup} from '@mui/material'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; @@ -19,48 +18,51 @@ import RepositoryNameChip from '../chips/RepositoryNameChip'; import BuildBranchNameChip from '../chips/BuildBranchNameChip'; import BuildStatusChip from '../chips/BuildStatusChip'; import BuildChangeChip from '../chips/BuildChangeChip'; -import { navigateBuildHelper } from '../../utils/navigateHelper'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; import usePageWidth from '../../utils/usePageWidth'; -import { isBuildFinalStatus } from '../../utils/status'; +import {isBuildFinalStatus} from '../../utils/status'; import BuildsTable from '../../components/builds/BuildsTable'; import MarkdownTypography from '../common/MarkdownTypography'; -import { ViewerBuildListRefetchQuery } from './__generated__/ViewerBuildListRefetchQuery.graphql'; -import { ViewerBuildList_viewer$key } from './__generated__/ViewerBuildList_viewer.graphql'; +import {ViewerBuildListRefetchQuery} from './__generated__/ViewerBuildListRefetchQuery.graphql'; +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..8dad28162 100644 --- a/src/components/builds/BuildDetails.tsx +++ b/src/components/builds/BuildDetails.tsx @@ -1,37 +1,35 @@ -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'; import CardContent from '@mui/material/CardContent'; import Paper from '@mui/material/Paper'; -import { graphql } from 'babel-plugin-relay/macro'; -import React, { useEffect } from 'react'; -import { commitMutation, createFragmentContainer, requestSubscription } from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import React, {useEffect} from 'react'; +import {commitMutation, createFragmentContainer, requestSubscription} from 'react-relay'; import environment from '../../createRelayEnvironment'; -import { hasWritePermissions } from '../../utils/permissions'; +import {hasWritePermissions} from '../../utils/permissions'; import BuildCreatedChip from '../chips/BuildCreatedChip'; import BuildStatusChip from '../chips/BuildStatusChip'; import CirrusFavicon from '../common/CirrusFavicon'; import TaskList from '../tasks/TaskList'; -import { BuildDetails_build } from './__generated__/BuildDetails_build.graphql'; -import { Helmet as Head } from 'react-helmet'; +import {BuildDetails_build} from './__generated__/BuildDetails_build.graphql'; +import {Helmet as Head} from 'react-helmet'; import Refresh from '@mui/icons-material/Refresh'; import Check from '@mui/icons-material/Check'; import Notification from '../common/Notification'; import ConfigurationWithIssues from './ConfigurationWithIssues'; import HookList from '../hooks/HookList'; -import { Box, Collapse, List, Tab, ToggleButton } from '@mui/material'; -import { TabContext, TabList, TabPanel } from '@mui/lab'; -import { BugReport, Cancel, Dehaze, Functions } from '@mui/icons-material'; +import {Box, Collapse, List, Tab, ToggleButton} from '@mui/material'; +import {TabContext, TabList, TabPanel} from '@mui/lab'; +import {BugReport, Cancel, Dehaze, Functions} from '@mui/icons-material'; import Tooltip from '@mui/material/Tooltip'; import DebuggingInformation from './BuildDebuggingInformation'; -import { HookType } from '../hooks/HookType'; -import { BuildDetailsApproveBuildMutationVariables } from './__generated__/BuildDetailsApproveBuildMutation.graphql'; -import { BuildDetailsReTriggerMutationVariables } from './__generated__/BuildDetailsReTriggerMutation.graphql'; -import { BuildDetailsReRunMutationVariables } from './__generated__/BuildDetailsReRunMutation.graphql'; -import { BuildDetailsCancelMutationVariables } from './__generated__/BuildDetailsCancelMutation.graphql'; +import {HookType} from '../hooks/HookType'; +import {BuildDetailsApproveBuildMutationVariables} from './__generated__/BuildDetailsApproveBuildMutation.graphql'; +import {BuildDetailsReTriggerMutationVariables} from './__generated__/BuildDetailsReTriggerMutation.graphql'; +import {BuildDetailsReRunMutationVariables} from './__generated__/BuildDetailsReRunMutation.graphql'; +import {BuildDetailsCancelMutationVariables} from './__generated__/BuildDetailsCancelMutation.graphql'; import CommitMessage from '../common/CommitMessage'; const buildApproveMutation = graphql` @@ -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..589c8a8a6 100644 --- a/src/components/builds/BuildsTable.tsx +++ b/src/components/builds/BuildsTable.tsx @@ -1,16 +1,15 @@ -import { memo, useMemo, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { ThemeProvider } from '@emotion/react'; -import { createFragmentContainer, requestSubscription } from 'react-relay'; +import {memo, useEffect, useMemo} from 'react'; +import {useNavigate} from 'react-router-dom'; +import {ThemeProvider} from '@emotion/react'; +import {createFragmentContainer, requestSubscription} from 'react-relay'; import cx from 'classnames'; -import { useRecoilValue } from 'recoil'; -import { graphql } from 'babel-plugin-relay/macro'; +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 { createTheme } from '@mui/material/styles'; +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'; import Tooltip from '@mui/material/Tooltip'; @@ -18,29 +17,27 @@ 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'; import BuildStatusChipNew from '../chips/BuildStatusChipNew'; -import { muiThemeOptions } from '../../cirrusTheme'; -import { shorten } from '../../utils/text'; -import { absoluteLink } from '../../utils/link'; -import { formatDuration } from '../../utils/time'; -import { isBuildFinalStatus } from '../../utils/status'; -import { navigateBuildHelper } from '../../utils/navigateHelper'; +import {muiThemeOptions} from '../../cirrusTheme'; +import {shorten} from '../../utils/text'; +import {absoluteLink} from '../../utils/link'; +import {formatDuration} from '../../utils/time'; +import {isBuildFinalStatus} from '../../utils/status'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; -import { BuildsTable_builds } from './__generated__/BuildsTable_builds.graphql'; +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', }, @@ -112,13 +109,12 @@ const styles = theme => borderRadius: 3 * theme.shape.borderRadius, width: 'fit-content', padding: '1px 5px', - '& *': { fontSize: '14px !important' }, + '& *': {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]); @@ -140,7 +137,7 @@ const BuildsTable = styled(({ classes, builds = [], selectedBuildId, setSelected - + {builds.map((build, i) => ( @@ -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 @@ -177,131 +172,130 @@ const HeadRow = styled(({ classes }: HeadRowProps) => { - + Duration ); -}); +}; -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..593da1121 100644 --- a/src/components/builds/ConfigurationWithIssues.tsx +++ b/src/components/builds/ConfigurationWithIssues.tsx @@ -1,19 +1,17 @@ -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 { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; -import { ConfigurationWithIssues_build } from './__generated__/ConfigurationWithIssues_build.graphql'; +import React, {ReactNode} from 'react'; +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'; import Accordion from '@mui/material/Accordion'; import AccordionSummary from '@mui/material/AccordionSummary'; 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..50c44c404 100644 --- a/src/components/builds/LastDefaultBranchBuildMiniRow.tsx +++ b/src/components/builds/LastDefaultBranchBuildMiniRow.tsx @@ -1,17 +1,17 @@ -import React, { useEffect } from 'react'; -import { createFragmentContainer, requestSubscription } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import React, {useEffect} from 'react'; +import {createFragmentContainer, requestSubscription} from 'react-relay'; +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 { navigateBuildHelper } from '../../utils/navigateHelper'; +import {makeStyles} from '@mui/styles'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import BuildStatusChip from '../chips/BuildStatusChip'; -import { LastDefaultBranchBuildMiniRow_repository } from './__generated__/LastDefaultBranchBuildMiniRow_repository.graphql'; -import { useNavigate } from 'react-router-dom'; +import { + LastDefaultBranchBuildMiniRow_repository +} from './__generated__/LastDefaultBranchBuildMiniRow_repository.graphql'; +import {useNavigate} from 'react-router-dom'; import MarkdownTypography from '../common/MarkdownTypography'; const buildSubscription = graphql` @@ -22,8 +22,8 @@ const buildSubscription = graphql` } `; -const styles = theme => - createStyles({ +const useStyles = makeStyles(theme => { + return { chip: { margin: theme.spacing(1.0), }, @@ -31,9 +31,10 @@ const styles = theme => margin: theme.spacing(1.0), width: '100%', }, - }); + }; +}); -interface Props extends WithStyles { +interface Props { repository: LastDefaultBranchBuildMiniRow_repository; } @@ -52,7 +53,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 +79,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..ad21f9c7c 100644 --- a/src/components/builds/LastDefaultBranchBuildRow.tsx +++ b/src/components/builds/LastDefaultBranchBuildRow.tsx @@ -1,18 +1,17 @@ -import React, { useEffect } from 'react'; -import { createFragmentContainer, requestSubscription } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import React, {useEffect} from 'react'; +import {createFragmentContainer, requestSubscription} from 'react-relay'; +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 { useNavigate } from 'react-router-dom'; -import { navigateRepositoryHelper } from '../../utils/navigateHelper'; +import {makeStyles} from '@mui/styles'; +import {useNavigate} from 'react-router-dom'; +import {navigateRepositoryHelper} from '../../utils/navigateHelper'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import BuildStatusChip from '../chips/BuildStatusChip'; import classNames from 'classnames'; import BuildChangeChip from '../chips/BuildChangeChip'; -import { LastDefaultBranchBuildRow_repository } from './__generated__/LastDefaultBranchBuildRow_repository.graphql'; +import {LastDefaultBranchBuildRow_repository} from './__generated__/LastDefaultBranchBuildRow_repository.graphql'; import MarkdownTypography from '../common/MarkdownTypography'; const buildSubscription = graphql` @@ -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..2f548343c 100644 --- a/src/components/chips/BuildBranchNameChip.tsx +++ b/src/components/chips/BuildBranchNameChip.tsx @@ -3,34 +3,34 @@ import React from 'react'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import CallSplit from '@mui/icons-material/CallSplit'; -import { useNavigate } from 'react-router-dom'; -import { navigateHelper } from '../../utils/navigateHelper'; -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 { Commit } from '@mui/icons-material'; -import { Tooltip } from '@mui/material'; +import {useNavigate} from 'react-router-dom'; +import {navigateHelper} from '../../utils/navigateHelper'; +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 {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..decc5b582 100644 --- a/src/components/chips/BuildChangeChip.tsx +++ b/src/components/chips/BuildChangeChip.tsx @@ -1,27 +1,26 @@ import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import Input from '@mui/icons-material/Input'; -import { graphql } from 'babel-plugin-relay/macro'; +import {graphql} from 'babel-plugin-relay/macro'; import React from 'react'; -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 {createFragmentContainer} from 'react-relay'; +import {useNavigate} from 'react-router-dom'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; +import {BuildChangeChip_build} from './__generated__/BuildChangeChip_build.graphql'; +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..ad2af15c6 100644 --- a/src/components/chips/HookNameChip.tsx +++ b/src/components/chips/HookNameChip.tsx @@ -3,32 +3,32 @@ import React from 'react'; import Avatar from '@mui/material/Avatar'; 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 { navigateHookHelper } from '../../utils/navigateHelper'; -import { useNavigate } from 'react-router-dom'; -import { HookNameChip_hook } from './__generated__/HookNameChip_hook.graphql'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +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..3533a6f59 100644 --- a/src/components/chips/NextCronInvocationTimeChip.tsx +++ b/src/components/chips/NextCronInvocationTimeChip.tsx @@ -2,30 +2,30 @@ import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import AccessTime from '@mui/icons-material/AccessTime'; import Tooltip from '@mui/material/Tooltip'; -import { graphql } from 'babel-plugin-relay/macro'; +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 {createFragmentContainer} from 'react-relay'; +import {NextCronInvocationTimeChip_settings} from './__generated__/NextCronInvocationTimeChip_settings.graphql'; +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..58a839dc0 100644 --- a/src/components/chips/RepositoryNameChip.tsx +++ b/src/components/chips/RepositoryNameChip.tsx @@ -3,32 +3,32 @@ import React from 'react'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import Storage from '@mui/icons-material/Storage'; -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 { useNavigate } from 'react-router-dom'; +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 {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..7ce7423c9 100644 --- a/src/components/chips/RepositoryOwnerChip.tsx +++ b/src/components/chips/RepositoryOwnerChip.tsx @@ -2,32 +2,32 @@ import React from 'react'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; -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 { useNavigate } from 'react-router-dom'; +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 {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..ed9a5d7d1 100644 --- a/src/components/chips/TaskNameChip.tsx +++ b/src/components/chips/TaskNameChip.tsx @@ -3,33 +3,33 @@ import React from 'react'; import Avatar from '@mui/material/Avatar'; 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 { TaskNameChip_task } from './__generated__/TaskNameChip_task.graphql'; -import { navigateTaskHelper } from '../../utils/navigateHelper'; -import { useNavigate } from 'react-router-dom'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +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..2646f6d28 100644 --- a/src/components/chips/TaskResourcesChip.tsx +++ b/src/components/chips/TaskResourcesChip.tsx @@ -4,29 +4,29 @@ import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; 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 { TaskResourcesChip_task } from './__generated__/TaskResourcesChip_task.graphql'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +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..15c6062d7 100644 --- a/src/components/common/AppBreadcrumbs.tsx +++ b/src/components/common/AppBreadcrumbs.tsx @@ -1,33 +1,31 @@ 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'; -import { absoluteLink } from '../../utils/link'; +import {absoluteLink} from '../../utils/link'; import RepositoryIcon from './RepositoryIcon'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import AccountSwitch from './AccountSwitch'; -import { AppBreadcrumbs_build } from './__generated__/AppBreadcrumbs_build.graphql'; -import { AppBreadcrumbs_repository } from './__generated__/AppBreadcrumbs_repository.graphql'; -import { AppBreadcrumbs_task } from './__generated__/AppBreadcrumbs_task.graphql'; -import { AppBreadcrumbs_info } from './__generated__/AppBreadcrumbs_info.graphql'; -import { AppBreadcrumbs_viewer } from './__generated__/AppBreadcrumbs_viewer.graphql'; +import {AppBreadcrumbs_build} from './__generated__/AppBreadcrumbs_build.graphql'; +import {AppBreadcrumbs_repository} from './__generated__/AppBreadcrumbs_repository.graphql'; +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..32af09068 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..e42e767c0 100644 --- a/src/components/common/TaskExecutionInfo.tsx +++ b/src/components/common/TaskExecutionInfo.tsx @@ -1,33 +1,35 @@ -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +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'; -import { TaskExecutionInfo_task } from './__generated__/TaskExecutionInfo_task.graphql'; -import { formatDuration } from '../../utils/time'; -import { Box, useTheme } from '@mui/material'; -import { useRecoilState } from 'recoil'; -import { prefersDarkModeState } from '../../cirrusTheme'; +import {Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, YAxis} from 'recharts'; +import {TaskExecutionInfo_task} from './__generated__/TaskExecutionInfo_task.graphql'; +import {formatDuration} from '../../utils/time'; +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..497a40af1 100644 --- a/src/components/compute-credits/BillingSettingsDialog.tsx +++ b/src/components/compute-credits/BillingSettingsDialog.tsx @@ -1,5 +1,5 @@ import Button from '@mui/material/Button'; -import { orange } from '@mui/material/colors'; +import {orange} from '@mui/material/colors'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; @@ -8,31 +8,30 @@ 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'; -import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import React, {useState} from 'react'; +import {commitMutation, createFragmentContainer} from 'react-relay'; import environment from '../../createRelayEnvironment'; import { BillingSettingsDialogMutationResponse, BillingSettingsDialogMutationVariables, } from './__generated__/BillingSettingsDialogMutation.graphql'; -import { BillingSettingsDialog_billingSettings } from './__generated__/BillingSettingsDialog_billingSettings.graphql'; -import { Link } from '@mui/material'; +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..b988d6592 100644 --- a/src/components/compute-credits/ComputeCreditsBase.tsx +++ b/src/components/compute-credits/ComputeCreditsBase.tsx @@ -4,26 +4,24 @@ import CardActions from '@mui/material/CardActions/CardActions'; import CardContent from '@mui/material/CardContent/CardContent'; import CardHeader from '@mui/material/CardHeader/CardHeader'; import Collapse from '@mui/material/Collapse/Collapse'; -import { orange } from '@mui/material/colors'; +import {orange} from '@mui/material/colors'; 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 React, {useState} from 'react'; import BillingSettingsButton from './BillingSettingsButton'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; -import { ComputeCreditsBase_info } from './__generated__/ComputeCreditsBase_info.graphql'; -import { Helmet as Head } from 'react-helmet'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {ComputeCreditsBase_info} from './__generated__/ComputeCreditsBase_info.graphql'; +import {Helmet as Head} from 'react-helmet'; import ComputeCreditsStripeDialog from './ComputeCreditsStripeDialog'; -import { Link } from '@mui/material'; +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..17983558c 100644 --- a/src/components/compute-credits/ComputeCreditsTransactionRow.tsx +++ b/src/components/compute-credits/ComputeCreditsTransactionRow.tsx @@ -1,41 +1,45 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; import Chip from '@mui/material/Chip'; 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 {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {makeStyles} from '@mui/styles'; import classNames from 'classnames'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; import TaskCreatedChip from '../chips/TaskCreatedChip'; -import { navigateTaskHelper } from '../../utils/navigateHelper'; -import { ComputeCreditsTransactionRow_transaction } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql'; +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 +64,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..346ab77b5 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 { useTheme as useGraphiqlTheme } from '@graphiql/react'; -import { GraphiQLProvider, GraphiQLInterface } from 'graphiql'; -import { createStyles, withStyles, WithStyles } from '@mui/styles'; +import {useEffect} from 'react'; +import {Helmet as Head} from 'react-helmet'; +import {Container, useTheme as useMuiTheme} from '@mui/material'; +import {useTheme as useGraphiqlTheme} from '@graphiql/react'; +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..3c2962c3d 100644 --- a/src/components/hooks/HookDetails.tsx +++ b/src/components/hooks/HookDetails.tsx @@ -1,13 +1,11 @@ -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 { graphql } from 'babel-plugin-relay/macro'; -import { HookDetails_hook } from './__generated__/HookDetails_hook.graphql'; -import { Helmet as Head } from 'react-helmet'; -import { Card, CardContent } from '@mui/material'; +import React, {MouseEventHandler} from 'react'; + +import {commitMutation, createFragmentContainer} from 'react-relay'; +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'; +import {Card, CardContent} from '@mui/material'; import RepositoryNameChip from '../chips/RepositoryNameChip'; import BuildBranchNameChip from '../chips/BuildBranchNameChip'; import BuildChangeChip from '../chips/BuildChangeChip'; @@ -18,12 +16,12 @@ import Logs from '../logs/Logs'; import HookStatusChip from '../chips/HookStatusChip'; import CirrusFavicon from '../common/CirrusFavicon'; import classNames from 'classnames'; -import { useNotificationColor } from '../../utils/colors'; +import {useNotificationColor} from '../../utils/colors'; import CardActions from '@mui/material/CardActions'; import Button from '@mui/material/Button'; -import { navigateBuildHelper, navigateHookHelper, navigateTaskHelper } from '../../utils/navigateHelper'; +import {navigateBuildHelper, navigateHookHelper, navigateTaskHelper} from '../../utils/navigateHelper'; import ArrowBack from '@mui/icons-material/ArrowBack'; -import { hasWritePermissions } from '../../utils/permissions'; +import {hasWritePermissions} from '../../utils/permissions'; import Refresh from '@mui/icons-material/Refresh'; import environment from '../../createRelayEnvironment'; import { @@ -31,7 +29,7 @@ import { HookDetailsRerunMutationVariables, } from './__generated__/HookDetailsRerunMutation.graphql'; import RepositoryOwnerChip from '../chips/RepositoryOwnerChip'; -import { useNavigate } from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; const hooksRerunMutation = graphql` mutation HookDetailsRerunMutation($input: HooksReRunInput!) { @@ -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..9c9b4dff6 100644 --- a/src/components/hooks/HookList.tsx +++ b/src/components/hooks/HookList.tsx @@ -2,34 +2,34 @@ import React from 'react'; 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 { HookType } from './HookType'; -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; +import {FragmentRefs} from 'relay-runtime'; +import {Card, CardContent, Link, Typography} from '@mui/material'; +import {HookType} from './HookType'; +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..c68617ecb 100644 --- a/src/components/hooks/HookListRow.tsx +++ b/src/components/hooks/HookListRow.tsx @@ -1,22 +1,20 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; import TableCell from '@mui/material/TableCell'; 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 {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {navigateHookHelper} from '../../utils/navigateHelper'; +import {makeStyles} from '@mui/styles'; import classNames from 'classnames'; -import { HookListRow_hook } from './__generated__/HookListRow_hook.graphql'; +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..4356e115d 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 { Typography } from '@mui/material'; +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..cc6ce7333 100644 --- a/src/components/logs/Logs.tsx +++ b/src/components/logs/Logs.tsx @@ -1,15 +1,15 @@ import React from 'react'; import AnsiUp from 'ansi_up'; -import { useLocation, useNavigate } from 'react-router-dom'; +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..6c545a379 100644 --- a/src/components/metrics/MetricsChart.tsx +++ b/src/components/metrics/MetricsChart.tsx @@ -1,22 +1,21 @@ -import React, { useState } from 'react'; -import { graphql } from 'babel-plugin-relay/macro'; +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 { createFragmentContainer } from 'react-relay'; +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'; +import {FlexibleWidthXYPlot, Hint, LineSeries, VerticalGridLines, XAxis, YAxis} from 'react-vis'; import Chip from '@mui/material/Chip'; -import { formatDuration } from '../../utils/time'; -import { MetricsChart_chart } from './__generated__/MetricsChart_chart.graphql'; +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..f10069c5b 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 {graphql} from 'babel-plugin-relay/macro'; +import React, {useState} from 'react'; +import {createFragmentContainer} from 'react-relay'; +import {makeStyles} from '@mui/styles'; import RepositoryMetricsCharts from './RepositoryMetricsCharts'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; @@ -14,12 +12,12 @@ import Input from '@mui/material/Input'; import MenuItem from '@mui/material/MenuItem'; import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; -import { RepositoryMetricsPage_repository } from './__generated__/RepositoryMetricsPage_repository.graphql'; -import { MetricsQueryParameters } from './__generated__/RepositoryMetricsChartsQuery.graphql'; -import { Helmet as Head } from 'react-helmet'; +import {RepositoryMetricsPage_repository} from './__generated__/RepositoryMetricsPage_repository.graphql'; +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..93d8ca1ad 100644 --- a/src/components/repositories/RepositoryBuildList.tsx +++ b/src/components/repositories/RepositoryBuildList.tsx @@ -1,11 +1,11 @@ -import { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { createFragmentContainer, requestSubscription } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; -import { Helmet as Head } from 'react-helmet'; +import {useEffect, useState} from 'react'; +import {useNavigate} from 'react-router-dom'; +import {createFragmentContainer, requestSubscription} from 'react-relay'; +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'; @@ -24,10 +23,10 @@ import Settings from '@mui/icons-material/Settings'; import AddCircle from '@mui/icons-material/AddCircle'; import Timeline from '@mui/icons-material/Timeline'; -import { absoluteLink } from '../../utils/link'; -import { createLinkToRepository } from '../../utils/github'; -import { NodeOfConnection } from '../../utils/utility-types'; -import { navigateBuildHelper } from '../../utils/navigateHelper'; +import {absoluteLink} from '../../utils/link'; +import {createLinkToRepository} from '../../utils/github'; +import {NodeOfConnection} from '../../utils/utility-types'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; import usePageWidth from '../../utils/usePageWidth'; import environment from '../../createRelayEnvironment'; import BuildStatusChip from '../chips/BuildStatusChip'; @@ -38,41 +37,43 @@ import BuildChangeChip from '../chips/BuildChangeChip'; import MarkdownTypography from '../common/MarkdownTypography'; import BuildsTable from '../../components/builds/BuildsTable'; -import { RepositoryBuildList_repository } from './__generated__/RepositoryBuildList_repository.graphql'; +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..5377ef506 100644 --- a/src/components/repositories/RepositoryCronSettings.tsx +++ b/src/components/repositories/RepositoryCronSettings.tsx @@ -1,25 +1,23 @@ -import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import React, {useState} from 'react'; +import {commitMutation, createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; 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 { RepositoryCronSettings_repository } from './__generated__/RepositoryCronSettings_repository.graphql'; +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'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; import classNames from 'classnames'; -import { useNavigate } from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; import Chip from '@mui/material/Chip'; import BuildStatusChip from '../chips/BuildStatusChip'; -import { Add, Delete } from '@mui/icons-material'; +import {Add, Delete} from '@mui/icons-material'; import environment from '../../createRelayEnvironment'; import Avatar from '@mui/material/Avatar'; import Icon from '@mui/material/Icon'; @@ -32,8 +30,8 @@ import { RepositoryCronSettingsRemoveMutationResponse, RepositoryCronSettingsRemoveMutationVariables, } from './__generated__/RepositoryCronSettingsRemoveMutation.graphql'; -import { navigateBuildHelper } from '../../utils/navigateHelper'; -import { CardActions } from '@mui/material'; +import {navigateBuildHelper} from '../../utils/navigateHelper'; +import {CardActions} from '@mui/material'; const saveCronSettingsMutation = graphql` mutation RepositoryCronSettingsSaveMutation($input: RepositorySaveCronSettingsInput!) { @@ -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..29d84e03d 100644 --- a/src/components/repositories/RepositorySettingsPage.tsx +++ b/src/components/repositories/RepositorySettingsPage.tsx @@ -4,27 +4,29 @@ import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; 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 { RepositorySettingsPage_repository } from './__generated__/RepositorySettingsPage_repository.graphql'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {makeStyles} from '@mui/styles'; +import {RepositorySettingsPage_repository} from './__generated__/RepositorySettingsPage_repository.graphql'; import RepositoryCronSettings from './RepositoryCronSettings'; -import { Link } from '@mui/material'; +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..8a73597ed 100644 --- a/src/components/settings/OwnerApiSettings.tsx +++ b/src/components/settings/OwnerApiSettings.tsx @@ -1,12 +1,11 @@ -import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; -import { OwnerApiSettings_info } from './__generated__/OwnerApiSettings_info.graphql'; +import React, {useState} from 'react'; +import {commitMutation, createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {OwnerApiSettings_info} from './__generated__/OwnerApiSettings_info.graphql'; 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'; @@ -15,8 +14,8 @@ import Button from '@mui/material/Button'; 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 {Link} from '@mui/material'; +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..6b876981b 100644 --- a/src/components/settings/OwnerScopedTokenDialog.tsx +++ b/src/components/settings/OwnerScopedTokenDialog.tsx @@ -7,29 +7,28 @@ 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'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import React, {useState} from 'react'; +import {commitMutation, createFragmentContainer} from 'react-relay'; import environment from '../../createRelayEnvironment'; -import { OwnerScopedTokenDialog_ownerInfo } from './__generated__/OwnerScopedTokenDialog_ownerInfo.graphql'; +import {OwnerScopedTokenDialog_ownerInfo} from './__generated__/OwnerScopedTokenDialog_ownerInfo.graphql'; import { OwnerScopedTokenDialogMutationResponse, OwnerScopedTokenDialogMutationVariables, } 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..28879c510 100644 --- a/src/components/settings/OwnerSettings.tsx +++ b/src/components/settings/OwnerSettings.tsx @@ -1,10 +1,8 @@ import React from 'react'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +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'; @@ -12,28 +10,30 @@ import WebHookSettings from '../webhooks/WebHookSettings'; import OwnerApiSettings from './OwnerApiSettings'; import OwnerSecuredVariables from './OwnerSecuredVariables'; import OwnerPersistentWorkerPools from './OwnerPersistentWorkerPools'; -import { OwnerSettings_info } from './__generated__/OwnerSettings_info.graphql'; +import {OwnerSettings_info} from './__generated__/OwnerSettings_info.graphql'; import MarkdownTypography from '../common/MarkdownTypography'; import CardHeader from '@mui/material/CardHeader'; -import { Card, CardActions, CardContent } from '@mui/material'; +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..2e6de0fa4 100644 --- a/src/components/tasks/TaskCommandList.tsx +++ b/src/components/tasks/TaskCommandList.tsx @@ -1,39 +1,40 @@ import React from 'react'; -import { useCommandStatusColorMapping } from '../../utils/colors'; +import {useCommandStatusColorMapping} from '../../utils/colors'; import TaskCommandLogs from './TaskCommandLogs'; -import { formatDuration } from '../../utils/time'; -import { isTaskCommandExecuting, isTaskCommandFinalStatus } from '../../utils/status'; +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'; import AccordionSummary from '@mui/material/AccordionSummary'; import Typography from '@mui/material/Typography'; -import { createFragmentContainer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; 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 { Box, useTheme } from '@mui/material'; -import { useRecoilValue } from 'recoil'; -import { prefersDarkModeState } from '../../cirrusTheme'; +import {TaskCommandList_task} from './__generated__/TaskCommandList_task.graphql'; +import {ItemOfArray} from '../../utils/utility-types'; +import {useLocation} from 'react-router-dom'; +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..79c904b7d 100644 --- a/src/components/tasks/TaskCommandLogs.tsx +++ b/src/components/tasks/TaskCommandLogs.tsx @@ -1,16 +1,14 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import Logs from '../logs/Logs'; -import { QueryRenderer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {QueryRenderer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import environment from '../../createRelayEnvironment'; import CirrusLinearProgress from '../common/CirrusLinearProgress'; -import { subscribeTaskCommandLogs } from '../../rtu/ConnectionManager'; +import {subscribeTaskCommandLogs} from '../../rtu/ConnectionManager'; import CirrusCircularProgress from '../common/CirrusCircularProgress'; -import { isTaskCommandFinalStatus } from '../../utils/status'; +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'; @@ -18,7 +16,7 @@ import { TaskCommandLogsTailQuery, TaskCommandLogsTailQueryResponse, } from './__generated__/TaskCommandLogsTailQuery.graphql'; -import { TaskCommandStatus, TaskCommandType } from './__generated__/TaskCommandList_task.graphql'; +import {TaskCommandStatus, TaskCommandType} from './__generated__/TaskCommandList_task.graphql'; function logURL(taskId: string, command) { return 'https://api.cirrus-ci.com/v1/task/' + taskId + '/logs/' + command.name + '.log'; @@ -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..486a531cb 100644 --- a/src/components/tasks/TaskCommandsProgress.tsx +++ b/src/components/tasks/TaskCommandsProgress.tsx @@ -1,19 +1,17 @@ -import { isTaskFinalStatus } from '../../utils/status'; -import React, { useEffect, useState } from 'react'; -import { useTaskStatusColorMapping } from '../../utils/colors'; +import {isTaskFinalStatus} from '../../utils/status'; +import React, {useEffect, useState} from 'react'; +import {useTaskStatusColorMapping} from '../../utils/colors'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; -import { formatDuration } from '../../utils/time'; -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 {formatDuration} from '../../utils/time'; +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 {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..3e4e71c19 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'; @@ -8,16 +6,16 @@ import CardContent from '@mui/material/CardContent'; import Chip from '@mui/material/Chip'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; -import { graphql } from 'babel-plugin-relay/macro'; +import {graphql} from 'babel-plugin-relay/macro'; import classNames from 'classnames'; -import React, { Suspense, useEffect, useState } from 'react'; -import { commitMutation, createFragmentContainer, requestSubscription } from 'react-relay'; -import { useLocation, useNavigate } from 'react-router-dom'; +import React, {Suspense, useEffect, useState} from 'react'; +import {commitMutation, createFragmentContainer, requestSubscription} from 'react-relay'; +import {useLocation, useNavigate} from 'react-router-dom'; import environment from '../../createRelayEnvironment'; -import { navigateBuildHelper, navigateTaskHelper } from '../../utils/navigateHelper'; -import { hasWritePermissions } from '../../utils/permissions'; -import { isTaskFinalStatus } from '../../utils/status'; -import { shorten } from '../../utils/text'; +import {navigateBuildHelper, navigateTaskHelper} from '../../utils/navigateHelper'; +import {hasWritePermissions} from '../../utils/permissions'; +import {isTaskFinalStatus} from '../../utils/status'; +import {shorten} from '../../utils/text'; import TaskArtifacts from '../artifacts/TaskArtifacts'; import TaskCreatedChip from '../chips/TaskCreatedChip'; import TaskOptionalChip from '../chips/TaskOptionalChip'; @@ -28,13 +26,13 @@ import CirrusFavicon from '../common/CirrusFavicon'; import TaskCommandList from './TaskCommandList'; import TaskCommandsProgress from './TaskCommandsProgress'; import TaskList from './TaskList'; -import { TaskDetails_task } from './__generated__/TaskDetails_task.graphql'; +import {TaskDetails_task} from './__generated__/TaskDetails_task.graphql'; import { TaskDetailsReRunMutationResponse, TaskDetailsReRunMutationVariables, } from './__generated__/TaskDetailsReRunMutation.graphql'; import TaskResourcesChip from '../chips/TaskResourcesChip'; -import { Helmet as Head } from 'react-helmet'; +import {Helmet as Head} from 'react-helmet'; import ExecutionInfo from '../common/TaskExecutionInfo'; import Refresh from '@mui/icons-material/Refresh'; import PlayCircleFilled from '@mui/icons-material/PlayCircleFilled'; @@ -46,7 +44,7 @@ import TaskTimeoutChip from '../chips/TaskTimeoutChip'; import Notification from '../common/Notification'; import HookList from '../hooks/HookList'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import { TabContext, TabList, TabPanel, ToggleButton } from '@mui/lab'; +import {TabContext, TabList, TabPanel, ToggleButton} from '@mui/lab'; import { Badge, ButtonGroup, @@ -61,7 +59,7 @@ import { Tab, Tooltip, } from '@mui/material'; -import { BugReport, Dehaze, Functions, LayersClear } from '@mui/icons-material'; +import {BugReport, Dehaze, Functions, LayersClear} from '@mui/icons-material'; import { TaskDetailsInvalidateCachesMutationResponse, TaskDetailsInvalidateCachesMutationVariables, @@ -72,10 +70,10 @@ import Accordion from '@mui/material/Accordion'; import AccordionDetails from '@mui/material/AccordionDetails'; import AccordionSummary from '@mui/material/AccordionSummary'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { CirrusTerminal } from '../cirrus-terminal/CirrusTerminal'; -import { HookType } from '../hooks/HookType'; -import { TaskDetailsTriggerMutationVariables } from './__generated__/TaskDetailsTriggerMutation.graphql'; -import { TaskDetailsCancelMutationVariables } from './__generated__/TaskDetailsCancelMutation.graphql'; +import {CirrusTerminal} from '../cirrus-terminal/CirrusTerminal'; +import {HookType} from '../hooks/HookType'; +import {TaskDetailsTriggerMutationVariables} from './__generated__/TaskDetailsTriggerMutation.graphql'; +import {TaskDetailsCancelMutationVariables} from './__generated__/TaskDetailsCancelMutation.graphql'; import TaskDebuggingInformation from './TaskDebuggingInformation'; import CirrusLinearProgress from '../common/CirrusLinearProgress'; import CommitMessage from '../common/CommitMessage'; @@ -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..f7eabd262 100644 --- a/src/components/tasks/TaskListRow.tsx +++ b/src/components/tasks/TaskListRow.tsx @@ -1,28 +1,26 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; import Chip from '@mui/material/Chip'; import TaskNameChip from '../chips/TaskNameChip'; import TaskDurationChip from '../chips/TaskDurationChip'; -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 {shorten} from '../../utils/text'; +import {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {navigateTaskHelper} from '../../utils/navigateHelper'; +import {makeStyles} from '@mui/styles'; import classNames from 'classnames'; import TaskCreatedChip from '../chips/TaskCreatedChip'; -import { TaskListRow_task } from './__generated__/TaskListRow_task.graphql'; -import { isTaskFinalStatus } from '../../utils/status'; -import { useTaskStatusColorMapping } from '../../utils/colors'; -import { Box, Tooltip } from '@mui/material'; -import { formatDuration } from '../../utils/time'; +import {TaskListRow_task} from './__generated__/TaskListRow_task.graphql'; +import {isTaskFinalStatus} from '../../utils/status'; +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..de6ec2645 100644 --- a/src/components/webhooks/DeliveryInfoDialogContent.tsx +++ b/src/components/webhooks/DeliveryInfoDialogContent.tsx @@ -2,27 +2,27 @@ import React from 'react'; 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 {DeliveryInfoDialogLazyContentQueryResponse} from './__generated__/DeliveryInfoDialogLazyContentQuery.graphql'; +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..38d58ff19 100644 --- a/src/components/webhooks/DeliveryRow.tsx +++ b/src/components/webhooks/DeliveryRow.tsx @@ -1,33 +1,34 @@ -import React, { useState } from 'react'; +import React, {useState} from 'react'; import TableCell from '@mui/material/TableCell'; 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 {createFragmentContainer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; +import {makeStyles} from '@mui/styles'; import ReportIcon from '@mui/icons-material/Report'; import SendIcon from '@mui/icons-material/Send'; import classNames from 'classnames'; import DeliveryInfoDialog from './DeliveryInfoDialog'; -import { DeliveryRow_delivery } from './__generated__/DeliveryRow_delivery.graphql'; +import {DeliveryRow_delivery} from './__generated__/DeliveryRow_delivery.graphql'; import Avatar from '@mui/material/Avatar'; -import { useTheme } from '@mui/material'; +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..43c0c7cda 100644 --- a/src/components/webhooks/WebHookSettings.tsx +++ b/src/components/webhooks/WebHookSettings.tsx @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; +import React, {useState} from 'react'; import environment from '../../createRelayEnvironment'; -import { commitMutation, createPaginationContainer, RelayPaginationProp } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {commitMutation, createPaginationContainer, RelayPaginationProp} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import TextField from '@mui/material/TextField'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; @@ -9,22 +9,20 @@ 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'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import DeliveriesList from './DeliveriesList'; -import { WebHookSettings_info } from './__generated__/WebHookSettings_info.graphql'; +import {WebHookSettings_info} from './__generated__/WebHookSettings_info.graphql'; import FormHelperText from '@mui/material/FormHelperText'; import sjcl from 'sjcl/sjcl.js'; import { SaveWebHookSettingsInput, WebHookSettingsMutationVariables, } from './__generated__/WebHookSettingsMutation.graphql'; -import { Link } from '@mui/material'; +import {Link} from '@mui/material'; const securedVariableMutation = graphql` mutation WebHookSettingsMutation($input: SaveWebHookSettingsInput!) { @@ -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..d43577726 100644 --- a/src/components/workers/PoolDetails.tsx +++ b/src/components/workers/PoolDetails.tsx @@ -1,12 +1,10 @@ -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'; -import { commitMutation, createRefetchContainer, RelayRefetchProp } from 'react-relay'; -import { Helmet as Head } from 'react-helmet'; -import { PoolDetails_pool } from './__generated__/PoolDetails_pool.graphql'; +import {graphql} from 'babel-plugin-relay/macro'; +import React, {useEffect, useState} from 'react'; +import {commitMutation, createRefetchContainer, RelayRefetchProp} from 'react-relay'; +import {Helmet as Head} from 'react-helmet'; +import {PoolDetails_pool} from './__generated__/PoolDetails_pool.graphql'; import { Avatar, CardActions, @@ -37,7 +35,7 @@ import InputLabel from '@mui/material/InputLabel'; import Input from '@mui/material/Input'; import DialogActions from '@mui/material/DialogActions'; import Button from '@mui/material/Button'; -import { UpdatePersistentWorkerPoolInput } from './__generated__/PoolDetailsUpdateMutation.graphql'; +import {UpdatePersistentWorkerPoolInput} from './__generated__/PoolDetailsUpdateMutation.graphql'; import { GetPersistentWorkerPoolRegistrationTokenInput, PoolDetailsGetRegistrationTokenMutationResponse, @@ -48,11 +46,11 @@ import TaskStatusChipExtended from '../chips/TaskStatusChipExtended'; import DeleteIcon from '@mui/icons-material/Delete'; import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline'; -import { DeletePersistentWorkerInput } from './__generated__/PoolDetailsDeleteWorkerMutation.graphql'; -import { UpdatePersistentWorkerInput } from './__generated__/PoolDetailsUpdateWorkerMutation.graphql'; +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..37be9620e 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 {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..80fd233ac 100644 --- a/src/scenes/Repository/Repository.tsx +++ b/src/scenes/Repository/Repository.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { QueryRenderer } from 'react-relay'; -import { graphql } from 'babel-plugin-relay/macro'; +import {QueryRenderer} from 'react-relay'; +import {graphql} from 'babel-plugin-relay/macro'; import environment from '../../createRelayEnvironment'; import RepositoryBuildList from '../../components/repositories/RepositoryBuildList'; import CirrusLinearProgress from '../../components/common/CirrusLinearProgress'; import NotFound from '../NotFound'; -import { RepositoryQuery } from './__generated__/RepositoryQuery.graphql'; -import { useParams } from 'react-router-dom'; +import {RepositoryQuery} from './__generated__/RepositoryQuery.graphql'; +import {useParams} from 'react-router-dom'; import MarkdownTypography from '../../components/common/MarkdownTypography'; import AppBreadcrumbs from '../../components/common/AppBreadcrumbs'; @@ -45,7 +45,7 @@ export default function Repository(): JSX.Element { return ( <> - + ); }}