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),
-      }
-    )
-  );
-}