Validate beamline attributes and handle server errors

Author: axelboc

ui/src/components/BeamlineAttribute/BeamlineAttribute.jsx

@@ -7,7 +7,14 @@ import BeamlineAttributeForm from './BeamlineAttributeForm';
 
 function BeamlineAttribute(props) {
   const { attribute, format, precision = 1, suffix, onSave, onCancel } = props;
-  const { state, value = 0, step = 0.1, msg, readonly = false } = attribute;
+  const {
+    state,
+    value = 0,
+    step = 0.1,
+    limits,
+    msg,
+    readonly = false,
+  } = attribute;
 
   const isBusy = state === HW_STATE.BUSY;
 
@@ -49,6 +56,7 @@ function BeamlineAttribute(props) {
             isBusy={isBusy}
             step={step}
             precision={precision}
+            limits={limits}
             onSave={onSave}
             onCancel={onCancel}
           />

ui/src/components/BeamlineAttribute/BeamlineAttribute.module.css

@@ -26,7 +26,14 @@
 }
 
 .input {
-  width: 8em;
+  width: 9em;
   height: 36px;
   appearance: auto !important;
 }
+
+.error {
+  color: var(--bs-form-invalid-color);
+  line-height: 1;
+  margin-top: 0.625rem;
+  margin-bottom: 0;
+}

ui/src/components/BeamlineAttribute/BeamlineAttributeForm.jsx

@@ -1,60 +1,73 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { Button, ButtonToolbar, Form } from 'react-bootstrap';
+import { useForm } from 'react-hook-form';
 import { TiTick, TiTimes } from 'react-icons/ti';
 
 import styles from './BeamlineAttribute.module.css';
 
 function BeamlineAttributeForm(props) {
-  const { value, isBusy, step, precision, onSave, onCancel } = props;
-  const inputRef = useRef(null);
+  const { value, isBusy, step, precision, limits, onSave, onCancel } = props;
+
+  const {
+    register,
+    setFocus,
+    setError,
+    handleSubmit: makeOnSubmit,
+    formState: { isDirty, errors },
+  } = useForm({ defaultValues: { value: value.toFixed(precision) } });
 
   useEffect(() => {
     if (!isBusy) {
       setTimeout(() => {
         /* Focus and select text when popover opens and every time a value is applied.
          * Timeout ensures this works when opening a popover while another is already opened. */
-        inputRef.current?.focus({ preventScroll: true });
-        inputRef.current?.select();
+        setFocus('value', { shouldSelect: true });
       }, 0);
     }
-  }, [isBusy]);
-
-  function handleSubmit(evt) {
-    evt.preventDefault();
-    const formData = new FormData(evt.target);
-    const strVal = formData.get('value');
+  }, [isBusy, setFocus]);
 
-    const numVal =
-      typeof strVal === 'string' ? Number.parseFloat(strVal) : Number.NaN;
-
-    if (!Number.isNaN(numVal)) {
-      onSave(numVal);
+  async function handleSubmit(data) {
+    try {
+      await onSave(data.value);
+    } catch {
+      setError('value', { message: 'Unable to set value' });
     }
   }
 
+  const minMaxMsg = `Allowed range: [${limits
+    .map((v) => v.toFixed(precision))
+    .join(', ')}]`;
+
   return (
-    <Form className="d-flex" noValidate onSubmit={handleSubmit}>
-      <Form.Control
-        ref={inputRef}
-        className={styles.input}
-        name="value"
-        type="number"
-        step={step}
-        defaultValue={value.toFixed(precision)}
-        disabled={isBusy}
-        aria-label="Value"
-      />
-      <ButtonToolbar className="ms-1">
-        {isBusy ? (
-          <Button variant="danger" size="sm" onClick={() => onCancel()}>
-            <TiTimes size="1.5em" />
-          </Button>
-        ) : (
-          <Button type="submit" variant="success" size="sm">
-            <TiTick size="1.5em" />
-          </Button>
-        )}
-      </ButtonToolbar>
+    <Form noValidate onSubmit={makeOnSubmit(handleSubmit)}>
+      <div className="d-flex">
+        <Form.Control
+          {...register('value', {
+            valueAsNumber: true,
+            required: 'Please enter a valid number',
+            min: { value: limits[0], message: minMaxMsg },
+            max: { value: limits[1], message: minMaxMsg },
+            disabled: isBusy,
+          })}
+          className={styles.input}
+          type="number"
+          step={step}
+          aria-label="Value"
+          isInvalid={isDirty && !!errors.value}
+        />
+        <ButtonToolbar className="ms-1">
+          {isBusy ? (
+            <Button variant="danger" size="sm" onClick={() => onCancel()}>
+              <TiTimes size="1.5em" />
+            </Button>
+          ) : (
+            <Button type="submit" variant="success" size="sm">
+              <TiTick size="1.5em" />
+            </Button>
+          )}
+        </ButtonToolbar>
+      </div>
+      {errors.value && <p className={styles.error}>{errors.value.message}</p>}
     </Form>
   );
 }