peers table: refactor filters

Author: EdouardVanbelle

src/modules/peers/PeersTable.tsx

@@ -12,8 +12,11 @@ import GetStartedTest from "@components/ui/GetStartedTest";
 import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
 import {
   ColumnDef,
+  ColumnFiltersState,
   RowSelectionState,
   SortingState,
+  Table,
+  VisibilityState,
 } from "@tanstack/react-table";
 import { uniqBy } from "lodash";
 import { ExternalLinkIcon } from "lucide-react";
@@ -65,6 +68,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   {
     id: "name",
     accessorFn: (peer) => `${peer?.name}${peer?.dns_label}`,
+    enableHiding: false,
     header: ({ column }) => {
       return <DataTableHeader column={column}>Name</DataTableHeader>;
     },
@@ -83,6 +87,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     accessorFn: (peer) => peer.connected,
   },
   {
+    id: "ip",
     accessorKey: "ip",
     sortingFn: "text",
   },
@@ -96,18 +101,21 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   },
   {
     id: "dns_label",
+    enableHiding: false,
     accessorKey: "dns_label",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Address</DataTableHeader>;
     },
     cell: ({ row }) => <PeerAddressCell peer={row.original} />,
   },
   {
+    id: "group_name_strings",
     accessorKey: "group_name_strings",
     accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
     sortingFn: "text",
   },
   {
+    id: "group_names",
     accessorKey: "group_names",
     accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
     sortingFn: "text",
@@ -126,6 +134,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     ),
   },
   {
+    id: "last_seen",
     accessorKey: "last_seen",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Last seen</DataTableHeader>;
@@ -150,6 +159,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     sortingFn: "text",
   },
   {
+    id: "version",
     accessorKey: "version",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Version</DataTableHeader>;
@@ -176,6 +186,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   },
   {
     id: "actions",
+    enableHiding: false,
     accessorKey: "id",
     header: "",
     cell: ({ row }) => (
@@ -234,6 +245,52 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
     }
   };
 
+  const filteredColunms = [
+    "connected",
+    "approval_required",
+    "group_name_strings",
+    "group_names",
+  ];
+
+  /**
+   *  This function overrides the given column filters and reuses the previous filters
+   *
+   *  Table index and selection is also cleared
+   */
+  const overrideTableFilter = (table: Table<Peer>, change: ColumnFiltersState) => {
+    let filters = [] as ColumnFiltersState;
+
+    filteredColunms.forEach((columnId) => {
+      let columnFilter = change.find((entry) => entry.id == columnId);
+      if (columnFilter === undefined) {
+        columnFilter = {
+          id: columnId,
+          value: table.getColumn(columnId)?.getFilterValue()
+        }
+      }
+      filters.push(columnFilter);
+    })
+    table.setPageIndex(0);
+    table.setColumnFilters( filters);
+    resetSelectedRows();
+  };
+
+  const columnVisibility: VisibilityState = {
+    select: !isUser,
+    actions: !isUser,
+    groups: !isUser,
+    connected: false,
+    approval_required: false,
+
+    // hidden, but usefull for lookup
+    serial: false,
+    group_name_strings: false,
+    group_names: false,
+    ip: false,
+    user_name: false,
+    user_email: false,
+  };
+
   return (
     <>
       <PeerMultiSelect
@@ -251,19 +308,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
         columns={PeersTableColumns}
         data={peers}
         searchPlaceholder={"Search by name, IP, Serial, owner or group..."}
-        columnVisibility={{
-          select: !isUser,
-          connected: false,
-          approval_required: false,
-          group_name_strings: false,
-          group_names: false,
-          ip: false,
-          serial: false,
-          user_name: false,
-          user_email: false,
-          actions: !isUser,
-          groups: !isUser,
-        }}
+        columnVisibility={columnVisibility}
         isLoading={isLoading}
         getStartedCard={
           <GetStartedTest
@@ -302,29 +347,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               <ButtonGroup.Button
                 disabled={peers?.length == 0}
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: undefined,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 variant={
                   table.getColumn("connected")?.getFilterValue() == undefined
@@ -336,29 +364,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               </ButtonGroup.Button>
               <ButtonGroup.Button
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: true,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 disabled={peers?.length == 0}
                 variant={
@@ -371,25 +382,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               </ButtonGroup.Button>
               <ButtonGroup.Button
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: false,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 disabled={peers?.length == 0}
                 variant={
@@ -406,29 +404,21 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               <Button
                 disabled={peers?.length == 0}
                 onClick={() => {
-                  table.setPageIndex(0);
                   let current =
                     table.getColumn("approval_required")?.getFilterValue() ===
-                    undefined
+                      undefined
                       ? true
                       : undefined;
-
-                  table.setColumnFilters([
-                    {
-                      id: "connected",
-                      value: undefined,
-                    },
+                   overrideTableFilter( table, [
                     {
                       id: "approval_required",
                       value: current,
                     },
                   ]);
-
-                  resetSelectedRows();
                 }}
                 variant={
                   table.getColumn("approval_required")?.getFilterValue() ===
-                  true
+                    true
                     ? "tertiary"
                     : "secondary"
                 }
@@ -448,15 +438,15 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
                     .getColumn("group_names")
                     ?.getFilterValue() as string[]) || []
                 }
-                onChange={(groups) => {
-                  table.setPageIndex(0);
-                  if (groups.length == 0) {
-                    table.getColumn("group_names")?.setFilterValue(undefined);
-                    return;
-                  } else {
-                    table.getColumn("group_names")?.setFilterValue(groups);
-                  }
-                  resetSelectedRows();
+                onChange={(anyOfValues) => {
+                    const normalizedAnyOf = ( anyOfValues.length == 0 ) ? undefined : anyOfValues;
+                    overrideTableFilter( table, [
+                      {
+                        id: "group_names",
+                        value: normalizedAnyOf
+                      },
+                    ]
+                  );
                 }}
                 groups={tableGroups}
               />