From 1f67e1683ff9fe741c99a480dd2a8fb2b1639963 Mon Sep 17 00:00:00 2001
From: Adam Gastineau <adam@agg.im>
Date: Thu, 19 Dec 2024 06:53:16 -0800
Subject: [PATCH] chore(trace-viewer): Clean up settings component for shared
 uses

---
 packages/trace-viewer/src/ui/settingsView.css | 22 +++++-----
 packages/trace-viewer/src/ui/settingsView.tsx | 40 ++++++++++++-------
 packages/trace-viewer/src/ui/uiModeView.tsx   | 10 ++---
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/packages/trace-viewer/src/ui/settingsView.css b/packages/trace-viewer/src/ui/settingsView.css
index 3ac8597e35dae..d7bbda07f2bc8 100644
--- a/packages/trace-viewer/src/ui/settingsView.css
+++ b/packages/trace-viewer/src/ui/settingsView.css
@@ -15,25 +15,27 @@
 */
 
 .settings-view {
+  display: flex;
   flex: none;
-  margin-top: 4px;
+  padding: 4px 0px;
+  row-gap: 8px;
+  user-select: none;
 }
 
-.settings-view .setting label {
+.settings-view .setting {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  margin: 4px 2px;
 }
 
-.settings-view .setting:first-of-type label {
-  margin-top: 2px;
-}
+.settings-view .setting label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
-.settings-view .setting:last-of-type label {
-  margin-bottom: 2px;
+  cursor: pointer;
 }
 
 .settings-view .setting input {
   margin-right: 5px;
-}
+  flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/packages/trace-viewer/src/ui/settingsView.tsx b/packages/trace-viewer/src/ui/settingsView.tsx
index 0a4340b2b6665..5b2d394e0964c 100644
--- a/packages/trace-viewer/src/ui/settingsView.tsx
+++ b/packages/trace-viewer/src/ui/settingsView.tsx
@@ -18,22 +18,32 @@ import * as React from 'react';
 import './settingsView.css';
 
 export type Setting<T> = {
-  value: T,
-  set: (value: T) => void,
-  title: string
+  value: T;
+  set: (value: T) => void;
+  name: string;
+  title?: string;
 };
 
 export const SettingsView: React.FunctionComponent<{
-  settings: Setting<boolean>[],
+  settings: Setting<boolean>[];
 }> = ({ settings }) => {
-  return <div className='vbox settings-view'>
-    {settings.map(({ value, set, title }) => {
-      return <div key={title} className='setting'>
-        <label>
-          <input type='checkbox' checked={value} onChange={() => set(!value)}/>
-          {title}
-        </label>
-      </div>;
-    })}
-  </div>;
-};
+  return (
+    <div className='vbox settings-view'>
+      {settings.map(({ value, set, name, title }) => {
+        const labelId = `setting-${name}`;
+
+        return (
+          <div key={name} className='setting' title={title}>
+            <input
+              type='checkbox'
+              id={labelId}
+              checked={value}
+              onChange={() => set(!value)}
+            />
+            <label htmlFor={labelId}>{name}</label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index aa15e5a0a55d3..d11c3b5192f64 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -508,9 +508,9 @@ export const UIModeView: React.FC<{}> = ({
             <div className='section-title'>Testing Options</div>
           </Toolbar>
           {testingOptionsVisible && <SettingsView settings={[
-            { value: singleWorker, set: setSingleWorker, title: 'Single worker' },
-            { value: showBrowser, set: setShowBrowser, title: 'Show browser' },
-            { value: updateSnapshots, set: setUpdateSnapshots, title: 'Update snapshots' },
+            { value: singleWorker, set: setSingleWorker, name: 'Single worker' },
+            { value: showBrowser, set: setShowBrowser, name: 'Show browser' },
+            { value: updateSnapshots, set: setUpdateSnapshots, name: 'Update snapshots' },
           ]} />}
         </>}
         <Toolbar noShadow={true} noMinHeight={true} className='settings-toolbar' onClick={() => setSettingsVisible(!settingsVisible)}>
@@ -522,10 +522,10 @@ export const UIModeView: React.FC<{}> = ({
           <div className='section-title'>Settings</div>
         </Toolbar>
         {settingsVisible && <SettingsView settings={[
-          { value: darkMode, set: setDarkMode, title: 'Dark mode' },
+          { value: darkMode, set: setDarkMode, name: 'Dark mode' },
         ]} />}
       </div>
       }
     />
   </div>;
-};
+};
\ No newline at end of file