Return handler to close flyout

sebelga · Nov 4, 2020 · b392722 · b392722
1 parent eea0489
commit b392722
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {