From 241ede8ca918a4165b3bcc2841c9238edfc39390 Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Tue, 3 Jan 2023 09:24:55 +0100 Subject: [PATCH] Refactor/make styles batch 6 (#2793) Refactors a number of components in the frontend away from deprecated makeStyles --- .../StrategyItemContainer.tsx | 7 ++- .../NavigationLink/NavigationLink.styles.ts | 31 ---------- .../Header/NavigationLink/NavigationLink.tsx | 48 ++++++++++---- .../Header/NavigationMenu/NavigationMenu.tsx | 32 +++++++--- .../FeatureDetails/FeatureDetails.styles.ts | 28 --------- .../FeatureDetails/FeatureDetails.tsx | 62 ++++++++++++++----- .../FeatureResultInfoPopoverCell.styles.ts | 15 ----- .../FeatureResultInfoPopoverCell.tsx | 18 ++++-- .../FeatureStrategyItem.styles.ts | 40 ------------ .../StrategyItem/FeatureStrategyItem.tsx | 12 ++-- .../StrategyExecution.styles.ts | 19 ------ .../StrategyExecution.styles.tsx | 9 +++ .../StrategyExecution/StrategyExecution.tsx | 9 ++- .../StrategyExecutionParameters.tsx | 10 +-- 14 files changed, 145 insertions(+), 195 deletions(-) delete mode 100644 frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.styles.ts delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx index 1b94501796..63afc88b72 100644 --- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx +++ b/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 = ({ actions, children, orderNumber, - className, + style = {}, }) => { const { classes: styles } = useStyles(); const Icon = getFeatureStrategyIcon(strategy.name); @@ -57,7 +58,7 @@ export const StrategyItemContainer: FC = ({ condition={orderNumber !== undefined} show={{orderNumber}} /> - +
({ - 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', - }, - }, -})); diff --git a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx index c9ed93d55b..668ddfc997 100644 --- a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx +++ b/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 { classes: styles } = useStyles(); +const StyledListItem = styled(ListItem)({ + 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 ( - { handleClose(); }} > - + {text} - + ); }; diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx index 2c3080e958..da2cae8a30 100644 --- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx +++ b/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 ( - + {option.title} ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts deleted file mode 100644 index a035603f16..0000000000 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts +++ /dev/null @@ -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', - }, -})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index 8c8de09cdc..db5e43ad62 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/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 ( <> -
-
- + + + {feature.name} - + ( @@ -101,12 +129,12 @@ export const FeatureDetails = ({ /> )} /> -
- + + - -
-
+ + + {description} @@ -116,23 +144,23 @@ export const FeatureDetails = ({ . -
+ + {noValueTxt} -
+ } /> + {customStrategiesTxt} - + } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts deleted file mode 100644 index b127736865..0000000000 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts +++ /dev/null @@ -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, - }, -})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index 8051b2d86f..5059cae317 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/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 }} > ({ - 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, - }, -})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index 4d2abc390f..c7322509c0 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/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 ( ({ - 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}`, - }, -})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx new file mode 100644 index 0000000000..e132cda23c --- /dev/null +++ b/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}`, +})); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx index 1defd97410..06185bb063 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/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 { useStyles } from './StrategyExecution.styles'; +import { Chip, styled } from '@mui/material'; 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 = ({ 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 = ({ ), name === 'default' && ( - + The standard strategy is{' '} = ({ label="ON" />{' '} for all users. - + ), ].filter(Boolean); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx index a3c8418654..da5a34c77b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx +++ b/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 { useStyles } from '../StrategyExecution.styles'; +import { StyledBoxSummary } 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 ( - @@ -60,7 +56,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({ : ''}{' '} is included. - + ); case 'userIds': case 'UserIds':