Short variant for filter texts (twentyhq#943)

* - added a short variant for filter labels in the filter bar * - fixed tests - moved colon to shortoperand * - fixed formatting
AdityaPimpalkar · Aug 3, 2023 · e9aa5d5 · e9aa5d5
1 parent a15074d
commit e9aa5d5
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx
@@ -9,7 +9,7 @@ import { useRemoveFilter } from '../hooks/useRemoveFilter';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
 import { SelectedSortType } from '../types/interface';
-import { getOperandLabel } from '../utils/getOperandLabel';
+import { getOperandLabelShort } from '../utils/getOperandLabel';
 
 import SortOrFilterChip from './SortOrFilterChip';
 
@@ -126,7 +126,7 @@ function SortAndFilterBar<SortField>({
             <SortOrFilterChip
               key={filter.field}
               labelKey={filter.label}
-              labelValue={`${getOperandLabel(filter.operand)} ${
+              labelValue={`${getOperandLabelShort(filter.operand)} ${
                 filter.displayValue
               }`}
               id={filter.field}

diff --git a/front/src/modules/ui/filter-n-sort/components/SortOrFilterChip.tsx b/front/src/modules/ui/filter-n-sort/components/SortOrFilterChip.tsx
@@ -59,7 +59,7 @@ function SortOrFilterChip({
   return (
     <StyledChip>
       <StyledIcon>{icon}</StyledIcon>
-      {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
+      {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
         <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />

diff --git a/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts b/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts
@@ -18,3 +18,21 @@ export function getOperandLabel(operand: FilterOperand | null | undefined) {
       return '';
   }
 }
+export function getOperandLabelShort(
+  operand: FilterOperand | null | undefined,
+) {
+  switch (operand) {
+    case 'is':
+    case 'contains':
+      return ': ';
+    case 'is-not':
+    case 'does-not-contain':
+      return ': Not';
+    case 'greater-than':
+      return '\u00A0> ';
+    case 'less-than':
+      return '\u00A0< ';
+    default:
+      return ': ';
+  }
+}
diff --git a/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
@@ -55,8 +55,10 @@ export const FilterByName: Story = {
     expect(await canvas.findByText('Aircall')).toBeInTheDocument();
     await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
 
-    expect(await canvas.findByText('Name:')).toBeInTheDocument();
-    expect(await canvas.findByText('Contains Air')).toBeInTheDocument();
+    const accountOwnerFilter = canvas.getAllByText('Name').find((item) => {
+      return item.parentElement?.textContent?.includes('Name:  Air');
+    });
+    expect(accountOwnerFilter).toBeInTheDocument();
   },
 };
 
@@ -100,7 +102,13 @@ export const FilterByAccountOwner: Story = {
     // expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
     // await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
 
-    expect(await canvas.findByText('Account owner:')).toBeInTheDocument();
-    expect(await canvas.findByText('Is Charles Test')).toBeInTheDocument();
+    const accountOwnerFilter = canvas
+      .getAllByText('Account owner')
+      .find((item) => {
+        return item.parentElement?.textContent?.includes(
+          'Account owner:  Charles Test',
+        );
+      });
+    expect(accountOwnerFilter).toBeInTheDocument();
   },
 };
diff --git a/front/src/pages/people/__stories__/People.filterBy.stories.tsx b/front/src/pages/people/__stories__/People.filterBy.stories.tsx
@@ -54,8 +54,10 @@ export const Email: Story = {
     expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
     await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
 
-    expect(await canvas.findByText('Email:')).toBeInTheDocument();
-    expect(await canvas.findByText('Contains al')).toBeInTheDocument();
+    const emailFilter = canvas.getAllByText('Email').find((item) => {
+      return item.parentElement?.textContent?.includes('Email:  al');
+    });
+    expect(emailFilter).toBeInTheDocument();
   },
 };
 
@@ -99,7 +101,9 @@ export const CompanyName: Story = {
     // expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
     // await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
 
-    expect(await canvas.findByText('Company:')).toBeInTheDocument();
-    expect(await canvas.findByText('Is Qonto')).toBeInTheDocument();
+    const companyFilter = canvas.getAllByText('Company').find((item) => {
+      return item.parentElement?.textContent?.includes('Company:  Qonto');
+    });
+    expect(companyFilter).toBeInTheDocument();
   },
 };