From 87196f43c342544bcba47a27e51706a00a999b48 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:26:01 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20sort=20case-insensitively=20an?=
 =?UTF-8?q?d=20update=20default=20sort=20(#15808)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #15253

- sort case-insensitively in the query results (live), query report, and
host query report tables
- default to sorting by the host display name in the query results and
by `last_fetched` for the query report tables
- (unchanged) host query reports sort by the first column of the
results, since all `last_fetched` are the same

<img width="383" alt="Screenshot 2023-12-21 at 9 49 31 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/2bb5ede1-c40e-4974-9079-4851650163cb">


## Checklist for submitter

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/15253-sort-results-case-insensitively                   | 2 ++
 .../hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx   | 1 +
 .../queries/details/components/QueryReport/QueryReport.tsx      | 1 +
 .../details/components/QueryReport/QueryReportTableConfig.tsx   | 1 +
 .../pages/queries/edit/components/QueryResults/QueryResults.tsx | 1 +
 .../edit/components/QueryResults/QueryResultsTableConfig.tsx    | 1 +
 6 files changed, 7 insertions(+)
 create mode 100644 changes/15253-sort-results-case-insensitively

diff --git a/changes/15253-sort-results-case-insensitively b/changes/15253-sort-results-case-insensitively
new file mode 100644
index 0000000000..3862ebbbf0
--- /dev/null
+++ b/changes/15253-sort-results-case-insensitively
@@ -0,0 +1,2 @@
+* Sort query results and reports case insensitively, and default to sorting by the host display name
+column
diff --git a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx
index 1245f15ba1..78e65e38bf 100644
--- a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx
+++ b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx
@@ -59,6 +59,7 @@ const generateColumnConfigs = (rows: Record<string, string>[]) =>
       Filter: DefaultColumnFilter, // Component hides filter for last_fetched
       filterType: "text",
       disableSortBy: false,
+      sortType: "caseInsensitive",
     };
   });
 
diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
index a1fb6dd63d..e7e7c1807e 100644
--- a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
+++ b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
@@ -154,6 +154,7 @@ const QueryReport = ({
               />
             );
           }}
+          defaultSortHeader="last_fetched"
           isLoading={false}
           isClientSidePagination
           isClientSideFilter
diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReportTableConfig.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReportTableConfig.tsx
index 4c9af9723b..ed526a261a 100644
--- a/frontend/pages/queries/details/components/QueryReport/QueryReportTableConfig.tsx
+++ b/frontend/pages/queries/details/components/QueryReport/QueryReportTableConfig.tsx
@@ -88,6 +88,7 @@ const generateReportColumnConfigsFromResults = (results: any[]): Column[] => {
       Filter: DefaultColumnFilter, // Component hides filter for last_fetched
       filterType: "text",
       disableSortBy: false,
+      sortType: "caseInsensitive",
     };
   });
   return _unshiftHostname(columnConfigs);
diff --git a/frontend/pages/queries/edit/components/QueryResults/QueryResults.tsx b/frontend/pages/queries/edit/components/QueryResults/QueryResults.tsx
index d871253183..3056c3200f 100644
--- a/frontend/pages/queries/edit/components/QueryResults/QueryResults.tsx
+++ b/frontend/pages/queries/edit/components/QueryResults/QueryResults.tsx
@@ -198,6 +198,7 @@ const QueryResults = ({
     return (
       <div className={`${baseClass}__results-table-container`}>
         <TableContainer
+          defaultSortHeader="host_display_name"
           columnConfigs={
             tableType === "results" ? resultsColumnConfigs : errorColumnConfigs
           }
diff --git a/frontend/pages/queries/edit/components/QueryResults/QueryResultsTableConfig.tsx b/frontend/pages/queries/edit/components/QueryResults/QueryResultsTableConfig.tsx
index 05ea17d2db..3597a7ff97 100644
--- a/frontend/pages/queries/edit/components/QueryResults/QueryResultsTableConfig.tsx
+++ b/frontend/pages/queries/edit/components/QueryResults/QueryResultsTableConfig.tsx
@@ -75,6 +75,7 @@ const generateColumnConfigsFromRows = (
       },
       Filter: DefaultColumnFilter,
       disableSortBy: false,
+      sortType: "caseInsensitive",
     };
   });
   return _unshiftHostname(columnsConfigs);