Fix periodic scanner form

ui/src/Pages/SettingsPage/PeriodicScanner.test.tsx

@@ -0,0 +1,67 @@
+import { MockedProvider } from '@apollo/client/testing'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import PeriodicScanner, {
+  SCAN_INTERVAL_MUTATION,
+  SCAN_INTERVAL_QUERY,
+} from './PeriodicScanner'
+
+test('Enable periodic scanner', async () => {
+  const graphqlMocks = [
+    {
+      request: {
+        query: SCAN_INTERVAL_QUERY,
+      },
+      result: {
+        data: {
+          siteInfo: { periodicScanInterval: 7380, __typename: 'SiteInfo' },
+        },
+      },
+    },
+    {
+      request: {
+        query: SCAN_INTERVAL_MUTATION,
+        variables: { interval: 0 },
+      },
+      result: { data: { setPeriodicScanInterval: 0 } },
+    },
+    {
+      request: {
+        query: SCAN_INTERVAL_MUTATION,
+        variables: { interval: 123 * 60 },
+      },
+      result: { data: { setPeriodicScanInterval: 123 * 60 } },
+    },
+  ]
+
+  render(
+    <MockedProvider mocks={graphqlMocks} addTypename={true}>
+      <PeriodicScanner />
+    </MockedProvider>
+  )
+
+  const enableCheckbox = screen.getByLabelText('Enable periodic scanner')
+  const inputField = screen.getByLabelText('Interval value')
+  const unitDropdown = screen.getByLabelText('Interval unit')
+
+  expect(inputField).toBeDisabled()
+  expect(unitDropdown).toBeDisabled()
+
+  fireEvent.click(enableCheckbox)
+
+  expect(inputField).toBeEnabled()
+  expect(unitDropdown).toBeEnabled()
+
+  fireEvent.change(unitDropdown, { target: { value: 'minute' } })
+  fireEvent.change(inputField, { target: { value: '123' } })
+
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+  })
+
+  fireEvent.keyUp(inputField, { key: 'Enter' })
+
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+  })
+})

ui/src/Pages/SettingsPage/PeriodicScanner.tsx

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client'
 import React, { useRef, useState } from 'react'
 import { useMutation, useQuery } from '@apollo/client'
-import { InputLabelDescription } from './SettingsPage'
+import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
 import { useTranslation } from 'react-i18next'
 import { scanIntervalQuery } from './__generated__/scanIntervalQuery'
 import {
@@ -13,7 +13,7 @@ import { TextField } from '../../primitives/form/Input'
 import Dropdown, { DropdownItem } from '../../primitives/form/Dropdown'
 import Loader from '../../primitives/Loader'
 
-const SCAN_INTERVAL_QUERY = gql`
+export const SCAN_INTERVAL_QUERY = gql`
   query scanIntervalQuery {
     siteInfo {
       periodicScanInterval
@@ -21,7 +21,7 @@ const SCAN_INTERVAL_QUERY = gql`
   }
 `
 
-const SCAN_INTERVAL_MUTATION = gql`
+export const SCAN_INTERVAL_MUTATION = gql`
   mutation changeScanIntervalMutation($interval: Int!) {
     setPeriodicScanInterval(interval: $interval)
   }
@@ -100,8 +100,8 @@ const PeriodicScanner = () => {
 
   const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
   const [scanInterval, setScanInterval] = useState<TimeValue>({
-    value: 4,
+    value: 0,
-    unit: TimeUnit.Minute,
+    unit: TimeUnit.Second,
   })
 
   const scanIntervalServerValue = useRef<number | null>(null)
@@ -148,7 +148,7 @@ const PeriodicScanner = () => {
     if (scanIntervalServerValue.current != seconds) {
       setScanIntervalMutation({
         variables: {
-          interval: convertToSeconds(scanInterval),
+          interval: seconds,
         },
       })
       scanIntervalServerValue.current = seconds
@@ -198,12 +198,12 @@ const PeriodicScanner = () => {
 
       <div className="mt-4">
         <label htmlFor="periodic_scan_field">
-          <h4 className="font-semibold">
+          <InputLabelTitle>
             {t(
               'settings.periodic_scanner.field.label',
               'Periodic scan interval'
             )}
-          </h4>
+          </InputLabelTitle>
           <InputLabelDescription>
             {t(
               'settings.periodic_scanner.field.description',
@@ -214,9 +214,21 @@ const PeriodicScanner = () => {
         <div className="flex gap-2">
           <TextField
             id="periodic_scan_field"
+            aria-label="Interval value"
             disabled={!enablePeriodicScanner}
+            value={scanInterval.value}
+            onChange={e => {
+              setScanInterval(x => ({
+                value: Number(e.target.value),
+                unit: x.unit,
+              }))
+            }}
+            action={() => {
+              onScanIntervalUpdate(scanInterval)
+            }}
           />
           <Dropdown
+            aria-label="Interval unit"
             disabled={!enablePeriodicScanner}
             items={scanIntervalUnits}
             selected={scanInterval.unit}

ui/src/Pages/SettingsPage/SettingsPage.tsx

@@ -28,7 +28,7 @@ export const SectionTitle = ({ children, nospace }: SectionTitleProps) => {
 }
 
 export const InputLabelTitle = styled.h3.attrs({
-  className: 'font-semibold',
+  className: 'font-semibold mt-4',
 })``
 
 export const InputLabelDescription = styled.p.attrs({