From e3d5f0b26ff7920eafe1eca09df152208fc45224 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Thu, 27 Jul 2023 17:45:15 +0200
Subject: [PATCH] Short variant for filter texts (#943)

* - added a short variant for filter labels in the filter bar

* - fixed tests
- moved colon to shortoperand

* - fixed formatting
---
 .../components/SortAndFilterBar.tsx            |  4 ++--
 .../components/SortOrFilterChip.tsx            |  2 +-
 .../ui/filter-n-sort/utils/getOperandLabel.ts  | 18 ++++++++++++++++++
 .../__stories__/Companies.filterBy.stories.tsx | 16 ++++++++++++----
 .../__stories__/People.filterBy.stories.tsx    | 12 ++++++++----
 5 files changed, 41 insertions(+), 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
index a5e1f9145..9bd1c7059 100644
--- 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
index 320671640..c9bed83fc 100644
--- 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
index cd1ec542a..97dd291cd 100644
--- 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
index 834ae192a..6cacd3e0c 100644
--- 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
index 7da95d508..47aed55b3 100644
--- 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();
   },
 };