refactor(kube/apps): migrate stacks table to react [EE-4661] (#10091)

app/react/kubernetes/datatables/DefaultDatatableSettings.tsx

@@ -1,54 +1,31 @@
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
-import { Checkbox } from '@@/form-components/Checkbox';
 import {
   BasicTableSettings,
   RefreshableTableSettings,
-  ZustandSetFunc,
 } from '@@/datatables/types';
 
-interface SystemResourcesTableSettings {
-  showSystemResources: boolean;
-  setShowSystemResources: (value: boolean) => void;
-}
+import {
+  SystemResourcesSettings,
+  SystemResourcesTableSettings,
+} from './SystemResourcesSettings';
 
 export interface TableSettings
   extends BasicTableSettings,
     RefreshableTableSettings,
     SystemResourcesTableSettings {}
 
-export function systemResourcesSettings<T extends SystemResourcesTableSettings>(
-  set: ZustandSetFunc<T>
-): SystemResourcesTableSettings {
-  return {
-    showSystemResources: false,
-    setShowSystemResources(showSystemResources: boolean) {
-      set((s) => ({
-        ...s,
-        showSystemResources,
-      }));
-    },
-  };
-}
-
-interface Props {
-  settings: TableSettings;
-  hideShowSystemResources?: boolean;
-}
-
 export function DefaultDatatableSettings({
   settings,
-  hideShowSystemResources = false,
-}: Props) {
+}: {
+  settings: TableSettings;
+}) {
   return (
     <>
-      {!hideShowSystemResources && (
-        <Checkbox
-          id="show-system-resources"
-          label="Show system resources"
-          checked={settings.showSystemResources}
-          onChange={(e) => settings.setShowSystemResources(e.target.checked)}
-        />
-      )}
+      <SystemResourcesSettings
+        value={settings.showSystemResources}
+        onChange={(value) => settings.setShowSystemResources(value)}
+      />
+
       <TableSettingsMenuAutoRefresh
         value={settings.autoRefreshRate}
         onChange={handleRefreshRateChange}

app/react/kubernetes/datatables/SystemResourceDescription.tsx

@@ -1,3 +1,5 @@
+import { Authorized } from '@/react/hooks/useUser';
+
 import { TextTip } from '@@/Tip/TextTip';
 
 interface Props {
@@ -5,13 +7,11 @@ interface Props {
 }
 
 export function SystemResourceDescription({ showSystemResources }: Props) {
-  return (
-    <div className="w-full">
-      {!showSystemResources && (
-        <TextTip color="blue" className="!mb-0">
-          System resources are hidden, this can be changed in the table settings
-        </TextTip>
-      )}
-    </div>
-  );
+  return !showSystemResources ? (
+    <Authorized authorizations="K8sAccessSystemNamespaces" adminOnlyCE>
+      <TextTip color="blue" className="!mb-0">
+        System resources are hidden, this can be changed in the table settings
+      </TextTip>
+    </Authorized>
+  ) : null;
 }

app/react/kubernetes/datatables/SystemResourcesSettings.tsx

@@ -0,0 +1,42 @@
+import { Authorized } from '@/react/hooks/useUser';
+
+import { ZustandSetFunc } from '@@/datatables/types';
+import { Checkbox } from '@@/form-components/Checkbox';
+
+export function SystemResourcesSettings({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <Authorized authorizations="K8sAccessSystemNamespaces" adminOnlyCE>
+      <Checkbox
+        id="show-system-resources"
+        label="Show system resources"
+        checked={value}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+    </Authorized>
+  );
+}
+
+export interface SystemResourcesTableSettings {
+  showSystemResources: boolean;
+  setShowSystemResources: (value: boolean) => void;
+}
+
+export function systemResourcesSettings<T extends SystemResourcesTableSettings>(
+  set: ZustandSetFunc<T>
+): SystemResourcesTableSettings {
+  return {
+    showSystemResources: false,
+    setShowSystemResources(showSystemResources: boolean) {
+      set((s) => ({
+        ...s,
+        showSystemResources,
+      }));
+    },
+  };
+}

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

@@ -1,9 +1,7 @@
 import { refreshableSettings, createPersistedStore } from '@@/datatables/types';
 
-import {
-  systemResourcesSettings,
-  TableSettings,
-} from './DefaultDatatableSettings';
+import { TableSettings } from './DefaultDatatableSettings';
+import { systemResourcesSettings } from './SystemResourcesSettings';
 
 export function createStore(
   storageKey: string,