fix(trace-viewer): Don't show 'Merge files' setting in trace viewer

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

@@ -14,45 +14,40 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
-import { SettingsView } from './settingsView';
 import { useDarkModeSetting } from '@web/theme';
 import { useSetting } from '@web/uiUtils';
+import type { Setting } from './settingsView';
 
-/**
- * A view of the collection of standard settings used between various applications
- */
-export const DefaultSettingsView: React.FC<{}> = () => {
+export function useDarkModeCheckbox(): Setting {
+  const [darkMode, setDarkMode] = useDarkModeSetting();
+  return {
+    type: 'check',
+    value: darkMode,
+    set: setDarkMode,
+    name: 'Dark mode'
+  };
+}
+
+export function useMergeFilesCheckbox(): Setting {
+  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
+  return {
+    type: 'check',
+    value: mergeFiles,
+    set: setMergeFiles,
+    name: 'Merge files'
+  };
+}
+
+export function usePopulateCanvasCheckbox(): Setting {
   const [
     shouldPopulateCanvasFromScreenshot,
     setShouldPopulateCanvasFromScreenshot,
   ] = useSetting('shouldPopulateCanvasFromScreenshot', false);
-  const [darkMode, setDarkMode] = useDarkModeSetting();
-  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);
-
-  return (
-    <SettingsView
-      settings={[
-        {
-          type: 'check',
-          value: darkMode,
-          set: setDarkMode,
-          name: 'Dark mode'
-        },
-        {
-          type: 'check',
-          value: mergeFiles,
-          set: setMergeFiles,
-          name: 'Merge files'
-        },
-        {
-          type: 'check',
-          value: shouldPopulateCanvasFromScreenshot,
-          set: setShouldPopulateCanvasFromScreenshot,
-          name: 'Display canvas content',
-          title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
-        },
-      ]}
-    />
-  );
-};
+  return {
+    type: 'check',
+    value: shouldPopulateCanvasFromScreenshot,
+    set: setShouldPopulateCanvasFromScreenshot,
+    name: 'Display canvas content',
+    title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.',
+  };
+}

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

@@ -36,7 +36,7 @@ import { FiltersView } from './uiModeFiltersView';
 import { TestListView } from './uiModeTestListView';
 import { TraceView } from './uiModeTraceView';
 import { SettingsView } from './settingsView';
-import { DefaultSettingsView } from './defaultSettingsView';
+import { useDarkModeCheckbox, useMergeFilesCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
 
 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@@ -395,6 +395,12 @@ export const UIModeView: React.FC<{}> = ({
     });
   }, [closeInstallDialog, testServerConnection]);
 
+  const settingsView = [
+    useDarkModeCheckbox(),
+    useMergeFilesCheckbox(),
+    usePopulateCanvasCheckbox()
+  ];
+
   return <div className='vbox ui-mode'>
     {!hasBrowsers && <dialog ref={dialogRef}>
       <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
@@ -520,7 +526,7 @@ export const UIModeView: React.FC<{}> = ({
           />
           <div className='section-title'>Settings</div>
         </Toolbar>
-        {settingsVisible && <DefaultSettingsView />}
+        {settingsVisible && <SettingsView settings={settingsView} />}
       </div>
       }
     />

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

@@ -21,7 +21,8 @@ import { Workbench } from './workbench';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';
 import { DialogToolbarButton } from '@web/components/dialogToolbarButton';
 import { Dialog } from '@web/shared/dialog';
-import { DefaultSettingsView } from './defaultSettingsView';
+import { useDarkModeCheckbox, usePopulateCanvasCheckbox } from './defaultSettingsView';
+import { SettingsView } from './settingsView';
 
 export const WorkbenchLoader: React.FunctionComponent<{
 }> = () => {
@@ -183,7 +184,12 @@ export const WorkbenchLoader: React.FunctionComponent<{
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
       <DialogToolbarButton icon='settings-gear' title='Settings' dialogDataTestId='settings-toolbar-dialog'>
-        <DefaultSettingsView />
+        <SettingsView
+          settings={[
+            useDarkModeCheckbox(),
+            usePopulateCanvasCheckbox()
+          ]}
+        />
       </DialogToolbarButton>
     </div>
     <Workbench model={model} inert={showFileUploadDropArea} />