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

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx

@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
-import { AlertTriangle, Database } from 'lucide-react';
-import { useStore } from 'zustand';
+import { Database, AlertTriangle } from 'lucide-react';
 
 import { confirm } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 import { Datatable } from '@@/datatables';
 import { Button, ButtonGroup } from '@@/buttons';
 import { Icon } from '@@/Icon';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
 import { buildConfirmButton } from '@@/modals/utils';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { IngressControllerClassMap } from '../types';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 const storageKey = 'ingressClasses';
 const settingsStore = createPersistedStore(storageKey);
@@ -39,12 +38,11 @@ export function IngressClassDatatable({
   noIngressControllerLabel,
   view,
 }: Props) {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
+
   const [ingControllerFormValues, setIngControllerFormValues] = useState(
     ingressControllers || []
   );
-  const columns = useColumns();
 
   useEffect(() => {
     if (allowNoneIngressClass === undefined) {
@@ -81,6 +79,7 @@ export function IngressClassDatatable({
   return (
     <div className="-mx-[15px]">
       <Datatable
+        settingsManager={tableState}
         dataset={ingControllerFormValues || []}
         columns={columns}
         isLoading={isLoading}
@@ -90,12 +89,6 @@ export function IngressClassDatatable({
         getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
         renderTableActions={(selectedRows) => renderTableActions(selectedRows)}
         description={renderIngressClassDescription()}
-        initialPageSize={settings.pageSize}
-        onPageSizeChange={settings.setPageSize}
-        initialSortBy={settings.sortBy}
-        onSortByChange={settings.setSortBy}
-        searchValue={search}
-        onSearchChange={setSearch}
       />
     </div>
   );

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/availability.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { Check, X } from 'lucide-react';
 
 import { Badge } from '@@/Badge';
@@ -6,23 +6,23 @@ import { Icon } from '@@/Icon';
 
 import type { IngressControllerClassMap } from '../../types';
 
-export const availability: Column<IngressControllerClassMap> = {
-  Header: 'Availability',
-  accessor: 'Availability',
-  Cell: AvailailityCell,
-  id: 'availability',
-  disableFilters: true,
-  canHide: true,
-  sortInverted: true,
-  sortType: 'basic',
-  Filter: () => null,
-};
+import { columnHelper } from './helper';
+
+export const availability = columnHelper.accessor('Availability', {
+  header: 'Availability',
+  cell: Cell,
+  id: 'availability',
+  invertSorting: true,
+  sortingFn: 'basic',
+});
+
+function Cell({ getValue }: CellContext<IngressControllerClassMap, boolean>) {
+  const availability = getValue();
 
-function AvailailityCell({ value }: CellProps<IngressControllerClassMap>) {
   return (
-    <Badge type={value ? 'success' : 'danger'}>
-      <Icon icon={value ? Check : X} className="!mr-1" />
-      {value ? 'Allowed' : 'Disallowed'}
+    <Badge type={availability ? 'success' : 'danger'}>
+      <Icon icon={availability ? Check : X} className="!mr-1" />
+      {availability ? 'Allowed' : 'Disallowed'}
     </Badge>
   );
 }

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts

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

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/index.ts

@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-
 import { availability } from './availability';
 import { type } from './type';
 import { name } from './name';
 
-export function useColumns() {
-  return useMemo(() => [name, type, availability], []);
-}
+export const columns = [name, type, availability];

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx

@@ -1,24 +1,26 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Badge } from '@@/Badge';
 
 import type { IngressControllerClassMap } from '../../types';
 
-export const name: Column<IngressControllerClassMap> = {
-  Header: 'Ingress class',
-  accessor: 'ClassName',
-  Cell: NameCell,
-  id: 'name',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-  sortType: 'string',
-};
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('ClassName', {
+  header: 'Ingress class',
+  cell: NameCell,
+  id: 'name',
+});
+
+function NameCell({
+  row,
+  getValue,
+}: CellContext<IngressControllerClassMap, string>) {
+  const className = getValue();
 
-function NameCell({ row }: CellProps<IngressControllerClassMap>) {
   return (
     <span className="flex flex-nowrap">
-      {row.original.ClassName}
+      {className}
       {row.original.New && <Badge className="ml-1">Newly detected</Badge>}
     </span>
   );

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/type.tsx

@@ -1,14 +1,10 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { IngressControllerClassMap } from '../../types';
-
-export const type: Column<IngressControllerClassMap> = {
-  Header: 'Ingress controller type',
-  accessor: 'Type',
-  Cell: ({ row }: CellProps<IngressControllerClassMap>) =>
-    row.original.Type || '-',
+export const type = columnHelper.accessor('Type', {
+  header: 'Ingress controller type',
+  cell: ({ getValue }) => {
+    const type = getValue();
+    return type || '-';
+  },
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});