Remove LG column functions

evergreen-ci · Dec 7, 2023 · ac79cde · ac79cde
1 parent b1e76b5
commit ac79cde
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 214 deletions.
diff --git a/src/analytics/version/useVersionAnalytics.ts b/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:

diff --git a/src/components/Table/BaseTable.tsx b/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) ?? ""
                         }

diff --git a/src/components/Table/LGFilters.tsx b/src/components/Table/LGFilters.tsx
diff --git a/src/pages/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx b/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,