[v17] Adds a model-level validation capability to our validation library

web/packages/shared/components/FieldMultiInput/FieldMultiInput.story.tsx

@@ -20,6 +20,12 @@ import React, { useState } from 'react';
 
 import Box from 'design/Box';
 
+import { Button } from 'design/Button';
+
+import Validation from 'shared/components/Validation';
+
+import { arrayOf, requiredField } from '../Validation/rules';
+
 import { FieldMultiInput } from './FieldMultiInput';
 
 export default {
@@ -30,7 +36,21 @@ export function Story() {
   const [items, setItems] = useState([]);
   return (
     <Box width="500px">
-      <FieldMultiInput label="Some items" value={items} onChange={setItems} />
+      <Validation>
+        {({ validator }) => (
+          <>
+            <FieldMultiInput
+              label="Some items"
+              value={items}
+              onChange={setItems}
+              rule={arrayOf(requiredField('required'))}
+            />
+            <Button mt={3} onClick={() => validator.validate()}>
+              Validate
+            </Button>
+          </>
+        )}
+      </Validation>
     </Box>
   );
 }

web/packages/shared/components/FieldMultiInput/FieldMultiInput.test.tsx

@@ -19,20 +19,36 @@
 import userEvent from '@testing-library/user-event';
 import React, { useState } from 'react';
 
-import { render, screen } from 'design/utils/testing';
+import { act, render, screen } from 'design/utils/testing';
+
+import Validation, { Validator } from 'shared/components/Validation';
+
+import { arrayOf, requiredField } from '../Validation/rules';
 
 import { FieldMultiInput, FieldMultiInputProps } from './FieldMultiInput';
 
 const TestFieldMultiInput = ({
   onChange,
+  refValidator,
   ...rest
-}: Partial<FieldMultiInputProps>) => {
+}: Partial<FieldMultiInputProps> & {
+  refValidator?: (v: Validator) => void;
+}) => {
   const [items, setItems] = useState<string[]>([]);
   const handleChange = (it: string[]) => {
     setItems(it);
     onChange?.(it);
   };
-  return <FieldMultiInput value={items} onChange={handleChange} {...rest} />;
+  return (
+    <Validation>
+      {({ validator }) => {
+        refValidator?.(validator);
+        return (
+          <FieldMultiInput value={items} onChange={handleChange} {...rest} />
+        );
+      }}
+    </Validation>
+  );
 };
 
 test('adding, editing, and removing items', async () => {
@@ -69,3 +85,35 @@ test('keyboard handling', async () => {
   await user.keyboard('{Enter}bananas');
   expect(onChange).toHaveBeenLastCalledWith(['apples', 'bananas', 'oranges']);
 });
+
+test('validation', async () => {
+  const user = userEvent.setup();
+  let validator: Validator;
+  render(
+    <TestFieldMultiInput
+      refValidator={v => {
+        validator = v;
+      }}
+      rule={arrayOf(requiredField('required'))}
+    />
+  );
+
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(true);
+  expect(screen.getByRole('textbox')).toHaveAccessibleDescription('');
+
+  await user.click(screen.getByRole('button', { name: 'Add More' }));
+  await user.type(screen.getAllByRole('textbox')[1], 'foo');
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(false);
+  expect(screen.getAllByRole('textbox')[0]).toHaveAccessibleDescription(
+    'required'
+  );
+  expect(screen.getAllByRole('textbox')[1]).toHaveAccessibleDescription('');
+
+  await user.type(screen.getAllByRole('textbox')[0], 'foo');
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(true);
+  expect(screen.getAllByRole('textbox')[0]).toHaveAccessibleDescription('');
+  expect(screen.getAllByRole('textbox')[1]).toHaveAccessibleDescription('');
+});

web/packages/shared/components/FieldMultiInput/FieldMultiInput.tsx

@@ -21,15 +21,35 @@ import { ButtonSecondary } from 'design/Button';
 import ButtonIcon from 'design/ButtonIcon';
 import Flex from 'design/Flex';
 import * as Icon from 'design/Icon';
-import Input from 'design/Input';
 import { useRef } from 'react';
 import styled, { useTheme } from 'styled-components';
 
+import {
+  precomputed,
+  Rule,
+  ValidationResult,
+} from 'shared/components/Validation/rules';
+import { useRule } from 'shared/components/Validation';
+
+import FieldInput from '../FieldInput';
+
+type StringListValidationResult = ValidationResult & {
+  /**
+   * A list of validation results, one per list item. Note: results are
+   * optional just because `useRule` by default returns only
+   * `ValidationResult`. For the actual validation, it's not optional; if it's
+   * undefined, or there are fewer results in this list than the list items,
+   * the corresponding items will be treated as valid.
+   */
+  results?: ValidationResult[];
+};
+
 export type FieldMultiInputProps = {
   label?: string;
   value: string[];
   disabled?: boolean;
   onChange?(val: string[]): void;
+  rule?: Rule<string[], StringListValidationResult>;
 };
 
 /**
@@ -45,7 +65,13 @@ export function FieldMultiInput({
   value,
   disabled,
   onChange,
+  rule = defaultRule,
 }: FieldMultiInputProps) {
+  // It's important to first validate, and then treat an empty array as a
+  // single-item list with an empty string, since this "synthetic" empty
+  // string is technically not a part of the model and should not be
+  // validated.
+  const validationResult: StringListValidationResult = useRule(rule(value));
   if (value.length === 0) {
     value = [''];
   }
@@ -90,15 +116,19 @@ export function FieldMultiInput({
           // procedure whose complexity would probably outweigh the benefits).
           <Flex key={i} alignItems="center" gap={2}>
             <Box flex="1">
-              <Input
+              <FieldInput
                 value={val}
+                rule={precomputed(
+                  validationResult.results?.[i] ?? { valid: true }
+                )}
                 ref={toFocus.current === i ? setFocus : null}
                 onChange={e =>
                   onChange?.(
                     value.map((v, j) => (j === i ? e.target.value : v))
                   )
                 }
                 onKeyDown={e => handleKeyDown(i, e)}
+                mb={0}
               />
             </Box>
             <ButtonIcon
@@ -123,6 +153,8 @@ export function FieldMultiInput({
   );
 }
 
+const defaultRule = () => () => ({ valid: true });
+
 const Fieldset = styled.fieldset`
   border: none;
   margin: 0;

web/packages/shared/components/FieldSelect/FieldSelect.story.tsx

@@ -53,7 +53,10 @@ export function Default() {
   return (
     <Validation>
       {({ validator }) => {
-        validator.validate();
+        // Prevent rendering loop.
+        if (!validator.state.validating) {
+          validator.validate();
+        }
         return (
           <Flex flexDirection="column">
             <FieldSelect