From df7e8fc64aef67f800848d373d603edce7779f78 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 16 May 2024 12:52:47 -0700
Subject: [PATCH] UI - sort host queries case-insensitively (#19004)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #18953

<img width="727" alt="Screenshot 2024-05-14 at 4 30 58 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/d60ed18a-e0ad-4a55-86f6-db3b6bb8e707">


- [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>
---
 .../18953-case-insensitive-host-queries-sort  |  1 +
 .../cards/Queries/HostQueriesTableConfig.tsx  |  2 ++
 .../QueriesTable/QueriesTableConfig.tsx       | 20 -------------------
 3 files changed, 3 insertions(+), 20 deletions(-)
 create mode 100644 changes/18953-case-insensitive-host-queries-sort

diff --git a/changes/18953-case-insensitive-host-queries-sort b/changes/18953-case-insensitive-host-queries-sort
new file mode 100644
index 0000000000..cc1ea8be17
--- /dev/null
+++ b/changes/18953-case-insensitive-host-queries-sort
@@ -0,0 +1 @@
+- Sort the host details page queries table case-insensitively.
diff --git a/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx b/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
index 18684dbff2..a262acc56f 100644
--- a/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
+++ b/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
@@ -50,6 +50,7 @@ interface IDataColumn {
     | ((props: IPerformanceImpactCell) => JSX.Element);
   disableHidden?: boolean;
   disableSortBy?: boolean;
+  sortType?: string;
 }
 
 // NOTE: cellProps come from react-table
@@ -66,6 +67,7 @@ const generateColumnConfigs = (
       Cell: (cellProps: ICellProps) => (
         <TextCell value={cellProps.cell.value} />
       ),
+      sortType: "caseInsensitive",
     },
     {
       Header: () => {
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
index 32b712ef82..995ea6d7f3 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
@@ -160,26 +160,6 @@ const generateTableHeaders = ({
                       Observers can run this query.
                     </ReactTooltip5>
                   </div>
-
-                  // <>
-                  //   <span
-                  //     className="tooltip-base"
-                  //     data-tip
-                  //     data-for={`observer-can-run-tooltip-${cellProps.row.original.id}`}
-                  //   >
-                  //     <Icon className="query-icon" name="query" size="small" />
-                  //   </span>
-                  //   <ReactTooltip
-                  //     className="observer-can-run-tooltip"
-                  //     place="top"
-                  //     type="dark"
-                  //     effect="solid"
-                  //     id={`observer-can-run-tooltip-${cellProps.row.original.id}`}
-                  //     backgroundColor={COLORS["tooltip-bg"]}
-                  //   >
-                  //     Observers can run this query.
-                  //   </ReactTooltip>
-                  // </>
                 )}
                 {viewingTeamScope &&
                   // inherited