fix(apps): persist table settings [r8s-120] (#10)

Co-authored-by: testA113 <aliharriss1995@gmail.com>

app/kubernetes/react/components/applications.ts

@@ -15,8 +15,6 @@ export const applicationsModule = angular
       'namespaces',
       'onNamespaceChange',
       'onRefresh',
-      'showSystem',
-      'onShowSystemChange',
       'onRemove',
       'hideStacks',
     ])

app/kubernetes/react/components/index.ts

@@ -215,8 +215,6 @@ export const ngModule = angular
       'namespace',
       'namespaces',
       'onNamespaceChange',
-      'showSystem',
-      'setSystemResources',
     ])
   )
   .component(

app/kubernetes/views/applications/applications.html

@@ -18,8 +18,6 @@
                 namespace="ctrl.state.namespaceName"
                 on-namespace-change="(ctrl.onChangeNamespaceDropdown)"
                 is-loading="ctrl.state.isAppsLoading"
-                show-system="ctrl.state.isSystemResources"
-                on-show-system-change="(ctrl.setSystemResources)"
                 on-remove="(ctrl.removeAction)"
                 hide-stacks="ctrl.deploymentOptions.hideStacksFunctionality"
               >
@@ -50,8 +48,6 @@
             namespace="ctrl.state.namespaceName"
             on-namespace-change="(ctrl.onChangeNamespaceDropdown)"
             is-loading="ctrl.state.isAppsLoading"
-            show-system="ctrl.state.isSystemResources"
-            on-show-system-change="(ctrl.setSystemResources)"
             on-remove="(ctrl.removeAction)"
             hide-stacks="ctrl.deploymentOptions.hideStacksFunctionality"
           >

app/kubernetes/views/applications/applicationsController.js

@@ -42,7 +42,6 @@ class KubernetesApplicationsController {
     this.removeStacksActionAsync = this.removeStacksActionAsync.bind(this);
     this.onPublishingModeClick = this.onPublishingModeClick.bind(this);
     this.onChangeNamespaceDropdown = this.onChangeNamespaceDropdown.bind(this);
-    this.setSystemResources = this.setSystemResources.bind(this);
   }
 
   selectTab(index) {
@@ -133,12 +132,6 @@ class KubernetesApplicationsController {
     });
   }
 
