Merge pull request #1288 from yaacov/dont-use-state-for-settings

🐞 Make user settings persistante
kubev2v · Jul 18, 2024 · 1ea40cc · 1ea40cc
2 parents 027bd51 + be8b622
commit 1ea40cc
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 39 deletions.
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/NetworkMapsListPage.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/NetworkMapsListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import StandardPage from 'src/components/page/StandardPage';
 import { useGetDeleteAndEditAccessReview } from 'src/modules/Providers/hooks';
 import { useForkliftTranslation } from 'src/utils/i18n';
@@ -103,7 +103,8 @@ const NetworkMapsListPage: React.FC<{
   namespace: string;
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'NetworkMaps' }));
+
+  const userSettings = loadUserSettings({ pageId: 'NetworkMaps' });
 
   const [networkMaps, networkMapsLoaded, networkMapsLoadError] = useK8sWatchResource<
     V1beta1NetworkMap[]

diff --git a/packages/forklift-console-plugin/src/modules/Overview/hooks/OverviewContextProvider.tsx b/packages/forklift-console-plugin/src/modules/Overview/hooks/OverviewContextProvider.tsx
@@ -32,7 +32,7 @@ export const CreateOverviewContextProvider = CreateOverviewContext.Provider;
 export const useOverviewContext = (): CreateOverviewContextType => {
   // use the same approach as useSafetyFirst() hook
   // https://github.com/openshift/console/blob/9d4a9b0a01b2de64b308f8423a325f1fae5f8726/frontend/packages/console-dynamic-plugin-sdk/src/app/components/safety-first.tsx#L10
-  const [userSettings] = useState(() => loadUserSettings({ userSettingsKeySuffix: 'Overview' }));
+  const userSettings = loadUserSettings({ userSettingsKeySuffix: 'Overview' });
   const hideWelcomeCardInitState = userSettings?.welcome?.hideWelcome;
   const [data, setData] = useState<CreateOverviewContextData>({
     hideWelcomeCardByContext: hideWelcomeCardInitState,

diff --git a/...dules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesList.tsx b/...dules/Plans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesList.tsx
@@ -223,7 +223,8 @@ export const MigrationVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) =>
 
   const [selectedIds, setSelectedIds] = useState([]);
   const [expandedIds, setExpandedIds] = useState([]);
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'PlanVirtualMachines' }));
+
+  const userSettings = loadUserSettings({ pageId: 'PlanVirtualMachines' });
 
   const virtualMachines: V1beta1PlanSpecVms[] = plan?.spec?.vms || [];
   const migrationVirtualMachines: V1beta1PlanStatusMigrationVms[] =

diff --git a/...gin/src/modules/Plans/views/details/tabs/VirtualMachines/Plan/PlanVirtualMachinesList.tsx b/...gin/src/modules/Plans/views/details/tabs/VirtualMachines/Plan/PlanVirtualMachinesList.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 import {
   GlobalActionWithSelection,
   StandardPageWithSelection,
-  StandardPageWithSelectionProps,
 } from 'src/components/page/StandardPageWithSelection';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
@@ -43,16 +42,14 @@ const fieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 const PageWithSelection = StandardPageWithSelection<VMData>;
-type PageWithSelectionProps = StandardPageWithSelectionProps<VMData>;
 type PageGlobalActions = FC<GlobalActionWithSelection<VMData>>[];
 
 export const PlanVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) => {
   const { t } = useForkliftTranslation();
 
   const { plan } = obj;
 
-  const [selectedIds, setSelectedIds] = useState([]);
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'PlanVirtualMachines' }));
+  const userSettings = loadUserSettings({ pageId: 'PlanVirtualMachines' });
 
   const virtualMachines: V1beta1PlanSpecVms[] = plan?.spec?.vms || [];
   const migrationVirtualMachines: V1beta1PlanStatusMigrationVms[] =
@@ -80,32 +77,33 @@ export const PlanVirtualMachinesList: FC<{ obj: PlanData }> = ({ obj }) => {
     conditions: conditionsDict[m.id],
     targetNamespace: plan?.spec?.targetNamespace,
   }));
+  const vmDataSource: [VMData[], boolean, unknown] = [vmData || [], true, undefined];
+  const vmDataToId = (item: VMData) => item?.specVM?.id;
+  const canSelect = (item: VMData) =>
+    item?.statusVM?.started === undefined || item?.statusVM?.error !== undefined;
+  const onSelect = () => undefined;
+  const initialSelectedIds = [];
 
   const actions: PageGlobalActions = [
     ({ selectedIds }) => <PlanVMsDeleteButton selectedIds={selectedIds || []} plan={plan} />,
   ];
 
