[Mappings editor] Core

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -36,13 +36,15 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     deserializer = (value: unknown) => value,
   } = config;
 
-  const [value, setStateValue] = useState(
-    typeof defaultValue === 'function' ? deserializer(defaultValue()) : deserializer(defaultValue)
-  );
+  const initialValue =
+    typeof defaultValue === 'function' ? deserializer(defaultValue()) : deserializer(defaultValue);
+
+  const [value, setStateValue] = useState(initialValue);
   const [errors, setErrors] = useState<ValidationError[]>([]);
   const [isPristine, setPristine] = useState(true);
   const [isValidating, setValidating] = useState(false);
   const [isChangingValue, setIsChangingValue] = useState(false);
+  const [isValidated, setIsValidated] = useState(false);
   const validateCounter = useRef(0);
   const changeCounter = useRef(0);
   const inflightValidation = useRef<Promise<any> | null>(null);
@@ -262,6 +264,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
       validationType,
     } = validationData;
 
+    setIsValidated(true);
     setValidating(true);
 
     // By the time our validate function has reached completion, it’s possible
@@ -275,12 +278,10 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
         // This is the most recent invocation
         setValidating(false);
         // Update the errors array
-        setErrors(previousErrors => {
-          // First filter out the validation type we are currently validating
-          const filteredErrors = filterErrors(previousErrors, validationType);
-          return [...filteredErrors, ..._validationErrors];
-        });
+        const filteredErrors = filterErrors(errors, validationType);
+        setErrors([...filteredErrors, ..._validationErrors]);
       }
+
       return {
         isValid: _validationErrors.length === 0,
         errors: _validationErrors,
@@ -358,6 +359,15 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     return errorMessages ? errorMessages : null;
   };
 
+  const reset = () => {
+    setPristine(true);
+    setValidating(false);
+    setIsChangingValue(false);
+    setIsValidated(false);
+    setErrors([]);
+    setValue(initialValue);
+  };
+
   const serializeOutput: FieldHook['__serializeOutput'] = (rawValue = value) =>
     serializer(rawValue);
 
@@ -388,13 +398,15 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     form,
     isPristine,
     isValidating,
+    isValidated,
     isChangingValue,
     onChange,
     getErrorsMessages,
     setValue,
     setErrors: _setErrors,
     clearErrors,
     validate,
+    reset,
     __serializeOutput: serializeOutput,
   };
 

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts

@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { get } from 'lodash';
 
