diff --git a/frontend/src/component/common/FilterItem/FilterItem.test.tsx b/frontend/src/component/common/FilterItem/FilterItem.test.tsx index b4e3793750..feea8f0cc1 100644 --- a/frontend/src/component/common/FilterItem/FilterItem.test.tsx +++ b/frontend/src/component/common/FilterItem/FilterItem.test.tsx @@ -67,6 +67,19 @@ describe('FilterItem Component', () => { ]); }); + it('renders explicit and extra options', async () => { + const mockState = { + operator: 'IS_ANY_OF', + values: ['1', '3', '2'], + }; + + const recordedChanges = setup(mockState); + + const valuesElement = await screen.findByText('1, 3 +1'); + await screen.findByText('is any of'); + expect(valuesElement).toBeInTheDocument(); + }); + it('adjusts operator to match singular item', async () => { const mockState = { operator: 'IS_ANY_OF', diff --git a/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx index 2c0dcd99e0..714130996b 100644 --- a/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx +++ b/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx @@ -40,6 +40,13 @@ const StyledCategoryIconWrapper = styled('div')(({ theme }) => ({ const StyledOptions = styled('span')(({ theme }) => ({ color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + maxWidth: '200px', + [theme.breakpoints.up('md')]: { + maxWidth: '800px', + }, })); const StyledIconButton = styled(IconButton)(({ theme }) => ({ @@ -78,6 +85,9 @@ export const FilterItemChip: FC = ({ onDelete, }) => { const hasSelectedOptions = selectedOptions.length > 0; + const maxExplicitOptions = 2; + const explicitOptions = selectedOptions.slice(0, maxExplicitOptions); + const remainingOptions = selectedOptions.length - maxExplicitOptions; return ( = ({ onChange={onChangeOperator} /> - {selectedOptions.join(', ')} + {explicitOptions.join(', ')} + {remainingOptions > 0 + ? ` +${remainingOptions}` + : ''} )} diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx index 73ed6db791..b28560c0c0 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx @@ -15,6 +15,7 @@ const StyledBox = styled(Box)(({ theme }) => ({ display: 'flex', padding: theme.spacing(2, 3), gap: theme.spacing(1), + flexWrap: 'wrap', })); export type FeatureTogglesListFilters = { @@ -122,8 +123,8 @@ export const FeatureToggleFilters: VFC = ({ filterKey: 'segment', singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'], pluralOperators: [ - 'INCLUDE_ALL_OF', 'INCLUDE_ANY_OF', + 'INCLUDE_ALL_OF', 'EXCLUDE_IF_ANY_OF', 'EXCLUDE_ALL', ],