DEVPROD-3049: Remove LeafyGreen column utils

cypress.config.ts

@@ -3,7 +3,10 @@ import { execSync } from "child_process";
 
 export default defineConfig({
   e2e: {
-    retries: 3,
+    retries: {
+      runMode: 3,
+      openMode: 0,
+    },
     baseUrl: "http://localhost:3000",
     projectId: "yshv48",
     reporterOptions: {

cypress/integration/version/task_duration.ts

@@ -31,7 +31,7 @@ describe("Task Duration Tab", () => {
       cy.dataCy("leafygreen-table-row").should("have.length", 3);
       cy.location("search").should(
         "include",
-        "duration=DESC&page=0&statuses=running-umbrella,started,dispatched"
+        "duration=DESC&page=0&statuses=running-umbrella%2Cstarted%2Cdispatched"
       );
       // Clear status filter.
       cy.dataCy("status-filter-popover").click();
@@ -61,24 +61,26 @@ describe("Task Duration Tab", () => {
     });
 
     it("updates URL appropriately when sort is changing", () => {
+      const durationSortControl = "button[aria-label='Sort by Task Duration']";
       // The default sort (DURATION DESC) should be applied
       cy.location("search").should("include", "duration=DESC");
       const longestTask = "test-thirdparty";
       cy.contains(longestTask).should("be.visible");
       cy.dataCy("leafygreen-table-row").first().should("contain", longestTask);
-      cy.dataCy("duration-sort-icon").click();
+      cy.get(durationSortControl).click();
       cy.location("search").should("not.include", "duration");
-      cy.dataCy("duration-sort-icon").click();
+      cy.get(durationSortControl).click();
       cy.location("search").should("include", "duration=ASC");
       const shortestTask = "test-auth";
       cy.contains(shortestTask).should("be.visible");
       cy.dataCy("leafygreen-table-row").first().should("contain", shortestTask);
     });
 
     it("clearing all filters resets to the default sort", () => {
-      cy.dataCy("duration-sort-icon").click();
+      const durationSortControl = "button[aria-label='Sort by Task Duration']";
+      cy.get(durationSortControl).click();
       cy.location("search").should("not.include", "duration");
-      cy.dataCy("duration-sort-icon").click();
+      cy.get(durationSortControl).click();
       cy.location("search").should("include", "duration=ASC");
       cy.contains("Clear all filters").click();
       cy.location("search").should("include", "duration=DESC");

src/analytics/version/useVersionAnalytics.ts

@@ -9,7 +9,7 @@ import {
 import { VERSION } from "gql/queries";
 
 type Action =
-  | { name: "Filter Tasks"; filterBy: string }
+  | { name: "Filter Tasks"; filterBy: string | string[] }
   | {
       name: "Sort Tasks Table";
       sortBy:

src/components/Table/BaseTable.tsx

@@ -27,14 +27,15 @@ import TableLoader from "./TableLoader";
 declare module "@tanstack/table-core" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
-    filterComponent?: (column: any) => JSX.Element;
     search?: {
       "data-cy"?: string;
       placeholder?: string;
     };
-    sortComponent?: (column: any) => JSX.Element;
     treeSelect?: {
       "data-cy"?: string;
+      // Configures whether or not the tree select should be filtered to only represent values found in the table.
+      // Note that this may not be very performant for large tables.
+      filterOptions?: boolean;
       options: TreeDataEntry[];
     };
     // Overcome react-table's column width limitations
@@ -67,41 +68,43 @@ export const BaseTable = <T extends LGRowData>({
         {table.getHeaderGroups().map((headerGroup) => (
           <HeaderRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
-              const { columnDef } = header.column;
+              const { columnDef } = header.column ?? {};
+              const { meta } = columnDef;
               return (
                 <HeaderCell
                   key={header.id}
                   header={header}
-                  style={
-                    columnDef?.meta?.width && { width: columnDef?.meta?.width }
-                  }
+                  style={meta?.width && { width: columnDef?.meta?.width }}
                 >
                   {flexRender(columnDef.header, header.getContext())}
-                  {columnDef?.meta?.sortComponent?.({
-                    column: header.column,
-                  })}
-                  {columnDef?.meta?.filterComponent?.({
-                    column: header.column,
-                  })}
                   {header.column.getCanFilter() &&
-                    (columnDef?.meta?.treeSelect ? (
+                    (meta?.treeSelect ? (
                       <TableFilterPopover
-                        data-cy={columnDef?.meta?.treeSelect?.["data-cy"]}
+                        data-cy={meta.treeSelect?.["data-cy"]}
                         onConfirm={(value) =>
                           header.column.setFilterValue(value)
                         }
-                        options={columnDef?.meta?.treeSelect?.options}
+                        options={
+                          meta.treeSelect?.filterOptions
+                            ? meta.treeSelect.options.filter(
+                                ({ value }) =>
+                                  !!header.column
+                                    .getFacetedUniqueValues()
+                                    .get(value)
+                              )
+                            : meta.treeSelect.options
+                        }
                         value={
                           (header?.column?.getFilterValue() as string[]) ?? []
                         }
                       />
                     ) : (
                       <TableSearchPopover
-                        data-cy={columnDef?.meta?.search?.["data-cy"]}
+                        data-cy={meta?.search?.["data-cy"]}
                         onConfirm={(value) =>
                           header.column.setFilterValue(value)
                         }
-                        placeholder={columnDef?.meta?.search?.placeholder}
+                        placeholder={meta?.search?.placeholder}
                         value={
                           (header?.column?.getFilterValue() as string) ?? ""
                         }

src/pages/hosts/HostsTable.tsx

@@ -2,7 +2,9 @@ import { useRef, useState } from "react";
 import { useLeafyGreenTable } from "@leafygreen-ui/table";
 import {
   ColumnFiltersState,
+  Filters,
   RowSelectionState,
+  Sorting,
   SortingState,
 } from "@tanstack/react-table";
 import { formatDistanceToNow } from "date-fns";
@@ -15,11 +17,14 @@ import { getHostRoute, getTaskRoute } from "constants/routes";
 import { HostSortBy, HostsQuery } from "gql/generated/types";
 import { useTableSort } from "hooks";
 import { useQueryParams } from "hooks/useQueryParam";
-import { mapIdToFilterParam } from "types/host";
+import { HostsTableFilterParams, mapIdToFilterParam } from "types/host";
 import { Unpacked } from "types/utils";
 
 type Host = Unpacked<HostsQuery["hosts"]["hosts"]>;
 
+const { getDefaultOptions: getDefaultFiltering } = Filters;
+const { getDefaultOptions: getDefaultSorting } = Sorting;
+
 interface Props {
   initialFilters: ColumnFiltersState;
   initialSorting: SortingState;
@@ -39,14 +44,8 @@ export const HostsTable: React.FC<Props> = ({
 }) => {
   const { sendEvent } = useHostsTableAnalytics();
 
-  const tableSortHandler = useTableSort({
-    sendAnalyticsEvents: () => sendEvent({ name: "Sort Hosts" }),
-  });
-
-  const [, setQueryParams] = useQueryParams();
+  const [queryParams, setQueryParams] = useQueryParams();
 
-  const [filters, setFilters] = useState<ColumnFiltersState>(initialFilters);
-  const [sorting, setSorting] = useState<SortingState>(initialSorting);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const updateRowSelection = (rowState: RowSelectionState) => {
@@ -56,8 +55,22 @@ export const HostsTable: React.FC<Props> = ({
     setSelectedHosts(selectedHosts);
   };
 
+  const setSorting = (s: SortingState) =>
+    getDefaultSorting(table).onSortingChange(s);
+
+  const tableSortHandler = useTableSort({
+    sendAnalyticsEvents: () => sendEvent({ name: "Sort Hosts" }),
+  });
+
+  const setFilters = (f: ColumnFiltersState) =>
+    getDefaultFiltering(table).onColumnFiltersChange(f);
+
   const updateFilters = (filterState: ColumnFiltersState) => {
-    const updatedParams = { page: "0" };
+    const updatedParams = {
+      ...queryParams,
+      page: "0",
+      ...emptyFilterQueryParams,
+    };
 
     filterState.forEach(({ id, value }) => {
       const key = mapIdToFilterParam[id];
@@ -80,15 +93,17 @@ export const HostsTable: React.FC<Props> = ({
       // https://github.com/TanStack/table/issues/4289
       sortDescFirst: false,
     },
+    initialState: {
+      columnFilters: initialFilters,
+      sorting: initialSorting,
+    },
     state: {
-      columnFilters: filters,
       rowSelection,
-      sorting,
     },
     hasSelectableRows: true,
     manualFiltering: true,
-    manualSorting: true,
     manualPagination: true,
+    manualSorting: true,
     onColumnFiltersChange: onChangeHandler<ColumnFiltersState>(
       setFilters,
       (updatedState) => {
@@ -121,6 +136,11 @@ export const HostsTable: React.FC<Props> = ({
   );
 };
 
+const emptyFilterQueryParams = Object.values(HostsTableFilterParams).reduce(
+  (a, v) => ({ ...a, [v]: undefined }),
+  {}
+);
+
 const columns = [
   {
     header: "ID",