Feat: timerpicker can't find second h2oai#2398

Added seconds select in time picker and updated the testing to be in format

ui/src/time_picker.test.tsx

@@ -48,95 +48,95 @@ describe('time_picker.tsx', () => {
   })
 
   it('Sets args - init - value specified', async () => {
-    render(<XTimePicker model={{ ...timepickerProps, value: '10:30' }} />)
+    render(<XTimePicker model={{ ...timepickerProps, value: '10:30:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('10:30')
+    expect(wave.args[name]).toBe('10:30:00')
   })
 
   it('Set args when value is updated to different value', async () => {
-    const { rerender } = render(<XTimePicker model={{ ...timepickerProps, value: '15:00' }} />)
+    const { rerender } = render(<XTimePicker model={{ ...timepickerProps, value: '15:00:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('15:00')
-    rerender(<XTimePicker model={{ ...timepickerProps, value: '15:30' }} />)
-    expect(wave.args[name]).toBe('15:30')
+    expect(wave.args[name]).toBe('15:00:00')
+    rerender(<XTimePicker model={{ ...timepickerProps, value: '15:30:00' }} />)
+    expect(wave.args[name]).toBe('15:30:00')
   })
 
   it('Set args when value is updated to initial value', async () => {
-    const { container, rerender } = render(<XTimePicker model={{ ...timepickerProps, value: '04:00' }} />)
+    const { container, rerender } = render(<XTimePicker model={{ ...timepickerProps, value: '04:00:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('04:00')
+    expect(wave.args[name]).toBe('04:00:00')
 
     await waitFor(() => fireEvent.click(container.querySelector("input")!))
     fireEvent.keyDown(screen.getByRole('listbox'), { key: 'ArrowUp' })
 
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('05:00')
+    expect(wave.args[name]).toBe('05:00:00')
 
-    rerender(<XTimePicker model={{ ...timepickerProps, value: '04:00' }} />)
-    expect(wave.args[name]).toBe('04:00')
+    rerender(<XTimePicker model={{ ...timepickerProps, value: '04:00:00' }} />)
+    expect(wave.args[name]).toBe('04:00:00')
   })
 
   it('Show correct input value in 12 hour time format', async () => {
-    const { getByDisplayValue } = render(<XTimePicker model={{ ...timepickerProps, value: '14:30' }} />)
+    const { getByDisplayValue } = render(<XTimePicker model={{ ...timepickerProps, value: '14:30:00' }} />)
     await waitForIdleEventLoop()
-    expect(getByDisplayValue('02:30 PM')).toBeInTheDocument()
-    expect(wave.args[name]).toBe('14:30')
+    expect(getByDisplayValue('02:30:00 PM')).toBeInTheDocument()
+    expect(wave.args[name]).toBe('14:30:00')
   })
 
   it('Shows midnight correctly in 12 hour time format', async () => {
     const { getByDisplayValue } = render(<XTimePicker model={{ ...timepickerProps, value: '00:00' }} />)
     await waitForIdleEventLoop()
-    expect(getByDisplayValue('12:00 AM')).toBeInTheDocument()
-    expect(wave.args[name]).toBe('00:00')
+    expect(getByDisplayValue('12:00:00 AM')).toBeInTheDocument()
+    expect(wave.args[name]).toBe('00:00:00')
   })
 
   it('Shows noon correctly in 12 hour time format', async () => {
     const { getByDisplayValue } = render(<XTimePicker model={{ ...timepickerProps, value: '12:00' }} />)
     await waitForIdleEventLoop()
-    expect(getByDisplayValue('12:00 PM')).toBeInTheDocument()
-    expect(wave.args[name]).toBe('12:00')
+    expect(getByDisplayValue('12:00:00 PM')).toBeInTheDocument()
+    expect(wave.args[name]).toBe('12:00:00')
   })
 
   it('Show correct input value in 24 hour time format', async () => {
     const { getByDisplayValue } = render(<XTimePicker model={{ ...timepickerProps, hour_format: '24', value: '23:30' }} />)
     await waitForIdleEventLoop()
-    expect(getByDisplayValue('23:30')).toBeInTheDocument()
-    expect(wave.args[name]).toBe('23:30')
+    expect(getByDisplayValue('23:30:00')).toBeInTheDocument()
+    expect(wave.args[name]).toBe('23:30:00')
   })
 
   it('Value cannot be updated to be greater than max', async () => {
     const { rerender } = render(<XTimePicker model={{ ...timepickerProps, min: '00:00', max: '10:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('04:00')
+    expect(wave.args[name]).toBe('04:00:00')
     rerender(<XTimePicker model={{ ...timepickerProps, min: '00:00', max: '10:00', value: '14:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('10:00')
+    expect(wave.args[name]).toBe('10:00:00')
   })
 
   it('Value cannot be updated to be lower than min', async () => {
     const { rerender } = render(<XTimePicker model={{ ...timepickerProps, min: '02:00', max: '10:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('04:00')
+    expect(wave.args[name]).toBe('04:00:00')
     rerender(<XTimePicker model={{ ...timepickerProps, min: '02:00', max: '10:00', value: '01:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('02:00')
+    expect(wave.args[name]).toBe('02:00:00')
   })
 
   it('Changes out of bounds value when min is updated', async () => {
     const { rerender } = render(<XTimePicker model={{ ...timepickerProps, min: '00:00', max: '10:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('04:00')
+    expect(wave.args[name]).toBe('04:00:00')
     rerender(<XTimePicker model={{ ...timepickerProps, min: '05:00', max: '10:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('05:00')
+    expect(wave.args[name]).toBe('05:00:00')
   })
 
   it('Changes out of bounds value when max is updated', async () => {
     const { rerender } = render(<XTimePicker model={{ ...timepickerProps, min: '00:00', max: '10:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('04:00')
+    expect(wave.args[name]).toBe('04:00:00')
     rerender(<XTimePicker model={{ ...timepickerProps, min: '00:00', max: '03:00', value: '04:00' }} />)
     await waitForIdleEventLoop()
-    expect(wave.args[name]).toBe('03:00')
+    expect(wave.args[name]).toBe('03:00:00')
   })
 })

ui/src/time_picker.tsx

@@ -38,7 +38,7 @@ export interface TimePicker {
   label?: S
   /** A string that provides a brief hint to the user as to what kind of information is expected in the field. */
   placeholder?: S
-  /** The time value in hh:mm format. E.g. '10:30', '14:25', '23:59', '00:00' */
+  /** The time value in hh:mm:ss format. E.g. '10:30:45', '14:25:30', '23:59:59', '00:00:00' */
   value?: S
   /** True if this field is disabled. */
   disabled?: B
@@ -52,9 +52,9 @@ export interface TimePicker {
   required?: B
   /** Specifies 12-hour or 24-hour time format. One of `12` or `24`. Defaults to `12`. */
   hour_format?: S
-  /** The minimum allowed time value in hh:mm format. E.g.: '08:00', '13:30' */
+  /** The minimum allowed time value in hh:mm:ss format. E.g.: '08:00:00', '13:30:00' */
   min?: S
-  /** The maximum allowed time value in hh:mm format. E.g.: '15:30', '00:00' */
+  /** The maximum allowed time value in hh:mm:ss format. E.g.: '15:30:00', '00:00:00' */
   max?: S
   /** Limits the available minutes to select from. One of `1`, `5`, `10`, `15`, `20`, `30` or `60`. Defaults to `1`. */
   minutes_step?: U
@@ -104,7 +104,7 @@ const
   LocalizationProvider = React.lazy(() => import('@mui/x-date-pickers/LocalizationProvider').then(({ LocalizationProvider }) => ({ default: LocalizationProvider }))),
   TimePicker = React.lazy(() => import('@mui/x-date-pickers/TimePicker').then(({ TimePicker }) => ({ default: TimePicker }))),
   allowedMinutesSteps: { [key: U]: U } = { 1: 1, 5: 5, 10: 10, 15: 15, 20: 20, 30: 30, 60: 60 },
-  normalize = (time: S) => `2000-01-01T${time.slice(0, 5)}:00`,
+  normalize = (time: S) => `2000-01-01T${time.slice(0, 8)}`,
   isBelowMin = (time: Date, minTime: Date) => time < minTime,
   isOverMax = (time: Date, maxTime: Date) => time > maxTime,
   isOutOfBounds = (time: Date, minTime: Date, maxTime: Date) => isBelowMin(time, minTime) || isOverMax(time, maxTime),
@@ -135,8 +135,9 @@ const
       {label && <Fluent.Label className={css.toolbarLabel}>{label}</Fluent.Label>}
       <Fluent.Text className={css.toolbarText}>
         <Fluent.Text className={css.toolbarTime} onClick={() => setOpenView('hours')}>{time?.substring(0, 2) || '--'}</Fluent.Text>:
-        <Fluent.Text className={css.toolbarTime} onClick={() => setOpenView('minutes')}>{time?.substring(3, 5) || '--'}</Fluent.Text>{' '}
-        <Fluent.Text className={css.toolbarAmPm}>{time?.substring(6, 8) || ''}</Fluent.Text>
+        <Fluent.Text className={css.toolbarTime} onClick={() => setOpenView('minutes')}>{time?.substring(3, 5) || '--'}</Fluent.Text>:
+        <Fluent.Text className={css.toolbarTime} onClick={() => setOpenView('seconds')}>{time?.substring(6, 8) || '--'}</Fluent.Text>{' '}
+        <Fluent.Text className={css.toolbarAmPm}>{time?.substring(9, 11) || ''}</Fluent.Text>
       </Fluent.Text>
     </div>
 
@@ -149,8 +150,8 @@ export const
       [isDialogOpen, setIsDialogOpen] = React.useState(false),
       textInputRef = React.useRef<HTMLDivElement | null>(null),
       popperRef = React.useRef<HTMLDivElement | null>(null),
-      minTime = React.useMemo(() => parseTimeStringToDate(min || '00:00'), [min]),
-      maxTime = React.useMemo(() => parseTimeStringToDate(max || '24:00'), [max]),
+      minTime = React.useMemo(() => parseTimeStringToDate(min || '00:00:00'), [min]),
+      maxTime = React.useMemo(() => parseTimeStringToDate(max || '24:00:00'), [max]),
       onChangeTime = (time: unknown) => {
         if (!(time instanceof Date)) return
         const newValue = formatDateToTimeString(time, '24')
@@ -192,7 +193,7 @@ export const
         },
       },
       { format, AdapterDateFns, theme } = useTime(themeObj),
-      formatDateToTimeString = React.useCallback((date: D, hour_format: S) => format ? format(date, hour_format === '12' ? 'hh:mm aa' : 'HH:mm') : '', [format])
+      formatDateToTimeString = React.useCallback((date: D, hour_format: S) => format ? format(date, hour_format === '12' ? 'hh:mm:ss aa' : 'HH:mm:ss') : '', [format])
 
     React.useEffect(() => {
       const time = m.value ? parseTimeStringToDate(m.value) : null