From 4885e3598ae93e30dd1b1d3278537c4226df87a3 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Fri, 21 Apr 2023 13:44:08 +0200
Subject: [PATCH] Add cancel button.

Add test to ensure that cancel button can remove an item.
---
 .../table/table-header/SortAndFilterBar.tsx   | 28 +++++++++++++++++++
 .../__tests__/SortAndFilterBar.test.tsx       | 14 ++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/front/src/components/table/table-header/SortAndFilterBar.tsx b/front/src/components/table/table-header/SortAndFilterBar.tsx
index 682b16260..df2e09ab4 100644
--- a/front/src/components/table/table-header/SortAndFilterBar.tsx
+++ b/front/src/components/table/table-header/SortAndFilterBar.tsx
@@ -24,6 +24,26 @@ const StyledBar = styled.div`
   height: 40px;
 `;
 
+const StyledCancelButton = styled.button`
+  margin-left: auto;
+  border: none;
+  background-color: inherit;
+  padding: ${(props) => {
+    const horiz = props.theme.spacing(2);
+    const vert = props.theme.spacing(1);
+    return `${vert} ${horiz} ${vert} ${horiz}`;
+  }};
+  color: ${(props) => props.theme.text40};
+  font-weight: 500;
+  margin-right: ${(props) => props.theme.spacing(2)};
+  cursor: pointer;
+
+  &:hover {
+    border-radius: ${(props) => props.theme.spacing(1)};
+    background-color: ${(props) => props.theme.tertiaryBackground};
+  }
+`;
+
 function SortAndFilterBar({ sorts, onRemoveSort }: OwnProps) {
   return (
     <StyledBar>
@@ -38,6 +58,14 @@ function SortAndFilterBar({ sorts, onRemoveSort }: OwnProps) {
           />
         );
       })}
+      {sorts.length > 0 && (
+        <StyledCancelButton
+          data-testid={'cancel-button'}
+          onClick={() => sorts.forEach((i) => onRemoveSort(i.id))}
+        >
+          Cancel
+        </StyledCancelButton>
+      )}
     </StyledBar>
   );
 }
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 89b34679f..5dcfd17a4 100644
--- a/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx
+++ b/front/src/components/table/table-header/__tests__/SortAndFilterBar.test.tsx
@@ -2,9 +2,8 @@ import { fireEvent, render } from '@testing-library/react';
 
 import { RegularSortAndFilterBar } from '../__stories__/SortAndFilterBar.stories';
 
-const removeFunction = jest.fn();
-
 it('Checks the SortAndFilterBar renders', async () => {
+  const removeFunction = jest.fn();
   const { getByText, getByTestId } = render(
     <RegularSortAndFilterBar removeFunction={removeFunction} />,
   );
@@ -15,3 +14,14 @@ it('Checks the SortAndFilterBar renders', async () => {
 
   expect(removeFunction).toHaveBeenCalled();
 });
+
+it('Removes sorts when cancel is pressed', async () => {
+  const removeFunction = jest.fn();
+  const { getByTestId } = render(
+    <RegularSortAndFilterBar removeFunction={removeFunction} />,
+  );
+  const cancel = getByTestId('cancel-button');
+  fireEvent.click(cancel);
+
+  expect(removeFunction).toHaveBeenCalled();
+});