From b39272218b3eb46b5fb77a1ec1600af7e19b0789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Wed, 4 Nov 2020 11:53:05 +0100
Subject: [PATCH] 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 (
     <button onClick={openRuntimeFieldsEditor}>Add field</button>
   )
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
         </KibanaReactContextProvider>
       )
     );
+
+    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<StartPlugins, PluginStart>;
   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 {