diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx index a2b2a4dd80..620302fdd2 100644 --- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx +++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx @@ -1,7 +1,6 @@ import { Button, ButtonProps } from '@mui/material'; import { Lock } from '@mui/icons-material'; import React from 'react'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { TooltipResolver, ITooltipResolverProps, @@ -32,6 +31,22 @@ export interface IProjectPermissionButtonProps extends IPermissionButtonProps { environmentId: string; } +const getEndIcon = ( + access: boolean, + fallBackIcon?: React.ReactNode, + hideLockIcon?: boolean +): React.ReactNode => { + if (!access && !hideLockIcon) { + return ; + } + + if (fallBackIcon) { + return fallBackIcon; + } + + return null; +}; + const ProjectEnvironmentPermissionButton: React.FC = React.forwardRef((props, ref) => { const access = useHasProjectEnvironmentAccess( @@ -75,6 +90,7 @@ const BasePermissionButton: React.FC = ref ) => { const id = useId(); + const endIcon = getEndIcon(access, rest.endIcon, hideLockIcon); return ( = variant={variant} color={color} {...rest} - endIcon={ - <> - } - elseShow={ - Boolean(rest.endIcon) && - rest.endIcon - } - /> - - } + endIcon={endIcon} > {children} diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx index 33415c4ff7..b3063be05b 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx @@ -3,18 +3,25 @@ import { formatStrategyName, } from 'utils/strategyNames'; import { styled, Tooltip } from '@mui/material'; +import { IFeatureStrategy } from 'interfaces/strategy'; interface IFeatureStrategyIconProps { - strategyName: string; + strategy: IFeatureStrategy; } export const FeatureStrategyIcon = ({ - strategyName, + strategy, }: IFeatureStrategyIconProps) => { - const Icon = getFeatureStrategyIcon(strategyName); + const Icon = getFeatureStrategyIcon(strategy.name); return ( - + diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx index 63e011a374..c19ebd0b83 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx @@ -1,28 +1,8 @@ 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; - } - - return ( - - {strategies.map(strategy => ( - - - - ))} - - ); -}; +import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; +import { formatStrategyName } from 'utils/strategyNames'; const StyledList = styled('ul')(() => ({ all: 'unset', @@ -36,3 +16,61 @@ const StyledListItem = styled('li')(() => ({ minWidth: 30, textAlign: 'center', })); + +const StyledItem = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: theme.spacing(1), +})); + +const THRESHOLD = 5; + +interface IFeatureStrategyIconsProps { + strategies: IFeatureStrategy[] | undefined; +} + +export const FeatureStrategyIcons = ({ + strategies, +}: IFeatureStrategyIconsProps) => { + if (!strategies?.length) { + return null; + } + + if (strategies.length > THRESHOLD + 1) { + return ( + + {strategies.slice(0, THRESHOLD).map(strategy => ( + + + + ))} + ( + + + {' '} + {formatStrategyName(strategy.name) + + (strategy.title + ? ` - ${strategy.title}` + : '')} + + + ))} + > + (+{strategies.length - THRESHOLD}) + + + ); + } + + return ( + + {strategies.map(strategy => ( + + + + ))} + + ); +}; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx index b75b04829c..ebb3584c80 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx @@ -20,6 +20,10 @@ interface IFeatureStrategyMenuProps { size?: IPermissionButtonProps['size']; } +const StyledStrategyMenu = styled('div')({ + flexShrink: 0, +}); + const StyledAdditionalMenuButton = styled(PermissionButton)(({ theme }) => ({ minWidth: 0, width: theme.spacing(4.5), @@ -71,7 +75,7 @@ export const FeatureStrategyMenu = ({ ); return ( -
event.stopPropagation()}> + event.stopPropagation()}> -
+ ); }; 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 9327f44844..d4b820ffeb 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -123,6 +123,8 @@ const StyledButtonContainer = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', marginTop: theme.spacing(2), + gap: theme.spacing(2), + flexWrap: 'wrap', [theme.breakpoints.down(560)]: { flexDirection: 'column', }, @@ -199,6 +201,11 @@ const FeatureOverviewEnvironment = ({ variant="outlined" size="small" /> + } elseShow={ diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap index 1a77e6edb5..fae6e1c8b6 100644 --- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap +++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap @@ -97,9 +97,6 @@ exports[`renders an empty list correctly 1`] = ` type="button" > New tag type -