chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -1,6 +1,5 @@
 import { Plus, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
-import { useStore } from 'zustand';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
@@ -12,7 +11,7 @@ import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { DeleteIngressesRequest, Ingress } from '../types';
 import { useDeleteIngresses, useIngresses } from '../queries';
@@ -39,13 +38,13 @@ export function IngressDatatable() {
   );
 
   const deleteIngressesMutation = useDeleteIngresses();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const router = useRouter();
 
   return (
     <Datatable
+      settingsManager={tableState}
       dataset={ingressesQuery.data || []}
       columns={columns}
       isLoading={ingressesQuery.isLoading}
@@ -55,12 +54,6 @@ export function IngressDatatable() {
       getRowId={(row) => row.Name + row.Type + row.Namespace}
       renderTableActions={tableActions}
       disableSelect={useCheckboxes()}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
     />
   );
 

app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Ingress } from '../../types';
-
-export const className: Column<Ingress> = {
-  Header: 'Class Name',
-  accessor: 'ClassName',
+export const className = columnHelper.accessor('ClassName', {
+  header: 'Class Name',
   id: 'className',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx

@@ -1,23 +1,19 @@
-import { CellProps, Column } from 'react-table';
-
 import { formatDate } from '@/portainer/filters/filters';
 
-import { Ingress } from '../../types';
+import { columnHelper } from './helper';
 
-export const created: Column<Ingress> = {
-  Header: 'Created',
-  id: 'created',
-  accessor: (row) => row.CreationDate,
-  Cell: ({ row }: CellProps<Ingress>) => {
+export const created = columnHelper.accessor('CreationDate', {
+  header: 'Created',
+  cell: ({ row, getValue }) => {
+    const date = formatDate(getValue());
     const owner =
       row.original.Labels?.['io.portainer.kubernetes.ingress.owner'];
 
     if (owner) {
-      return `${formatDate(row.original.CreationDate)} by ${owner}`;
+      return `${date} by ${owner}`;
     }
 
-    return formatDate(row.original.CreationDate);
+    return date;
   },
-  disableFilters: true,
-  canHide: true,
-};
+  id: 'created',
+});

app/react/kubernetes/ingresses/IngressDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Ingress } from '../../types';
+
+export const columnHelper = createColumnHelper<Ingress>();

app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { AlertTriangle, ArrowRight } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
@@ -6,6 +6,41 @@ import { Badge } from '@@/Badge';
 
 import { Ingress, TLS, Path } from '../../types';
 
+import { columnHelper } from './helper';
+
+export const ingressRules = columnHelper.accessor('Paths', {
+  header: 'Rules and Paths',
+  id: 'ingressRules',
+  cell: Cell,
+});
+
+function Cell({ row, getValue }: CellContext<Ingress, Path[] | undefined>) {
+  const paths = getValue();
+
+  if (!paths) {
+    return <div />;
+  }
+
+  return paths.map((path) => {
+    const isHttp = isHTTP(row.original.TLS || [], path.Host);
+    return (
+      <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
+        <span className="flex flex-nowrap items-center gap-1 px-2">
+          {link(path.Host, path.Path, isHttp)}
+          <Icon icon={ArrowRight} />
+          {`${path.ServiceName}:${path.Port}`}
+          {!path.HasService && (
+            <Badge type="warn" className="ml-1 gap-1">
+              <Icon icon={AlertTriangle} />
+              Service doesn&apos;t exist
+            </Badge>
+          )}
+        </span>
+      </div>
+    );
+  });
+}
+
 function isHTTP(TLSs: TLS[], host: string) {
   return TLSs.filter((t) => t.Hosts.indexOf(host) !== -1).length === 0;
 }
@@ -24,33 +59,3 @@ function link(host: string, path: string, isHttp: boolean) {
     </a>
   );
 }
-
-export const ingressRules: Column<Ingress> = {
-  Header: 'Rules and Paths',
-  accessor: 'Paths',
-  Cell: ({ row }: CellProps<Ingress, Path[]>) => {
-    const results = row.original.Paths?.map((path: Path) => {
-      const isHttp = isHTTP(row.original.TLS || [], path.Host);
-      return (
-        <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
-          <span className="flex flex-nowrap items-center gap-1 px-2">
-            {link(path.Host, path.Path, isHttp)}
-            <Icon icon={ArrowRight} />
-            {`${path.ServiceName}:${path.Port}`}
-            {!path.HasService && (
-              <Badge type="warn" className="ml-1 gap-1">
-                <Icon icon={AlertTriangle} />
-                Service doesn&apos;t exist
-              </Badge>
-            )}
-          </span>
-        </div>
-      );
-    });
-    return results || <div />;
-  },
-  id: 'ingressRules',
-  disableFilters: true,
-  canHide: true,
-  disableSortBy: true,
-};

app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
 
@@ -6,28 +6,30 @@ import { Link } from '@@/Link';
 
 import { Ingress } from '../../types';
 
-export const name: Column<Ingress> = {
-  Header: 'Name',
-  accessor: 'Name',
-  Cell: ({ row }: CellProps<Ingress>) => (
-    <Authorized
-      authorizations="K8sIngressesW"
-      childrenUnauthorized={row.original.Name}
-    >
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  cell: Cell,
+  id: 'name',
+});
+
+function Cell({ row, getValue }: CellContext<Ingress, string>) {
+  const name = getValue();
+
+  return (
+    <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
       <Link
         to="kubernetes.ingresses.edit"
         params={{
           uid: row.original.UID,
           namespace: row.original.Namespace,
-          name: row.original.Name,
+          name,
         }}
-        title={row.original.Name}
+        title={name}
       >
-        {row.original.Name}
+        {name}
       </Link>
     </Authorized>
-  ),
-  id: 'name',
-  disableFilters: true,
-  canHide: true,
-};
+  );
+}

app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx

@@ -1,33 +1,40 @@
-import { CellProps, Column, Row } from 'react-table';
-
-import { filterHOC } from '@/react/components/datatables/Filter';
+import { CellContext, Row } from '@tanstack/react-table';
 
+import { filterHOC } from '@@/datatables/Filter';
 import { Link } from '@@/Link';
 
 import { Ingress } from '../../types';
 
-export const namespace: Column<Ingress> = {
-  Header: 'Namespace',
-  accessor: 'Namespace',
-  Cell: ({ row }: CellProps<Ingress>) => (
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: Cell,
+  filterFn: (row: Row<Ingress>, columnId: string, filterValue: string[]) => {
+    if (filterValue.length === 0) {
+      return true;
+    }
+    return filterValue.includes(row.original.Namespace);
+  },
+
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+});
+
+function Cell({ getValue }: CellContext<Ingress, string>) {
+  const namespace = getValue();
+  return (
     <Link
       to="kubernetes.resourcePools.resourcePool"
       params={{
-        id: row.original.Namespace,
+        id: namespace,
       }}
-      title={row.original.Namespace}
+      title={namespace}
     >
-      {row.original.Namespace}
+      {namespace}
     </Link>
-  ),
-  id: 'namespace',
-  disableFilters: false,
-  canHide: true,
-  Filter: filterHOC('Filter by namespace'),
-  filter: (rows: Row<Ingress>[], filterValue, filters) => {
-    if (filters.length === 0) {
-      return rows;
-    }
-    return rows.filter((r) => filters.includes(r.original.Namespace));
-  },
-};
+  );
+}

app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Ingress } from '../../types';
-
-export const type: Column<Ingress> = {
-  Header: 'Type',
-  accessor: 'Type',
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+});