feat: Make line-selector an autocomplete (#1701)

Author: arielvino

src/pages/components/LineSelector.test.tsx

@@ -0,0 +1,106 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { useAllRoutes } from 'src/hooks/useAllRoutes'
+import i18n from 'src/locale/allTranslations'
+import LineSelector from './LineSelector'
+
+vi.mock('src/hooks/useAllRoutes', () => ({ useAllRoutes: vi.fn() }))
+const mockUseAllRoutes = vi.mocked(useAllRoutes)
+
+const LINE_LABEL = i18n.t('choose_line')
+const OPEN_BUTTON = /open/i
+const AUTOCOMPLETE_INPUT_ROOT = '.MuiAutocomplete-inputRoot'
+const CLEAR_INDICATOR = '.clear-indicator'
+const DEBOUNCE_MS = 500
+
+type RouteItem = ReturnType<typeof useAllRoutes>['routes'][number]
+
+const route = (line: number, suffix = ''): RouteItem => ({
+  id: line,
+  lineRef: line,
+  line,
+  suffix,
+  start: 'start',
+  end: 'end',
+  routeKey: `${line}${suffix}-key`,
+})
+
+const setRoutes = (routes: RouteItem[], isLoading = false) =>
+  mockUseAllRoutes.mockReturnValue({ routes, isLoading, error: false })
+
+const renderSelector = (props: Partial<React.ComponentProps<typeof LineSelector>> = {}) =>
+  render(
+    <LineSelector
+      operatorId="3"
+      date="2026-07-01"
+      lineNumber={undefined}
+      setLineNumber={vi.fn()}
+      {...props}
+    />,
+  )
+
+beforeEach(() => {
+  setRoutes([])
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('LineSelector', () => {
+  it('offers the distinct line numbers running for the operator + date, in order', () => {
+    setRoutes([route(1), route(5), route(5), route(18), route(18, 'א')])
+    renderSelector()
+
+    fireEvent.click(screen.getByRole('button', { name: OPEN_BUTTON }))
+
+    // The two direction rows of line 5 collapse to a single option.
+    expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual(['1', '5', '18', '18א'])
+  })
+
+  it('commits the line number when an option is picked', () => {
+    setRoutes([route(18), route(18, 'א'), route(480)])
+    const setLineNumber = vi.fn()
+    renderSelector({ setLineNumber })
+
+    fireEvent.click(screen.getByRole('button', { name: OPEN_BUTTON }))
+    fireEvent.click(screen.getByRole('option', { name: '480' }))
+
+    expect(setLineNumber).toHaveBeenCalledWith('480')
+  })
+
+  it('commits a freely typed line number after the debounce (does not restrict to options)', () => {
+    vi.useFakeTimers()
+    const setLineNumber = vi.fn()
+    setRoutes([route(1)])
+    renderSelector({ setLineNumber })
+
+    fireEvent.change(screen.getByRole('combobox', { name: LINE_LABEL }), {
+      target: { value: '42' },
+    })
+    expect(setLineNumber).not.toHaveBeenCalled()
+
+    act(() => {
+      vi.advanceTimersByTime(DEBOUNCE_MS)
+    })
+    expect(setLineNumber).toHaveBeenCalledWith('42')
+  })
+
+  it('renders as a standard Autocomplete with the dropdown arrow (appearance parity guard)', () => {
+    setRoutes([route(1)])
+    renderSelector()
+
+    // `MuiAutocomplete-inputRoot` keeps this field the same height as the other selectors.
+    expect(
+      screen.getByRole('combobox', { name: LINE_LABEL }).closest(AUTOCOMPLETE_INPUT_ROOT),
+    ).not.toBeNull()
+    expect(screen.getByRole('button', { name: OPEN_BUTTON })).toBeInTheDocument()
+  })
+
+  it('tags the clear button with the `clear-indicator` class the e2e helper relies on', () => {
+    // MUI only renders its clear indicator once the field has a value to clear.
+    setRoutes([route(5)])
+    renderSelector({ lineNumber: '5' })
+
+    expect(document.querySelector(CLEAR_INDICATOR)).not.toBeNull()
+  })
+})

src/pages/components/LineSelector.tsx

@@ -1,58 +1,80 @@
-import { TextField } from '@mui/material'
-import classNames from 'classnames'
-import { debounce } from 'es-toolkit/compat'
-import { useCallback, useLayoutEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import ClearButton from './ClearButton'
-import './Selector.scss'
-
-type LineSelectorProps = {
-  disabled?: boolean
-  lineNumber: string | undefined
-  setLineNumber: (lineNumber: string) => void
-}
-
-const LineSelector = ({ disabled, lineNumber, setLineNumber }: LineSelectorProps) => {
-  const [value, setValue] = useState<LineSelectorProps['lineNumber']>(lineNumber)
-  const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 500), [setLineNumber])
-  const { t } = useTranslation()
-
-  useLayoutEffect(() => {
-    setValue(lineNumber)
-  }, [])
-
-  const handleClearInput = () => {
-    setValue('')
-    setLineNumber('')
-  }
-
-  const textFieldClass = classNames({
-    'selector-line-text-field': true,
-    'selector-line-text-field_visible': value,
-    'selector-line-text-field_hidden': !value,
-  })
-  return (
-    <TextField
-      disabled={disabled}
-      className={textFieldClass}
-      label={t('choose_line')}
-      type="text"
-      value={value && +value < 0 ? 0 : value}
-      onChange={(e) => {
-        setValue(e.target.value)
-        debouncedSetLineNumber(e.target.value)
-      }}
-      slotProps={{
-        inputLabel: {
-          shrink: true,
-        },
-        input: {
-          placeholder: t('line_placeholder'),
-          endAdornment: <ClearButton onClearInput={handleClearInput} />,
-        },
-      }}
-    />
-  )
-}
-
-export default LineSelector
+import { Autocomplete, TextField } from '@mui/material'
+import { debounce } from 'es-toolkit/compat'
+import { useCallback, useLayoutEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAllRoutes } from 'src/hooks/useAllRoutes'
+
+type LineSelectorProps = {
+  disabled?: boolean
+  operatorId?: string
+  date?: string
+  lineNumber: string | undefined
+  setLineNumber: (lineNumber: string) => void
+}
+
+const LineSelector = ({
+  disabled,
+  operatorId,
+  date,
+  lineNumber,
+  setLineNumber,
+}: LineSelectorProps) => {
+  const [value, setValue] = useState<string>(lineNumber ?? '')
+  const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 500), [setLineNumber])
+  const { t } = useTranslation()
+  const { routes, isLoading } = useAllRoutes(operatorId, date)
+
+  useLayoutEffect(() => {
+    setValue(lineNumber ?? '')
+  }, [])
+
+  // `routes` is already sorted by line number in useAllRoutes, so a Set preserves that order.
+  const options = useMemo(() => {
+    const seen = new Set<string>()
+    const result: string[] = []
+    for (const route of routes) {
+      if (!route.line) continue
+      const label = `${route.line}${route.suffix}`
+      if (!seen.has(label)) {
+        seen.add(label)
+        result.push(label)
+      }
+    }
+    return result
+  }, [routes])
+
+  return (
+    <Autocomplete
+      freeSolo
+      forcePopupIcon
+      disablePortal
+      fullWidth
+      disabled={disabled}
+      loading={isLoading}
+      options={options}
+      // The e2e `clearInputField` helper finds the clear button by the repo-wide
+      // `clear-indicator` class, which MUI's built-in one doesn't carry.
+      slotProps={{ clearIndicator: { className: 'clear-indicator' } }}
+      inputValue={value}
+      onInputChange={(_event, newValue, reason) => {
+        setValue(newValue)
+        if (reason === 'input') {
+          debouncedSetLineNumber(newValue)
+        } else if (reason === 'clear') {
+          debouncedSetLineNumber.cancel()
+          setLineNumber('')
+        }
+      }}
+      onChange={(_event, newValue) => {
+        debouncedSetLineNumber.cancel()
+        setValue(newValue ?? '')
+        setLineNumber(newValue ?? '')
+      }}
+      renderInput={(params) => (
+        <TextField {...params} label={t('choose_line')} placeholder={t('line_placeholder')} />
+      )}
+    />
+  )
+}
+
+export default LineSelector

