From 7ac2f8e1a62aacdef17efefd36a37e8a6523921d Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Sat, 6 May 2023 08:27:14 +0200
Subject: [PATCH] Fix Cancel button behavior on TopFilterAndSort bar (#106)

---
 .../__tests__/EditableDate.test.tsx           | 21 +++++++++----------
 .../table/table-header/SortAndFilterBar.tsx   |  7 +++----
 .../table/table-header/TableHeader.tsx        |  6 ++++++
 .../__stories__/SortAndFilterBar.stories.tsx  |  7 ++++++-
 .../__tests__/SortAndFilterBar.test.tsx       | 15 ++++++++++---
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/front/src/components/table/editable-cell/__tests__/EditableDate.test.tsx b/front/src/components/table/editable-cell/__tests__/EditableDate.test.tsx
index d37f13686..1dc875989 100644
--- a/front/src/components/table/editable-cell/__tests__/EditableDate.test.tsx
+++ b/front/src/components/table/editable-cell/__tests__/EditableDate.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 
 import { EditableDateStory } from '../__stories__/EditableDate.stories';
 import { act } from 'react-dom/test-utils';
@@ -19,19 +19,18 @@ it('Checks the EditableDate editing event bubbles up', async () => {
   if (!wrapper) {
     throw new Error('Cell Wrapper not found');
   }
+
   act(() => {
     fireEvent.click(wrapper);
+    const dateDisplay = parent.querySelector('div');
+    if (!dateDisplay) {
+      throw new Error('Editable input not found');
+    }
+  });
+  waitFor(() => {
+    expect(getByText('March 2021')).toBeInTheDocument();
   });
 
-  const dateDisplay = parent.querySelector('div');
-
-  if (!dateDisplay) {
-    throw new Error('Editable input not found');
-  }
-
-  expect(getByText('March 2021')).toBeInTheDocument();
-  act(() => {
-    fireEvent.click(getByText('5'));
-  });
+  fireEvent.click(getByText('5'));
   expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
 });
diff --git a/front/src/components/table/table-header/SortAndFilterBar.tsx b/front/src/components/table/table-header/SortAndFilterBar.tsx
index 0fdb69f57..ca30034c8 100644
--- a/front/src/components/table/table-header/SortAndFilterBar.tsx
+++ b/front/src/components/table/table-header/SortAndFilterBar.tsx
@@ -10,6 +10,7 @@ type OwnProps<SortField, FilterProperties> = {
   onRemoveFilter: (
     filterId: SelectedFilterType<FilterProperties>['key'],
   ) => void;
+  onCancelClick: () => void;
 };
 
 const StyledBar = styled.div`
@@ -46,6 +47,7 @@ function SortAndFilterBar<SortField, FilterProperties>({
   onRemoveSort,
   filters,
   onRemoveFilter,
+  onCancelClick,
 }: OwnProps<SortField, FilterProperties>) {
   return (
     <StyledBar>
@@ -75,10 +77,7 @@ function SortAndFilterBar<SortField, FilterProperties>({
       {filters.length + sorts.length > 0 && (
         <StyledCancelButton
           data-testid={'cancel-button'}
-          onClick={() => {
-            sorts.forEach((i) => onRemoveSort(i.key));
-            filters.forEach((i) => onRemoveFilter(i.key));
-          }}
+          onClick={onCancelClick}
         >
           Cancel
         </StyledCancelButton>
diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index 74a0829a0..6b6766818 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -157,6 +157,12 @@ function TableHeader<SortField, FilterProperties>({
           filters={filters}
           onRemoveSort={sortUnselect}
           onRemoveFilter={filterUnselect}
+          onCancelClick={() => {
+            innerSetFilters([]);
+            onFiltersUpdate && onFiltersUpdate([]);
+            innerSetSorts([]);
+            onSortsUpdate && onSortsUpdate([]);
+          }}
         />
       )}
     </StyledContainer>
diff --git a/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx b/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx
index b336fce5a..289de4af4 100644
--- a/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx
+++ b/front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx
@@ -13,9 +13,13 @@ export default component;
 
 type OwnProps = {
   removeFunction: () => void;
+  cancelFunction: () => void;
 };
 
-export const RegularSortAndFilterBar = ({ removeFunction }: OwnProps) => {
+export const RegularSortAndFilterBar = ({
+  removeFunction,
+  cancelFunction,
+}: OwnProps) => {
   return (
     <ThemeProvider theme={lightTheme}>
       <SortAndFilterBar
@@ -37,6 +41,7 @@ export const RegularSortAndFilterBar = ({ removeFunction }: OwnProps) => {
         ]}
         onRemoveSort={removeFunction}
         onRemoveFilter={removeFunction}
+        onCancelClick={cancelFunction}
         filters={[
           {
             label: 'People',
diff --git a/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx b/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx
index 5dcfd17a4..b0989e324 100644
--- a/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx
+++ b/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx
@@ -4,8 +4,13 @@ import { RegularSortAndFilterBar } from '../__stories__/SortAndFilterBar.stories
 
 it('Checks the SortAndFilterBar renders', async () => {
   const removeFunction = jest.fn();
+  const cancelFunction = jest.fn();
+
   const { getByText, getByTestId } = render(
-    <RegularSortAndFilterBar removeFunction={removeFunction} />,
+    <RegularSortAndFilterBar
+      removeFunction={removeFunction}
+      cancelFunction={cancelFunction}
+    />,
   );
   expect(getByText('Test sort')).toBeDefined();
 
@@ -17,11 +22,15 @@ it('Checks the SortAndFilterBar renders', async () => {
 
 it('Removes sorts when cancel is pressed', async () => {
   const removeFunction = jest.fn();
+  const cancelFunction = jest.fn();
   const { getByTestId } = render(
-    <RegularSortAndFilterBar removeFunction={removeFunction} />,
+    <RegularSortAndFilterBar
+      removeFunction={removeFunction}
+      cancelFunction={cancelFunction}
+    />,
   );
   const cancel = getByTestId('cancel-button');
   fireEvent.click(cancel);
 
-  expect(removeFunction).toHaveBeenCalled();
+  expect(cancelFunction).toHaveBeenCalled();
 });