[Runtime field editor] Preview field against cluster data

docs/development/core/public/kibana-plugin-core-public.overlayflyoutopenoptions.hideclosebutton.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [OverlayFlyoutOpenOptions](./kibana-plugin-core-public.overlayflyoutopenoptions.md) &gt; [hideCloseButton](./kibana-plugin-core-public.overlayflyoutopenoptions.hideclosebutton.md)
+
+## OverlayFlyoutOpenOptions.hideCloseButton property
+
+<b>Signature:</b>
+
+```typescript
+hideCloseButton?: boolean;
+```

docs/development/core/public/kibana-plugin-core-public.overlayflyoutopenoptions.md

@@ -18,6 +18,7 @@ export interface OverlayFlyoutOpenOptions
 |  ["data-test-subj"](./kibana-plugin-core-public.overlayflyoutopenoptions._data-test-subj_.md) | <code>string</code> |  |
 |  [className](./kibana-plugin-core-public.overlayflyoutopenoptions.classname.md) | <code>string</code> |  |
 |  [closeButtonAriaLabel](./kibana-plugin-core-public.overlayflyoutopenoptions.closebuttonarialabel.md) | <code>string</code> |  |
+|  [hideCloseButton](./kibana-plugin-core-public.overlayflyoutopenoptions.hideclosebutton.md) | <code>boolean</code> |  |
 |  [maxWidth](./kibana-plugin-core-public.overlayflyoutopenoptions.maxwidth.md) | <code>boolean &#124; number &#124; string</code> |  |
 |  [ownFocus](./kibana-plugin-core-public.overlayflyoutopenoptions.ownfocus.md) | <code>boolean</code> |  |
 |  [size](./kibana-plugin-core-public.overlayflyoutopenoptions.size.md) | <code>EuiFlyoutSize</code> |  |

src/core/public/overlays/flyout/flyout_service.tsx

@@ -84,6 +84,7 @@ export interface OverlayFlyoutOpenOptions {
   'data-test-subj'?: string;
   size?: EuiFlyoutSize;
   maxWidth?: boolean | number | string;
+  hideCloseButton?: boolean;
 }
 
 interface StartDeps {

src/core/public/public.api.md

@@ -970,6 +970,8 @@ export interface OverlayFlyoutOpenOptions {
     // (undocumented)
     closeButtonAriaLabel?: string;
     // (undocumented)
+    hideCloseButton?: boolean;
+    // (undocumented)
     maxWidth?: boolean | number | string;
     // (undocumented)
     ownFocus?: boolean;

src/plugins/es_ui_shared/static/forms/docs/core/use_form_is_modified.mdx

@@ -0,0 +1,43 @@
+---
+id: formLibCoreUseFormIsModified
+slug: /form-lib/core/use-form-is-modified
+title: useFormIsModified()
+summary: Know when your form has been modified by the user
+tags: ['forms', 'kibana', 'dev']
+date: 2021-06-15
+---
+
+**Returns:** `boolean`
+
+There might be cases where you need to know if the form has been modified by the user. For example: the user is about to leave the form after making some changes, you might want to show a modal indicating that the changes will be lost.
+
+For that you can use the `useFormIsModified` hook which will update each time any of the field value changes. If the user makes a change and then undoes the change and puts the initial value back, the form **won't be marked** as modified.
+
+## Options
+
+### form
+
+**Type:** `FormHook`  
+
+The form hook object. It is only required to provide the form hook object in your **root form component**. 
+
+```js
+const RootFormComponent = () => {
+  // root form component, where the form object is declared
+  const { form } = useForm();
+  const isModified = useFormIsModified({ form });
+
+  return (
+    <Form form={form}>
+      <ChildComponent />
+    </Form>
+  );
+};
+
+const ChildComponent = () => {
+  const isModified = useFormIsModified(); // no need to provide the form object
+  return (
+    <div>...</div>
+  );
+};
+```

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

@@ -10,7 +10,7 @@ import React, { useEffect, FunctionComponent } from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, TestBed } from '../shared_imports';
-import { FormHook, OnUpdateHandler, FieldConfig } from '../types';
+import { FormHook, OnUpdateHandler, FieldConfig, FieldHook } from '../types';
 import { useForm } from '../hooks/use_form';
 import { Form } from './form';
 import { UseField } from './use_field';
@@ -54,6 +54,145 @@ describe('<UseField />', () => {
     });
   });
 