-  const props: PageWithSelectionProps = {
-    dataSource: [vmData || [], true, undefined],
-    CellMapper: PlanVirtualMachinesRow,
-    fieldsMetadata: fieldsMetadataFactory(t),
-    title: t('Virtual Machines'),
-    userSettings: userSettings,
-    namespace: '',
-    page: 1,
-  };
-
-  const extendedProps = {
-    ...props,
-    toId: (item: VMData) => item?.specVM?.id,
-    canSelect: (item: VMData) =>
-      item?.statusVM?.started === undefined || item?.statusVM?.error !== undefined,
-    onSelect: setSelectedIds,
-    selectedIds: selectedIds,
-    GlobalActionToolbarItems: actions,
-  };
-
-  return <PageWithSelection {...extendedProps} />;
+  return (
+    <PageWithSelection
+      title={t('Virtual Machines')}
+      dataSource={vmDataSource}
+      CellMapper={PlanVirtualMachinesRow}
+      fieldsMetadata={fieldsMetadataFactory(t)}
+      userSettings={userSettings}
+      namespace={''}
+      page={1}
+      toId={vmDataToId}
+      canSelect={canSelect}
+      onSelect={onSelect}
+      selectedIds={initialSelectedIds}
+      GlobalActionToolbarItems={actions}
+    />
+  );
 };
 
 /**

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import StandardPage from 'src/components/page/StandardPage';
 import { useGetDeleteAndEditAccessReview } from 'src/modules/Providers/hooks';
 import { ModalHOC } from 'src/modules/Providers/modals';
@@ -133,7 +133,8 @@ const PlansListPage: React.FC<{
   namespace: string;
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'Plans' }));
+
+  const userSettings = loadUserSettings({ pageId: 'Plans' });
 
   const [plans, plansLoaded, plansLoadError] = useK8sWatchResource<V1beta1Plan[]>({
     groupVersionKind: PlanModelGroupVersionKind,

diff --git a/...rklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/VSphereHostsList.tsx b/...rklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/VSphereHostsList.tsx
@@ -67,7 +67,7 @@ export const VSphereHostsList: FC<ProviderHostsProps> = ({ obj }) => {
   const { namespace } = provider?.metadata || {};
 
   const [selectedIds, setSelectedIds] = useState([]);
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'ProviderHosts' }));
+  const userSettings = loadUserSettings({ pageId: 'ProviderHosts' });
 
   const {
     inventory: hostsInventory,

diff --git a/...s/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx b/...s/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import {
   GlobalActionWithSelection,
@@ -49,7 +49,8 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
   className,
 }) => {
   const { t } = useForkliftTranslation();
-  const [userSettings] = useState(() => loadUserSettings({ pageId }));
+
+  const userSettings = loadUserSettings({ pageId });
 
   const initialSelectedIds_ = initialSelectedIds || [];
   const initialExpandedIds_ = [];

diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/list/ProvidersListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import StandardPage from 'src/components/page/StandardPage';
 import modernizeMigration from 'src/modules/Providers/images/modernizeMigration.svg';
 import { ProviderData, SOURCE_ONLY_PROVIDER_TYPES } from 'src/modules/Providers/utils';
@@ -169,7 +169,8 @@ const ProvidersListPage: React.FC<{
   namespace: string;
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'Providers' }));
+
+  const userSettings = loadUserSettings({ pageId: 'Providers' });
 
   const [providers, providersLoaded, providersLoadError] = useK8sWatchResource<V1beta1Provider[]>({
     groupVersionKind: ProviderModelGroupVersionKind,

diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/StorageMapsListPage.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/list/StorageMapsListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import StandardPage from 'src/components/page/StandardPage';
 import { useGetDeleteAndEditAccessReview } from 'src/modules/Providers/hooks';
 import { useForkliftTranslation } from 'src/utils/i18n';
@@ -103,7 +103,8 @@ const StorageMapsListPage: React.FC<{
   namespace: string;
 }> = ({ namespace }) => {
   const { t } = useForkliftTranslation();
-  const [userSettings] = useState(() => loadUserSettings({ pageId: 'StorageMaps' }));
+
+  const userSettings = loadUserSettings({ pageId: 'StorageMaps' });
 
   const [StorageMaps, StorageMapsLoaded, StorageMapsLoadError] = useK8sWatchResource<
     V1beta1StorageMap[]