Refactor/make styles batch 6 (#2793)

Refactors a number of components in the frontend away from deprecated makeStyles

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -1,6 +1,6 @@
 import { DragEventHandler, FC, ReactNode } from 'react';
 import { DragIndicator } from '@mui/icons-material';
-import { styled, IconButton, Box } from '@mui/material';
+import { styled, IconButton, Box, SxProps, Theme } from '@mui/material';
 import classNames from 'classnames';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import {
@@ -19,6 +19,7 @@ interface IStrategyItemContainerProps {
     actions?: ReactNode;
     orderNumber?: number;
     className?: string;
+    style?: React.CSSProperties;
 }
 
 const DragIcon = styled(IconButton)(({ theme }) => ({
@@ -46,7 +47,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
     actions,
     children,
     orderNumber,
-    className,
+    style = {},
 }) => {
     const { classes: styles } = useStyles();
     const Icon = getFeatureStrategyIcon(strategy.name);
@@ -57,7 +58,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                 condition={orderNumber !== undefined}
                 show={<StyledIndexLabel>{orderNumber}</StyledIndexLabel>}
             />
-            <Box className={classNames(styles.container, className)}>
+            <Box className={styles.container} style={{ ...style }}>
                 <div
                     className={classNames(styles.header, {
                         [styles.headerDraggable]: Boolean(onDragStart),

frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts

@@ -1,31 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    menuItem: {
-        minWidth: '150px',
-        height: '100%',
-        width: '100%',
-        margin: '0',
-        padding: '0',
-    },
-    menuItemBox: {
-        width: '12.5px',
-        height: '12.5px',
-        display: 'block',
-        backgroundColor: theme.palette.primary.main,
-        marginRight: '1rem',
-        borderRadius: '2px',
-    },
-    navMenuLink: {
-        textDecoration: 'none',
-        alignItems: 'center',
-        display: 'flex',
-        color: 'inherit',
-        height: '100%',
-        width: '100%',
-        '&&': {
-            // Override MenuItem's built-in padding.
-            padding: '0.5rem 1rem',
-        },
-    },
-}));

frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx

@@ -1,35 +1,59 @@
-import { ListItem, Link } from '@mui/material';
+import { ListItem, Link, styled } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
-
-import { useStyles } from './NavigationLink.styles';
-
 interface INavigationLinkProps {
     path: string;
     text: string;
     handleClose: () => void;
 }
 
-const NavigationLink = ({ path, text, handleClose }: INavigationLinkProps) => {
+const StyledListItem = styled(ListItem)({
-    const { classes: styles } = useStyles();
+    minWidth: '150px',
+    height: '100%',
+    width: '100%',
+    margin: '0',
+    padding: '0',
+});
 
+const StyledLink = styled(RouterLink)(({ theme }) => ({
+    textDecoration: 'none',
+    alignItems: 'center',
+    display: 'flex',
+    color: 'inherit',
+    height: '100%',
+    width: '100%',
+    '&&': {
+        // Override MenuItem's built-in padding.
+        color: 'black',
+        padding: theme.spacing(1, 2),
+    },
+}));
+
+const StyledSpan = styled('span')(({ theme }) => ({
+    width: '12.5px',
+    height: '12.5px',
+    display: 'block',
+    backgroundColor: theme.palette.primary.main,
+    marginRight: '1rem',
+    borderRadius: '2px',
+}));
+
+const NavigationLink = ({ path, text, handleClose }: INavigationLinkProps) => {
     return (
-        <ListItem
+        <StyledListItem
-            className={styles.menuItem}
             onClick={() => {
                 handleClose();
             }}
         >
             <Link
                 style={{ textDecoration: 'none' }}
-                component={RouterLink}
+                component={StyledLink}
-                className={styles.navMenuLink}
                 to={path}
                 underline="hover"
             >
-                <span className={styles.menuItemBox} />
+                <StyledSpan />
                 {text}
             </Link>
-        </ListItem>
+        </StyledListItem>
     );
 };
 

frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx

@@ -1,6 +1,5 @@
-import { Menu, MenuItem } from '@mui/material';
+import { Menu, MenuItem, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { useStyles } from '../NavigationLink/NavigationLink.styles';
 
 interface INavigationMenuProps {
     options: any[];
@@ -10,6 +9,28 @@ interface INavigationMenuProps {
     style: Object;
 }
 
+const StyledLink = styled(Link)(({ theme }) => ({
+    textDecoration: 'none',
+    alignItems: 'center',
+    display: 'flex',
+    color: 'inherit',
+    height: '100%',
+    width: '100%',
+    '&&': {
+        // Override MenuItem's built-in padding.
+        padding: theme.spacing(1, 2),
+    },
+}));
+
+const StyledSpan = styled('span')(({ theme }) => ({
+    width: '12.5px',
+    height: '12.5px',
+    display: 'block',
+    backgroundColor: theme.palette.primary.main,
+    marginRight: theme.spacing(2),
+    borderRadius: '2px',
+}));
+
 export const NavigationMenu = ({
     options,
     id,
@@ -17,8 +38,6 @@ export const NavigationMenu = ({
     anchorEl,
     style,
 }: INavigationMenuProps) => {
-    const { classes: styles } = useStyles();
-
     return (
         <Menu
             id={id}
@@ -31,12 +50,11 @@ export const NavigationMenu = ({
                 return (
                     <MenuItem
                         key={option.path}
-                        component={Link}
+                        component={StyledLink}
                         to={option.path}
                         onClick={handleClose}
-                        classes={{ root: styles.navMenuLink }}
                     >
-                        <span className={styles.menuItemBox} />
+                        <StyledSpan />
                         {option.title}
                     </MenuItem>
                 );

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts

@@ -1,28 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    titleRowWrapper: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-    },
-    titleRow: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: theme.spacing(1.5),
-        marginTop: theme.spacing(1.5),
-    },
-    alertRow: {
-        margin: theme.spacing(1, 0),
-    },
-    descriptionRow: {
-        margin: theme.spacing(1, 0.5),
-    },
-    name: {
-        fontWeight: 600,
-        padding: theme.spacing(0.5),
-    },
-    icon: {
-        textAlign: 'right',
-    },
-}));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx

@@ -2,9 +2,8 @@ import {
     PlaygroundFeatureSchema,
     PlaygroundRequestSchema,
 } from 'component/playground/Playground/interfaces/playground.model';
-import { Alert, IconButton, Typography, useTheme } from '@mui/material';
+import { Alert, IconButton, Typography, useTheme, styled } from '@mui/material';
 import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
-import { useStyles } from './FeatureDetails.styles';
 import { CloseOutlined } from '@mui/icons-material';
 import React from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -14,6 +13,36 @@ import {
     hasOnlyCustomStrategies,
 } from './helpers';
 
+const StyledDivWrapper = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+});
+
+const StyledDivTitleRow = styled('div')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    marginTop: theme.spacing(1.5),
+}));
+
+const StyledDivAlertRow = styled('div')(({ theme }) => ({
+    margin: theme.spacing(1, 0),
+}));
+
+const StyledDivDescriptionRow = styled('div')(({ theme }) => ({
+    margin: theme.spacing(1, 0.5),
+}));
+
+const StyledTypographyName = styled(Typography)(({ theme }) => ({
+    fontWeight: 600,
+    padding: theme.spacing(0.5),
+}));
+
+const StyledIconButton = styled(IconButton)({
+    textAlign: 'right',
+});
+
 interface PlaygroundFeatureResultDetailsProps {
     feature: PlaygroundFeatureSchema;
     input?: PlaygroundRequestSchema;
@@ -24,7 +53,6 @@ export const FeatureDetails = ({
     input,
     onClose,
 }: PlaygroundFeatureResultDetailsProps) => {
-    const { classes: styles } = useStyles();
     const theme = useTheme();
 
     const [description, reason, color] = (() => {
@@ -80,11 +108,11 @@ export const FeatureDetails = ({
 
     return (
         <>
-            <div className={styles.titleRowWrapper}>
+            <StyledDivWrapper>
-                <div className={styles.titleRow}>
+                <StyledDivTitleRow>
-                    <Typography variant={'subtitle1'} className={styles.name}>
+                    <StyledTypographyName variant={'subtitle1'}>
                         {feature.name}
-                    </Typography>
+                    </StyledTypographyName>
                     <ConditionallyRender
                         condition={feature?.strategies?.result !== 'unknown'}
                         show={() => (
@@ -101,12 +129,12 @@ export const FeatureDetails = ({
                             />
                         )}
                     />
-                </div>
+                </StyledDivTitleRow>
-                <IconButton onClick={onCloseClick} className={styles.icon}>
+                <StyledIconButton onClick={onCloseClick}>
                     <CloseOutlined />
-                </IconButton>
+                </StyledIconButton>
-            </div>
+            </StyledDivWrapper>
-            <div className={styles.descriptionRow}>
+            <StyledDivDescriptionRow>
                 <Typography variant="body1" component="span">
                     {description}
                 </Typography>
@@ -116,23 +144,23 @@ export const FeatureDetails = ({
                 <Typography variant="body1" component="span">
                     .
                 </Typography>
-            </div>
+            </StyledDivDescriptionRow>
             <ConditionallyRender
                 condition={Boolean(noValueTxt)}
                 show={
-                    <div className={styles.alertRow}>
+                    <StyledDivAlertRow>
                         <Alert color={'info'}>{noValueTxt}</Alert>
-                    </div>
+                    </StyledDivAlertRow>
                 }
             />
             <ConditionallyRender
                 condition={Boolean(customStrategiesTxt)}
                 show={
-                    <div className={styles.alertRow}>
+                    <StyledDivAlertRow>
                         <Alert severity="warning" color="info">
                             {customStrategiesTxt}
                         </Alert>
-                    </div>
+                    </StyledDivAlertRow>
                 }
             />
         </>

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts

@@ -1,15 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    popoverPaper: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing(6),
-        width: 728,
-        maxWidth: '100%',
-        height: 'auto',
-        overflowY: 'auto',
-        backgroundColor: theme.palette.tertiary.light,
-        borderRadius: theme.shape.borderRadiusLarge,
-    },
-}));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx

@@ -1,11 +1,10 @@
+import { useRef, useState } from 'react';
 import {
     PlaygroundFeatureSchema,
     PlaygroundRequestSchema,
 } from 'component/playground/Playground/interfaces/playground.model';
 import { IconButton, Popover, styled } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
-import React, { useRef, useState } from 'react';
-import { useStyles } from './FeatureResultInfoPopoverCell.styles';
 import { FeatureDetails } from './FeatureDetails/FeatureDetails';
 import { PlaygroundResultFeatureStrategyList } from './FeatureStrategyList/PlaygroundResultFeatureStrategyList';
 
@@ -24,7 +23,6 @@ export const FeatureResultInfoPopoverCell = ({
     input,
 }: FeatureResultInfoPopoverCellProps) => {
     const [open, setOpen] = useState(false);
-    const { classes: styles } = useStyles();
     const ref = useRef(null);
 
     const togglePopover = () => {
@@ -44,6 +42,19 @@ export const FeatureResultInfoPopoverCell = ({
                 open={open}
                 onClose={() => setOpen(false)}
                 anchorEl={ref.current}
+                PaperProps={{
+                    sx: theme => ({
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: theme.spacing(6),
+                        width: 728,
+                        maxWidth: '100%',
+                        height: 'auto',
+                        overflowY: 'auto',
+                        backgroundColor: theme.palette.tertiary.light,
+                        borderRadius: theme.shape.borderRadius,
+                    }),
+                }}
                 anchorOrigin={{
                     vertical: 'top',
                     horizontal: 'right',
@@ -52,7 +63,6 @@ export const FeatureResultInfoPopoverCell = ({
                     vertical: 'center',
                     horizontal: 'left',
                 }}
-                classes={{ paper: styles.popoverPaper }}
             >
                 <FeatureDetails
                     feature={feature}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.styles.ts

@@ -1,40 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    header: {
-        display: 'flex',
-        padding: theme.spacing(2, 2),
-        justifyContent: 'space-between',
-    },
-    headerName: {
-        padding: theme.spacing(0.5, 2),
-        display: 'flex',
-        gap: theme.spacing(1),
-        alignItems: 'center',
-        borderBottom: `1px solid ${theme.palette.divider}`,
-        fontWeight: theme.typography.fontWeightMedium,
-    },
-    icon: {
-        fill: theme.palette.inactiveIcon,
-    },
-    resultChip: {
-        marginLeft: 'auto',
-    },
-    body: {
-        padding: theme.spacing(2),
-        justifyItems: 'center',
-    },
-    innerContainer: {
-        [theme.breakpoints.down(400)]: {
-            padding: '0.5rem',
-        },
-        width: '100%',
-        flexShrink: 0,
-        paddingBottom: '1rem',
-        borderRadius: theme.shape.borderRadiusMedium,
-        background: theme.palette.background.default,
-    },
-    successBorder: {
-        borderColor: theme.palette.success.main,
-    },
-}));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx

@@ -5,7 +5,6 @@ import {
     PlaygroundRequestSchema,
 } from 'component/playground/Playground/interfaces/playground.model';
 import { StrategyExecution } from './StrategyExecution/StrategyExecution';
-import { useStyles } from './FeatureStrategyItem.styles';
 import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer';
 import { objectId } from 'utils/objectId';
 
@@ -21,7 +20,6 @@ export const FeatureStrategyItem = ({
     index,
 }: IFeatureStrategyItemProps) => {
     const { result } = strategy;
-    const { classes: styles } = useStyles();
     const theme = useTheme();
     const label =
         result.evaluationStatus === 'incomplete'
@@ -32,11 +30,11 @@ export const FeatureStrategyItem = ({
 
     return (
         <StrategyItemContainer
-            className={
+            style={{
-                result.enabled && result.evaluationStatus === 'complete'
+                borderColor: result.enabled
-                    ? styles.successBorder
+                    ? theme.palette.success.main
-                    : undefined
+                    : 'inherit',
-            }
+            }}
             strategy={{ ...strategy, id: `${objectId(strategy)}` }}
             orderNumber={index + 1}
             actions={

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts

@@ -1,19 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    valueContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1ch',
-    },
-    valueSeparator: {
-        color: theme.palette.grey[700],
-    },
-    summary: {
-        width: 'auto',
-        height: 'auto',
-        padding: theme.spacing(2, 3),
-        borderRadius: theme.shape.borderRadiusMedium,
-        border: `1px solid ${theme.palette.dividerAlternative}`,
-    },
-}));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material';
+
+export const StyledBoxSummary = styled(Box)(({ theme }) => ({
+    width: 'auto',
+    height: 'auto',
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.dividerAlternative}`,
+}));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,8 +1,7 @@
 import { Fragment, VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Box, Chip, styled } from '@mui/material';
+import { Chip, styled } from '@mui/material';
-import { useStyles } from './StrategyExecution.styles';
 import {
     PlaygroundRequestSchema,
     PlaygroundStrategySchema,
@@ -13,6 +12,7 @@ import { SegmentExecution } from './SegmentExecution/SegmentExecution';
 import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters';
 import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
 import { formattedStrategyNames } from 'utils/strategyNames';
+import { StyledBoxSummary } from './StrategyExecution.styles';
 
 interface IStrategyExecutionProps {
     strategyResult: PlaygroundStrategySchema;
@@ -31,7 +31,6 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
     const { name, constraints, segments, parameters } = strategyResult;
 
     const { uiConfig } = useUiConfig();
-    const { classes: styles } = useStyles();
 
     const hasSegments =
         Boolean(uiConfig.flags.SE) && Boolean(segments && segments.length > 0);
@@ -63,7 +62,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
             <CustomStrategyParams strategyName={name} parameters={parameters} />
         ),
         name === 'default' && (
-            <Box sx={{ width: '100%' }} className={styles.summary}>
+            <StyledBoxSummary sx={{ width: '100%' }}>
                 The standard strategy is{' '}
                 <Chip
                     variant="outlined"
@@ -72,7 +71,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                     label="ON"
                 />{' '}
                 for all users.
-            </Box>
+            </StyledBoxSummary>
         ),
     ].filter(Boolean);
 

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx

@@ -5,8 +5,7 @@ import {
 import { Box, Chip } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
-import React from 'react';
+import { StyledBoxSummary } from '../StrategyExecution.styles';
-import { useStyles } from '../StrategyExecution.styles';
 import {
     PlaygroundConstraintSchema,
     PlaygroundRequestSchema,
@@ -24,8 +23,6 @@ export const PlaygroundResultStrategyExecutionParameters = ({
     constraints,
     input,
 }: PlaygroundResultStrategyExecutionParametersProps) => {
-    const { classes: styles } = useStyles();
-
     return (
         <>
             {Object.keys(parameters).map(key => {
@@ -36,8 +33,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                             parameters[key]
                         );
                         return (
-                            <Box
+                            <StyledBoxSummary
-                                className={styles.summary}
                                 key={key}
                                 sx={{ display: 'flex', alignItems: 'center' }}
                             >
@@ -60,7 +56,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                                         : ''}{' '}
                                     is included.
                                 </div>
-                            </Box>
+                            </StyledBoxSummary>
                         );
                     case 'userIds':
                     case 'UserIds':