refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)

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

@@ -1,17 +1,21 @@
 import { useEffect, useState } from 'react';
+import { Database } from 'react-feather';
+import { useStore } from 'zustand';
 
 import { confirmWarn } from '@/portainer/services/modal.service/confirm';
 
 import { Datatable } from '@@/datatables';
 import { Button, ButtonGroup } from '@@/buttons';
 import { Icon } from '@@/Icon';
+import { useSearchBarState } from '@@/datatables/SearchBar';
+import { createPersistedStore } from '@@/datatables/types';
 
 import { IngressControllerClassMap } from '../types';
 
 import { useColumns } from './columns';
-import { createStore } from './datatable-store';
 
-const useStore = createStore('ingressClasses');
+const storageKey = 'ingressClasses';
+const settingsStore = createPersistedStore(storageKey);
 
 interface Props {
   onChangeControllers: (
@@ -34,10 +38,11 @@ export function IngressClassDatatable({
   noIngressControllerLabel,
   view,
 }: Props) {
+  const settings = useStore(settingsStore);
+  const [search, setSearch] = useSearchBarState(storageKey);
   const [ingControllerFormValues, setIngControllerFormValues] = useState(
     ingressControllers || []
   );
-  const settings = useStore();
   const columns = useColumns();
 
   useEffect(() => {
@@ -76,19 +81,20 @@ export function IngressClassDatatable({
     <div className="-mx-[15px]">
       <Datatable
         dataset={ingControllerFormValues || []}
-        storageKey="ingressClasses"
         columns={columns}
-        settingsStore={settings}
         isLoading={isLoading}
         emptyContentLabel={noIngressControllerLabel}
-        titleOptions={{
-          icon: 'database',
-          title: 'Ingress controllers',
-          featherIcon: true,
-        }}
+        title="Ingress Controllers"
+        titleIcon={Database}
         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/datatable-store.ts

@@ -1,26 +0,0 @@
-import create from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import { keyBuilder } from '@/react/hooks/useLocalStorage';
-import {
-  paginationSettings,
-  sortableSettings,
-} from '@/react/components/datatables/types';
-
-import { TableSettings } from './types';
-
-export const TRUNCATE_LENGTH = 32;
-
-export function createStore(storageKey: string) {
-  return create<TableSettings>()(
-    persist(
-      (set) => ({
-        ...sortableSettings(set),
-        ...paginationSettings(set),
-      }),
-      {
-        name: keyBuilder(storageKey),
-      }
-    )
-  );
-}

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

@@ -1,5 +1,6 @@
 import { Plus, Trash2 } from 'react-feather';
 import { useRouter } from '@uirouter/react';
+import { useStore } from 'zustand';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
@@ -9,11 +10,12 @@ import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm
 import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
+import { createPersistedStore } from '@@/datatables/types';
+import { useSearchBarState } from '@@/datatables/SearchBar';
 
 import { DeleteIngressesRequest, Ingress } from '../types';
 import { useDeleteIngresses, useIngresses } from '../queries';
 
-import { createStore } from './datatable-store';
 import { useColumns } from './columns';
 
 import '../style.css';
@@ -22,10 +24,11 @@ interface SelectedIngress {
   Namespace: string;
   Name: string;
 }
+const storageKey = 'ingressClassesNameSpace';
 
-const useStore = createStore('ingresses');
+const settingsStore = createPersistedStore(storageKey);
 
-export function IngressDataTable() {
+export function IngressDatatable() {
   const environmentId = useEnvironmentId();
 
   const nsResult = useNamespaces(environmentId);
@@ -34,28 +37,30 @@ export function IngressDataTable() {
     Object.keys(nsResult?.data || {})
   );
 
-  const settings = useStore();
-
   const columns = useColumns();
   const deleteIngressesMutation = useDeleteIngresses();
+  const settings = useStore(settingsStore);
+  const [search, setSearch] = useSearchBarState(storageKey);
 
   const router = useRouter();
 
   return (
     <Datatable
       dataset={ingressesQuery.data || []}
-      storageKey="ingressClassesNameSpace"
       columns={columns}
-      settingsStore={settings}
       isLoading={ingressesQuery.isLoading}
       emptyContentLabel="No supported ingresses found"
-      titleOptions={{
-        icon: 'svg-route',
-        title: 'Ingresses',
-      }}
+      title="Ingresses"
+      titleIcon="svg-route"
       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}
     />
   );
 
@@ -67,14 +72,7 @@ export function IngressDataTable() {
             className="btn-wrapper"
             color="dangerlight"
             disabled={selectedFlatRows.length === 0}
-            onClick={() =>
-              handleRemoveClick(
-                selectedFlatRows.map((row) => ({
-                  Name: row.Name,
-                  Namespace: row.Namespace,
-                }))
-              )
-            }
+            onClick={() => handleRemoveClick(selectedFlatRows)}
             icon={Trash2}
           >
             Remove

app/react/kubernetes/ingresses/IngressDatatable/datatable-store.ts

@@ -1,26 +0,0 @@
-import create from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import { keyBuilder } from '@/react/hooks/useLocalStorage';
-import {
-  paginationSettings,
-  sortableSettings,
-} from '@/react/components/datatables/types';
-
-import { TableSettings } from '../types';
-
-export const TRUNCATE_LENGTH = 32;
-
-export function createStore(storageKey: string) {
-  return create<TableSettings>()(
-    persist(
-      (set) => ({
-        ...sortableSettings(set),
-        ...paginationSettings(set),
-      }),
-      {
-        name: keyBuilder(storageKey),
-      }
-    )
-  );
-}

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

@@ -1,6 +1,6 @@
 import { PageHeader } from '@@/PageHeader';
 
-import { IngressDataTable } from './IngressDataTable';
+import { IngressDatatable } from './IngressDatatable';
 
 export function IngressesDatatableView() {
   return (
@@ -14,7 +14,7 @@ export function IngressesDatatableView() {
         ]}
         reload
       />
-      <IngressDataTable />
+      <IngressDatatable />
     </>
   );
 }