chore: move the remaining usage of use user settings to the new way

Signed-off-by: Dominikus Hellgartner <dominikus.hellgartner@tngtech.com>

src/ElectronBackend/main/main.ts

@@ -6,6 +6,7 @@ import { dialog, ipcMain, Menu, systemPreferences } from 'electron';
 import os from 'os';
 
 import { AllowedFrontendChannels, IpcChannel } from '../../shared/ipc-channels';
+import { UserSettings } from '../../shared/shared-types';
 import { getMessageBoxContentForErrorsWrapper } from '../errorHandling/errorHandling';
 import { createWindow, loadWebApp } from './createWindow';
 import {
@@ -98,8 +99,10 @@ export async function main(): Promise<void> {
     ipcMain.handle(IpcChannel.GetFullUserSettings, () =>
       UserSettingsProvider.get(),
     );
-    ipcMain.handle(IpcChannel.SetUserSettings, (_, { key, value }) =>
-      UserSettingsProvider.set(key, value, { skipNotification: true }),
+    ipcMain.handle(
+      IpcChannel.SetUserSettings,
+      (_, userSettings: Partial<UserSettings>) =>
+        UserSettingsProvider.update(userSettings, true),
     );
 
     await loadWebApp(mainWindow);

src/ElectronBackend/main/user-settings-provider.ts

@@ -8,7 +8,10 @@ import settings from 'electron-settings';
 
 import { AllowedFrontendChannels } from '../../shared/ipc-channels';
 import { DEFAULT_USER_SETTINGS } from '../../shared/shared-constants';
-import { UserSettings as IUserSettings } from '../../shared/shared-types';
+import {
+  UserSettings as IUserSettings,
+  UserSettings,
+} from '../../shared/shared-types';
 
 export class UserSettingsProvider {
   public static async init() {
@@ -37,6 +40,19 @@ export class UserSettingsProvider {
     return settings.get() as unknown as Promise<IUserSettings>;
   }
 
+  public static async update(
+    userSettings: Partial<IUserSettings>,
+    skipNotification: boolean,
+  ): Promise<void> {
+    await Promise.all(
+      Object.entries(userSettings).map(async ([key, value]) => {
+        await UserSettingsProvider.set(key as keyof UserSettings, value, {
+          skipNotification,
+        });
+      }),
+    );
+  }
+
   public static async set<T extends keyof IUserSettings>(
     path: T,
     value: IUserSettings[T],

src/ElectronBackend/preload.ts

@@ -6,7 +6,7 @@
 import { contextBridge, ipcRenderer } from 'electron';
 
 import { IpcChannel } from '../shared/ipc-channels';
-import { ElectronAPI } from '../shared/shared-types';
+import { ElectronAPI, UserSettings } from '../shared/shared-types';
 
 const electronAPI: ElectronAPI = {
   quit: () => ipcRenderer.invoke(IpcChannel.Quit),
@@ -36,8 +36,8 @@ const electronAPI: ElectronAPI = {
   },
   getUserSetting: (key) => ipcRenderer.invoke(IpcChannel.GetUserSettings, key),
   getFullUserSettings: () => ipcRenderer.invoke(IpcChannel.GetFullUserSettings),
-  setUserSetting: (key, value) =>
-    ipcRenderer.invoke(IpcChannel.SetUserSettings, { key, value }),
+  setUserSettings: (userSettings: Partial<UserSettings>) =>
+    ipcRenderer.invoke(IpcChannel.SetUserSettings, userSettings),
 };
 
 // This exposes an API to communicate from the window in the frontend with the backend

src/Frontend/Components/AttributionForm/AuditingOptions/AuditingOptions.util.tsx

@@ -26,9 +26,9 @@ import {
   getIsPreferenceFeatureEnabled,
   getTemporaryDisplayPackageInfo,
 } from '../../../state/selectors/resource-selectors';
+import { getQaMode } from '../../../state/selectors/user-settings-selector';
 import { useShowClassifications } from '../../../state/variables/use-show-classifications';
 import { useShowCriticality } from '../../../state/variables/use-show-criticality';
-import { useUserSetting } from '../../../state/variables/use-user-setting';
 import { prettifySource } from '../../../util/prettify-source';
 import {
   ClassificationIcon,
@@ -58,7 +58,7 @@ export function useAuditingOptions({
 }) {
   const dispatch = useAppDispatch();
   const store = useAppStore();
-  const [qaMode] = useUserSetting({ key: 'qaMode' });
+  const qaMode = useAppSelector(getQaMode);
   const attributionSources = useAppSelector(getExternalAttributionSources);
   const isPreferenceFeatureEnabled = useAppSelector(
     getIsPreferenceFeatureEnabled,

src/Frontend/Components/AttributionPanels/AttributionPanels.tsx

@@ -21,18 +21,16 @@ export function AttributionPanels() {
   const [{ search: attributionSearch }, setFilteredAttributions] =
     useFilteredAttributions();
   const [{ search: signalSearch }, setFilteredSignals] = useFilteredSignals();
-  const [{ packageListsWidth, signalsPanelHeight }, setPanelSizes] =
-    usePanelSizes();
+  const { panelSizes, setPanelSizes } = usePanelSizes();
 
   const setWidth = useCallback(
-    (width: number) =>
-      setPanelSizes((prev) => ({ ...prev, packageListsWidth: width })),
+    (width: number) => setPanelSizes({ packageListsWidth: width }),
     [setPanelSizes],
   );
 
   const setHeight = useCallback(
     (height: number) => {
-      setPanelSizes((prev) => ({ ...prev, signalsPanelHeight: height }));
+      setPanelSizes({ signalsPanelHeight: height });
     },
     [setPanelSizes],
   );
@@ -42,8 +40,8 @@ export function AttributionPanels() {
       <ResizePanels
         minWidth={DEFAULT_PANEL_SIZES.packageListsWidth}
         main={'lower'}
-        width={packageListsWidth}
-        height={signalsPanelHeight}
+        width={panelSizes.packageListsWidth}
+        height={panelSizes.signalsPanelHeight}
         setWidth={setWidth}
         setHeight={setHeight}
         upperPanel={{

src/Frontend/Components/AttributionPanels/SignalsPanel/IncludeExcludeButton/IncludeExcludeButton.tsx

@@ -9,11 +9,13 @@ import MuiTooltip from '@mui/material/Tooltip';
 import MuiBox from '@mui/system/Box';
 
 import { text } from '../../../../../shared/text';
+import { toggleAreHiddenSignalsVisible } from '../../../../state/actions/user-settings-actions/user-settings-actions';
+import { useAppDispatch } from '../../../../state/hooks';
 import { useAreHiddenSignalsVisible } from '../../../../state/variables/use-are-hidden-signals-visible';
 
 export const IncludeExcludeButton: React.FC = () => {
-  const [areHiddenSignalsVisible, setAreHiddenSignalsVisible] =
-    useAreHiddenSignalsVisible();
+  const dispatch = useAppDispatch();
+  const areHiddenSignalsVisible = useAreHiddenSignalsVisible();
   const label = areHiddenSignalsVisible
     ? text.packageLists.hideDeleted
     : text.packageLists.showDeleted;
@@ -22,7 +24,9 @@ export const IncludeExcludeButton: React.FC = () => {
     <MuiIconButton
       aria-label={label}
       size={'small'}
-      onClick={() => setAreHiddenSignalsVisible((prev) => !prev)}
+      onClick={() => {
+        dispatch(toggleAreHiddenSignalsVisible);
+      }}
     >
       <MuiTooltip title={label} disableInteractive placement={'top'}>
         <MuiBox sx={{ height: '24px' }}>

src/Frontend/Components/AttributionPanels/SignalsPanel/RestoreButton/RestoreButton.tsx

@@ -21,7 +21,7 @@ export const RestoreButton: React.FC<PackagesPanelChildrenProps> = ({
   const resolvedExternalAttributionIds = useAppSelector(
     getResolvedExternalAttributions,
   );
-  const [areHiddenSignalsVisible] = useAreHiddenSignalsVisible();
+  const areHiddenSignalsVisible = useAreHiddenSignalsVisible();
   const someSelectedAttributionsAreHidden = useMemo(
     () =>
       !!selectedAttributionIds.length &&

src/Frontend/Components/ProjectStatisticsPopup/ProjectStatisticsPopup.tsx

@@ -13,6 +13,7 @@ import { PropsWithChildren, useState } from 'react';
 import { Criticality } from '../../../shared/shared-types';
 import { text } from '../../../shared/text';
 import { criticalityColor } from '../../shared-styles';
+import { updateUserSettings } from '../../state/actions/user-settings-actions/user-settings-actions';
 import { closePopup } from '../../state/actions/view-actions/view-actions';
 import { useAppDispatch, useAppSelector } from '../../state/hooks';
 import {
@@ -21,9 +22,9 @@ import {
   getManualAttributions,
   getUnresolvedExternalAttributions,
 } from '../../state/selectors/resource-selectors';
+import { getShowProjectStatistics } from '../../state/selectors/user-settings-selector';
 import { useShowClassifications } from '../../state/variables/use-show-classifications';
 import { useShowCriticality } from '../../state/variables/use-show-criticality';
-import { useUserSetting } from '../../state/variables/use-user-setting';
 import { AttributionCountPerSourcePerLicenseTable } from '../AttributionCountPerSourcePerLicenseTable/AttributionCountPerSourcePerLicenseTable';
 import { BarChart } from '../BarChart/BarChart';
 import { Checkbox } from '../Checkbox/Checkbox';
@@ -89,8 +90,7 @@ export const ProjectStatisticsPopup: React.FC = () => {
     dispatch(closePopup());
   }
 
-  const [showProjectStatistics, setShowProjectStatistics, hydrated] =
-    useUserSetting({ defaultValue: true, key: 'showProjectStatistics' });
+  const showProjectStatistics = useAppSelector(getShowProjectStatistics);
 
   const [selectedTab, setSelectedTab] = useState(0);
 
@@ -206,8 +206,13 @@ export const ProjectStatisticsPopup: React.FC = () => {
       customAction={
         <Checkbox
           checked={showProjectStatistics}
-          onChange={(event) => setShowProjectStatistics(event.target.checked)}
-          disabled={!hydrated}
+          onChange={(event) =>
+            dispatch(
+              updateUserSettings({
+                showProjectStatistics: event.target.checked,
+              }),
+            )
+          }
           label={text.projectStatisticsPopup.toggleStartupCheckbox}
         />
       }

src/Frontend/Components/ResourceBrowser/ResourceBrowser.tsx

@@ -37,8 +37,7 @@ export function ResourceBrowser() {
   );
   const debouncedSearchAll = useDebouncedInput(searchAll);
   const debouncedSearchLinked = useDebouncedInput(searchLinked);
-  const [{ resourceBrowserWidth, linkedResourcesPanelHeight }, setPanelSizes] =
-    usePanelSizes();
+  const { panelSizes, setPanelSizes } = usePanelSizes();
 
   const allResourcesFiltered = useMemo(
     () =>
@@ -62,17 +61,15 @@ export function ResourceBrowser() {
   );
 
   const setWidth = useCallback(
-    (width: number) =>
-      setPanelSizes((prev) => ({ ...prev, resourceBrowserWidth: width })),
+    (width: number) => setPanelSizes({ resourceBrowserWidth: width }),
     [setPanelSizes],
   );
 
   const setHeight = useCallback(
     (height: number) => {
-      setPanelSizes((prev) => ({
-        ...prev,
+      setPanelSizes({
         linkedResourcesPanelHeight: height,
-      }));
+      });
     },
     [setPanelSizes],
   );
@@ -84,8 +81,8 @@ export function ResourceBrowser() {
   return (
     <ResizePanels
       main={'upper'}
-      width={resourceBrowserWidth}
-      height={linkedResourcesPanelHeight}
+      width={panelSizes.resourceBrowserWidth}
+      height={panelSizes.linkedResourcesPanelHeight}
       setWidth={setWidth}
       setHeight={setHeight}
       upperPanel={{

src/Frontend/state/actions/user-settings-actions/user-settings-actions.ts

@@ -2,8 +2,13 @@
 // SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
 //
 // SPDX-License-Identifier: Apache-2.0
-import { UserSettings } from '../../../../shared/shared-types';
-import { AppThunkAction } from '../../types';
+import { PanelSizes, UserSettings } from '../../../../shared/shared-types';
+import { State } from '../../../types/types';
+import {
+  getAreHiddenSignalsVisible,
+  getPanelSizes,
+} from '../../selectors/user-settings-selector';
+import { AppThunkAction, AppThunkDispatch } from '../../types';
 import { ACTION_SET_USER_SETTING, SetUserSetting } from './types';
 
 export function setUserSetting(setting: Partial<UserSettings>): SetUserSetting {
@@ -19,3 +24,40 @@ export function fetchUserSettings(): AppThunkAction {
     dispatch(setUserSetting(userSettings));
   };
 }
+
+export function updateUserSettings(
+  userSettings: Partial<UserSettings>,
+): AppThunkAction {
+  return async (dispatch) => {
+    await window.electronAPI.setUserSettings(userSettings);
+    dispatch(setUserSetting(userSettings));
+  };
+}
+
+export function updatePanelSizes(
+  panelSizes: Partial<PanelSizes>,
+): AppThunkAction {
+  return (dispatch, getState): void => {
+    const currentState = getState();
+    const currentPanelSizes = getPanelSizes(currentState);
+    dispatch(
+      updateUserSettings({
+        panelSizes: { ...currentPanelSizes, ...panelSizes },
+      }),
+    );
+  };
+}
+
+export function toggleAreHiddenSignalsVisible(
+  dispatch: AppThunkDispatch,
+  getState: () => State,
+): void {
+  const currentState = getState();
+  const currentAreHiddenSignalsVisible =
+    getAreHiddenSignalsVisible(currentState);
+  dispatch(
+    updateUserSettings({
+      areHiddenSignalsVisible: !currentAreHiddenSignalsVisible,
+    }),
+  );
+}

src/Frontend/state/selectors/user-settings-selector.ts

@@ -2,6 +2,7 @@
 // SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
 //
 // SPDX-License-Identifier: Apache-2.0
+import { UserSettings } from '../../../shared/shared-types';
 import { State } from '../../types/types';
 
 export function getShowCriticality(state: State): boolean {
@@ -11,3 +12,19 @@ export function getShowCriticality(state: State): boolean {
 export function getShowClassifications(state: State): boolean {
   return state.userSettingsState.showClassifications;
 }
+
+export function getQaMode(state: State): boolean {
+  return state.userSettingsState.qaMode;
+}
+
+export function getShowProjectStatistics(state: State): boolean {
+  return state.userSettingsState.showProjectStatistics;
+}
+
+export function getAreHiddenSignalsVisible(state: State): boolean {
+  return state.userSettingsState.areHiddenSignalsVisible;
+}
+
+export function getPanelSizes(state: State): UserSettings['panelSizes'] {
+  return state.userSettingsState.panelSizes;
+}