-import { FormHook, FormData, FieldConfig, FieldsMap, FormConfig } from '../types';
-import { mapFormFields, flattenObject, unflattenObject, Subject } from '../lib';
+import { FormHook, FieldHook, FormData, FieldConfig, FieldsMap, FormConfig } from '../types';
+import { mapFormFields, flattenObject, unflattenObject, Subject, Subscription } from '../lib';
 
 const DEFAULT_ERROR_DISPLAY_TIMEOUT = 500;
 const DEFAULT_OPTIONS = {
@@ -47,10 +47,11 @@ export function useForm<T extends object = FormData>(
   const formOptions = { ...DEFAULT_OPTIONS, ...options };
   const defaultValueDeserialized =
     Object.keys(defaultValue).length === 0 ? defaultValue : deserializer(defaultValue);
-  const [isSubmitted, setSubmitted] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
-  const [isValid, setIsValid] = useState(true);
+  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const fieldsRefs = useRef<FieldsMap>({});
+  const formUpdateSubscribers = useRef<Subscription[]>([]);
 
   // formData$ is an observable we can subscribe to in order to receive live
   // update of the raw form data. As an observable it does not trigger any React
@@ -59,6 +60,13 @@ export function useForm<T extends object = FormData>(
   // and updating its state to trigger the necessary view render.
   const formData$ = useRef<Subject<T>>(new Subject<T>(flattenObject(defaultValue) as T));
 
+  useEffect(() => {
+    return () => {
+      formUpdateSubscribers.current.forEach(subscription => subscription.unsubscribe());
+      formUpdateSubscribers.current = [];
+    };
+  }, []);
+
   // -- HELPERS
   // ----------------------------------
   const fieldsToArray = () => Object.values(fieldsRefs.current);
@@ -78,6 +86,12 @@ export function useForm<T extends object = FormData>(
     return fields;
   };
 
+  const updateFormDataAt: FormHook<T>['__updateFormDataAt'] = (path, value) => {
+    const currentFormData = formData$.current.value;
+    formData$.current.next({ ...currentFormData, [path]: value });
+    return formData$.current.value;
+  };
+
   // -- API
   // ----------------------------------
   const getFormData: FormHook<T>['getFormData'] = (getDataOptions = { unflatten: true }) =>
@@ -93,34 +107,52 @@ export function useForm<T extends object = FormData>(
           {} as T
         );
 
-  const updateFormDataAt: FormHook<T>['__updateFormDataAt'] = (path, value) => {
-    const currentFormData = formData$.current.value;
-    formData$.current.next({ ...currentFormData, [path]: value });
-    return formData$.current.value;
+  const isFieldValid = (field: FieldHook) =>
+    field.getErrorsMessages() === null && !field.isValidating;
+
+  const updateFormValidity = () => {
+    const fieldsArray = fieldsToArray();
+    const areAllFieldsValidated = fieldsArray.every(field => field.isValidated);
+
+    if (!areAllFieldsValidated) {
+      // If *not* all the fiels have been validated, the validity of the form is unknown, thus still "undefined"
+      return;
+    }
+
+    const isFormValid = fieldsArray.every(isFieldValid);
+
+    setIsValid(isFormValid);
+    return isFormValid;
   };
 
-  /**
-   * When a field value changes, validateFields() is called with the field name + any other fields
-   * declared in the "fieldsToValidateOnChange" (see the field config).
-   *
-   * When this method is called _without_ providing any fieldNames, we only need to validate fields that are pristine
-   * as the fields that are dirty have already been validated when their value changed.
-   */
   const validateFields: FormHook<T>['__validateFields'] = async fieldNames => {
     const fieldsToValidate = fieldNames
-      ? fieldNames.map(name => fieldsRefs.current[name]).filter(field => field !== undefined)
-      : fieldsToArray().filter(field => field.isPristine); // only validate fields that haven't been changed
+      .map(name => fieldsRefs.current[name])
+      .filter(field => field !== undefined);
 
-    const formData = getFormData({ unflatten: false });
+    if (fieldsToValidate.length === 0) {
+      // Nothing to validate
+      return true;
+    }
 
+    const formData = getFormData({ unflatten: false });
     await Promise.all(fieldsToValidate.map(field => field.validate({ formData })));
+    updateFormValidity();
 
-    const isFormValid = fieldsToArray().every(
-      field => field.getErrorsMessages() === null && !field.isValidating
-    );
-    setIsValid(isFormValid);
+    return fieldsToValidate.every(isFieldValid);
+  };
 
-    return isFormValid;
+  const validateAllFields = async (): Promise<boolean> => {
+    const fieldsToValidate = fieldsToArray().filter(field => !field.isValidated);
+
+    if (fieldsToValidate.length === 0) {
+      // Nothing left to validate, all fields are already validated.
+      return isValid!;
+    }
+
+    await validateFields(fieldsToValidate.map(field => field.path));
+
+    return updateFormValidity()!;
   };
 
   const addField: FormHook<T>['__addField'] = field => {
@@ -170,32 +202,59 @@ export function useForm<T extends object = FormData>(
     }
 
     if (!isSubmitted) {
-      setSubmitted(true); // User has attempted to submit the form at least once
+      setIsSubmitted(true); // User has attempted to submit the form at least once
     }
     setSubmitting(true);
 
-    const isFormValid = await validateFields();
+    const isFormValid = await validateAllFields();
     const formData = serializer(getFormData() as T);
 
     if (onSubmit) {
-      await onSubmit(formData, isFormValid);
+      await onSubmit(formData, isFormValid!);
     }
 
     setSubmitting(false);
 
-    return { data: formData, isValid: isFormValid };
+    return { data: formData, isValid: isFormValid! };
+  };
+
+  const subscribe: FormHook<T>['subscribe'] = handler => {
+    const format = () => serializer(getFormData() as T);
+    const validate = async () => await validateAllFields();
+
+    const subscription = formData$.current.subscribe(raw => {
+      handler({ isValid, data: { raw, format }, validate });
+    });
+
+    formUpdateSubscribers.current.push(subscription);
+    return subscription;
+  };
+
+  /**
+   * Reset all the fields of the form to their default values
+   * and reset all the states to their original value.
+   */
+  const reset: FormHook<T>['reset'] = () => {
+    Object.entries(fieldsRefs.current).forEach(([path, field]) => {
+      field.reset();
+    });
+    setIsSubmitted(false);
+    setSubmitting(false);
+    setIsValid(undefined);
   };
 
   const form: FormHook<T> = {
     isSubmitted,
     isSubmitting,
     isValid,
     submit: submitForm,
+    subscribe,
     setFieldValue,
     setFieldErrors,
     getFields,
     getFormData,
     getFieldDefaultValue,
+    reset,
     __options: formOptions,
     __formData$: formData$,
     __updateFormDataAt: updateFormDataAt,

src/plugins/es_ui_shared/static/forms/hook_form_lib/lib/utils.ts

@@ -33,7 +33,7 @@ export const flattenObject = (
 ): Record<string, any> =>
   Object.entries(object).reduce((acc, [key, value]) => {
     const updatedPaths = [...paths, key];
-    if (value !== null && typeof value === 'object') {
+    if (value !== null && !Array.isArray(value) && typeof value === 'object') {
       return flattenObject(value, to, updatedPaths);
     }
     acc[updatedPaths.join('.')] = value;

src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts

@@ -18,7 +18,7 @@
  */
 
 import { ReactNode, ChangeEvent, FormEvent, MouseEvent, MutableRefObject } from 'react';
-import { Subject } from './lib';
+import { Subject, Subscription } from './lib';
 
 // This type will convert all optional property to required ones
 // Comes from https://github.com/microsoft/TypeScript/issues/15012#issuecomment-365453623
@@ -27,25 +27,28 @@ type Required<T> = T extends object ? { [P in keyof T]-?: NonNullable<T[P]> } :
 export interface FormHook<T extends object = FormData> {
   readonly isSubmitted: boolean;
   readonly isSubmitting: boolean;
-  readonly isValid: boolean;
+  readonly isValid: boolean | undefined;
   submit: (e?: FormEvent<HTMLFormElement> | MouseEvent) => Promise<{ data: T; isValid: boolean }>;
+  subscribe: (handler: OnUpdateHandler<T>) => Subscription;
   setFieldValue: (fieldName: string, value: FieldValue) => void;
   setFieldErrors: (fieldName: string, errors: ValidationError[]) => void;
   getFields: () => FieldsMap;
   getFormData: (options?: { unflatten?: boolean }) => T;
   getFieldDefaultValue: (fieldName: string) => unknown;
+  reset: () => void;
   readonly __options: Required<FormOptions>;
   readonly __formData$: MutableRefObject<Subject<T>>;
   __addField: (field: FieldHook) => void;
   __removeField: (fieldNames: string | string[]) => void;
-  __validateFields: (fieldNames?: string[]) => Promise<boolean>;
+  __validateFields: (fieldNames: string[]) => Promise<boolean>;
   __updateFormDataAt: (field: string, value: unknown) => T;
   __readFieldConfigFromSchema: (fieldName: string) => FieldConfig;
 }
 
 export interface FormSchema<T extends object = FormData> {
   [key: string]: FormSchemaEntry<T>;
 }
+
 type FormSchemaEntry<T extends object> =
   | FieldConfig<T>
   | Array<FieldConfig<T>>
@@ -60,6 +63,17 @@ export interface FormConfig<T extends object = FormData> {
   options?: FormOptions;
 }
 
+export interface OnFormUpdateArg<T extends object> {
+  data: {
+    raw: { [key: string]: any };
+    format: () => T;
+  };
+  validate: () => Promise<boolean>;
+  isValid?: boolean;
+}
+
+export type OnUpdateHandler<T extends object> = (arg: OnFormUpdateArg<T>) => void;
+
 export interface FormOptions {
   errorDisplayDelay?: number;
   /**
@@ -77,6 +91,7 @@ export interface FieldHook {
   readonly errors: ValidationError[];
   readonly isPristine: boolean;
   readonly isValidating: boolean;
+  readonly isValidated: boolean;
   readonly isChangingValue: boolean;
   readonly form: FormHook<any>;
   getErrorsMessages: (args?: {
@@ -92,6 +107,7 @@ export interface FieldHook {
     value?: unknown;
     validationType?: string;
   }) => FieldValidateResponse | Promise<FieldValidateResponse>;
+  reset: () => void;
   __serializeOutput: (rawValue?: unknown) => unknown;
 }
 

x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx

@@ -83,7 +83,7 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
   });
 
   useEffect(() => {
-    onStepValidityChange(form.isValid);
+    onStepValidityChange(form.isValid === undefined ? true : form.isValid);
   }, [form.isValid]);
 
   useEffect(() => {

x-pack/legacy/plugins/index_management/public/index.scss

@@ -10,4 +10,5 @@
 //   indChart__legend--small
 //   indChart__legend-isLoading
 
-@import 'index_management';
+@import 'index_management';
+@import '../static/ui/styles'

x-pack/legacy/plugins/index_management/static/ui/_styles.scss

@@ -0,0 +1 @@
+@import "./components/mappings_editor/styles"