refactor(kube/apps): migrate table to react [EE-4685] (#11028)

app/react/kubernetes/datatables/DefaultDatatableSettings.tsx

@@ -16,14 +16,19 @@ export interface TableSettings
 
 export function DefaultDatatableSettings({
   settings,
+  onShowSystemChange,
 }: {
   settings: TableSettings;
+  onShowSystemChange?(showSystem: boolean): void;
 }) {
   return (
     <>
       <SystemResourcesSettings
         value={settings.showSystemResources}
-        onChange={(value) => settings.setShowSystemResources(value)}
+        onChange={(value) => {
+          settings.setShowSystemResources(value);
+          onShowSystemChange?.(value);
+        }}
       />
 
       <TableSettingsMenuAutoRefresh

app/react/kubernetes/datatables/default-kube-datatable-store.ts

@@ -1,18 +1,36 @@
-import { refreshableSettings, createPersistedStore } from '@@/datatables/types';
+import { useState } from 'react';
+
+import {
+  refreshableSettings,
+  createPersistedStore,
+  ZustandSetFunc,
+} from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { TableSettings } from './DefaultDatatableSettings';
 import { systemResourcesSettings } from './SystemResourcesSettings';
 
-export function createStore(
+export function createStore<T extends TableSettings>(
   storageKey: string,
-  initialSortBy: string | { id: string; desc: boolean } = 'name'
+  initialSortBy?: string | { id: string; desc: boolean },
+  create: (set: ZustandSetFunc<T>) => Omit<T, keyof TableSettings> = () =>
+    ({}) as T
 ) {
-  return createPersistedStore<TableSettings>(
+  return createPersistedStore<T>(
     storageKey,
     initialSortBy,
-    (set) => ({
-      ...refreshableSettings(set),
-      ...systemResourcesSettings(set),
-    })
+    (set) =>
+      ({
+        ...refreshableSettings(set),
+        ...systemResourcesSettings(set),
+        ...create(set),
+      }) as T
   );
 }
+
+export function useKubeStore<T extends TableSettings>(
+  ...args: Parameters<typeof createStore<T>>
+) {
+  const [store] = useState(() => createStore(...args));
+  return useTableState(store, args[0]);
+}