[Mappings editor]: Addons and bug fixes

src/plugins/es_ui_shared/static/forms/components/field.tsx

@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FieldHook, FIELD_TYPES } from '../hook_form_lib';
 
 interface Props {
   field: FieldHook;
-  euiFieldProps?: Record<string, any>;
+  euiFieldProps?: { [key: string]: any };
   idAria?: string;
   [key: string]: any;
 }
@@ -34,16 +34,18 @@ import {
   ComboBoxField,
   MultiSelectField,
   SelectField,
+  SuperSelectField,
   ToggleField,
 } from './fields';
 
-const mapTypeToFieldComponent = {
+const mapTypeToFieldComponent: { [key: string]: ComponentType<any> } = {
   [FIELD_TYPES.TEXT]: TextField,
   [FIELD_TYPES.NUMBER]: NumericField,
   [FIELD_TYPES.CHECKBOX]: CheckBoxField,
   [FIELD_TYPES.COMBO_BOX]: ComboBoxField,
   [FIELD_TYPES.MULTI_SELECT]: MultiSelectField,
   [FIELD_TYPES.SELECT]: SelectField,
+  [FIELD_TYPES.SUPER_SELECT]: SuperSelectField,
   [FIELD_TYPES.TOGGLE]: ToggleField,
 };
 

src/plugins/es_ui_shared/static/forms/components/fields/index.ts

@@ -23,5 +23,6 @@ export * from './checkbox_field';
 export * from './combobox_field';
 export * from './multi_select_field';
 export * from './select_field';
+export * from './super_select_field';
 export * from './toggle_field';
 export * from './text_area_field';

src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx

@@ -17,20 +17,25 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { ReactNode, OptionHTMLAttributes } from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 
 import { FieldHook } from '../../hook_form_lib';
 import { getFieldValidityAndErrorMessage } from '../helpers';
 
 interface Props {
   field: FieldHook;
-  euiFieldProps?: Record<string, any>;
+  euiFieldProps: {
+    options: Array<
+      { text: string | ReactNode; [key: string]: any } & OptionHTMLAttributes<HTMLOptionElement>
+    >;
+    [key: string]: any;
+  };
   idAria?: string;
   [key: string]: any;
 }
 
-export const SelectField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
+export const SelectField = ({ field, euiFieldProps, ...rest }: Props) => {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
   return (
@@ -52,7 +57,7 @@ export const SelectField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
         hasNoInitialSelection={true}
         isInvalid={isInvalid}
         data-test-subj="select"
-        {...(euiFieldProps as { options: any; [key: string]: any })}
+        {...euiFieldProps}
       />
     </EuiFormRow>
   );

src/plugins/es_ui_shared/static/forms/components/fields/super_select_field.tsx

@@ -0,0 +1,64 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiSuperSelect, EuiSuperSelectProps } from '@elastic/eui';
+
+import { FieldHook } from '../../hook_form_lib';
+import { getFieldValidityAndErrorMessage } from '../helpers';
+
+interface Props {
+  field: FieldHook;
+  euiFieldProps: {
+    options: EuiSuperSelectProps<any>['options'];
+    [key: string]: any;
+  };
+  idAria?: string;
+  [key: string]: any;
+}
+
+export const SuperSelectField = ({ field, euiFieldProps, ...rest }: Props) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={rest['data-test-subj']}
+      describedByIds={rest.idAria ? [rest.idAria] : undefined}
+    >
+      <EuiSuperSelect
+        fullWidth
+        hasDividers
+        itemLayoutAlign="top"
+        valueOfSelected={field.value as string}
+        onChange={value => {
+          field.setValue(value);
+        }}
+        isInvalid={isInvalid}
+        data-test-subj="superSelect"
+        options
+        {...euiFieldProps}
+      />
+    </EuiFormRow>
+  );
+};

src/plugins/es_ui_shared/static/forms/helpers/field_validators/index.ts

@@ -25,3 +25,4 @@ export * from './index_name';
 export * from './contains_char';
 export * from './starts_with';
 export * from './index_pattern_field';
+export * from './lowercase_string';

src/plugins/es_ui_shared/static/forms/helpers/field_validators/lowercase_string.ts

