From f7f52f957e5e9e2010a5f86fdfd7c11eca891e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 28 Oct 2020 15:10:42 +0100 Subject: [PATCH 01/17] Create basic runtime field editor + add documentation lib --- .../components/runtime_field_editor/index.ts | 7 ++ .../runtime_field_editor.test.tsx | 71 +++++++++++++++++++ .../runtime_field_editor.tsx | 24 +++++++ .../runtime_field_form.test.tsx | 14 ++-- .../runtime_field_form/runtime_field_form.tsx | 10 +-- .../public/lib/documentation.ts | 16 +++++ .../runtime_fields/public/lib/index.ts | 7 ++ 7 files changed, 139 insertions(+), 10 deletions(-) create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor/index.ts create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.tsx create mode 100644 x-pack/plugins/runtime_fields/public/lib/documentation.ts create mode 100644 x-pack/plugins/runtime_fields/public/lib/index.ts diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/index.ts b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/index.ts new file mode 100644 index 0000000000000..62fa0bf991542 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { RuntimeFieldEditor } from './runtime_field_editor'; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx new file mode 100644 index 0000000000000..b0b3752944db2 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx @@ -0,0 +1,71 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { act } from 'react-dom/test-utils'; +import { DocLinksStart } from 'src/core/public'; + +import '../../__jest__/setup_environment'; +import { registerTestBed, TestBed } from '../../test_utils'; +import { RuntimeField } from '../../types'; +import { RuntimeFieldForm, FormState } from '../runtime_field_form/runtime_field_form'; +import { RuntimeFieldEditor, Props } from './runtime_field_editor'; + +const setup = (props?: Props) => + registerTestBed(RuntimeFieldEditor, { + memoryRouter: { + wrapComponent: false, + }, + })(props) as TestBed; + +const docLinks: DocLinksStart = { + ELASTIC_WEBSITE_URL: 'htts://jestTest.elastic.co', + DOC_LINK_VERSION: 'jest', + links: {} as any, +}; + +describe('Runtime field editor', () => { + let testBed: TestBed; + let onChange: jest.Mock = jest.fn(); + + const lastOnChangeCall = (): FormState[] => onChange.mock.calls[onChange.mock.calls.length - 1]; + + beforeEach(() => { + onChange = jest.fn(); + }); + + test('should render the )', () => { + testBed = setup({ docLinks }); + const { component } = testBed; + + expect(component.find(RuntimeFieldForm).length).toBe(1); + }); + + test('should accept a defaultValue and onChange prop to forward the form state', async () => { + const defaultValue: RuntimeField = { + name: 'foo', + type: 'date', + script: 'test=123', + }; + testBed = setup({ onChange, defaultValue, docLinks }); + + expect(onChange).toHaveBeenCalled(); + + let lastState = lastOnChangeCall()[0]; + expect(lastState.isValid).toBe(undefined); + expect(lastState.isSubmitted).toBe(false); + expect(lastState.submit).toBeDefined(); + + let data; + await act(async () => { + ({ data } = await lastState.submit()); + }); + expect(data).toEqual(defaultValue); + + // Make sure that both isValid and isSubmitted state are now "true" + lastState = lastOnChangeCall()[0]; + expect(lastState.isValid).toBe(true); + expect(lastState.isSubmitted).toBe(true); + }); +}); diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.tsx new file mode 100644 index 0000000000000..07935be171fd2 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.tsx @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { DocLinksStart } from 'src/core/public'; + +import { RuntimeField } from '../../types'; +import { getLinks } from '../../lib'; +import { RuntimeFieldForm, Props as FormProps } from '../runtime_field_form/runtime_field_form'; + +export interface Props { + docLinks: DocLinksStart; + defaultValue?: RuntimeField; + onChange?: FormProps['onChange']; +} + +export const RuntimeFieldEditor = ({ defaultValue, onChange, docLinks }: Props) => { + const links = getLinks(docLinks); + + return ; +}; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.test.tsx index e380e0b44aac5..1829514856eed 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.test.tsx @@ -17,7 +17,9 @@ const setup = (props?: Props) => }, })(props) as TestBed; -const docsBaseUri = 'https://jestTest.elastic.co'; +const links = { + painlessSyntax: 'https://jestTest.elastic.co/to-be-defined.html', +}; describe('Runtime field form', () => { let testBed: TestBed; @@ -30,7 +32,7 @@ describe('Runtime field form', () => { }); test('should render expected 3 fields (name, returnType, script)', () => { - testBed = setup({ docsBaseUri }); + testBed = setup({ links }); const { exists } = testBed; expect(exists('nameField')).toBe(true); @@ -39,11 +41,11 @@ describe('Runtime field form', () => { }); test('should have a link to learn more about painless syntax', () => { - testBed = setup({ docsBaseUri }); + testBed = setup({ links }); const { exists, find } = testBed; expect(exists('painlessSyntaxLearnMoreLink')).toBe(true); - expect(find('painlessSyntaxLearnMoreLink').props().href).toContain(docsBaseUri); + expect(find('painlessSyntaxLearnMoreLink').props().href).toBe(links.painlessSyntax); }); test('should accept a "defaultValue" prop', () => { @@ -52,7 +54,7 @@ describe('Runtime field form', () => { type: 'date', script: 'test=123', }; - testBed = setup({ defaultValue, docsBaseUri }); + testBed = setup({ defaultValue, links }); const { find } = testBed; expect(find('nameField.input').props().value).toBe(defaultValue.name); @@ -66,7 +68,7 @@ describe('Runtime field form', () => { type: 'date', script: 'test=123', }; - testBed = setup({ onChange, defaultValue, docsBaseUri }); + testBed = setup({ onChange, defaultValue, links }); expect(onChange).toHaveBeenCalled(); diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx index 77ba4b81d65ee..56aeba3213b2c 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx @@ -28,12 +28,14 @@ export interface FormState { } export interface Props { - docsBaseUri: string; + links: { + painlessSyntax: string; + }; defaultValue?: RuntimeField; onChange?: (state: FormState) => void; } -const RuntimeFieldFormComp = ({ defaultValue, onChange, docsBaseUri }: Props) => { +const RuntimeFieldFormComp = ({ defaultValue, onChange, links }: Props) => { const { form } = useForm({ defaultValue, schema }); const { submit, isValid: isFormValid, isSubmitted } = form; @@ -94,7 +96,7 @@ const RuntimeFieldFormComp = ({ defaultValue, onChange, docsBaseUri }: Props) => {/* Script */} path="script"> - {({ value, setValue, label, helpText, isValid, getErrorsMessages }) => { + {({ value, setValue, label, isValid, getErrorsMessages }) => { return ( { + const { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL } = docLinks; + const docsBase = `${ELASTIC_WEBSITE_URL}guide/en`; + const esDocsBase = `${docsBase}/elasticsearch/reference/${DOC_LINK_VERSION}`; + + return { + painlessSyntax: `${esDocsBase}/to-be-defined.html`, + }; +}; diff --git a/x-pack/plugins/runtime_fields/public/lib/index.ts b/x-pack/plugins/runtime_fields/public/lib/index.ts new file mode 100644 index 0000000000000..11c9914bf2e81 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/lib/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { getLinks } from './documentation'; From e909564712aec1aa498d7e49ffb6a5875e4c2b8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 28 Oct 2020 15:23:46 +0100 Subject: [PATCH 02/17] Export editor instead of form --- x-pack/plugins/runtime_fields/public/components/index.ts | 2 ++ x-pack/plugins/runtime_fields/public/index.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/runtime_fields/public/components/index.ts b/x-pack/plugins/runtime_fields/public/components/index.ts index 461974a870446..9f1c3122e9c3b 100644 --- a/x-pack/plugins/runtime_fields/public/components/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/index.ts @@ -5,3 +5,5 @@ */ export { RuntimeFieldForm } from './runtime_field_form'; + +export { RuntimeFieldEditor } from './runtime_field_editor'; diff --git a/x-pack/plugins/runtime_fields/public/index.ts b/x-pack/plugins/runtime_fields/public/index.ts index 166cc0e734468..08772662bc5fe 100644 --- a/x-pack/plugins/runtime_fields/public/index.ts +++ b/x-pack/plugins/runtime_fields/public/index.ts @@ -5,7 +5,7 @@ */ import { RuntimeFieldsPlugin } from './plugin'; -export { RuntimeFieldForm } from './components'; +export { RuntimeFieldEditor } from './components'; export { RUNTIME_FIELD_OPTIONS } from './constants'; export { RuntimeField, RuntimeType } from './types'; From 061f16f21da33ac86b1c29c83a8d37f21c959ebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Thu, 29 Oct 2020 10:50:50 +0100 Subject: [PATCH 03/17] Add RuntimeFieldEditorFlyout --- .../public/__jest__/setup_environment.tsx | 4 +- .../runtime_fields/public/components/index.ts | 2 + .../runtime_field_editor.test.tsx | 2 +- .../runtime_field_editor_flyout/index.ts | 7 + .../runtime_field_editor_flyout.test.tsx | 144 ++++++++++++++++++ .../runtime_field_editor_flyout.tsx | 124 +++++++++++++++ .../components/runtime_field_form/index.ts | 2 +- x-pack/plugins/runtime_fields/public/index.ts | 2 +- 8 files changed, 282 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx diff --git a/x-pack/plugins/runtime_fields/public/__jest__/setup_environment.tsx b/x-pack/plugins/runtime_fields/public/__jest__/setup_environment.tsx index 4453556621077..ccfe426cfdb09 100644 --- a/x-pack/plugins/runtime_fields/public/__jest__/setup_environment.tsx +++ b/x-pack/plugins/runtime_fields/public/__jest__/setup_environment.tsx @@ -13,8 +13,8 @@ jest.mock('../../../../../src/plugins/kibana_react/public', () => { data-test-subj={props['data-test-subj'] || 'mockCodeEditor'} data-value={props.value} value={props.value} - onChange={(syntheticEvent: any) => { - props.onChange([syntheticEvent['0']]); + onChange={(e: React.ChangeEvent) => { + props.onChange(e.target.value); }} /> ); diff --git a/x-pack/plugins/runtime_fields/public/components/index.ts b/x-pack/plugins/runtime_fields/public/components/index.ts index 9f1c3122e9c3b..433aa9acb0bb9 100644 --- a/x-pack/plugins/runtime_fields/public/components/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/index.ts @@ -7,3 +7,5 @@ export { RuntimeFieldForm } from './runtime_field_form'; export { RuntimeFieldEditor } from './runtime_field_editor'; + +export { RuntimeFieldEditorFlyout } from './runtime_field_editor_flyout'; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx index b0b3752944db2..cf593736a8916 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx @@ -35,7 +35,7 @@ describe('Runtime field editor', () => { onChange = jest.fn(); }); - test('should render the )', () => { + test('should render the ', () => { testBed = setup({ docLinks }); const { component } = testBed; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts new file mode 100644 index 0000000000000..62f7dcdea3dc1 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { RuntimeFieldEditorFlyout } from './runtime_field_editor_flyout'; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx new file mode 100644 index 0000000000000..76d4729ba7232 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx @@ -0,0 +1,144 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { act } from 'react-dom/test-utils'; +import { DocLinksStart } from 'src/core/public'; + +import '../../__jest__/setup_environment'; +import { registerTestBed, TestBed } from '../../test_utils'; +import { RuntimeField } from '../../types'; +import { RuntimeFieldEditorFlyout, Props } from './runtime_field_editor_flyout'; + +const setup = (props?: Props) => + registerTestBed(RuntimeFieldEditorFlyout, { + memoryRouter: { + wrapComponent: false, + }, + })(props) as TestBed; + +const docLinks: DocLinksStart = { + ELASTIC_WEBSITE_URL: 'htts://jestTest.elastic.co', + DOC_LINK_VERSION: 'jest', + links: {} as any, +}; + +const noop = () => {}; +const defaultProps = { onSave: noop, onCancel: noop, docLinks }; + +describe('Runtime field editor flyout', () => { + test('should have a flyout title', () => { + const { exists, find } = setup(defaultProps); + + expect(exists('flyoutTitle')).toBe(true); + expect(find('flyoutTitle').text()).toBe('Create new field'); + }); + + test('should allow a runtime field to be provided', () => { + const field: RuntimeField = { + name: 'foo', + type: 'date', + script: 'test=123', + }; + + const { find } = setup({ ...defaultProps, field }); + + expect(find('flyoutTitle').text()).toBe(`Edit ${field.name} field`); + expect(find('nameField.input').props().value).toBe(field.name); + expect(find('typeField').props().value).toBe(field.type); + expect(find('scriptField').props().value).toBe(field.script); + }); + + test('should accept an onSave prop', async () => { + const field: RuntimeField = { + name: 'foo', + type: 'date', + script: 'test=123', + }; + const onSave: jest.Mock = jest.fn(); + + const { find } = setup({ ...defaultProps, onSave, field }); + + await act(async () => { + find('saveFieldButton').simulate('click'); + }); + + expect(onSave).toHaveBeenCalled(); + const fieldReturned: RuntimeField = onSave.mock.calls[onSave.mock.calls.length - 1][0]; + expect(fieldReturned).toEqual(field); + }); + + test('should accept an onCancel prop', () => { + const onCancel = jest.fn(); + const { find } = setup({ ...defaultProps, onCancel }); + + find('closeFlyoutButton').simulate('click'); + + expect(onCancel).toHaveBeenCalled(); + }); + + describe('validation', () => { + test('should validate the fields and prevent saving invalid form', async () => { + const onSave: jest.Mock = jest.fn(); + + const { find, form, component } = setup({ ...defaultProps, onSave }); + + expect(find('saveFieldButton').props().disabled).toBe(false); + + await act(async () => { + find('saveFieldButton').simulate('click'); + }); + component.update(); + + expect(onSave).toHaveBeenCalledTimes(0); + expect(find('saveFieldButton').props().disabled).toBe(true); + expect(form.getErrorsMessages()).toEqual([ + 'Give a name to the field.', + 'Script must emit() a value.', + ]); + }); + + test('should forward changes to the form', async () => { + const onSave: jest.Mock = jest.fn(); + + const { find, form } = setup({ ...defaultProps, onSave }); + + act(() => { + form.setInputValue('nameField.input', 'someName'); + form.setInputValue('scriptField', 'script=123'); + }); + + await act(async () => { + find('saveFieldButton').simulate('click'); + }); + + expect(onSave).toHaveBeenCalled(); + let fieldReturned: RuntimeField = onSave.mock.calls[onSave.mock.calls.length - 1][0]; + expect(fieldReturned).toEqual({ + name: 'someName', + type: 'keyword', // default to keyword + script: 'script=123', + }); + + // Change the type and make sure it is forwarded + act(() => { + find('typeField').simulate('change', [ + { + label: 'Other type', + value: 'other_type', + }, + ]); + }); + await act(async () => { + find('saveFieldButton').simulate('click'); + }); + fieldReturned = onSave.mock.calls[onSave.mock.calls.length - 1][0]; + expect(fieldReturned).toEqual({ + name: 'someName', + type: 'other_type', + script: 'script=123', + }); + }); + }); +}); diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx new file mode 100644 index 0000000000000..f5814b7acd356 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx @@ -0,0 +1,124 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { useCallback, useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiFlyoutHeader, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiButton, +} from '@elastic/eui'; +import { DocLinksStart } from 'src/core/public'; + +import { RuntimeField } from '../../types'; +import { FormState } from '../runtime_field_form'; +import { RuntimeFieldEditor } from '../runtime_field_editor'; + +const geti18nTexts = (field?: RuntimeField) => { + return { + flyoutTitle: field + ? i18n.translate('xpack.runtimeFields.editor.flyoutEditFieldTitle', { + defaultMessage: 'Edit {fieldName} field', + values: { + fieldName: field.name, + }, + }) + : i18n.translate('xpack.runtimeFields.editor.flyoutDefaultTitle', { + defaultMessage: 'Create new field', + }), + closeButtonLabel: i18n.translate('xpack.runtimeFields.editor.flyoutCloseButtonLabel', { + defaultMessage: 'Close', + }), + saveButtonLabel: i18n.translate('xpack.runtimeFields.editor.flyoutSaveButtonLabel', { + defaultMessage: 'Save', + }), + }; +}; + +export interface Props { + /** + * Handler for the "save" footer button + */ + onSave: (field: RuntimeField) => void; + /** + * Handler for the "cancel" footer button + */ + onCancel: () => void; + /** + * The docLinks start service from core + */ + docLinks: DocLinksStart; + /** + * An optional runtime field to edit + */ + field?: RuntimeField; +} + +export const RuntimeFieldEditorFlyout = ({ onSave, onCancel, docLinks, field }: Props) => { + const i18nTexts = geti18nTexts(field); + + const [formState, setFormState] = useState({ + isSubmitted: false, + isValid: field ? true : undefined, + submit: field + ? async () => ({ isValid: true, data: field }) + : async () => ({ isValid: false, data: {} as RuntimeField }), + }); + const { submit, isValid: isFormValid } = formState; + + const onSaveField = useCallback(async () => { + const { isValid, data } = await submit(); + + if (isValid) { + onSave(data); + } + }, [submit, onSave]); + + return ( + <> + + +

{i18nTexts.flyoutTitle}

+ + + + + + + + + + + onCancel()} + data-test-subj="closeFlyoutButton" + > + {i18nTexts.closeButtonLabel} + + + + + onSaveField()} + data-test-subj="saveFieldButton" + disabled={isFormValid === false} + fill + > + {i18nTexts.saveButtonLabel} + + + + + + ); +}; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/index.ts b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/index.ts index 461974a870446..4041a04aec4d1 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { RuntimeFieldForm } from './runtime_field_form'; +export { RuntimeFieldForm, FormState } from './runtime_field_form'; diff --git a/x-pack/plugins/runtime_fields/public/index.ts b/x-pack/plugins/runtime_fields/public/index.ts index 08772662bc5fe..5653f41f59747 100644 --- a/x-pack/plugins/runtime_fields/public/index.ts +++ b/x-pack/plugins/runtime_fields/public/index.ts @@ -5,7 +5,7 @@ */ import { RuntimeFieldsPlugin } from './plugin'; -export { RuntimeFieldEditor } from './components'; +export { RuntimeFieldEditorFlyout } from './components'; export { RUNTIME_FIELD_OPTIONS } from './constants'; export { RuntimeField, RuntimeType } from './types'; From 8c3f7354ca320c42e6f8fd29d7590dafbbcc4a87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Thu, 29 Oct 2020 14:03:07 +0100 Subject: [PATCH 04/17] Add backgroundColor to script editor --- .../components/runtime_field_form/runtime_field_form.scss | 5 +++++ .../components/runtime_field_form/runtime_field_form.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss new file mode 100644 index 0000000000000..c4b6b33a73230 --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss @@ -0,0 +1,5 @@ +.runtimeFieldEditor_form { + & .monaco-editor-background, & .margin-view-overlays { + background-color: $euiColorLightestShade; + } +} diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx index 56aeba3213b2c..d6b6b226fa6a2 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx @@ -18,9 +18,10 @@ import { import { useForm, Form, FormHook, UseField, TextField, CodeEditor } from '../../shared_imports'; import { RuntimeField } from '../../types'; import { RUNTIME_FIELD_OPTIONS } from '../../constants'; - import { schema } from './schema'; +import './runtime_field_form.scss'; + export interface FormState { isValid: boolean | undefined; isSubmitted: boolean; @@ -46,7 +47,7 @@ const RuntimeFieldFormComp = ({ defaultValue, onChange, links }: Props) => { }, [onChange, isFormValid, isSubmitted, submit]); return ( -
+ {/* Name */} From 1f5041357a496e727c50ef1dc89fa3db4c4ab6cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Thu, 29 Oct 2020 14:08:21 +0100 Subject: [PATCH 05/17] Set link to painless syntax --- x-pack/plugins/runtime_fields/public/lib/documentation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/runtime_fields/public/lib/documentation.ts b/x-pack/plugins/runtime_fields/public/lib/documentation.ts index 5d856dd5722bd..87eab8b7ed997 100644 --- a/x-pack/plugins/runtime_fields/public/lib/documentation.ts +++ b/x-pack/plugins/runtime_fields/public/lib/documentation.ts @@ -8,9 +8,9 @@ import { DocLinksStart } from 'src/core/public'; export const getLinks = (docLinks: DocLinksStart) => { const { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL } = docLinks; const docsBase = `${ELASTIC_WEBSITE_URL}guide/en`; - const esDocsBase = `${docsBase}/elasticsearch/reference/${DOC_LINK_VERSION}`; + const painlessDocsBase = `${docsBase}/elasticsearch/painless/${DOC_LINK_VERSION}`; return { - painlessSyntax: `${esDocsBase}/to-be-defined.html`, + painlessSyntax: `${painlessDocsBase}/painless-lang-spec.html`, }; }; From f7e80228d634d34958238f6e224bc043cc98e729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 11:06:53 +0100 Subject: [PATCH 06/17] Display callout error in flyout footer --- .../runtime_field_editor_flyout.test.tsx | 6 ++++-- .../runtime_field_editor_flyout.tsx | 21 +++++++++++++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx index 76d4729ba7232..e13a07c159fd8 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx @@ -82,7 +82,7 @@ describe('Runtime field editor flyout', () => { test('should validate the fields and prevent saving invalid form', async () => { const onSave: jest.Mock = jest.fn(); - const { find, form, component } = setup({ ...defaultProps, onSave }); + const { find, exists, form, component } = setup({ ...defaultProps, onSave }); expect(find('saveFieldButton').props().disabled).toBe(false); @@ -97,9 +97,11 @@ describe('Runtime field editor flyout', () => { 'Give a name to the field.', 'Script must emit() a value.', ]); + expect(exists('formError')).toBe(true); + expect(find('formError').text()).toBe('Fix errors in form before continuing.'); }); - test('should forward changes to the form', async () => { + test('should forward values from the form', async () => { const onSave: jest.Mock = jest.fn(); const { find, form } = setup({ ...defaultProps, onSave }); diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx index f5814b7acd356..5eabde78f23da 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx @@ -14,6 +14,8 @@ import { EuiFlexItem, EuiButtonEmpty, EuiButton, + EuiSpacer, + EuiCallOut, } from '@elastic/eui'; import { DocLinksStart } from 'src/core/public'; @@ -39,6 +41,9 @@ const geti18nTexts = (field?: RuntimeField) => { saveButtonLabel: i18n.translate('xpack.runtimeFields.editor.flyoutSaveButtonLabel', { defaultMessage: 'Save', }), + formErrorsCalloutTitle: i18n.translate('xpack.runtimeFields.editor.validationErrorTitle', { + defaultMessage: 'Fix errors in form before continuing.', + }), }; }; @@ -71,7 +76,7 @@ export const RuntimeFieldEditorFlyout = ({ onSave, onCancel, docLinks, field }: ? async () => ({ isValid: true, data: field }) : async () => ({ isValid: false, data: {} as RuntimeField }), }); - const { submit, isValid: isFormValid } = formState; + const { submit, isValid: isFormValid, isSubmitted } = formState; const onSaveField = useCallback(async () => { const { isValid, data } = await submit(); @@ -94,6 +99,18 @@ export const RuntimeFieldEditorFlyout = ({ onSave, onCancel, docLinks, field }: + {isSubmitted && !isFormValid && ( + <> + + + + )} + onSaveField()} data-test-subj="saveFieldButton" - disabled={isFormValid === false} + disabled={isSubmitted && !isFormValid} fill > {i18nTexts.saveButtonLabel} From a96992322967ffb6dd5831b0ef40d7542cf49db9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 11:07:35 +0100 Subject: [PATCH 07/17] Use PainlessLang.ID for CodeEditor language --- .../components/runtime_field_form/runtime_field_form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx index d6b6b226fa6a2..cbe19d3463398 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx @@ -5,6 +5,7 @@ */ import React, { useEffect } from 'react'; import { i18n } from '@kbn/i18n'; +import { PainlessLang } from '@kbn/monaco'; import { EuiFlexGroup, EuiFlexItem, @@ -122,7 +123,7 @@ const RuntimeFieldFormComp = ({ defaultValue, onChange, links }: Props) => { fullWidth > Date: Fri, 30 Oct 2020 11:38:56 +0100 Subject: [PATCH 08/17] Use "defaultValue" prop instead of "field" --- .../runtime_field_editor_flyout.test.tsx | 4 ++-- .../runtime_field_editor_flyout.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx index e13a07c159fd8..7d4ba0c439ab9 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx @@ -42,7 +42,7 @@ describe('Runtime field editor flyout', () => { script: 'test=123', }; - const { find } = setup({ ...defaultProps, field }); + const { find } = setup({ ...defaultProps, defaultValue: field }); expect(find('flyoutTitle').text()).toBe(`Edit ${field.name} field`); expect(find('nameField.input').props().value).toBe(field.name); @@ -58,7 +58,7 @@ describe('Runtime field editor flyout', () => { }; const onSave: jest.Mock = jest.fn(); - const { find } = setup({ ...defaultProps, onSave, field }); + const { find } = setup({ ...defaultProps, onSave, defaultValue: field }); await act(async () => { find('saveFieldButton').simulate('click'); diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx index 5eabde78f23da..2cebbd5a60daa 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx @@ -63,10 +63,15 @@ export interface Props { /** * An optional runtime field to edit */ - field?: RuntimeField; + defaultValue?: RuntimeField; } -export const RuntimeFieldEditorFlyout = ({ onSave, onCancel, docLinks, field }: Props) => { +export const RuntimeFieldEditorFlyout = ({ + onSave, + onCancel, + docLinks, + defaultValue: field, +}: Props) => { const i18nTexts = geti18nTexts(field); const [formState, setFormState] = useState({ From 8246c8fa35a14d1ba10f2d51955dc285c731630b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 12:09:44 +0100 Subject: [PATCH 09/17] Export RuntimeFieldEditor and RuntimeFieldFormState publicly --- x-pack/plugins/runtime_fields/public/components/index.ts | 2 +- x-pack/plugins/runtime_fields/public/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/runtime_fields/public/components/index.ts b/x-pack/plugins/runtime_fields/public/components/index.ts index 433aa9acb0bb9..feacf7abc4dcc 100644 --- a/x-pack/plugins/runtime_fields/public/components/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/index.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export { RuntimeFieldForm } from './runtime_field_form'; +export { RuntimeFieldForm, FormState as RuntimeFieldFormState } from './runtime_field_form'; export { RuntimeFieldEditor } from './runtime_field_editor'; diff --git a/x-pack/plugins/runtime_fields/public/index.ts b/x-pack/plugins/runtime_fields/public/index.ts index 5653f41f59747..1a75b7983f7b4 100644 --- a/x-pack/plugins/runtime_fields/public/index.ts +++ b/x-pack/plugins/runtime_fields/public/index.ts @@ -5,7 +5,7 @@ */ import { RuntimeFieldsPlugin } from './plugin'; -export { RuntimeFieldEditorFlyout } from './components'; +export { RuntimeFieldEditorFlyout, RuntimeFieldEditor, RuntimeFieldFormState } from './components'; export { RUNTIME_FIELD_OPTIONS } from './constants'; export { RuntimeField, RuntimeType } from './types'; From 3727b43621de3ae9e38ef24acb692a81c17e315b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 12:44:15 +0100 Subject: [PATCH 10/17] Add README.md --- docs/developer/plugin-list.asciidoc | 2 +- x-pack/plugins/runtime_fields/README.md | 140 ++++++++++++++++++++++++ 2 files changed, 141 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/runtime_fields/README.md diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index d6ab0561d89b4..c433cd96ce8fd 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -462,7 +462,7 @@ Elastic. |{kib-repo}blob/{branch}/x-pack/plugins/runtime_fields[runtimeFields] -|WARNING: Missing README. +|Welcome to the home of the runtime field editor and everything related to runtime fields! |{kib-repo}blob/{branch}/x-pack/plugins/searchprofiler/README.md[searchprofiler] diff --git a/x-pack/plugins/runtime_fields/README.md b/x-pack/plugins/runtime_fields/README.md new file mode 100644 index 0000000000000..37a25f13b1ef7 --- /dev/null +++ b/x-pack/plugins/runtime_fields/README.md @@ -0,0 +1,140 @@ +# Runtime fields + +Welcome to the home of the runtime field editor and everything related to runtime fields! + +## The runtime field editor + +The runtime field editor is exported in 2 flavours: + +* As the content of a `` +* As a standalone component that you can inline anywhere + +### Content of a `` + +```js +import React, { useState } from 'react'; +import { EuiFlyoutBody, EuiButton } from '@elastic/eui'; +import { RuntimeFieldEditorFlyout, RuntimeField } from '../runtime_fields/public'; + +const MyComponent = () => { + const { docLinksStart } = useCoreContext(); // access the core start service + const [isFlyoutVisilbe, setIsFlyoutVisible] = useState(false); + + const saveRuntimeField = useCallback((field: RuntimeField) => { + // Do something with the field + }, []); + + return ( + <> + setIsFlyoutVisible(true)}>Create field + + {isFlyoutVisible && ( + setIsFlyoutVisible(false)}> + setIsFlyoutVisible(false)} + docLinks={docLinksStart} + defaultValue={/*optional runtime field to edit*/} + /> + + )} + + ) +} +``` + +#### With the `core.overlays.openFlyout` + +As an alternative you can open the flyout with the `core.overlays.openFlyout`. In this case you will need to wrap the editor with the `Provider` from the "kibana_react" plugin as it is a required dependency for the `` component. + +```js +import React, { useRef } from 'react'; +import { EuiButton } from '@elastic/eui'; +import { OverlayRef } from 'src/core/public'; + +import { createKibanaReactContext, toMountPoint } from '../../src/plugins/kibana_react/public'; +import { RuntimeFieldEditorFlyout, RuntimeField } from '../runtime_fields/public'; + +const MyComponent = () => { + // Access the core start service + const { docLinksStart, overlays, uiSettings } = useCoreContext(); + const flyoutEditor = useRef(null); + + const { openFlyout } = overlays; + + const saveRuntimeField = useCallback((field: RuntimeField) => { + // Do something with the field + }, []); + + const openRuntimeFieldEditor = useCallback(() => { + const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings }); + + flyoutEditor.current = openFlyout( + toMountPoint( + + flyoutEditor.current?.close()} + docLinks={{ + ELASTIC_WEBSITE_URL: 'https://elastic.co/', + DOC_LINK_VERSION: 'master', + links: {} as any, + }} + defaultValue={defaultRuntimeField} + /> + + ) + ); + }, [openFlyout, saveRuntimeField, uiSettings]); + + return ( + <> + Create field + + ) +} +``` + +### Standalone component + +```js +import React, { useState } from 'react'; +import { EuiButton, EuiSpacer } from '@elastic/eui'; +import { RuntimeFieldEditor, RuntimeField, RuntimeFieldFormState } from '../runtime_fields/public'; + +const MyComponent = () => { + const { docLinksStart } = useCoreContext(); // access the core start service + const [runtimeFieldFormState, setRuntimeFieldFormState] = useState({ + isSubmitted: false, + isValid: undefined, + submit: async() => Promise.resolve({ isValid: false, data: {} as RuntimeField }) + }); + + const { submit, isValid: isFormValid, isSubmitted } = runtimeFieldFormState; + + const saveRuntimeField = useCallback(async () => { + const { isValid, data } = await submit(); + if (isValid) { + // Do something with the field (data) + } + }, [submit]); + + return ( + <> + + + + + + Save field + + + ) +} +``` \ No newline at end of file From aba171bcc6bd25d7fa493e41d0d16a1c7f0617b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 13:09:22 +0100 Subject: [PATCH 11/17] Update README.md --- x-pack/plugins/runtime_fields/README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/x-pack/plugins/runtime_fields/README.md b/x-pack/plugins/runtime_fields/README.md index 37a25f13b1ef7..d93372dc8ac54 100644 --- a/x-pack/plugins/runtime_fields/README.md +++ b/x-pack/plugins/runtime_fields/README.md @@ -75,11 +75,7 @@ const MyComponent = () => { flyoutEditor.current?.close()} - docLinks={{ - ELASTIC_WEBSITE_URL: 'https://elastic.co/', - DOC_LINK_VERSION: 'master', - links: {} as any, - }} + docLinks={docLinksStart} defaultValue={defaultRuntimeField} /> From 7c90cc4b2d61af902748174455ebdc35978df5c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 13:11:25 +0100 Subject: [PATCH 12/17] Update plugin-list.asciidoc --- docs/developer/plugin-list.asciidoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index c433cd96ce8fd..eafb39cba3f25 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -461,7 +461,7 @@ Elastic. |Welcome to the Kibana rollup plugin! This plugin provides Kibana support for Elasticsearch's rollup feature. Please refer to the Elasticsearch documentation to understand rollup indices and how to create rollup jobs. -|{kib-repo}blob/{branch}/x-pack/plugins/runtime_fields[runtimeFields] +|{kib-repo}blob/{branch}/x-pack/plugins/runtime_fields/README.md[runtimeFields] |Welcome to the home of the runtime field editor and everything related to runtime fields! From 56ab2bc895603def4e634258864c58ead2d2eac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Fri, 30 Oct 2020 15:55:40 +0100 Subject: [PATCH 13/17] Fix typo in test --- .../runtime_field_editor/runtime_field_editor.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx index cf593736a8916..c56bc16c304ad 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor/runtime_field_editor.test.tsx @@ -20,7 +20,7 @@ const setup = (props?: Props) => })(props) as TestBed; const docLinks: DocLinksStart = { - ELASTIC_WEBSITE_URL: 'htts://jestTest.elastic.co', + ELASTIC_WEBSITE_URL: 'https://jestTest.elastic.co', DOC_LINK_VERSION: 'jest', links: {} as any, }; From f2104361fcc8dd95025fe6ae3d7b910e03502502 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 3 Nov 2020 10:02:43 +0100 Subject: [PATCH 14/17] Update plugin size limit --- packages/kbn-optimizer/limits.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index af3482a3e5a18..396eed0c111ff 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -98,4 +98,4 @@ pageLoadAssetSize: visualizations: 295025 visualize: 57431 watcher: 43598 - runtimeFields: 26275 + runtimeFields: 41752 From 14ccc9a0c7e5d8b429cc52ce4696ae50b52ce45f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 3 Nov 2020 10:40:09 +0100 Subject: [PATCH 15/17] Remove scss override of monaco editor --- .../components/runtime_field_form/runtime_field_form.scss | 5 ----- .../components/runtime_field_form/runtime_field_form.tsx | 2 -- 2 files changed, 7 deletions(-) delete mode 100644 x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss deleted file mode 100644 index c4b6b33a73230..0000000000000 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.scss +++ /dev/null @@ -1,5 +0,0 @@ -.runtimeFieldEditor_form { - & .monaco-editor-background, & .margin-view-overlays { - background-color: $euiColorLightestShade; - } -} diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx index cbe19d3463398..2e38354a3b94b 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx @@ -21,8 +21,6 @@ import { RuntimeField } from '../../types'; import { RUNTIME_FIELD_OPTIONS } from '../../constants'; import { schema } from './schema'; -import './runtime_field_form.scss'; - export interface FormState { isValid: boolean | undefined; isSubmitted: boolean; From d1147c3c242d9c9646e0cd17229a74400fc70289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 3 Nov 2020 11:20:07 +0100 Subject: [PATCH 16/17] Set the CodeEditor width to 100% --- .../field_parameters/painless_script_parameter.tsx | 10 +++++----- .../runtime_field_form/runtime_field_form.tsx | 3 +-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx index 19746034b530c..9042e7f6ee328 100644 --- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx +++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; +import { PainlessLang } from '@kbn/monaco'; import { EuiFormRow, EuiDescribedFormGroup } from '@elastic/eui'; import { CodeEditor, UseField } from '../../../shared_imports'; @@ -18,7 +19,7 @@ interface Props { export const PainlessScriptParameter = ({ stack }: Props) => { return ( - + path="script.source" config={getFieldConfig('script')}> {(scriptField) => { const error = scriptField.getErrorsMessages(); const isInvalid = error ? Boolean(error.length) : false; @@ -26,11 +27,10 @@ export const PainlessScriptParameter = ({ stack }: Props) => { const field = ( { > Date: Tue, 3 Nov 2020 13:59:11 +0100 Subject: [PATCH 17/17] Rename RuntimeEditorFlyout -> RuntimeEditorFlyoutContent --- x-pack/plugins/runtime_fields/README.md | 8 ++++---- x-pack/plugins/runtime_fields/public/components/index.ts | 2 +- .../index.ts | 2 +- .../runtime_field_editor_flyout_content.test.tsx} | 4 ++-- .../runtime_field_editor_flyout_content.tsx} | 2 +- x-pack/plugins/runtime_fields/public/index.ts | 6 +++++- 6 files changed, 14 insertions(+), 10 deletions(-) rename x-pack/plugins/runtime_fields/public/components/{runtime_field_editor_flyout => runtime_field_editor_flyout_content}/index.ts (73%) rename x-pack/plugins/runtime_fields/public/components/{runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx => runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx} (96%) rename x-pack/plugins/runtime_fields/public/components/{runtime_field_editor_flyout/runtime_field_editor_flyout.tsx => runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.tsx} (98%) diff --git a/x-pack/plugins/runtime_fields/README.md b/x-pack/plugins/runtime_fields/README.md index d93372dc8ac54..f3e2ca5031262 100644 --- a/x-pack/plugins/runtime_fields/README.md +++ b/x-pack/plugins/runtime_fields/README.md @@ -14,7 +14,7 @@ The runtime field editor is exported in 2 flavours: ```js import React, { useState } from 'react'; import { EuiFlyoutBody, EuiButton } from '@elastic/eui'; -import { RuntimeFieldEditorFlyout, RuntimeField } from '../runtime_fields/public'; +import { RuntimeFieldEditorFlyoutContent, RuntimeField } from '../runtime_fields/public'; const MyComponent = () => { const { docLinksStart } = useCoreContext(); // access the core start service @@ -30,7 +30,7 @@ const MyComponent = () => { {isFlyoutVisible && ( setIsFlyoutVisible(false)}> - setIsFlyoutVisible(false)} docLinks={docLinksStart} @@ -53,7 +53,7 @@ import { EuiButton } from '@elastic/eui'; import { OverlayRef } from 'src/core/public'; import { createKibanaReactContext, toMountPoint } from '../../src/plugins/kibana_react/public'; -import { RuntimeFieldEditorFlyout, RuntimeField } from '../runtime_fields/public'; +import { RuntimeFieldEditorFlyoutContent, RuntimeField } from '../runtime_fields/public'; const MyComponent = () => { // Access the core start service @@ -72,7 +72,7 @@ const MyComponent = () => { flyoutEditor.current = openFlyout( toMountPoint( - flyoutEditor.current?.close()} docLinks={docLinksStart} diff --git a/x-pack/plugins/runtime_fields/public/components/index.ts b/x-pack/plugins/runtime_fields/public/components/index.ts index feacf7abc4dcc..86ac968d39f21 100644 --- a/x-pack/plugins/runtime_fields/public/components/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/index.ts @@ -8,4 +8,4 @@ export { RuntimeFieldForm, FormState as RuntimeFieldFormState } from './runtime_ export { RuntimeFieldEditor } from './runtime_field_editor'; -export { RuntimeFieldEditorFlyout } from './runtime_field_editor_flyout'; +export { RuntimeFieldEditorFlyoutContent } from './runtime_field_editor_flyout_content'; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/index.ts similarity index 73% rename from x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts rename to x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/index.ts index 62f7dcdea3dc1..32234bfcc5600 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/index.ts +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { RuntimeFieldEditorFlyout } from './runtime_field_editor_flyout'; +export { RuntimeFieldEditorFlyoutContent } from './runtime_field_editor_flyout_content'; diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx similarity index 96% rename from x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx rename to x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx index 7d4ba0c439ab9..8e47472295f45 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.test.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.test.tsx @@ -9,10 +9,10 @@ import { DocLinksStart } from 'src/core/public'; import '../../__jest__/setup_environment'; import { registerTestBed, TestBed } from '../../test_utils'; import { RuntimeField } from '../../types'; -import { RuntimeFieldEditorFlyout, Props } from './runtime_field_editor_flyout'; +import { RuntimeFieldEditorFlyoutContent, Props } from './runtime_field_editor_flyout_content'; const setup = (props?: Props) => - registerTestBed(RuntimeFieldEditorFlyout, { + registerTestBed(RuntimeFieldEditorFlyoutContent, { memoryRouter: { wrapComponent: false, }, diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.tsx similarity index 98% rename from x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx rename to x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.tsx index 2cebbd5a60daa..c7454cff0eb15 100644 --- a/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout/runtime_field_editor_flyout.tsx +++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_editor_flyout_content/runtime_field_editor_flyout_content.tsx @@ -66,7 +66,7 @@ export interface Props { defaultValue?: RuntimeField; } -export const RuntimeFieldEditorFlyout = ({ +export const RuntimeFieldEditorFlyoutContent = ({ onSave, onCancel, docLinks, diff --git a/x-pack/plugins/runtime_fields/public/index.ts b/x-pack/plugins/runtime_fields/public/index.ts index 1a75b7983f7b4..98b018089bd37 100644 --- a/x-pack/plugins/runtime_fields/public/index.ts +++ b/x-pack/plugins/runtime_fields/public/index.ts @@ -5,7 +5,11 @@ */ import { RuntimeFieldsPlugin } from './plugin'; -export { RuntimeFieldEditorFlyout, RuntimeFieldEditor, RuntimeFieldFormState } from './components'; +export { + RuntimeFieldEditorFlyoutContent, + RuntimeFieldEditor, + RuntimeFieldFormState, +} from './components'; export { RUNTIME_FIELD_OPTIONS } from './constants'; export { RuntimeField, RuntimeType } from './types';