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

@@ -26,14 +26,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
@@ -66,41 +67,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/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx

@@ -8,12 +8,12 @@ import { useLeafyGreenTable } from "@leafygreen-ui/table";
 import {
   getFacetedUniqueValues,
   getFilteredRowModel,
+  filterFns,
 } from "@tanstack/react-table";
 import Icon from "components/Icon";
 import { SettingsCard, SettingsCardTitle } from "components/SettingsCard";
 import { ShortenedRouterLink } from "components/styles";
 import { BaseTable } from "components/Table/BaseTable";
-import { getColumnTreeSelectFilterProps } from "components/Table/LGFilters";
 import { getSubscriberText } from "constants/subscription";
 import { size } from "constants/tokens";
 import {
@@ -77,15 +77,21 @@ export const UserSubscriptions: React.FC<{}> = () => {
     () => [
       {
         accessorKey: "resourceType",
+        id: "resourceType",
         cell: ({ getValue }) => {
           const resourceType = getValue();
           return resourceTypeToCopy[resourceType] ?? resourceType;
         },
+        enableColumnFilter: true,
+        filterFn: filterFns.arrIncludesSome,
         header: "Type",
-        ...getColumnTreeSelectFilterProps({
-          "data-cy": "status-filter-popover",
-          tData: resourceTypeTreeData,
-        }),
+        meta: {
+          treeSelect: {
+            "data-cy": "status-filter-popover",
+            filterOptions: true,
+            options: resourceTypeTreeData,
+          },
+        },
       },
       {
         header: "ID",
@@ -113,10 +119,15 @@ export const UserSubscriptions: React.FC<{}> = () => {
       {
         accessorKey: "trigger",
         header: "Event",
-        ...getColumnTreeSelectFilterProps({
-          "data-cy": "trigger-filter-popover",
-          tData: triggerTreeData,
-        }),
+        enableColumnFilter: true,
+        filterFn: filterFns.arrIncludesSome,
+        meta: {
+          treeSelect: {
+            "data-cy": "trigger-filter-popover",
+            filterOptions: true,
+            options: triggerTreeData,
+          },
+        },
         cell: ({ getValue }) => {
           const trigger = getValue();
           return triggerToCopy[trigger] ?? trigger;
@@ -149,6 +160,9 @@ export const UserSubscriptions: React.FC<{}> = () => {
     columns,
     containerRef: tableContainerRef,
     data: subscriptions ?? [],
+    defaultColumn: {
+      enableColumnFilter: false,
+    },
     getFacetedUniqueValues: getFacetedUniqueValues(),
     getFilteredRowModel: getFilteredRowModel(),
     hasSelectableRows: true,