From 67ce18b6b01fefa3a0b5eec8d153931129fd34f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 3 Nov 2020 17:15:30 +0100 Subject: [PATCH 1/8] Expose handler from plugin setup() to load the editor --- x-pack/plugins/runtime_fields/public/index.ts | 2 +- .../runtime_fields/public/load_editor.tsx | 50 +++++++++++++++++++ .../runtime_fields/public/plugin.test.ts | 50 +++++++++++++++++++ .../plugins/runtime_fields/public/plugin.ts | 5 +- .../runtime_fields/public/shared_imports.ts | 6 ++- x-pack/plugins/runtime_fields/public/types.ts | 9 +++- 6 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/runtime_fields/public/load_editor.tsx create mode 100644 x-pack/plugins/runtime_fields/public/plugin.test.ts diff --git a/x-pack/plugins/runtime_fields/public/index.ts b/x-pack/plugins/runtime_fields/public/index.ts index 98b018089bd37..0eab32c0b3d97 100644 --- a/x-pack/plugins/runtime_fields/public/index.ts +++ b/x-pack/plugins/runtime_fields/public/index.ts @@ -11,7 +11,7 @@ export { RuntimeFieldFormState, } from './components'; export { RUNTIME_FIELD_OPTIONS } from './constants'; -export { RuntimeField, RuntimeType } from './types'; +export { RuntimeField, RuntimeType, PluginSetup as RuntimeFieldsSetup } from './types'; export function plugin() { return new RuntimeFieldsPlugin(); diff --git a/x-pack/plugins/runtime_fields/public/load_editor.tsx b/x-pack/plugins/runtime_fields/public/load_editor.tsx new file mode 100644 index 0000000000000..9c1c9e3ba829e --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/load_editor.tsx @@ -0,0 +1,50 @@ +/* + * 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 { CoreSetup, OverlayRef } from 'src/core/public'; + +import { toMountPoint, createKibanaReactContext } from './shared_imports'; +import { LoadEditorResponse, RuntimeField } from './types'; + +export interface OpenRuntimeFieldEditorProps { + onSave(field: RuntimeField): void; + defaultValue?: RuntimeField; +} + +export const getRuntimeFieldEditorLoader = (coreSetup: CoreSetup) => async (): Promise< + LoadEditorResponse +> => { + const { RuntimeFieldEditorFlyoutContent } = await import('./components'); + const [core] = await coreSetup.getStartServices(); + const { uiSettings, overlays, docLinks } = core; + const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings }); + + let overlayRef: OverlayRef | null = null; + + const openEditor = ({ onSave, defaultValue }: OpenRuntimeFieldEditorProps) => { + const onSaveField = (field: RuntimeField) => { + overlayRef?.close(); + onSave(field); + }; + + overlayRef = overlays.openFlyout( + toMountPoint( + + overlayRef?.close()} + docLinks={docLinks} + defaultValue={defaultValue} + /> + + ) + ); + }; + + return { + openEditor, + }; +}; diff --git a/x-pack/plugins/runtime_fields/public/plugin.test.ts b/x-pack/plugins/runtime_fields/public/plugin.test.ts new file mode 100644 index 0000000000000..918b18cf75a6c --- /dev/null +++ b/x-pack/plugins/runtime_fields/public/plugin.test.ts @@ -0,0 +1,50 @@ +/* + * 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 { CoreSetup } from 'src/core/public'; +import { coreMock } from 'src/core/public/mocks'; + +import { StartPlugins, PluginStart } from './types'; +import { RuntimeFieldsPlugin } from './plugin'; + +describe('RuntimeFieldsPlugin', () => { + const noop = () => {}; + let coreSetup: CoreSetup; + let plugin: RuntimeFieldsPlugin; + + beforeEach(() => { + plugin = new RuntimeFieldsPlugin(); + coreSetup = coreMock.createSetup(); + }); + + test('should return a handler to load the runtime field editor', async () => { + const setupApi = await plugin.setup(coreSetup, {}); + expect(setupApi.loadEditor).toBeDefined(); + }); + + test('once it is loaded it should expose a handler to open the editor', async () => { + const setupApi = await plugin.setup(coreSetup, {}); + const response = await setupApi.loadEditor(); + expect(response.openEditor).toBeDefined(); + }); + + test('should call core.overlays.openFlyout when opening the editor', async () => { + const openFlyout = jest.fn(); + const mockCore = { + overlays: { + openFlyout, + }, + uiSettings: {}, + }; + coreSetup.getStartServices = async () => [mockCore] as any; + const setupApi = await plugin.setup(coreSetup, {}); + const { openEditor } = await setupApi.loadEditor(); + + openEditor({ onSave: noop }); + + expect(openFlyout).toHaveBeenCalled(); + }); +}); diff --git a/x-pack/plugins/runtime_fields/public/plugin.ts b/x-pack/plugins/runtime_fields/public/plugin.ts index d893a1e181811..ebc8b98db66ba 100644 --- a/x-pack/plugins/runtime_fields/public/plugin.ts +++ b/x-pack/plugins/runtime_fields/public/plugin.ts @@ -6,11 +6,14 @@ import { Plugin, CoreSetup, CoreStart } from 'src/core/public'; import { PluginSetup, PluginStart, SetupPlugins, StartPlugins } from './types'; +import { getRuntimeFieldEditorLoader } from './load_editor'; export class RuntimeFieldsPlugin implements Plugin { public setup(core: CoreSetup, plugins: SetupPlugins): PluginSetup { - return {}; + return { + loadEditor: getRuntimeFieldEditorLoader(core), + }; } public start(core: CoreStart, plugins: StartPlugins) { diff --git a/x-pack/plugins/runtime_fields/public/shared_imports.ts b/x-pack/plugins/runtime_fields/public/shared_imports.ts index 8ce22a66b627b..200a68ab71031 100644 --- a/x-pack/plugins/runtime_fields/public/shared_imports.ts +++ b/x-pack/plugins/runtime_fields/public/shared_imports.ts @@ -16,4 +16,8 @@ export { fieldValidators } from '../../../../src/plugins/es_ui_shared/static/for export { TextField } from '../../../../src/plugins/es_ui_shared/static/forms/components'; -export { CodeEditor } from '../../../../src/plugins/kibana_react/public'; +export { + CodeEditor, + toMountPoint, + createKibanaReactContext, +} from '../../../../src/plugins/kibana_react/public'; diff --git a/x-pack/plugins/runtime_fields/public/types.ts b/x-pack/plugins/runtime_fields/public/types.ts index 9d1daa9eacb0e..2b094628b7f66 100644 --- a/x-pack/plugins/runtime_fields/public/types.ts +++ b/x-pack/plugins/runtime_fields/public/types.ts @@ -6,9 +6,14 @@ import { DataPublicPluginStart } from 'src/plugins/data/public'; import { RUNTIME_FIELD_TYPES } from './constants'; +import { OpenRuntimeFieldEditorProps } from './load_editor'; -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface PluginSetup {} +export interface LoadEditorResponse { + openEditor(props: OpenRuntimeFieldEditorProps): void; +} +export interface PluginSetup { + loadEditor(): Promise; +} // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface PluginStart {} From f2779f40cf63c02a8df3839b271ac64208bda168 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 3 Nov 2020 17:50:58 +0100 Subject: [PATCH 2/8] Setup consumer (to be reverted) --- x-pack/plugins/index_management/kibana.json | 3 ++- .../public/application/app_context.tsx | 2 ++ .../application/mount_management_section.ts | 3 +++ .../public/application/sections/home/home.tsx | 25 ++++++++++++++++++- .../plugins/index_management/public/plugin.ts | 13 ++++++++-- 5 files changed, 42 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/index_management/kibana.json b/x-pack/plugins/index_management/kibana.json index 097ac03aabd22..b8ff62fdf6532 100644 --- a/x-pack/plugins/index_management/kibana.json +++ b/x-pack/plugins/index_management/kibana.json @@ -7,7 +7,8 @@ "home", "licensing", "management", - "features" + "features", + "runtimeFields" ], "optionalPlugins": [ "security", diff --git a/x-pack/plugins/index_management/public/application/app_context.tsx b/x-pack/plugins/index_management/public/application/app_context.tsx index 22e6f09907d75..e32bf7367ab06 100644 --- a/x-pack/plugins/index_management/public/application/app_context.tsx +++ b/x-pack/plugins/index_management/public/application/app_context.tsx @@ -11,6 +11,7 @@ import { UsageCollectionSetup } from 'src/plugins/usage_collection/public'; import { CoreSetup, CoreStart } from '../../../../../src/core/public'; import { IngestManagerSetup } from '../../../ingest_manager/public'; +import { RuntimeFieldsSetup } from '../../../runtime_fields/public'; import { IndexMgmtMetricsType } from '../types'; import { UiMetricService, NotificationService, HttpService } from './services'; import { ExtensionsService } from '../services'; @@ -24,6 +25,7 @@ export interface AppDependencies { }; plugins: { usageCollection: UsageCollectionSetup; + runtimeFields: RuntimeFieldsSetup; ingestManager?: IngestManagerSetup; }; services: { diff --git a/x-pack/plugins/index_management/public/application/mount_management_section.ts b/x-pack/plugins/index_management/public/application/mount_management_section.ts index f7b728c875762..dfda6a78f9e7c 100644 --- a/x-pack/plugins/index_management/public/application/mount_management_section.ts +++ b/x-pack/plugins/index_management/public/application/mount_management_section.ts @@ -10,6 +10,7 @@ import { ManagementAppMountParams } from 'src/plugins/management/public/'; import { UsageCollectionSetup } from 'src/plugins/usage_collection/public'; import { IngestManagerSetup } from '../../../ingest_manager/public'; +import { RuntimeFieldsSetup } from '../../../runtime_fields/public'; import { PLUGIN } from '../../common/constants'; import { ExtensionsService } from '../services'; import { IndexMgmtMetricsType } from '../types'; @@ -32,6 +33,7 @@ export async function mountManagementSection( usageCollection: UsageCollectionSetup, services: InternalServices, params: ManagementAppMountParams, + runtimeFields: RuntimeFieldsSetup, ingestManager?: IngestManagerSetup ) { const { element, setBreadcrumbs, history } = params; @@ -57,6 +59,7 @@ export async function mountManagementSection( plugins: { usageCollection, ingestManager, + runtimeFields, }, services, history, diff --git a/x-pack/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx index ee8970a3c4509..8b9a524c31314 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/home.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/home.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -17,13 +17,16 @@ import { EuiTab, EuiTabs, EuiTitle, + EuiButton, } from '@elastic/eui'; +import { RuntimeField } from '../../../../../runtime_fields/public'; import { documentationService } from '../../services/documentation'; import { DataStreamList } from './data_stream_list'; import { IndexList } from './index_list'; import { TemplateList } from './template_list'; import { ComponentTemplateList } from '../../components/component_templates'; import { breadcrumbService } from '../../services/breadcrumbs'; +import { useAppContext } from '../../app_context'; export enum Section { Indices = 'indices', @@ -43,6 +46,8 @@ interface MatchParams { section: Section; } +const defaultRuntimeField: RuntimeField = { name: 'myField', type: 'date', script: 'test=123' }; + export const IndexManagementHome: React.FunctionComponent> = ({ match: { params: { section }, @@ -87,6 +92,19 @@ export const IndexManagementHome: React.FunctionComponent { + console.log('Updated field', field); + }, []); + + const openRuntimeFieldEditor = useCallback(async () => { + const { openEditor } = await runtimeFields.loadEditor(); + openEditor({ onSave: onSaveRuntimeField, defaultValue: defaultRuntimeField }); + }, [onSaveRuntimeField, runtimeFields]); + useEffect(() => { breadcrumbService.setBreadcrumbs('home'); }, []); @@ -117,6 +135,11 @@ export const IndexManagementHome: React.FunctionComponent + + + Create field + + diff --git a/x-pack/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts index 6139ed5d2e6ad..241c1e99a5f10 100644 --- a/x-pack/plugins/index_management/public/plugin.ts +++ b/x-pack/plugins/index_management/public/plugin.ts @@ -10,6 +10,7 @@ import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/p import { ManagementSetup } from '../../../../src/plugins/management/public'; import { IngestManagerSetup } from '../../ingest_manager/public'; +import { RuntimeFieldsSetup } from '../../runtime_fields/public'; import { UIM_APP_NAME, PLUGIN } from '../common/constants'; import { httpService } from './application/services/http'; @@ -30,6 +31,7 @@ interface PluginsDependencies { ingestManager?: IngestManagerSetup; usageCollection: UsageCollectionSetup; management: ManagementSetup; + runtimeFields: RuntimeFieldsSetup; } export class IndexMgmtUIPlugin { @@ -45,7 +47,7 @@ export class IndexMgmtUIPlugin { public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): IndexManagementPluginSetup { const { http, notifications } = coreSetup; - const { ingestManager, usageCollection, management } = plugins; + const { ingestManager, usageCollection, management, runtimeFields } = plugins; httpService.setup(http); notificationService.setup(notifications); @@ -63,7 +65,14 @@ export class IndexMgmtUIPlugin { uiMetricService: this.uiMetricService, extensionsService: this.extensionsService, }; - return mountManagementSection(coreSetup, usageCollection, services, params, ingestManager); + return mountManagementSection( + coreSetup, + usageCollection, + services, + params, + runtimeFields, + ingestManager + ); }, }); From 9ef4d075ad4d6aff89373205904554ec193f255a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 09:12:42 +0100 Subject: [PATCH 3/8] Improve test to make sure we load the RuntimeFieldEditorFlyoutContent --- .../runtime_fields/public/plugin.test.ts | 26 +++++++++++++++++-- x-pack/plugins/runtime_fields/public/types.ts | 1 + 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/runtime_fields/public/plugin.test.ts b/x-pack/plugins/runtime_fields/public/plugin.test.ts index 918b18cf75a6c..a753c26d4932d 100644 --- a/x-pack/plugins/runtime_fields/public/plugin.test.ts +++ b/x-pack/plugins/runtime_fields/public/plugin.test.ts @@ -7,11 +7,20 @@ import { CoreSetup } from 'src/core/public'; import { coreMock } from 'src/core/public/mocks'; +jest.mock('../../../../src/plugins/kibana_react/public', () => { + const original = jest.requireActual('../../../../src/plugins/kibana_react/public'); + + return { + ...original, + toMountPoint: (node: React.ReactNode) => node, + }; +}); + import { StartPlugins, PluginStart } from './types'; +import { RuntimeFieldEditorFlyoutContent } from './components'; import { RuntimeFieldsPlugin } from './plugin'; describe('RuntimeFieldsPlugin', () => { - const noop = () => {}; let coreSetup: CoreSetup; let plugin: RuntimeFieldsPlugin; @@ -33,6 +42,8 @@ describe('RuntimeFieldsPlugin', () => { test('should call core.overlays.openFlyout when opening the editor', async () => { const openFlyout = jest.fn(); + const onSaveSpy = jest.fn(); + const mockCore = { overlays: { openFlyout, @@ -43,8 +54,19 @@ describe('RuntimeFieldsPlugin', () => { const setupApi = await plugin.setup(coreSetup, {}); const { openEditor } = await setupApi.loadEditor(); - openEditor({ onSave: noop }); + openEditor({ onSave: onSaveSpy }); expect(openFlyout).toHaveBeenCalled(); + + const [[arg]] = openFlyout.mock.calls; + expect(arg.props.children.type).toBe(RuntimeFieldEditorFlyoutContent); + + // We force call the "onSave" prop from the component + // and make sure that the the spy is being called. + // Note: we are testing implementation details, if we change or rename the "onSave" prop on + // the component, we will need to update this test accordingly. + expect(arg.props.children.props.onSave).toBeDefined(); + arg.props.children.props.onSave(); + expect(onSaveSpy).toHaveBeenCalled(); }); }); diff --git a/x-pack/plugins/runtime_fields/public/types.ts b/x-pack/plugins/runtime_fields/public/types.ts index 2b094628b7f66..a8e717ceb4e3a 100644 --- a/x-pack/plugins/runtime_fields/public/types.ts +++ b/x-pack/plugins/runtime_fields/public/types.ts @@ -11,6 +11,7 @@ import { OpenRuntimeFieldEditorProps } from './load_editor'; export interface LoadEditorResponse { openEditor(props: OpenRuntimeFieldEditorProps): void; } + export interface PluginSetup { loadEditor(): Promise; } From eea04896c9ef37bba46aebf044426f909a2a4fde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 09:35:22 +0100 Subject: [PATCH 4/8] Update README.md --- x-pack/plugins/runtime_fields/README.md | 58 +++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/runtime_fields/README.md b/x-pack/plugins/runtime_fields/README.md index f3e2ca5031262..98bfa427fa6db 100644 --- a/x-pack/plugins/runtime_fields/README.md +++ b/x-pack/plugins/runtime_fields/README.md @@ -4,11 +4,61 @@ Welcome to the home of the runtime field editor and everything related to runtim ## The runtime field editor -The runtime field editor is exported in 2 flavours: +### Integration -* As the content of a `` +The recommended way to integrate the runtime fields editor is by adding a plugin dependency to the `"runtimeFields"` x-pack plugin. This way you will be able to lazy load the editor when it is required and it will not increment the bundle size of your plugin. + +```js +// 1. Add the plugin as a dependency in your kibana.json +{ + ... + "requiredBundles": [ + "runtimeFields", + ... + ] +} + +// 2. Access it in your plugin setup() +export class MyPlugin { + setup(core, { runtimeFields }) { + // logic to provide it to your app, probably through context + } +} + +// 3. Load the editor and open it anywhere in your app +const MyComponent = () => { + // Access the plugin through context + const { runtimeFields } = useAppPlugins(); + + const saveRuntimeField = (field: RuntimeField) => { + // Do something with the field + }; + + const openRuntimeFieldsEditor = async() => { + // Lazy load the editor + const { openEditor } = await runtimeFields.loadEditor(); + + openEditor({ + onSave: saveRuntimeField, + /* defaultValue: optional field to edit */ + }); + }; + + return ( + + ) +} +``` + +#### Alternative + +The runtime field editor is also exported as static React component that you can import into your components. The editor is exported in 2 flavours: + +* As the content of a `` (it contains a flyout header and footer) * As a standalone component that you can inline anywhere +**Note:** The runtime field editor uses the `` that has a dependency on the `Provider` from the `"kibana_react"` plugin. If your app is not already wrapped by this provider you will need to add it at least around the runtime field editor. You can see an example in the ["Using the core.overlays.openFlyout()"](#using-the-coreoverlaysopenflyout) example below. + ### Content of a `` ```js @@ -43,9 +93,9 @@ const MyComponent = () => { } ``` -#### With the `core.overlays.openFlyout` +#### Using 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. +As an alternative you can open the flyout with the `openFlyout()` helper from core. ```js import React, { useRef } from 'react'; From b39272218b3eb46b5fb77a1ec1600af7e19b0789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 11:53:05 +0100 Subject: [PATCH 5/8] Return handler to close flyout --- x-pack/plugins/runtime_fields/README.md | 12 +++++++++++- x-pack/plugins/runtime_fields/public/load_editor.tsx | 9 ++++++++- x-pack/plugins/runtime_fields/public/plugin.test.ts | 10 ++++++++++ x-pack/plugins/runtime_fields/public/types.ts | 2 +- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/runtime_fields/README.md b/x-pack/plugins/runtime_fields/README.md index 98bfa427fa6db..c157b7c44a30d 100644 --- a/x-pack/plugins/runtime_fields/README.md +++ b/x-pack/plugins/runtime_fields/README.md @@ -30,6 +30,9 @@ const MyComponent = () => { // Access the plugin through context const { runtimeFields } = useAppPlugins(); + // Ref for handler to close the editor + const closeRuntimeFieldEditor = useRef(() => {}); + const saveRuntimeField = (field: RuntimeField) => { // Do something with the field }; @@ -38,12 +41,19 @@ const MyComponent = () => { // Lazy load the editor const { openEditor } = await runtimeFields.loadEditor(); - openEditor({ + closeRuntimeFieldEditor.current = openEditor({ onSave: saveRuntimeField, /* defaultValue: optional field to edit */ }); }; + useEffect(() => { + return () => { + // Make sure to remove the editor when the component unmounts + closeRuntimeFieldEditor.current(); + }; + }, []); + return ( ) diff --git a/x-pack/plugins/runtime_fields/public/load_editor.tsx b/x-pack/plugins/runtime_fields/public/load_editor.tsx index 9c1c9e3ba829e..f1b9c495f0336 100644 --- a/x-pack/plugins/runtime_fields/public/load_editor.tsx +++ b/x-pack/plugins/runtime_fields/public/load_editor.tsx @@ -25,8 +25,13 @@ export const getRuntimeFieldEditorLoader = (coreSetup: CoreSetup) => async (): P let overlayRef: OverlayRef | null = null; const openEditor = ({ onSave, defaultValue }: OpenRuntimeFieldEditorProps) => { - const onSaveField = (field: RuntimeField) => { + const closeEditor = () => { overlayRef?.close(); + overlayRef = null; + }; + + const onSaveField = (field: RuntimeField) => { + closeEditor(); onSave(field); }; @@ -42,6 +47,8 @@ export const getRuntimeFieldEditorLoader = (coreSetup: CoreSetup) => async (): P ) ); + + return closeEditor; }; return { diff --git a/x-pack/plugins/runtime_fields/public/plugin.test.ts b/x-pack/plugins/runtime_fields/public/plugin.test.ts index a753c26d4932d..07f7a3553d0d3 100644 --- a/x-pack/plugins/runtime_fields/public/plugin.test.ts +++ b/x-pack/plugins/runtime_fields/public/plugin.test.ts @@ -20,6 +20,8 @@ import { StartPlugins, PluginStart } from './types'; import { RuntimeFieldEditorFlyoutContent } from './components'; import { RuntimeFieldsPlugin } from './plugin'; +const noop = () => {}; + describe('RuntimeFieldsPlugin', () => { let coreSetup: CoreSetup; let plugin: RuntimeFieldsPlugin; @@ -69,4 +71,12 @@ describe('RuntimeFieldsPlugin', () => { arg.props.children.props.onSave(); expect(onSaveSpy).toHaveBeenCalled(); }); + + test('should return a handler to close the flyout', async () => { + const setupApi = await plugin.setup(coreSetup, {}); + const { openEditor } = await setupApi.loadEditor(); + + const closeEditorHandler = openEditor({ onSave: noop }); + expect(typeof closeEditorHandler).toBe('function'); + }); }); diff --git a/x-pack/plugins/runtime_fields/public/types.ts b/x-pack/plugins/runtime_fields/public/types.ts index a8e717ceb4e3a..4172061540af8 100644 --- a/x-pack/plugins/runtime_fields/public/types.ts +++ b/x-pack/plugins/runtime_fields/public/types.ts @@ -9,7 +9,7 @@ import { RUNTIME_FIELD_TYPES } from './constants'; import { OpenRuntimeFieldEditorProps } from './load_editor'; export interface LoadEditorResponse { - openEditor(props: OpenRuntimeFieldEditorProps): void; + openEditor(props: OpenRuntimeFieldEditorProps): () => void; } export interface PluginSetup { From a1b2459ee33af60e999fa8c2e45a38e5bc28245c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 11:54:26 +0100 Subject: [PATCH 6/8] Setup consumer (to be reverted) --- .../public/application/sections/home/home.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx index 8b9a524c31314..ecf4741b68032 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/home.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/home.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useCallback } from 'react'; +import React, { useEffect, useCallback, useRef } from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -96,17 +96,26 @@ export const IndexManagementHome: React.FunctionComponent {}); + const onSaveRuntimeField = useCallback((field: RuntimeField) => { - console.log('Updated field', field); + console.log('Updated field', field); // eslint-disable-line }, []); const openRuntimeFieldEditor = useCallback(async () => { const { openEditor } = await runtimeFields.loadEditor(); - openEditor({ onSave: onSaveRuntimeField, defaultValue: defaultRuntimeField }); + closeRuntimeFieldEditor.current = openEditor({ + onSave: onSaveRuntimeField, + defaultValue: defaultRuntimeField, + }); }, [onSaveRuntimeField, runtimeFields]); useEffect(() => { breadcrumbService.setBreadcrumbs('home'); + + return () => { + closeRuntimeFieldEditor.current(); + }; }, []); return ( From 7808ce314489fa21a8e82656c607121603b9701f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 12:04:13 +0100 Subject: [PATCH 7/8] Revert "Setup consumer (to be reverted)" This reverts commit a1b2459ee33af60e999fa8c2e45a38e5bc28245c. --- .../public/application/sections/home/home.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx index ecf4741b68032..8b9a524c31314 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/home.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/home.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useCallback, useRef } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -96,26 +96,17 @@ export const IndexManagementHome: React.FunctionComponent {}); - const onSaveRuntimeField = useCallback((field: RuntimeField) => { - console.log('Updated field', field); // eslint-disable-line + console.log('Updated field', field); }, []); const openRuntimeFieldEditor = useCallback(async () => { const { openEditor } = await runtimeFields.loadEditor(); - closeRuntimeFieldEditor.current = openEditor({ - onSave: onSaveRuntimeField, - defaultValue: defaultRuntimeField, - }); + openEditor({ onSave: onSaveRuntimeField, defaultValue: defaultRuntimeField }); }, [onSaveRuntimeField, runtimeFields]); useEffect(() => { breadcrumbService.setBreadcrumbs('home'); - - return () => { - closeRuntimeFieldEditor.current(); - }; }, []); return ( From 6531283c9141c10cd3dd51ce6fa36b6d01d19354 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Wed, 4 Nov 2020 12:04:22 +0100 Subject: [PATCH 8/8] Revert "Setup consumer (to be reverted)" This reverts commit f2779f40cf63c02a8df3839b271ac64208bda168. --- x-pack/plugins/index_management/kibana.json | 3 +-- .../public/application/app_context.tsx | 2 -- .../application/mount_management_section.ts | 3 --- .../public/application/sections/home/home.tsx | 25 +------------------ .../plugins/index_management/public/plugin.ts | 13 ++-------- 5 files changed, 4 insertions(+), 42 deletions(-) diff --git a/x-pack/plugins/index_management/kibana.json b/x-pack/plugins/index_management/kibana.json index b8ff62fdf6532..097ac03aabd22 100644 --- a/x-pack/plugins/index_management/kibana.json +++ b/x-pack/plugins/index_management/kibana.json @@ -7,8 +7,7 @@ "home", "licensing", "management", - "features", - "runtimeFields" + "features" ], "optionalPlugins": [ "security", diff --git a/x-pack/plugins/index_management/public/application/app_context.tsx b/x-pack/plugins/index_management/public/application/app_context.tsx index e32bf7367ab06..22e6f09907d75 100644 --- a/x-pack/plugins/index_management/public/application/app_context.tsx +++ b/x-pack/plugins/index_management/public/application/app_context.tsx @@ -11,7 +11,6 @@ import { UsageCollectionSetup } from 'src/plugins/usage_collection/public'; import { CoreSetup, CoreStart } from '../../../../../src/core/public'; import { IngestManagerSetup } from '../../../ingest_manager/public'; -import { RuntimeFieldsSetup } from '../../../runtime_fields/public'; import { IndexMgmtMetricsType } from '../types'; import { UiMetricService, NotificationService, HttpService } from './services'; import { ExtensionsService } from '../services'; @@ -25,7 +24,6 @@ export interface AppDependencies { }; plugins: { usageCollection: UsageCollectionSetup; - runtimeFields: RuntimeFieldsSetup; ingestManager?: IngestManagerSetup; }; services: { diff --git a/x-pack/plugins/index_management/public/application/mount_management_section.ts b/x-pack/plugins/index_management/public/application/mount_management_section.ts index dfda6a78f9e7c..f7b728c875762 100644 --- a/x-pack/plugins/index_management/public/application/mount_management_section.ts +++ b/x-pack/plugins/index_management/public/application/mount_management_section.ts @@ -10,7 +10,6 @@ import { ManagementAppMountParams } from 'src/plugins/management/public/'; import { UsageCollectionSetup } from 'src/plugins/usage_collection/public'; import { IngestManagerSetup } from '../../../ingest_manager/public'; -import { RuntimeFieldsSetup } from '../../../runtime_fields/public'; import { PLUGIN } from '../../common/constants'; import { ExtensionsService } from '../services'; import { IndexMgmtMetricsType } from '../types'; @@ -33,7 +32,6 @@ export async function mountManagementSection( usageCollection: UsageCollectionSetup, services: InternalServices, params: ManagementAppMountParams, - runtimeFields: RuntimeFieldsSetup, ingestManager?: IngestManagerSetup ) { const { element, setBreadcrumbs, history } = params; @@ -59,7 +57,6 @@ export async function mountManagementSection( plugins: { usageCollection, ingestManager, - runtimeFields, }, services, history, diff --git a/x-pack/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx index 8b9a524c31314..ee8970a3c4509 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/home.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/home.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useCallback } from 'react'; +import React, { useEffect } from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -17,16 +17,13 @@ import { EuiTab, EuiTabs, EuiTitle, - EuiButton, } from '@elastic/eui'; -import { RuntimeField } from '../../../../../runtime_fields/public'; import { documentationService } from '../../services/documentation'; import { DataStreamList } from './data_stream_list'; import { IndexList } from './index_list'; import { TemplateList } from './template_list'; import { ComponentTemplateList } from '../../components/component_templates'; import { breadcrumbService } from '../../services/breadcrumbs'; -import { useAppContext } from '../../app_context'; export enum Section { Indices = 'indices', @@ -46,8 +43,6 @@ interface MatchParams { section: Section; } -const defaultRuntimeField: RuntimeField = { name: 'myField', type: 'date', script: 'test=123' }; - export const IndexManagementHome: React.FunctionComponent> = ({ match: { params: { section }, @@ -92,19 +87,6 @@ export const IndexManagementHome: React.FunctionComponent { - console.log('Updated field', field); - }, []); - - const openRuntimeFieldEditor = useCallback(async () => { - const { openEditor } = await runtimeFields.loadEditor(); - openEditor({ onSave: onSaveRuntimeField, defaultValue: defaultRuntimeField }); - }, [onSaveRuntimeField, runtimeFields]); - useEffect(() => { breadcrumbService.setBreadcrumbs('home'); }, []); @@ -135,11 +117,6 @@ export const IndexManagementHome: React.FunctionComponent - - - Create field - - diff --git a/x-pack/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts index 241c1e99a5f10..6139ed5d2e6ad 100644 --- a/x-pack/plugins/index_management/public/plugin.ts +++ b/x-pack/plugins/index_management/public/plugin.ts @@ -10,7 +10,6 @@ import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/p import { ManagementSetup } from '../../../../src/plugins/management/public'; import { IngestManagerSetup } from '../../ingest_manager/public'; -import { RuntimeFieldsSetup } from '../../runtime_fields/public'; import { UIM_APP_NAME, PLUGIN } from '../common/constants'; import { httpService } from './application/services/http'; @@ -31,7 +30,6 @@ interface PluginsDependencies { ingestManager?: IngestManagerSetup; usageCollection: UsageCollectionSetup; management: ManagementSetup; - runtimeFields: RuntimeFieldsSetup; } export class IndexMgmtUIPlugin { @@ -47,7 +45,7 @@ export class IndexMgmtUIPlugin { public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): IndexManagementPluginSetup { const { http, notifications } = coreSetup; - const { ingestManager, usageCollection, management, runtimeFields } = plugins; + const { ingestManager, usageCollection, management } = plugins; httpService.setup(http); notificationService.setup(notifications); @@ -65,14 +63,7 @@ export class IndexMgmtUIPlugin { uiMetricService: this.uiMetricService, extensionsService: this.extensionsService, }; - return mountManagementSection( - coreSetup, - usageCollection, - services, - params, - runtimeFields, - ingestManager - ); + return mountManagementSection(coreSetup, usageCollection, services, params, ingestManager); }, });