@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ValidationFunc } from '../../hook_form_lib';
+import { isLowerCaseString } from '../../../validators/string';
+import { ERROR_CODE } from './types';
+
+export const lowerCaseStringField = (message: string) => (
+  ...args: Parameters<ValidationFunc>
+): ReturnType<ValidationFunc<any, ERROR_CODE>> => {
+  const [{ value }] = args;
+
+  if (typeof value !== 'string') {
+    return;
+  }
+
+  if (!isLowerCaseString(value)) {
+    return {
+      code: 'ERR_LOWERCASE_STRING',
+      message,
+    };
+  }
+};

src/plugins/es_ui_shared/static/forms/helpers/field_validators/types.ts

@@ -25,4 +25,5 @@ export type ERROR_CODE =
   | 'ERR_MIN_LENGTH'
   | 'ERR_MAX_LENGTH'
   | 'ERR_MIN_SELECTION'
-  | 'ERR_MAX_SELECTION';
+  | 'ERR_MAX_SELECTION'
+  | 'ERR_LOWERCASE_STRING';

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider.ts

@@ -51,7 +51,7 @@ export const FormDataProvider = ({ children, pathsToWatch }: Props) => {
     });
 
     return subscription.unsubscribe;
-  }, [pathsToWatch]);
+  }, [form, pathsToWatch]);
 
   return children(formData);
 };

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx

@@ -29,6 +29,7 @@ export interface Props {
   defaultValue?: unknown;
   component?: FunctionComponent<any> | 'input';
   componentProps?: Record<string, any>;
+  onChange?: (value: unknown) => void;
   children?: (field: FieldHook) => JSX.Element;
 }
 
