From 110b3ec264a8fcb2fd9f9c6329ea91a7e4e897fc Mon Sep 17 00:00:00 2001
From: Sophie Stadler <sophie.stadler@mongodb.com>
Date: Wed, 29 Nov 2023 10:28:52 -0500
Subject: [PATCH] Minor cleanup

---
 src/components/Table/LGFilters.tsx            | 13 ++++++++----
 src/components/Table/utils.ts                 | 16 +++++++-------
 src/components/TablePopover/TableSortIcon.tsx |  1 -
 src/hooks/useTableSort.ts                     |  2 +-
 src/types/host.ts                             | 21 ++++++++-----------
 5 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/Table/LGFilters.tsx b/src/components/Table/LGFilters.tsx
index a134f04323..2563f8ed8b 100644
--- a/src/components/Table/LGFilters.tsx
+++ b/src/components/Table/LGFilters.tsx
@@ -12,6 +12,9 @@ type TreeSelectFilterProps = {
   tData: TreeDataEntry[];
 };
 
+/*
+ * @deprecated Use react-table's onColumnFiltersChange prop.
+ */
 export const getColumnTreeSelectFilterProps = ({
   "data-cy": dataCy,
   onConfirm = () => {},
@@ -52,13 +55,14 @@ export const getColumnTreeSelectFilterProps = ({
 type InputFilterProps = {
   "data-cy"?: string;
   onConfirm?: ({ id, value }: { id: string; value: string }) => void;
-  placeholder?: string;
 };
 
+/*
+ * @deprecated Use react-table's onColumnFiltersChange prop.
+ */
 export const getColumnInputFilterProps = ({
   "data-cy": dataCy,
   onConfirm = () => {},
-  placeholder,
 }: InputFilterProps) => ({
   enableColumnFilter: false,
   meta: {
@@ -69,7 +73,6 @@ export const getColumnInputFilterProps = ({
           column.setFilterValue(newValue);
           onConfirm({ id: column.id, value: newValue });
         }}
-        placeholder={placeholder}
         value={column?.getFilterValue() ?? ""}
       />
     ),
@@ -94,6 +97,9 @@ type SortProps = {
   onToggle?: ({ id, value }: { id: string; value: string }) => void;
 };
 
+/*
+ * @deprecated Use react-table's onSortingChange prop.
+ */
 export const getColumnSortProps = ({
   "data-cy": dataCy,
   onToggle = () => {},
@@ -102,7 +108,6 @@ export const getColumnSortProps = ({
     sortComponent: ({ column }) => (
       <TableSortIcon
         data-cy={dataCy}
-        key={column.id}
         onToggle={(newValue) => {
           column.toggleSorting();
           onToggle({ id: column.id, value: newValue });
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 2d3f23864d..ff37df2a0a 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -1,5 +1,13 @@
 import { OnChangeFn } from "@tanstack/react-table";
 
+export enum TableQueryParams {
+  Limit = "limit",
+  Page = "page",
+  SortBy = "sortBy",
+  SortDir = "sortDir",
+  Sorts = "sorts",
+}
+
 /**
  * `onChangeHandler` simplifies applying a side effect with one of react-table's callback functions (e.g. onColumnFiltersChange, onSortingChange).
  * @param setState - state updater as returned by a React useState hook.
@@ -18,11 +26,3 @@ export const onChangeHandler = <T>(
       return updatedState;
     });
   }) satisfies OnChangeFn<T>;
-
-export enum TableQueryParams {
-  Limit = "limit",
-  Page = "page",
-  SortBy = "sortBy",
-  SortDir = "sortDir",
-  Sorts = "sorts",
-}
diff --git a/src/components/TablePopover/TableSortIcon.tsx b/src/components/TablePopover/TableSortIcon.tsx
index 4d45d6218b..c3084d3b76 100644
--- a/src/components/TablePopover/TableSortIcon.tsx
+++ b/src/components/TablePopover/TableSortIcon.tsx
@@ -43,7 +43,6 @@ export const TableSortIcon: React.FC<TableSortIconProps> = ({
     } else {
       update = undefined;
     }
-    console.log(value, update);
     onToggle(update);
   };
 
diff --git a/src/hooks/useTableSort.ts b/src/hooks/useTableSort.ts
index de2ab5c9f8..d1a8bc77d9 100644
--- a/src/hooks/useTableSort.ts
+++ b/src/hooks/useTableSort.ts
@@ -32,7 +32,7 @@ export const useTableSort = ({
         nextQueryParams[TableQueryParams.SortDir] = undefined;
         nextQueryParams[TableQueryParams.SortBy] = undefined;
       } else {
-        // TODO: For other tables that support multi-sort, we should be able to update this to handle a sorter array with more than one entry.
+        // TODO: For tables that support multi-sort, we should be able to update this to handle a sorter array with more than one entry.
         const { desc, id } = Array.isArray(sorter) ? sorter[0] : sorter;
         nextQueryParams[TableQueryParams.SortDir] = desc
           ? SortDirection.Desc
diff --git a/src/types/host.ts b/src/types/host.ts
index 14b1e981d3..b7d481a30a 100644
--- a/src/types/host.ts
+++ b/src/types/host.ts
@@ -86,21 +86,18 @@ export enum HostsTableFilterParams {
   Statuses = "statuses",
 }
 
+export const mapQueryParamToId: Record<HostsTableFilterParams, HostSortBy> = {
+  [HostsTableFilterParams.HostId]: HostSortBy.Id,
+  [HostsTableFilterParams.DistroId]: HostSortBy.Distro,
+  [HostsTableFilterParams.Statuses]: HostSortBy.Status,
+  [HostsTableFilterParams.CurrentTaskId]: HostSortBy.CurrentTask,
+  [HostsTableFilterParams.StartedBy]: HostSortBy.Owner,
+} as const;
+
 export const mapIdToFilterParam: PartialRecord<
   HostSortBy,
   keyof HostsQueryVariables
-> = {
-  [HostSortBy.Id]: HostsTableFilterParams.HostId,
-  [HostSortBy.Distro]: HostsTableFilterParams.DistroId,
-  [HostSortBy.Status]: HostsTableFilterParams.Statuses,
-  [HostSortBy.CurrentTask]: HostsTableFilterParams.CurrentTaskId,
-  [HostSortBy.Owner]: HostsTableFilterParams.StartedBy,
-} as const;
-
-export const mapQueryParamToId: PartialRecord<
-  keyof HostsQueryVariables,
-  HostSortBy
-> = Object.entries(mapIdToFilterParam).reduce(
+> = Object.entries(mapQueryParamToId).reduce(
   (obj, [id, param]) => ({
     ...obj,
     [param]: id,