From 1e11f0f6693fac99b67146abdbb954a5fc70195d Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Mon, 16 Aug 2021 16:02:00 -0500
Subject: [PATCH] FleetUI: Update column sort options (#1680)

* Disable sort remove on react-table

* Update hosts tests
---
 changes/Issue1507-disable-sort-remove                      | 1 +
 frontend/components/TableContainer/DataTable/DataTable.tsx | 1 +
 frontend/components/TableContainer/TableContainer.tsx      | 6 +++---
 frontend/fleet/entities/hosts.tests.js                     | 3 ++-
 frontend/fleet/entities/hosts.ts                           | 3 +++
 frontend/test/mocks/host_mocks.js                          | 3 ++-
 6 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 changes/Issue1507-disable-sort-remove

diff --git a/changes/Issue1507-disable-sort-remove b/changes/Issue1507-disable-sort-remove
new file mode 100644
index 0000000000..310729f444
--- /dev/null
+++ b/changes/Issue1507-disable-sort-remove
@@ -0,0 +1 @@
+Add disableSortRemove property to to disable react-tables's default of three clicks "asc-desc-none" for column sort
\ No newline at end of file
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx
index c4e2785172..3a69b5b1a6 100644
--- a/frontend/components/TableContainer/DataTable/DataTable.tsx
+++ b/frontend/components/TableContainer/DataTable/DataTable.tsx
@@ -79,6 +79,7 @@ const DataTable = ({
         }, [sortHeader, sortDirection]),
       },
       disableMultiSort: true,
+      disableSortRemove: true,
       manualSortBy,
     },
     useSortBy,
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index 3aaec9b15a..bc13281125 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -109,15 +109,15 @@ const TableContainer = ({
   const onSortChange = useCallback(
     (id?: string, isDesc?: boolean) => {
       if (id === undefined) {
-        setSortHeader("");
-        setSortDirection("");
+        setSortHeader(defaultSortHeader || "");
+        setSortDirection(defaultSortDirection || "");
       } else {
         setSortHeader(id);
         const direction = isDesc ? "desc" : "asc";
         setSortDirection(direction);
       }
     },
-    [setSortHeader, setSortDirection]
+    [defaultSortHeader, defaultSortDirection, setSortHeader, setSortDirection]
   );
 
   const onSearchQueryChange = (value: string) => {
diff --git a/frontend/fleet/entities/hosts.tests.js b/frontend/fleet/entities/hosts.tests.js
index 3066295893..3db956fb2f 100644
--- a/frontend/fleet/entities/hosts.tests.js
+++ b/frontend/fleet/entities/hosts.tests.js
@@ -61,7 +61,8 @@ describe("Kolide - API client (hosts)", () => {
     it("calls the label endpoint when used with label filter", () => {
       const request = createRequestMock({
         bearerToken,
-        endpoint: "/api/v1/fleet/labels/6/hosts?page=2&per_page=50",
+        endpoint:
+          "/api/v1/fleet/labels/6/hosts?page=2&per_page=50&order_key=hostname&order_direction=asc",
         method: "get",
         response: { hosts: [] },
       });
diff --git a/frontend/fleet/entities/hosts.ts b/frontend/fleet/entities/hosts.ts
index 91e8ca654b..e8e73c4caf 100644
--- a/frontend/fleet/entities/hosts.ts
+++ b/frontend/fleet/entities/hosts.ts
@@ -55,6 +55,9 @@ export default (client: any) => {
         const sortItem = sortBy[0];
         orderKeyParam += `&order_key=${sortItem.id}`;
         orderDirection = `&order_direction=${sortItem.direction}`;
+      } else {
+        orderKeyParam += `&order_key=hostname`;
+        orderDirection = `&order_direction=asc`;
       }
 
       let searchQuery = "";
diff --git a/frontend/test/mocks/host_mocks.js b/frontend/test/mocks/host_mocks.js
index 7700760b79..af247dc5a3 100644
--- a/frontend/test/mocks/host_mocks.js
+++ b/frontend/test/mocks/host_mocks.js
@@ -15,7 +15,8 @@ export default {
     valid: (bearerToken) => {
       return createRequestMock({
         bearerToken,
-        endpoint: "/api/v1/fleet/hosts?page=0&per_page=100",
+        endpoint:
+          "/api/v1/fleet/hosts?page=0&per_page=100&order_key=hostname&order_direction=asc",
         method: "get",
         response: { hosts: [] },
       });