From ba50d1ef694804c6dbc638d4dac9ad492bb9615c Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 11 Dec 2023 13:11:26 +0100
Subject: [PATCH] feat: adjust styling for search filters (#5587)

---
 .../common/FilterItem/FilterItem.test.tsx         | 13 +++++++++++++
 .../FilterItem/FilterItemChip/FilterItemChip.tsx  | 15 ++++++++++++++-
 .../FeatureToggleFilters/FeatureToggleFilters.tsx |  3 ++-
 3 files changed, 29 insertions(+), 2 deletions(-)

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<IFilterItemChipProps> = ({
     onDelete,
 }) => {
     const hasSelectedOptions = selectedOptions.length > 0;
+    const maxExplicitOptions = 2;
+    const explicitOptions = selectedOptions.slice(0, maxExplicitOptions);
+    const remainingOptions = selectedOptions.length - maxExplicitOptions;
 
     return (
         <StyledChip
@@ -99,7 +109,10 @@ export const FilterItemChip: FC<IFilterItemChipProps> = ({
                                     onChange={onChangeOperator}
                                 />
                                 <StyledOptions>
-                                    {selectedOptions.join(', ')}
+                                    {explicitOptions.join(', ')}
+                                    {remainingOptions > 0
+                                        ? ` +${remainingOptions}`
+                                        : ''}
                                 </StyledOptions>
                             </>
                         )}
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<IFeatureToggleFiltersProps> = ({
                 filterKey: 'segment',
                 singularOperators: ['INCLUDE', 'DO_NOT_INCLUDE'],
                 pluralOperators: [
-                    'INCLUDE_ALL_OF',
                     'INCLUDE_ANY_OF',
+                    'INCLUDE_ALL_OF',
                     'EXCLUDE_IF_ANY_OF',
                     'EXCLUDE_ALL',
                 ],