Fix Cancel button behavior on TopFilterAndSort bar (#106)

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');
+  fireEvent.click(getByText('5'));
-
-  if (!dateDisplay) {
-    throw new Error('Editable input not found');
-  }
-
-  expect(getByText('March 2021')).toBeInTheDocument();
-  act(() => {
-    fireEvent.click(getByText('5'));
-  });
   expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
 });

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={() => {
+          onClick={onCancelClick}
-            sorts.forEach((i) => onRemoveSort(i.key));
-            filters.forEach((i) => onRemoveFilter(i.key));
-          }}
         >
           Cancel
         </StyledCancelButton>

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>

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',

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();
 });