Fix Cancel button behavior on TopFilterAndSort bar (#106)

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>

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