Merge branch 'bl-nero/validation' into bl-nero/tooltips

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

@@ -35,13 +35,13 @@ import FieldInput from '../FieldInput';
 
 type StringListValidationResult = ValidationResult & {
   /**
-   * A list of validation results, one per label. Note: items 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 items in this list than the labels, the corresponding items will be
-   * treated as valid.
+   * 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.
    */
-  items?: ValidationResult[];
+  results?: ValidationResult[];
 };
 
 export type FieldMultiInputProps = {
@@ -119,7 +119,7 @@ export function FieldMultiInput({
               <FieldInput
                 value={val}
                 rule={precomputed(
-                  validationResult.items?.[i] ?? { valid: true }
+                  validationResult.results?.[i] ?? { valid: true }
                 )}
                 ref={toFocus.current === i ? setFocus : null}
                 onChange={e =>

web/packages/shared/components/Validation/Validation.tsx

@@ -110,7 +110,9 @@ export default class Validator extends Store<ValidatorState> {
 
 const ValidationContext = React.createContext<Validator | undefined>(undefined);
 
-type ValidationRenderFunction = (arg: { validator: Validator }) => any;
+type ValidationRenderFunction = (arg: {
+  validator: Validator;
+}) => React.ReactNode;
 
 /**
  * Installs a validation context that provides a {@link Validator} store. The
@@ -184,7 +186,7 @@ export function Validation(props: {
 export function useValidation(): Validator | undefined {
   const validator = React.useContext(ValidationContext);
   if (!validator) {
-    logger.warn('Missing Validation Context declaration');
+    throw new Error('useValidation() called without a validation context');
   }
   return useStore(validator);
 }

web/packages/shared/components/Validation/rules.test.ts

@@ -190,7 +190,7 @@ test.each([
     items: ['a', '', 'c'],
     expected: {
       valid: false,
-      items: [
+      results: [
         { valid: true, message: '' },
         { valid: false, message: 'required' },
         { valid: true, message: '' },
@@ -202,7 +202,7 @@ test.each([
     items: ['a', 'b', 'c'],
     expected: {
       valid: true,
-      items: [
+      results: [
         { valid: true, message: '' },
         { valid: true, message: '' },
         { valid: true, message: '' },

web/packages/shared/components/Validation/rules.ts

@@ -285,7 +285,7 @@ const requiredAll =
 /** A result of the {@link arrayOf} validation rule. */
 export type ArrayValidationResult<R = ValidationResult> = ValidationResult & {
   /** Results of validating each separate item. */
-  items: R[];
+  results: R[];
 };
 
 /** Validates an array by executing given rule on each of its elements. */
@@ -296,7 +296,7 @@ const arrayOf =
   (values: T[]) =>
   () => {
     const results = values.map(v => elementRule(v)());
-    return { items: results, valid: results.every(r => r.valid) };
+    return { results: results, valid: results.every(r => r.valid) };
   };
 
 /**

web/packages/teleport/src/components/LabelsInput/LabelsInput.test.tsx

@@ -183,7 +183,7 @@ describe('validation rules', () => {
     }));
     return {
       valid: results.every(r => r.name.valid && r.value.valid),
-      items: results,
+      results: results,
     };
   };
 

web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx

@@ -51,7 +51,7 @@ type LabelListValidationResult = ValidationResult & {
    * fewer items in this list than the labels, a default validation rule will
    * be used instead.
    */
-  items?: LabelValidationResult[];
+  results?: LabelValidationResult[];
 };
 
 type LabelValidationResult = {
@@ -154,7 +154,7 @@ export function LabelsInput({
       <Box>
         {labels.map((label, index) => {
           const validationItem: LabelValidationResult | undefined =
-            validationResult.items?.[index];
+            validationResult.results?.[index];
           return (
             <Box mb={2} key={index}>
               <Flex alignItems="start">
@@ -246,6 +246,6 @@ export const nonEmptyLabels: LabelsRule = labels => () => {
   }));
   return {
     valid: results.every(r => r.name.valid && r.value.valid),
-    items: results,
+    results: results,
   };
 };