From f4d02e37b76330b3933d373672ea907f8b43bd51 Mon Sep 17 00:00:00 2001 From: olav Date: Tue, 31 May 2022 10:50:24 +0200 Subject: [PATCH] refactor: rewrite feature strategy icons list (#1039) * refactor: fix strategy action icon layout * refactor: use a custom SVG for the rollout strategy icon * refactor: rewrite feature strategy icons list --- frontend/src/assets/icons/rollout.svg | 1 + .../common/RolloutIcon/RolloutIcon.styles.ts | 27 ----- .../common/RolloutIcon/RolloutIcon.tsx | 24 ----- .../FeatureStrategyIcon.tsx | 39 +++++++ .../FeatureStrategyIcons.tsx | 45 ++++++++ .../FeatureOverviewEnvironment.styles.ts | 22 ---- .../FeatureOverviewEnvironment.tsx | 101 +++--------------- ...atureOverviewEnvironmentStrategy.styles.ts | 1 + frontend/src/utils/strategyNames.ts | 2 +- 9 files changed, 99 insertions(+), 163 deletions(-) create mode 100644 frontend/src/assets/icons/rollout.svg delete mode 100644 frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts delete mode 100644 frontend/src/component/common/RolloutIcon/RolloutIcon.tsx create mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx create mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx diff --git a/frontend/src/assets/icons/rollout.svg b/frontend/src/assets/icons/rollout.svg new file mode 100644 index 0000000000..a1d4b2dc19 --- /dev/null +++ b/frontend/src/assets/icons/rollout.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts b/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts deleted file mode 100644 index 7602632ea2..0000000000 --- a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { makeStyles } from 'tss-react/mui'; - -export const useStyles = makeStyles()(theme => ({ - container: { - display: 'flex', - alignItems: 'center', - position: 'relative', - width: '50px', - height: '100%', - padding: '15px 0px', - }, - vertical: { - borderRadius: '1px', - height: '50px', - width: '50px', - }, - circle: { - width: '15px', - height: '15px', - }, - pos: { - position: 'absolute', - right: 0, - left: 0, - margin: '0 auto', - }, -})); diff --git a/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx b/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx deleted file mode 100644 index 90fa661fa4..0000000000 --- a/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; -import Remove from '@mui/icons-material/Remove'; -import { useStyles } from './RolloutIcon.styles'; -import classnames from 'classnames'; - -interface IRolloutIconProps { - className?: string; -} - -const RolloutIcon = ({ className }: IRolloutIconProps) => { - const { classes: styles } = useStyles(); - return ( -
- - -
- ); -}; - -export default RolloutIcon; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx new file mode 100644 index 0000000000..a6db5c779d --- /dev/null +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx @@ -0,0 +1,39 @@ +import { + getFeatureStrategyIcon, + formatStrategyName, +} from 'utils/strategyNames'; +import { styled, Tooltip } from '@mui/material'; +import { useId } from 'hooks/useId'; + +interface IFeatureStrategyIconProps { + strategyName: string; +} + +export const FeatureStrategyIcon = ({ + strategyName, +}: IFeatureStrategyIconProps) => { + const Icon = getFeatureStrategyIcon(strategyName); + const id = useId(); + + return ( + + + + + + ); +}; + +const StyledIcon = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.inactiveIcon, + + '& svg': { + width: theme.spacing(2.5), + height: theme.spacing(2.5), + }, +})); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx new file mode 100644 index 0000000000..4ce4395677 --- /dev/null +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx @@ -0,0 +1,45 @@ +import { IFeatureStrategy } from 'interfaces/strategy'; +import { FeatureStrategyIcon } from 'component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon'; +import { styled } from '@mui/material'; + +interface IFeatureStrategyIconsProps { + strategies: IFeatureStrategy[] | undefined; +} + +export const FeatureStrategyIcons = ({ + strategies, +}: IFeatureStrategyIconsProps) => { + if (!strategies?.length) { + return null; + } + + const strategyNames = strategies.map(strategy => strategy.name); + const uniqueStrategyNames = uniqueValues(strategyNames); + + return ( + + {uniqueStrategyNames.map(strategyName => ( + + + + ))} + + ); +}; + +const uniqueValues = (values: T[]): T[] => { + return [...new Set(values)]; +}; + +const StyledList = styled('ul')(() => ({ + all: 'unset', + display: 'flex', + alignItems: 'center', + alignContent: 'center', +})); + +const StyledListItem = styled('li')(() => ({ + all: 'unset', + minWidth: 30, + textAlign: 'center', +})); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index 347bbf3955..c5858bb049 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -94,30 +94,11 @@ export const useStyles = makeStyles()(theme => ({ justifyContent: 'flex-end', marginBottom: '1rem', }, - strategyIconContainer: { - minWidth: '40px', - marginRight: '5px', - display: 'flex', - justifyContent: 'center', - }, - strategiesIconsContainer: { - transform: 'scale(0.8)', - display: 'flex', - alignItems: 'center', - position: 'relative', - [theme.breakpoints.down(560)]: { - marginLeft: '0px', - top: '5px', - }, - }, truncator: { [theme.breakpoints.down(560)]: { textAlign: 'center', }, }, - strategyIcon: { - fill: theme.palette.inactiveIcon, - }, container: { display: 'flex', alignItems: 'center', @@ -127,7 +108,4 @@ export const useStyles = makeStyles()(theme => ({ marginLeft: '0', }, }, - strategyMenu: { - marginRight: '-.5rem', - }, })); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 2a87263737..a6a9d0a8b1 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -1,19 +1,10 @@ -import { - Accordion, - AccordionDetails, - AccordionSummary, - Tooltip, -} from '@mui/material'; +import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'; import { ExpandMore } from '@mui/icons-material'; import React from 'react'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import useFeatureMetrics from 'hooks/api/getters/useFeatureMetrics/useFeatureMetrics'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { getFeatureMetrics } from 'utils/getFeatureMetrics'; -import { - getFeatureStrategyIcon, - formatStrategyName, -} from 'utils/strategyNames'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; @@ -25,12 +16,7 @@ import { FeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureSt import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { StatusBadge } from 'component/common/StatusBadge/StatusBadge'; - -interface IStrategyIconObject { - count: number; - Icon: React.ReactElement; - name: string; -} +import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons'; interface IFeatureOverviewEnvironmentProps { env: IFeatureEnvironment; @@ -55,36 +41,11 @@ const FeatureOverviewEnvironment = ({ const getOverviewText = () => { if (env.enabled) { - return `${environmentMetric?.yes} received this feature - because the following strategies are executing`; + return `${environmentMetric?.yes} received this feature because the following strategies are executing`; } return `This environment is disabled, which means that none of your strategies are executing`; }; - const getStrategyIcons = () => { - const strategyObjects = featureEnvironment?.strategies.reduce( - (acc, current) => { - if (acc[current.name]) { - acc[current.name].count = acc[current.name].count + 1; - } else { - acc[current.name] = { - count: 1, - // @ts-expect-error - Icon: getFeatureStrategyIcon(current.name), - }; - } - return acc; - }, - {} as { [key: string]: IStrategyIconObject } - ); - - if (!strategyObjects) return []; - - return Object.keys(strategyObjects).map(strategyName => { - return { ...strategyObjects[strategyName], name: strategyName }; - }); - }; - return (
-
- -
- -
- {getStrategyIcons()?.map( - ({ name, Icon }) => ( - -
- {/* @ts-expect-error */} - -
- - ) - )} -
{' '} - - } + +
({ }, actions: { marginLeft: 'auto', + display: 'flex', }, body: { padding: '1rem', diff --git a/frontend/src/utils/strategyNames.ts b/frontend/src/utils/strategyNames.ts index 608790298a..dfc6b163bb 100644 --- a/frontend/src/utils/strategyNames.ts +++ b/frontend/src/utils/strategyNames.ts @@ -2,7 +2,7 @@ import LocationOnIcon from '@mui/icons-material/LocationOn'; import PeopleIcon from '@mui/icons-material/People'; import LanguageIcon from '@mui/icons-material/Language'; import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; -import RolloutIcon from 'component/common/RolloutIcon/RolloutIcon'; +import { ReactComponent as RolloutIcon } from 'assets/icons/rollout.svg'; import { ElementType } from 'react'; export const formatStrategyName = (strategyName: string): string => {