-  setSystemResources(flag) {
-    return this.$scope.$applyAsync(() => {
-      this.state.isSystemResources = flag;
-    });
-  }
-
   async onInit() {
     this.state = {
       activeTab: this.LocalStorage.getActiveTab('applications'),
@@ -150,7 +143,6 @@ class KubernetesApplicationsController {
       ports: [],
       namespaces: [],
       namespaceName: '',
-      isSystemResources: undefined,
     };
 
     this.deploymentOptions = await getDeploymentOptions();

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { BoxIcon } from 'lucide-react';
 import { groupBy, partition } from 'lodash';
 
@@ -36,8 +36,6 @@ export function ApplicationsDatatable({
   namespace = '',
   namespaces,
   onNamespaceChange,
-  showSystem,
-  onShowSystemChange,
   hideStacks,
 }: {
   onRefresh: () => void;
@@ -45,8 +43,6 @@ export function ApplicationsDatatable({
   namespace?: string;
   namespaces: Array<Namespace>;
   onNamespaceChange(namespace: string): void;
-  showSystem?: boolean;
-  onShowSystemChange(showSystem: boolean): void;
   hideStacks: boolean;
 }) {
   const envId = useEnvironmentId();
@@ -61,20 +57,13 @@ export function ApplicationsDatatable({
     undefined,
     false
   );
-
-  const { setShowSystemResources } = tableState;
-
-  useEffect(() => {
-    setShowSystemResources(showSystem || false);
-  }, [showSystem, setShowSystemResources]);
-
   const applicationsQuery = useApplications(envId, {
     refetchInterval: tableState.autoRefreshRate * 1000,
     namespace,
     withDependencies: true,
   });
   const applications = useApplicationsRowData(applicationsQuery.data);
-  const filteredApplications = showSystem
+  const filteredApplications = tableState.showSystemResources
     ? applications
     : applications.filter(
         (application) =>
@@ -127,10 +116,7 @@ export function ApplicationsDatatable({
       }
       renderTableSettings={() => (
         <TableSettingsMenu>
-          <DefaultDatatableSettings
-            settings={tableState}
-            onShowSystemChange={onShowSystemChange}
-          />
+          <DefaultDatatableSettings settings={tableState} />
         </TableSettingsMenu>
       )}
       description={

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

@@ -1,5 +1,4 @@
 import { List } from 'lucide-react';
-import { useEffect } from 'react';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
@@ -7,16 +6,17 @@ import { createStore } from '@/react/kubernetes/datatables/default-kube-datatabl
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
 
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
 import { useTableState } from '@@/datatables/useTableState';
+import { TableSettingsMenu } from '@@/datatables';
 
 import { useApplications } from '../../application.queries';
 
 import { columns } from './columns';
 import { SubRows } from './SubRows';
 import { Namespace, Stack } from './types';
-import { StacksSettingsMenu } from './StacksSettingsMenu';
 import { NamespaceFilter } from './NamespaceFilter';
 import { TableActions } from './TableActions';
 import { getStacksFromApplications } from './getStacksFromApplications';
@@ -30,8 +30,6 @@ interface Props {
   namespace?: string;
   namespaces: Array<Namespace>;
   onNamespaceChange(namespace: string): void;
-  showSystem?: boolean;
-  setSystemResources(showSystem: boolean): void;
 }
 
 export function ApplicationsStacksDatatable({
@@ -39,17 +37,9 @@ export function ApplicationsStacksDatatable({
   namespace = '',
   namespaces,
   onNamespaceChange,
-  showSystem,
-  setSystemResources,
 }: Props) {
   const tableState = useTableState(settingsStore, storageKey);
 
-  const { setShowSystemResources } = tableState;
-
-  useEffect(() => {
-    setShowSystemResources(showSystem || false);
-  }, [showSystem, setShowSystemResources]);
-
   const envId = useEnvironmentId();
   const applicationsQuery = useApplications(envId, {
     refetchInterval: tableState.autoRefreshRate * 1000,
@@ -58,7 +48,7 @@ export function ApplicationsStacksDatatable({
   });
   const namespaceListQuery = useNamespacesQuery(envId);
   const applications = applicationsQuery.data ?? [];
-  const filteredApplications = showSystem
+  const filteredApplications = tableState.showSystemResources
     ? applications
     : applications.filter(
         (item) =>
@@ -90,12 +80,14 @@ export function ApplicationsStacksDatatable({
               namespaces={namespaces}
               value={namespace}
               onChange={onNamespaceChange}
-              showSystem={showSystem}
+              showSystem={tableState.showSystemResources}
             />
           </div>
 
           <div className="space-y-2">
-            <SystemResourceDescription showSystemResources={showSystem} />
+            <SystemResourceDescription
+              showSystemResources={tableState.showSystemResources}
+            />
           </div>
         </div>
       }
@@ -103,10 +95,9 @@ export function ApplicationsStacksDatatable({
         <TableActions selectedItems={selectedItems} onRemove={onRemove} />
       )}
       renderTableSettings={() => (
-        <StacksSettingsMenu
-          setSystemResources={setSystemResources}
-          settings={tableState}
-        />
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
       )}
       getRowId={(row) => `${row.Name}-${row.ResourcePool}`}
       data-cy="applications-stacks-datatable"

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

@@ -1,31 +0,0 @@
-import { SystemResourcesSettings } from '@/react/kubernetes/datatables/SystemResourcesSettings';
-
-import { TableSettingsMenu } from '@@/datatables';
-import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
-
-import { type TableSettings } from './types';
-
-export function StacksSettingsMenu({
-  settings,
-  setSystemResources,
-}: {
-  settings: TableSettings;
-  setSystemResources(showSystem: boolean): void;
-}) {
-  return (
-    <TableSettingsMenu>
-      <SystemResourcesSettings
-        value={settings.showSystemResources}
-        onChange={(value) => {
-          setSystemResources(value);
-          settings.setShowSystemResources(value);
-        }}
-      />
-
-      <TableSettingsMenuAutoRefresh
-        onChange={settings.setAutoRefreshRate}
-        value={settings.autoRefreshRate}
-      />
-    </TableSettingsMenu>
-  );
-}

app/react/kubernetes/datatables/DefaultDatatableSettings.tsx

@@ -16,10 +16,8 @@ export interface TableSettings
 
 export function DefaultDatatableSettings({
   settings,
-  onShowSystemChange,
 }: {
   settings: TableSettings;
-  onShowSystemChange?(showSystem: boolean): void;
 }) {
   return (
     <>
@@ -27,7 +25,6 @@ export function DefaultDatatableSettings({
         value={settings.showSystemResources}
         onChange={(value) => {
           settings.setShowSystemResources(value);
-          onShowSystemChange?.(value);
         }}
       />