+  describe('state', () => {
+    describe('isPristine, isDirty, isModified', () => {
+      // Dummy component to handle object type data
+      const ObjectField: React.FC<{ field: FieldHook }> = ({ field: { setValue } }) => {
+        const onFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+          // Make sure to set the field value to an **object**
+          setValue(JSON.parse(e.target.value));
+        };
+
+        return <input onChange={onFieldChange} data-test-subj="testField" />;
+      };
+
+      interface FieldState {
+        isModified: boolean;
+        isDirty: boolean;
+        isPristine: boolean;
+        value: unknown;
+      }
+
+      const getChildrenFunc = (
+        onStateChange: (state: FieldState) => void,
+        Component?: React.ComponentType<{ field: FieldHook }>
+      ) => {
+        // This is the children passed down to the <UseField path="name" /> of our form
+        const childrenFunc = (field: FieldHook) => {
+          const { onChange, isModified, isPristine, isDirty, value } = field;
+
+          // Forward the field state to our jest.fn() spy
+          onStateChange({ isModified, isPristine, isDirty, value });
+
+          // Render the child component if any (useful to test the Object field type)
+          return Component ? (
+            <Component field={field} />
+          ) : (
+            <input onChange={onChange} data-test-subj="testField" />
+          );
+        };
+
+        return childrenFunc;
+      };
+
+      interface Props {
+        fieldProps: Record<string, any>;
+      }
+
+      const TestComp = ({ fieldProps }: Props) => {
+        const { form } = useForm();
+        return (
+          <Form form={form}>
+            <UseField path="name" {...fieldProps} />
+          </Form>
+        );
+      };
+
+      const onStateChangeSpy = jest.fn<void, [FieldState]>();
+      const lastFieldState = (): FieldState =>
+        onStateChangeSpy.mock.calls[onStateChangeSpy.mock.calls.length - 1][0];
+      const toString = (value: unknown): string =>
+        typeof value === 'string' ? value : JSON.stringify(value);
+
+      const setup = registerTestBed(TestComp, {
+        defaultProps: { onStateChangeSpy },
+        memoryRouter: { wrapComponent: false },
+      });
+
+      [
+        {
+          description: 'should update the state for field without default values',
+          initialValue: '',
+          changedValue: 'changed',
+          fieldProps: { children: getChildrenFunc(onStateChangeSpy) },
+        },
+        {
+          description: 'should update the state for field with default value in their config',
+          initialValue: 'initialValue',
+          changedValue: 'changed',
+          fieldProps: {
+            children: getChildrenFunc(onStateChangeSpy),
+            config: { defaultValue: 'initialValue' },
+          },
+        },
+        {
+          description: 'should update the state for field with default value passed through props',
+          initialValue: 'initialValue',
+          changedValue: 'changed',
+          fieldProps: {
+            children: getChildrenFunc(onStateChangeSpy),
+            defaultValue: 'initialValue',
+          },
+        },
+        // "Object" field type must be JSON.serialized to compare old and new value
+        // this test makes sure this is done and "isModified" is indeed "false" when
+        // putting back the original object
+        {
+          description: 'should update the state for field with object field type',
+          initialValue: { initial: 'value' },
+          changedValue: { foo: 'bar' },
+          fieldProps: {
+            children: getChildrenFunc(onStateChangeSpy, ObjectField),
+            defaultValue: { initial: 'value' },
+          },
+        },
+      ].forEach(({ description, fieldProps, initialValue, changedValue }) => {
+        test(description, async () => {
+          const { form } = await setup({ fieldProps });
+
+          expect(lastFieldState()).toEqual({
+            isPristine: true,
+            isDirty: false,
+            isModified: false,
+            value: initialValue,
+          });
+
+          await act(async () => {
+            form.setInputValue('testField', toString(changedValue));
+          });
+
+          expect(lastFieldState()).toEqual({
+            isPristine: false,
+            isDirty: true,
+            isModified: true,
+            value: changedValue,
+          });
+
+          // Put back to the initial value --> isModified should be false
+          await act(async () => {
+            form.setInputValue('testField', toString(initialValue));
+          });
+          expect(lastFieldState()).toEqual({
+            isPristine: false,
+            isDirty: true,
+            isModified: false,
+            value: initialValue,
+          });
+        });
+      });
+    });
+  });
+
   describe('validation', () => {
     let formHook: FormHook | null = null;
 

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

@@ -21,9 +21,15 @@ export const FormProvider = ({ children, form }: Props) => (
   <FormContext.Provider value={form}>{children}</FormContext.Provider>
 );
 
-export const useFormContext = function <T extends FormData = FormData>() {
+interface Options {
+  throwIfNotFound?: boolean;
+}
+
+export const useFormContext = function <T extends FormData = FormData>({
+  throwIfNotFound = true,
+}: Options = {}) {
   const context = useContext(FormContext) as FormHook<T>;
-  if (context === undefined) {
+  if (throwIfNotFound && context === undefined) {
     throw new Error('useFormContext must be used within a <FormProvider />');
   }
   return context;

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

@@ -9,3 +9,4 @@
 export { useField, InternalFieldConfig } from './use_field';
 export { useForm } from './use_form';
 export { useFormData } from './use_form_data';
+export { useFormIsModified } from './use_form_is_modified';

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

@@ -33,7 +33,7 @@ export const useField = <T, FormType = FormData, I = T>(
   const {
     type = FIELD_TYPES.TEXT,
     defaultValue = '', // The value to use a fallback mecanism when no initial value is passed
-    initialValue = config.defaultValue ?? '', // The value explicitly passed
+    initialValue = config.defaultValue ?? (('' as unknown) as I), // The value explicitly passed
     isIncludedInOutput = true,
     label = '',
     labelAppend = '',
@@ -69,6 +69,7 @@ export const useField = <T, FormType = FormData, I = T>(
   const [value, setStateValue] = useState<I>(deserializeValue);
   const [errors, setStateErrors] = useState<ValidationError[]>([]);
   const [isPristine, setPristine] = useState(true);
+  const [isModified, setIsModified] = useState(false);
   const [isValidating, setValidating] = useState(false);
   const [isChangingValue, setIsChangingValue] = useState(false);
   const [isValidated, setIsValidated] = useState(false);
@@ -456,58 +457,26 @@ export const useField = <T, FormType = FormData, I = T>(
     [errors]
   );
 
-  /**
-   * Handler to update the state and make sure the component is still mounted.
-   * When resetting the form, some field might get unmounted (e.g. a toggle on "true" becomes "false" and now certain fields should not be in the DOM).
-   * In that scenario there is a race condition in the "reset" method below, because the useState() hook is not synchronous.
-   *
-   * A better approach would be to have the state in a reducer and being able to update all values in a single dispatch action.
-   */
-  const updateStateIfMounted = useCallback(
-    (
-      state: 'isPristine' | 'isValidating' | 'isChangingValue' | 'isValidated' | 'errors' | 'value',
-      nextValue: any
-    ) => {
-      if (isMounted.current === false) {
-        return;
-      }
-
-      switch (state) {
-        case 'value':
-          return setValue(nextValue);
-        case 'errors':
-          return setStateErrors(nextValue);
-        case 'isChangingValue':
-          return setIsChangingValue(nextValue);
-        case 'isPristine':
-          return setPristine(nextValue);
-        case 'isValidated':
-          return setIsValidated(nextValue);
-        case 'isValidating':
-          return setValidating(nextValue);
-      }
-    },
-    [setValue]
-  );
-
   const reset: FieldHook<T, I>['reset'] = useCallback(
     (resetOptions = { resetValue: true }) => {
       const { resetValue = true, defaultValue: updatedDefaultValue } = resetOptions;
 
-      updateStateIfMounted('isPristine', true);
-      updateStateIfMounted('isValidating', false);
-      updateStateIfMounted('isChangingValue', false);
-      updateStateIfMounted('isValidated', false);
-      updateStateIfMounted('errors', []);
+      setPristine(true);
+      setIsModified(false);
+      setValidating(false);
+      setIsChangingValue(false);
+      setIsValidated(false);
+      setStateErrors([]);
 
       if (resetValue) {
         hasBeenReset.current = true;
         const newValue = deserializeValue(updatedDefaultValue ?? defaultValue);
-        updateStateIfMounted('value', newValue);
+        // updateStateIfMounted('value', newValue);
+        setValue(newValue);
         return newValue;
       }
     },
-    [updateStateIfMounted, deserializeValue, defaultValue]
+    [deserializeValue, defaultValue, setValue, setStateErrors]
   );
 
   // Don't take into account non blocker validation. Some are just warning (like trying to add a wrong ComboBox item)
@@ -523,6 +492,8 @@ export const useField = <T, FormType = FormData, I = T>(
       value,
       errors,
       isPristine,
+      isDirty: !isPristine,
+      isModified,
       isValid,
       isValidating,
       isValidated,
@@ -545,6 +516,7 @@ export const useField = <T, FormType = FormData, I = T>(
     helpText,
     value,
     isPristine,
+    isModified,
     errors,
     isValid,
     isValidating,
@@ -597,6 +569,15 @@ export const useField = <T, FormType = FormData, I = T>(
     };
   }, [onValueChange]);
 
+  useEffect(() => {
+    setIsModified(() => {
+      if (typeof value === 'object') {
+        return JSON.stringify(value) !== JSON.stringify(initialValue);
+      }
+      return value !== initialValue;
+    });
+  }, [value, initialValue]);
+
   useEffect(() => {
     if (!isMounted.current) {
       return;