@@ -38,6 +39,7 @@ export const UseField = ({
   defaultValue,
   component = 'input',
   componentProps = {},
+  onChange,
   children,
 }: Props) => {
   const form = useFormContext();
@@ -64,7 +66,7 @@ export const UseField = ({
     }
   }
 
-  const field = useField(form, path, configCopy);
+  const field = useField(form, path, configCopy, onChange);
 
   // Remove field from form when it is unmounted or if its path changes
   useEffect(() => {

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

@@ -26,6 +26,7 @@ export const FIELD_TYPES = {
   COMBO_BOX: 'comboBox',
   SELECT: 'select',
   MULTI_SELECT: 'multiSelect',
+  SUPER_SELECT: 'superSelect',
 };
 
 // Validation types

src/plugins/es_ui_shared/static/forms/hook_form_lib/form_context.tsx

@@ -19,7 +19,7 @@
 
 import React, { createContext, useContext } from 'react';
 
-import { FormHook } from './types';
+import { FormHook, FormData } from './types';
 
 const FormContext = createContext<FormHook<any> | undefined>(undefined);
 
@@ -32,7 +32,7 @@ export const FormProvider = ({ children, form }: Props) => (
   <FormContext.Provider value={form}>{children}</FormContext.Provider>
 );
 
-export const useFormContext = function<T extends object = Record<string, unknown>>() {
+export const useFormContext = function<T extends FormData = FormData>() {
   const context = useContext(FormContext) as FormHook<T>;
   if (context === undefined) {
     throw new Error('useFormContext must be used within a <FormProvider />');

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

@@ -22,7 +22,12 @@ import { useState, useEffect, useRef } from 'react';
 import { FormHook, FieldHook, FieldConfig, FieldValidateResponse, ValidationError } from '../types';
 import { FIELD_TYPES, VALIDATION_TYPES } from '../constants';
 
-export const useField = (form: FormHook, path: string, config: FieldConfig = {}) => {
+export const useField = (
+  form: FormHook,
+  path: string,
+  config: FieldConfig = {},
+  valueChangeListener?: (value: unknown) => void
+) => {
   const {
     type = FIELD_TYPES.TEXT,
     defaultValue = '',
@@ -49,6 +54,7 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
   const changeCounter = useRef(0);
   const inflightValidation = useRef<Promise<any> | null>(null);
   const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+  const isUnmounted = useRef<boolean>(false);
 
   // -- HELPERS
   // ----------------------------------
@@ -96,12 +102,23 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
       setIsChangingValue(true);
     }
 
+    const newValue = serializeOutput(value);
+
+    // Notify listener
+    if (valueChangeListener) {
+      valueChangeListener(newValue);
+    }
+
     // Update the form data observable
-    form.__updateFormDataAt(path, serializeOutput(value));
+    form.__updateFormDataAt(path, newValue);
 
     // Validate field(s) and set form.isValid flag
     await form.__validateFields(fieldsToValidateOnChange);
 
+    if (isUnmounted.current) {
+      return;
+    }
+
     /**
      * If we have set a delay to display the error message after the field value has changed,
      * we first check that this is the last "change iteration" (=== the last keystroke from the user)
@@ -398,6 +415,15 @@ export const useField = (form: FormHook, path: string, config: FieldConfig = {})
     };
   }, [value]);
 
+  /**
+   * On unmount
+   */
+  useEffect(() => {
+    return () => {
+      isUnmounted.current = true;
+    };
+  }, []);
+
   const field: FieldHook = {
     path,
     type,

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

@@ -29,11 +29,11 @@ const DEFAULT_OPTIONS = {
   stripEmptyFields: true,
 };
 
-interface UseFormReturn<T extends object> {
+interface UseFormReturn<T extends FormData> {
   form: FormHook<T>;
 }
 
-export function useForm<T extends object = FormData>(
+export function useForm<T extends FormData = FormData>(
   formConfig: FormConfig<T> | undefined = {}
 ): UseFormReturn<T> {
   const {
@@ -159,10 +159,11 @@ export function useForm<T extends object = FormData>(
   const addField: FormHook<T>['__addField'] = field => {
     fieldsRefs.current[field.path] = field;
 
-    // Only update the formData if the path does not exist (it is the _first_ time
-    // the field is added), to avoid entering an infinite loop when the form is re-rendered.
-    if (!{}.hasOwnProperty.call(formData$.current.value, field.path)) {
-      updateFormDataAt(field.path, field.__serializeOutput());
+    const currentValue = formData$.current.value[field.path];
+    const fieldValue = field.__serializeOutput();
+
+    if (currentValue !== fieldValue) {
+      updateFormDataAt(field.path, fieldValue);
     }
   };
 
@@ -179,10 +180,16 @@ export function useForm<T extends object = FormData>(
   };
 
   const setFieldValue: FormHook<T>['setFieldValue'] = (fieldName, value) => {
+    if (fieldsRefs.current[fieldName] === undefined) {
+      return;
+    }
     fieldsRefs.current[fieldName].setValue(value);
   };
 
   const setFieldErrors: FormHook<T>['setFieldErrors'] = (fieldName, errors) => {
+    if (fieldsRefs.current[fieldName] === undefined) {
+      return;
+    }
     fieldsRefs.current[fieldName].setErrors(errors);
   };
 
@@ -221,11 +228,10 @@ export function useForm<T extends object = FormData>(
 
   const subscribe: FormHook<T>['subscribe'] = handler => {
     const format = () => serializer(getFormData() as T);
-    const validate = async () => await validateAllFields();
 
     const subscription = formData$.current.subscribe(raw => {
       if (!isUnmounted.current) {
-        handler({ isValid, data: { raw, format }, validate });
+        handler({ isValid, data: { raw, format }, validate: validateAllFields });
       }
     });
 
@@ -241,8 +247,13 @@ export function useForm<T extends object = FormData>(
     const { resetValues = true } = resetOptions;
     const currentFormData = { ...formData$.current.value } as FormData;
     Object.entries(fieldsRefs.current).forEach(([path, field]) => {
-      const fieldValue = field.reset({ resetValue: resetValues });
-      currentFormData[path] = fieldValue;
+      // By resetting the form, some field might be unmounted. In order
+      // to avoid a race condition, we check that the field still exists.
+      const isFieldMounted = fieldsRefs.current[path] !== undefined;
+      if (isFieldMounted) {
+        const fieldValue = field.reset({ resetValue: resetValues });
+        currentFormData[path] = fieldValue;
+      }
     });
     if (resetValues) {
       formData$.current.next(currentFormData as T);