Expose handler from plugin setup() to load the editor

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();

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(
+        <KibanaReactContextProvider>
+          <RuntimeFieldEditorFlyoutContent
+            onSave={onSaveField}
+            onCancel={() => overlayRef?.close()}
+            docLinks={docLinks}
+            defaultValue={defaultValue}
+          />
+        </KibanaReactContextProvider>
+      )
+    );
+  };
+
+  return {
+    openEditor,
+  };
+};

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<StartPlugins, PluginStart>;
+  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();
+  });
+});

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<PluginSetup, PluginStart, SetupPlugins, StartPlugins> {
   public setup(core: CoreSetup<StartPlugins, PluginStart>, plugins: SetupPlugins): PluginSetup {
-    return {};
+    return {
+      loadEditor: getRuntimeFieldEditorLoader(core),
+    };
   }
 
   public start(core: CoreStart, plugins: StartPlugins) {

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

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<LoadEditorResponse>;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface PluginStart {}