src/pages/components/Selector.scss

@@ -1,6 +1,5 @@
 .selector {
-  &-minute,
-  &-line {
+  &-minute {
     &-text-field {
       width: 100%;
 

src/pages/gaps/index.tsx

@@ -127,6 +127,8 @@ const GapsPage = () => {
         <Grid size={{ sm: 6, xs: 12 }}>
           <LineNumberSelector
             disabled={!operatorId}
+            operatorId={operatorId ?? undefined}
+            date={date}
             lineNumber={lineNumber ?? undefined}
             setLineNumber={handleLineNumberChange}
           />

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -300,6 +300,8 @@ const GapsPatternsPage = () => {
         </Grid>
         <Grid size={{ xs: 12, sm: 8 }}>
           <LineNumberSelector
+            operatorId={operatorId ?? undefined}
+            date={startDate}
             lineNumber={lineNumber ?? undefined}
             setLineNumber={(number) => setSearch((current) => ({ ...current, lineNumber: number }))}
           />

src/pages/historicTimeline/index.tsx

@@ -147,6 +147,8 @@ const TimelinePage = () => {
         {/* choose line */}
         <Grid size={{ lg: 4, md: 6, xs: 12 }}>
           <LineNumberSelector
+            operatorId={operatorId ?? undefined}
+            date={date}
             lineNumber={lineNumber ?? undefined}
             setLineNumber={(number) => setSearch((prev) => ({ ...prev, lineNumber: number }))}
           />

src/pages/singleLineMap/index.tsx

@@ -146,6 +146,8 @@ const SingleLineMapPage = () => {
           <Grid size={{ sm: 4, xs: 12 }}>
             <LineNumberSelector
               disabled={!operatorId}
+              operatorId={operatorId ?? undefined}
+              date={date}
               lineNumber={lineNumber ?? undefined}
               setLineNumber={handleLineNumberChange}
             />

src/test_pages/TimelinePage.ts

@@ -49,10 +49,6 @@ class TimelinePage extends BasePage {
   public get stationList() {
     return this.page.locator('ul#stop-select-listbox')
   }
-  get closeButton() {
-    return this.page.locator('svg.clear-indicator')
-  }
-
   get lineNumberField() {
     return this.page.locator("//input[@placeholder='לדוגמה: 17א']")
   }

tests/interlink.spec.ts

@@ -24,7 +24,7 @@ const RIDE_TOKEN_URL = '00-30' // same time carried in the share URL (dash form)
 async function selectRoute(page: Page) {
   await page.getByLabel('חברה מפעילה').click()
   await page.getByRole('option', { name: OPERATOR, exact: true }).click()
-  await page.getByRole('textbox', { name: 'מספר קו' }).fill(LINE)
+  await page.getByRole('combobox', { name: 'מספר קו' }).fill(LINE)
   // Type-to-filter the route Autocomplete so the target option renders even when
   // the line has many variants (MUI virtualizes long option lists).
   await page.getByLabel(/בחירת מסלול נסיעה/).fill(ROUTE_FILTER)

tests/missingRides.spec.ts

@@ -17,7 +17,7 @@ const FULL_DAY_TIMES = ['04:30', '17:00', '04:47'] as const
 async function selectGapsRoute(page: import('@playwright/test').Page) {
   await page.getByLabel('חברה מפעילה').click()
   await page.getByRole('option', { name: GAPS_OPERATOR, exact: true }).click()
-  await page.getByRole('textbox', { name: 'מספר קו' }).fill(GAPS_LINE_NUMBER)
+  await page.getByRole('combobox', { name: 'מספר קו' }).fill(GAPS_LINE_NUMBER)
   await page.getByLabel(/בחירת מסלול נסיעה/).click()
   await page.getByRole('option', { name: GAPS_ROUTE }).click()
 }