fix(app): sync showSystem between stacks and apps tables [EE-6216] (#10532)

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.js

@@ -20,6 +20,7 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationsDatatabl
     onChangeNamespaceDropdown: '<',
     isAppsLoading: '<',
     isSystemResources: '<',
+    isVisible: '<',
     setSystemResources: '<',
     hideStacksFunctionality: '<',
   },

app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js

@@ -4,7 +4,7 @@ import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
 import { KubernetesConfigurationKinds } from 'Kubernetes/models/configuration/models';
 
-angular.module('portainer.docker').controller('KubernetesApplicationsDatatableController', [
+angular.module('portainer.kubernetes').controller('KubernetesApplicationsDatatableController', [
   '$scope',
   '$controller',
   'DatatableService',
@@ -175,8 +175,15 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo
       }
     };
 
-    this.$onChanges = function () {
-      if (typeof this.isSystemResources !== 'undefined') {
+    this.$onChanges = function (changes) {
+      // when the table is visible, sync the show system setting with the stack show system setting
+      if (changes.isVisible && changes.isVisible.currentValue) {
+        const storedStacksSettings = DatatableService.getDataTableSettings('kubernetes.applications.stacks');
+        if (storedStacksSettings && storedStacksSettings.state) {
+          this.settings.showSystem = storedStacksSettings.state.showSystemResources;
+          DatatableService.setDataTableSettings(this.settingsKey, this.settings);
+        }
+      } else if (typeof this.isSystemResources !== 'undefined') {
         this.settings.showSystem = this.isSystemResources;
         DatatableService.setDataTableSettings(this.settingsKey, this.settings);
       }
@@ -223,6 +230,12 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo
         this.settings = storedSettings;
         this.settings.open = false;
 
+        // make show system in sync with the stack show system settings
+        const storedStacksSettings = DatatableService.getDataTableSettings('kubernetes.applications.stacks');
+        if (storedStacksSettings && storedStacksSettings.state) {
+          this.settings.showSystem = storedStacksSettings.state.showSystemResources;
+        }
+
         this.setSystemResources && this.setSystemResources(this.settings.showSystem);
       }
       this.settingsLoaded = true;

app/kubernetes/react/components/index.ts

@@ -160,6 +160,8 @@ export const ngModule = angular
       'namespaces',
       'onNamespaceChange',
       'isLoading',
+      'showSystem',
+      'setSystemResources',
     ])
   );
 

app/kubernetes/views/applications/applications.html

@@ -24,6 +24,7 @@
                 on-change-namespace-dropdown="(ctrl.onChangeNamespaceDropdown)"
                 is-apps-loading="ctrl.state.isAppsLoading"
                 is-system-resources="ctrl.state.isSystemResources"
+                is-visible="ctrl.state.activeTab === 0"
                 set-system-resources="(ctrl.setSystemResources)"
                 hide-stacks-functionality="ctrl.deploymentOptions.hideStacksFunctionality"
               >
@@ -40,6 +41,8 @@
                 namespace="ctrl.state.namespaceName"
                 is-loading="ctrl.state.isAppsLoading"
                 on-namespace-change="(ctrl.onChangeNamespaceDropdown)"
+                show-system="ctrl.state.isSystemResources"
+                set-system-resources="(ctrl.setSystemResources)"
               >
               </kubernetes-applications-stacks-datatable>
             </uib-tab>

app/react/components/datatables/types.ts

@@ -95,7 +95,7 @@ export function createPersistedStore<T extends BasicTableSettings>(
           ...create(set),
         }) as T,
       {
-        name: `datatable_settings_${keyBuilder(storageKey)}`,
+        name: keyBuilder(`datatable_settings_${storageKey}`),
       }
     )
   );

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx

@@ -1,11 +1,11 @@
 import { List } from 'lucide-react';
+import { useEffect } from 'react';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
-import { systemResourcesSettings } from '@/react/kubernetes/datatables/SystemResourcesSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
-import { createPersistedStore, refreshableSettings } from '@@/datatables/types';
 import { useRepeater } from '@@/datatables/useRepeater';
 import { useTableState } from '@@/datatables/useTableState';
 import { InsightsBox } from '@@/InsightsBox';
@@ -14,21 +14,14 @@ import { KubernetesStack } from '../../types';
 
 import { columns } from './columns';
 import { SubRows } from './SubRows';
-import { Namespace, TableSettings } from './types';
+import { Namespace } from './types';
 import { StacksSettingsMenu } from './StacksSettingsMenu';
 import { NamespaceFilter } from './NamespaceFilter';
 import { TableActions } from './TableActions';
 
 const storageKey = 'kubernetes.applications.stacks';
 
-const settingsStore = createPersistedStore<TableSettings>(
-  storageKey,
-  'name',
-  (set) => ({
-    ...systemResourcesSettings(set),
-    ...refreshableSettings(set),
-  })
-);
+const settingsStore = createStore(storageKey);
 
 interface Props {
   dataset: Array<KubernetesStack>;
@@ -38,6 +31,8 @@ interface Props {
   namespaces: Array<Namespace>;
   onNamespaceChange(namespace: string): void;
   isLoading?: boolean;
+  showSystem?: boolean;
+  setSystemResources(showSystem: boolean): void;
 }
 
 export function ApplicationsStacksDatatable({
@@ -48,9 +43,16 @@ export function ApplicationsStacksDatatable({
   namespaces,
   onNamespaceChange,
   isLoading,
+  showSystem,
+  setSystemResources,
 }: Props) {
   const tableState = useTableState(settingsStore, storageKey);
 
+  useEffect(() => {
+    tableState.setShowSystemResources(showSystem || false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showSystem]);
+
   const authorized = useAuthorizations('K8sApplicationsW');
   useRepeater(tableState.autoRefreshRate, onRefresh);
 
@@ -98,7 +100,12 @@ export function ApplicationsStacksDatatable({
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} onRemove={onRemove} />
       )}
-      renderTableSettings={() => <StacksSettingsMenu settings={tableState} />}
+      renderTableSettings={() => (
+        <StacksSettingsMenu
+          setSystemResources={setSystemResources}
+          settings={tableState}
+        />
+      )}
       getRowId={(row) => `${row.Name}-${row.ResourcePool}`}
     />
   );

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/StacksSettingsMenu.tsx

@@ -5,12 +5,21 @@ import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAut
 
 import { type TableSettings } from './types';
 
-export function StacksSettingsMenu({ settings }: { settings: TableSettings }) {
+export function StacksSettingsMenu({
+  settings,
+  setSystemResources,
+}: {
+  settings: TableSettings;
+  setSystemResources(showSystem: boolean): void;
+}) {
   return (
     <TableSettingsMenu>
       <SystemResourcesSettings
         value={settings.showSystemResources}
-        onChange={(value) => settings.setShowSystemResources(value)}
+        onChange={(value) => {
+          setSystemResources(value);
+          settings.setShowSystemResources(value);
+        }}
       />
 
       <TableSettingsMenuAutoRefresh