[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,7 +18,9 @@ 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> | |
+| [onClose](./kibana-plugin-core-public.overlayflyoutopenoptions.onclose.md) | <code>(flyout: OverlayRef) =&gt; void</code> | |
 | [ownFocus](./kibana-plugin-core-public.overlayflyoutopenoptions.ownfocus.md) | <code>boolean</code> | |
 | [size](./kibana-plugin-core-public.overlayflyoutopenoptions.size.md) | <code>EuiFlyoutSize</code> | |
 

docs/development/core/public/kibana-plugin-core-public.overlayflyoutopenoptions.onclose.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; [onClose](./kibana-plugin-core-public.overlayflyoutopenoptions.onclose.md)
+
+## OverlayFlyoutOpenOptions.onClose property
+
+<b>Signature:</b>
+
+```typescript
+onClose?: (flyout: OverlayRef) => void;
+```

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

@@ -84,6 +84,8 @@ export interface OverlayFlyoutOpenOptions {
  'data-test-subj'?: string;
  size?: EuiFlyoutSize;
  maxWidth?: boolean | number | string;
+ hideCloseButton?: boolean;
+ onClose?: (flyout: OverlayRef) => void;
 }
 
 interface StartDeps {
@@ -118,9 +120,17 @@ export class FlyoutService {
 
  this.activeFlyout = flyout;
 
+ const onCloseFlyout = () => {
+ if (options.onClose) {
+ options.onClose(flyout);
+ } else {
+ flyout.close();
+ }
+ };
+
  render(
  <i18n.Context>
- <EuiFlyout {...options} onClose={() => flyout.close()}>
+ <EuiFlyout {...options} onClose={onCloseFlyout}>
  <MountWrapper mount={mount} className="kbnOverlayMountWrapper" />
  </EuiFlyout>
  </i18n.Context>,

src/core/public/public.api.md

@@ -970,8 +970,12 @@ export interface OverlayFlyoutOpenOptions {
  // (undocumented)
  closeButtonAriaLabel?: string;
  // (undocumented)
+ hideCloseButton?: boolean;
+ // (undocumented)
  maxWidth?: boolean | number | string;
  // (undocumented)
+ onClose?: (flyout: OverlayRef) => void;
+ // (undocumented)
  ownFocus?: boolean;
  // (undocumented)
  size?: EuiFlyoutSize;

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

@@ -0,0 +1,51 @@
+---
+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.
+
+**Important:** If you form dynamically adds and removes fields, the `isModified` state will be set to `true` when a field is removed from the DOM **only** if it was declared in the form initial `defaultValue` object.
+
+## 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>
+ );
+};
+```
+
+### discard
+
+**Type:** `string[]` 
+
+If there are certain fields that you want to discard when checking if the form has been modified you can provide an array of field paths to the `discard` option.

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';