From a3c37644bf10acc387974f5ec97bb23f534a8abb Mon Sep 17 00:00:00 2001
From: Parth Bhavesh Shah <taksuparth@gmail.com>
Date: Wed, 26 Oct 2022 22:37:28 +0530
Subject: [PATCH] fix: make sortable table header chevron clickable (#860)

* fix: snapshots

* fix: make sortable table header chevron clickable

* chore: remove not required changes

* chore: resolve conflicts

* chore: resolve comments

* chore: updates screenshot
---
 packages/tablev2/Table.tsx                    |  8 ++++-
 .../__snapshots__/tablev2.test.tsx.snap       | 12 ++++++--
 packages/tablev2/style.ts                     |  9 ++++--
 packages/tablev2/tablev2.test.tsx             | 29 +++++++++++++++++++
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/tablev2/Table.tsx b/packages/tablev2/Table.tsx
index 90a8cd9a1..b62106c5b 100644
--- a/packages/tablev2/Table.tsx
+++ b/packages/tablev2/Table.tsx
@@ -146,6 +146,12 @@ function HeaderCell<Entry>({
       className={style.sortableButton}
     >
       {column.header}
+      {Boolean(column.sorter) && (
+        <span
+          data-cy="sortIcon"
+          className={cx(style.sortable(order), "sortIcon")}
+        />
+      )}
     </ResetButton>
   ) : (
     column.header
@@ -155,7 +161,7 @@ function HeaderCell<Entry>({
     <div
       className={cx(style.headerCell(column.textAlign), {
         [style.makeSpaceForSortIndicator]: Boolean(column.sorter),
-        [style.sortable(order)]: Boolean(column.sorter),
+        [style.headerHover]: Boolean(column.sorter),
         [style.rowScrollShadow]: showScrollShadow
       })}
       id={id}
diff --git a/packages/tablev2/__snapshots__/tablev2.test.tsx.snap b/packages/tablev2/__snapshots__/tablev2.test.tsx.snap
index 78cd01c01..2ff470359 100644
--- a/packages/tablev2/__snapshots__/tablev2.test.tsx.snap
+++ b/packages/tablev2/__snapshots__/tablev2.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Table v2 rendering renders default 1`] = `
     >
       <div
         aria-sort="none"
-        class="css-1kf7gto"
+        class="css-1il2bhb"
         id="name"
         role="columnheader"
       >
@@ -27,6 +27,10 @@ exports[`Table v2 rendering renders default 1`] = `
             <div>
               Name
             </div>
+            <span
+              class="css-123nj8f sortIcon"
+              data-cy="sortIcon"
+            />
           </div>
         </button>
         <div
@@ -966,7 +970,7 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
     >
       <div
         aria-sort="none"
-        class="css-kzvdt0"
+        class="css-1me0nmx"
         id="name"
         role="columnheader"
       >
@@ -981,6 +985,10 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
             <div>
               Name
             </div>
+            <span
+              class="css-123nj8f sortIcon"
+              data-cy="sortIcon"
+            />
           </div>
         </button>
         <div
diff --git a/packages/tablev2/style.ts b/packages/tablev2/style.ts
index 1dd4ece7a..efecdf3de 100644
--- a/packages/tablev2/style.ts
+++ b/packages/tablev2/style.ts
@@ -79,9 +79,14 @@ export const sortable = (dir: "asc" | "desc" | null) => css`
       "currentColor"
     )};
   }
+`;
+
+export const headerHover = css`
   &:hover {
-    &:after {
-      display: inline-block;
+    .sortIcon {
+      :after {
+        display: inline-block;
+      }
     }
   }
 `;
diff --git a/packages/tablev2/tablev2.test.tsx b/packages/tablev2/tablev2.test.tsx
index 2784b6c3a..d47da37a8 100644
--- a/packages/tablev2/tablev2.test.tsx
+++ b/packages/tablev2/tablev2.test.tsx
@@ -265,6 +265,35 @@ describe("Table v2", () => {
 
       expect(sorterFn).toHaveBeenCalledWith("desc", -1);
     });
+    it("calls the function passed to the 'sorter' prop when clicking the arrow besides heading", () => {
+      const sorterFn = jest.fn();
+      const { getByTestId } = render(
+        <Table
+          data={mockData}
+          toId={el => el.id.toString()}
+          columns={[
+            {
+              id: "name",
+              header: <div>Name</div>,
+              textAlign: "left",
+              render: x => (
+                <a href={`http://google.com/?q=${encodeURIComponent(x.name)}`}>
+                  {x.name}
+                </a>
+              ),
+              initialWidth: "300px",
+              sorter: sorterFn
+            }
+          ]}
+          initialSorter={{ by: "name", order: "asc" }}
+        />
+      );
+
+      expect(sorterFn).toHaveBeenCalledWith("asc", 1);
+      const sortIcon = getByTestId("sortIcon");
+      sortIcon.click();
+      expect(sorterFn).toHaveBeenLastCalledWith("desc", -1);
+    });
     it("sorts strings with Sorter.string", () => {
       const nameSort = Sorter.string("name");
       const ascSort = nameSort("asc", -1);