Merge pull request #60 from twentyhq/anders/t-112-i-see-a-cancel-button-to-cancel-a-sort

Add cancel button

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

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