change presentation of multiple options

Author: going-confetti

src/components/Browser/SelectOptions.tsx

@@ -1,6 +1,3 @@
-import { css } from '@emotion/react'
-import { Fragment } from 'react'
-
 interface SelectOption {
   value?: string
   label?: string
@@ -15,31 +12,20 @@ function quote(str: string) {
   return `"${str}"`
 }
 
-function formatOption(option: SelectOption | string) {
+export function formatOption(option: SelectOption | string) {
   if (typeof option === 'string') {
     return quote(option)
   }
 
   if (option.label !== undefined) {
-    return option.label.length ? (
-      option.label
-    ) : (
-      <span
-        css={css`
-          opacity: 0.8;
-          font-style: italic;
-        `}
-      >
-        (empty)
-      </span>
-    )
+    return `label: ${quote(option.label)}`
   }
 
   if (option.index !== undefined) {
-    return option.index.toString()
+    return `index: ${option.index.toString()}`
   }
 
-  return quote(option.value ?? '')
+  return `value: ${quote(option.value ?? '')}`
 }
 
 export function SelectOptions({ options }: SelectOptionsProps) {
@@ -51,16 +37,5 @@ export function SelectOptions({ options }: SelectOptionsProps) {
     return <code>{formatOption(options[0]!)}</code>
   }
 
-  const last = options[options.length - 1]!
-
-  return (
-    <>
-      {options.slice(0, -1).map((option, index) => (
-        <Fragment key={index}>
-          <code>{formatOption(option)}</code>,{' '}
-        </Fragment>
-      ))}{' '}
-      and <code>{formatOption(last)}</code>
-    </>
-  )
+  return <>{options.length} options</>
 }

src/components/BrowserEventList/EventDescription/EventDescription.tsx

@@ -1,4 +1,3 @@
-import { SelectOptions } from '@/components/Browser/SelectOptions'
 import { BrowserEvent } from '@/schemas/recording'
 import { NodeSelector } from '@/schemas/selectors'
 import { exhaustive } from '@/utils/typescript'
@@ -7,6 +6,7 @@ import { AssertDescription } from './AssertDescription'
 import { ClickDescription } from './ClickDescription'
 import { InputChangeDescription } from './InputChangeDescription'
 import { PageNavigationDescription } from './PageNavigationDescription'
+import { SelectChangeDescription } from './SelectChangeDescription'
 import { Selector } from './Selector'
 import { WaitForDescription } from './WaitForDescription'
 
@@ -58,15 +58,7 @@ export function EventDescription({
       )
 
     case 'select-change':
-      return (
-        <>
-          Selected <SelectOptions options={event.selected} /> from{' '}
-          <Selector
-            selectors={event.target.selectors}
-            onHighlight={onHighlight}
-          />
-        </>
-      )
+      return <SelectChangeDescription event={event} onHighlight={onHighlight} />
 
     case 'submit-form':
       return (

src/components/BrowserEventList/EventDescription/SelectChangeDescription.tsx

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'
+
+import { formatOption, SelectOptions } from '@/components/Browser/SelectOptions'
+import { Tooltip } from '@/components/primitives/Tooltip'
+import { SelectChangeEvent } from '@/schemas/recording'
+import { NodeSelector } from '@/schemas/selectors'
+
+import { Selector } from './Selector'
+
+interface SelectChangeDescriptionProps {
+  event: SelectChangeEvent
+  onHighlight: (selector: NodeSelector | null) => void
+}
+
+export function SelectChangeDescription({
+  event,
+  onHighlight,
+}: SelectChangeDescriptionProps) {
+  return (
+    <>
+      Selected
+      <Tooltip
+        content={event.selected
+          .map((option) => formatOption(option))
+          .join(', ')}
+      >
+        <div
+          css={css`
+            gap: calc(var(--studio-spacing-1) * 1.5);
+            flex-shrink: 1;
+            padding: calc(var(--studio-spacing-1) * 0.5)
+              calc(var(--studio-spacing-1) * 1.5);
+            overflow: hidden;
+            background-color: var(--gray-3);
+            color: var(--gray-12);
+            border-radius: 3px;
+            font-size: var(--studio-font-size-1);
+          `}
+        >
+          <SelectOptions options={event.selected} />
+        </div>
+      </Tooltip>{' '}
+      from{' '}
+      <Selector selectors={event.target.selectors} onHighlight={onHighlight} />
+    </>
+  )
+}