Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

Refactor/make styles batch 6 (#2793)

Browse Source 
Refactors a number of components in the frontend away from deprecated makeStyles
This commit is contained in:
Fredrik Strand Oseberg 2023-01-03 09:24:55 +01:00 committed by GitHub
parent 231b26995c
commit 241ede8ca9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 145 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
View File

@ -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),

31
frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts
View File

@ -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',
},
},
}));

48
frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx
View File

@ -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 (
<ListItem
className={styles.menuItem}
<StyledListItem
onClick={() => {
handleClose();
}}
>
<Link
style={{ textDecoration: 'none' }}
component={RouterLink}
className={styles.navMenuLink}
component={StyledLink}
to={path}
underline="hover"
>
<span className={styles.menuItemBox} />
<StyledSpan />
{text}
</Link>
</ListItem>
</StyledListItem>
);
};

32
frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
View File

@ -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>
);

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

@ -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',
},
}));

62
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx
View File

@ -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}>
<div className={styles.titleRow}>
<Typography variant={'subtitle1'} className={styles.name}>
<StyledDivWrapper>
<StyledDivTitleRow>
<StyledTypographyName variant={'subtitle1'}>
{feature.name}
</Typography>
</StyledTypographyName>
<ConditionallyRender
condition={feature?.strategies?.result !== 'unknown'}
show={() => (
@ -101,12 +129,12 @@ export const FeatureDetails = ({
/>
)}
/>
</div>
<IconButton onClick={onCloseClick} className={styles.icon}>
</StyledDivTitleRow>
<StyledIconButton onClick={onCloseClick}>
<CloseOutlined />
</IconButton>
</div>
<div className={styles.descriptionRow}>
</StyledIconButton>
</StyledDivWrapper>
<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>
}
/>
</>

15
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
View File

@ -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,
},
}));

18
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
View File

@ -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}

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

@ -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,
},
}));

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

@ -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={
result.enabled && result.evaluationStatus === 'complete'
? styles.successBorder
: undefined
}
style={{
borderColor: result.enabled
? theme.palette.success.main
: 'inherit',
}}
strategy={{ ...strategy, id: `${objectId(strategy)}` }}
orderNumber={index + 1}
actions={

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

@ -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}`,
},
}));

9
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx Normal file
View File

@ -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}`,
}));

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

@ -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<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);

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

@ -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 (
<Box
className={styles.summary}
<StyledBoxSummary
key={key}
sx={{ display: 'flex', alignItems: 'center' }}
>
@ -60,7 +56,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
: ''}{' '}
is included.
</div>
</Box>
</StyledBoxSummary>
);
case 'userIds':
case 'UserIds':