chore: simplify settings management in UI mode (#32440)

packages/trace-viewer/src/ui/settingsView.tsx

@@ -15,14 +15,19 @@
  */
 
 import * as React from 'react';
-import type { Setting } from '@web/uiUtils';
 import './settingsView.css';
 
+export type Setting<T> = {
+  value: T,
+  set: (value: T) => void,
+  title: string
+};
+
 export const SettingsView: React.FunctionComponent<{
   settings: Setting<boolean>[],
 }> = ({ settings }) => {
   return <div className='vbox settings-view'>
-    {settings.map(([value, set, title]) => {
+    {settings.map(({ value, set, title }) => {
       return <div key={title} className='setting'>
         <label>
           <input type='checkbox' checked={value} onClick={() => set(!value)}/>

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -100,36 +100,13 @@ export const UIModeView: React.FC<{}> = ({
   const [testingOptionsVisible, setTestingOptionsVisible] = React.useState(false);
   const [revealSource, setRevealSource] = React.useState(false);
   const onRevealSource = React.useCallback(() => setRevealSource(true), [setRevealSource]);
+
   const showTestingOptions = false;
-
+  const [singleWorker, setSingleWorker] = React.useState(queryParams.workers === '1');
-  const [runWorkers, setRunWorkers] = React.useState(queryParams.workers);
+  const [showBrowser, setShowBrowser] = React.useState(queryParams.headed);
-  const singleWorkerSetting = React.useMemo(() => {
+  const [updateSnapshots, setUpdateSnapshots] = React.useState(queryParams.updateSnapshots === 'all');
-    return [
+  const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
-      runWorkers === '1',
+  const [darkMode, setDarkMode] = useDarkModeSetting();
-      (value: boolean) => {
-        // When started with `--workers=1`, the setting allows to undo that.
-        // Otherwise, fallback to the cli `--workers=X` argument.
-        setRunWorkers(value ? '1' : (queryParams.workers === '1' ? undefined : queryParams.workers));
-      },
-      'Single worker',
-    ] as const;
-  }, [runWorkers, setRunWorkers]);
-
-  const [runHeaded, setRunHeaded] = React.useState(queryParams.headed);
-  const showBrowserSetting = React.useMemo(() => [runHeaded, setRunHeaded, 'Show browser'] as const, [runHeaded, setRunHeaded]);
-
-  const [runUpdateSnapshots, setRunUpdateSnapshots] = React.useState(queryParams.updateSnapshots);
-  const updateSnapshotsSetting = React.useMemo(() => {
-    return [
-      runUpdateSnapshots === 'all',
-      (value: boolean) => setRunUpdateSnapshots(value ? 'all' : 'missing'),
-      'Update snapshots',
-    ] as const;
-  }, [runUpdateSnapshots, setRunUpdateSnapshots]);
-
-  const [, , showRouteActionsSetting] = useSetting('show-route-actions', true, 'Show route actions');
-
-  const darkModeSetting = useDarkModeSetting();
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -309,11 +286,13 @@ export const UIModeView: React.FC<{}> = ({
         grepInvert: queryParams.grepInvert,
         testIds: [...testIds],
         projects: [...projectFilters].filter(([_, v]) => v).map(([p]) => p),
-        workers: runWorkers,
+        // When started with `--workers=1`, the setting allows to undo that.
+        // Otherwise, fallback to the cli `--workers=X` argument.
+        workers: singleWorker ? '1' : (queryParams.workers === '1' ? undefined : queryParams.workers),
         timeout: queryParams.timeout,
-        headed: runHeaded,
+        headed: showBrowser,
         outputDir: queryParams.outputDir,
-        updateSnapshots: runUpdateSnapshots,
+        updateSnapshots: updateSnapshots ? 'all' : queryParams.updateSnapshots,
         reporters: queryParams.reporters,
         trace: 'on',
       });
@@ -325,7 +304,7 @@ export const UIModeView: React.FC<{}> = ({
       setTestModel({ ...testModel });
       setRunningState(oldState => oldState ? ({ ...oldState, completed: true }) : undefined);
     });
-  }, [projectFilters, isRunningTest, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]);
+  }, [projectFilters, isRunningTest, testModel, testServerConnection, singleWorker, showBrowser, updateSnapshots]);
 
   React.useEffect(() => {
     if (!testServerConnection || !teleSuiteUpdater)
@@ -522,9 +501,9 @@ export const UIModeView: React.FC<{}> = ({
             <div className='section-title'>Testing Options</div>
           </Toolbar>
           {testingOptionsVisible && <SettingsView settings={[
-            singleWorkerSetting,
+            { value: singleWorker, set: setSingleWorker, title: 'Single worker' },
-            showBrowserSetting,
+            { value: showBrowser, set: setShowBrowser, title: 'Show browser' },
-            updateSnapshotsSetting,
+            { value: updateSnapshots, set: setUpdateSnapshots, title: 'Update snapshots' },
           ]} />}
         </>}
         <Toolbar noShadow={true} noMinHeight={true} className='settings-toolbar' onClick={() => setSettingsVisible(!settingsVisible)}>
@@ -536,8 +515,8 @@ export const UIModeView: React.FC<{}> = ({
           <div className='section-title'>Settings</div>
         </Toolbar>
         {settingsVisible && <SettingsView settings={[
-          darkModeSetting,
+          { value: darkMode, set: setDarkMode, title: 'Dark mode' },
-          showRouteActionsSetting,
+          { value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' },
         ]} />}
       </div>
       }

packages/trace-viewer/src/ui/workbench.tsx

@@ -72,7 +72,7 @@ export const Workbench: React.FunctionComponent<{
   const activeAction = model ? highlightedAction || selectedAction : undefined;
   const [selectedTime, setSelectedTime] = React.useState<Boundaries | undefined>();
   const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom');
-  const [showRouteActions, , showRouteActionsSetting] = useSetting('show-route-actions', true, 'Show route actions');
+  const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
 
   const filteredActions = React.useMemo(() => {
     return (model?.actions || []).filter(action => showRouteActions || !isRouteAction(action));
@@ -299,7 +299,7 @@ export const Workbench: React.FunctionComponent<{
   const settingsTab: TabbedPaneTabModel = {
     id: 'settings',
     title: 'Settings',
-    component: <SettingsView settings={[showRouteActionsSetting]}/>,
+    component: <SettingsView settings={[{ value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' }]}/>,
   };
 
   return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>

packages/web/src/theme.ts

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { type Setting, settings } from './uiUtils';
+import { settings } from './uiUtils';
 
 declare global {
   interface Document {
@@ -68,12 +68,12 @@ export function currentTheme(): Theme {
   return document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode';
 }
 
-export function useDarkModeSetting() {
+export function useDarkModeSetting(): [boolean, (value: boolean) => void] {
   const [theme, setTheme] = React.useState(currentTheme() === 'dark-mode');
   return [theme, (value: boolean) => {
     const current = currentTheme() === 'dark-mode';
     if (current !== value)
       toggleTheme();
     setTheme(value);
-  }, 'Dark mode'] as Setting<boolean>;
+  }];
 }

packages/web/src/uiUtils.ts

@@ -139,10 +139,7 @@ export function copy(text: string) {
   textArea.remove();
 }
 
-export type Setting<T> = readonly [T, (value: T) => void, string];
+export function useSetting<S>(name: string | undefined, defaultValue: S, title?: string): [S, React.Dispatch<React.SetStateAction<S>>] {
-
-
-export function useSetting<S>(name: string | undefined, defaultValue: S, title?: string): [S, React.Dispatch<React.SetStateAction<S>>, Setting<S>] {
   if (name)
     defaultValue = settings.getObject(name, defaultValue);
   const [value, setValue] = React.useState<S>(defaultValue);
@@ -160,9 +157,7 @@ export function useSetting<S>(name: string | undefined, defaultValue: S, title?:
       return () => settings.onChangeEmitter.removeEventListener(name, onStoreChange);
     }
   }, [defaultValue, name]);
-
+  return [value, setValueWrapper];
-  const setting = [value, setValueWrapper, title || name || ''] as Setting<S>;
-  return [value, setValueWrapper, setting];
 }
 
 declare global {