From 2eeb9142b33f70f4e60929e64e59bb7b42c0f31f Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:17:24 -0400
Subject: [PATCH] UI: Sort live queries/policies (#5060)

---
 changes/issue-4572-sort-live-queries          |  1 +
 .../PolicyQueriesListWrapper.tsx              |  1 -
 .../PolicyQueriesTableConfig.tsx              | 30 +++++++++++++------
 .../QueryResults/QueryResultsTableConfig.tsx  |  1 +
 4 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 changes/issue-4572-sort-live-queries

diff --git a/changes/issue-4572-sort-live-queries b/changes/issue-4572-sort-live-queries
new file mode 100644
index 0000000000..c8304144af
--- /dev/null
+++ b/changes/issue-4572-sort-live-queries
@@ -0,0 +1 @@
+* Users can sort all columns of live queries and live policies in the UI
\ No newline at end of file
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
index 292592c560..fd7309e864 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
@@ -45,7 +45,6 @@ const PoliciesListWrapper = ({
         isLoading={isLoading}
         defaultSortHeader={"name"}
         defaultSortDirection={"asc"}
-        manualSortBy
         showMarkAllPages={false}
         isAllPagesSelected={false}
         disablePagination
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
index 05badd5ec2..8cc2a93bf9 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
@@ -4,8 +4,11 @@
 import React from "react";
 import { memoize } from "lodash";
 
-// @ts-ignore
+import { ColumnInstance } from "react-table";
+
 import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
+import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
+
 import { IHostPolicyQuery } from "interfaces/host";
 import sortUtils from "utilities/sort";
 import PassIcon from "../../../../../../assets/images/icon-check-circle-green-16x16@2x.png";
@@ -14,10 +17,7 @@ import FailIcon from "../../../../../../assets/images/icon-exclamation-circle-re
 // TODO functions for paths math e.g., path={PATHS.MANAGE_HOSTS + getParams(cellProps.row.original)}
 
 interface IHeaderProps {
-  column: {
-    host: string;
-    isSortedDesc: boolean;
-  };
+  column: ColumnInstance & IDataColumn;
 }
 
 interface ICellProps {
@@ -45,17 +45,28 @@ const generateTableHeaders = (): IDataColumn[] => {
   const tableHeaders: IDataColumn[] = [
     {
       title: "Host",
-      Header: "Host",
-      disableSortBy: true,
+      Header: (headerProps: IHeaderProps): JSX.Element => (
+        <HeaderCell
+          value={headerProps.column.title || headerProps.column.id}
+          isSortedDesc={headerProps.column.isSortedDesc}
+          disableSortBy={false}
+        />
+      ),
       accessor: "hostname",
       Cell: (cellProps: ICellProps): JSX.Element => (
         <TextCell value={cellProps.cell.value} />
       ),
+      disableSortBy: false,
     },
     {
       title: "Status",
-      Header: "Status",
-      disableSortBy: true,
+      Header: (headerProps: IHeaderProps) => (
+        <HeaderCell
+          value={headerProps.column.title || headerProps.column.id}
+          isSortedDesc={headerProps.column.isSortedDesc}
+          disableSortBy={false}
+        />
+      ),
       accessor: "query_results",
       Cell: (cellProps: ICellProps): JSX.Element => (
         <>
@@ -72,6 +83,7 @@ const generateTableHeaders = (): IDataColumn[] => {
           )}
         </>
       ),
+      disableSortBy: false,
     },
   ];
   return tableHeaders;
diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
index e599c6c98c..7aaf8cfc5b 100644
--- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
@@ -60,6 +60,7 @@ const resultsTableHeaders = (results: ICampaignQueryResult[]): Column[] => {
       Cell: (cellProps: ICellProps) => cellProps?.cell?.value || null,
       Filter: DefaultColumnFilter,
       // filterType: "text",
+      disableSortBy: false,
     };
   });
   return _unshiftHostname(headers);