From 2f4d05939fb89edfd359d23c174b48eca779bf73 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 10 Sep 2020 10:25:25 +0200
Subject: [PATCH] [bugfix] Replace panel flyout opens 2 flyouts (#76931)

* fix replace panel flyout opens 2 flyouts

* fix sample action flyout
---
 .../application/actions/open_replace_panel_flyout.tsx |  3 ++-
 .../application/actions/replace_panel_flyout.tsx      | 11 +++++------
 .../public/tests/test_samples/hello_world_action.tsx  | 11 ++++-------
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/plugins/dashboard/public/application/actions/open_replace_panel_flyout.tsx b/src/plugins/dashboard/public/application/actions/open_replace_panel_flyout.tsx
index c676ca052d687..54a294fd2f4ac 100644
--- a/src/plugins/dashboard/public/application/actions/open_replace_panel_flyout.tsx
+++ b/src/plugins/dashboard/public/application/actions/open_replace_panel_flyout.tsx
@@ -60,7 +60,8 @@ export async function openReplacePanelFlyout(options: {
       />
     ),
     {
-      'data-test-subj': 'replacePanelFlyout',
+      'data-test-subj': 'dashboardReplacePanel',
+      ownFocus: true,
     }
   );
 }
diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_flyout.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_flyout.tsx
index 0000f63c48c2d..4e228bc1a7a06 100644
--- a/src/plugins/dashboard/public/application/actions/replace_panel_flyout.tsx
+++ b/src/plugins/dashboard/public/application/actions/replace_panel_flyout.tsx
@@ -19,16 +19,15 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import _ from 'lodash';
-import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import { EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 import { NotificationsStart, Toast } from 'src/core/public';
 import { DashboardPanelState } from '../embeddable';
 import {
-  IContainer,
-  IEmbeddable,
   EmbeddableInput,
   EmbeddableOutput,
   EmbeddableStart,
+  IContainer,
+  IEmbeddable,
   SavedObjectEmbeddableInput,
 } from '../../embeddable_plugin';
 
@@ -122,7 +121,7 @@ export class ReplacePanelFlyout extends React.Component<Props> {
     const panelToReplace = 'Replace panel ' + this.props.panelToRemove.getTitle() + ' with:';
 
     return (
-      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardReplacePanel">
+      <>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
             <h2>
@@ -131,7 +130,7 @@ export class ReplacePanelFlyout extends React.Component<Props> {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{savedObjectsFinder}</EuiFlyoutBody>
-      </EuiFlyout>
+      </>
     );
   }
 }
diff --git a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx
index 8fff231a867bf..a4cfe172dd109 100644
--- a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx
+++ b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx
@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { EuiFlyout, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiFlyoutBody } from '@elastic/eui';
 import { CoreStart } from 'src/core/public';
 import { createAction, ActionByType } from '../../actions';
 import { toMountPoint, reactToUiComponent } from '../../../../kibana_react/public';
@@ -49,14 +49,11 @@ export function createHelloWorldAction(
     getIconType: () => 'lock',
     MenuItem: UiMenuItem,
     execute: async () => {
-      const flyoutSession = overlays.openFlyout(
-        toMountPoint(
-          <EuiFlyout ownFocus onClose={() => flyoutSession && flyoutSession.close()}>
-            Hello World, I am a hello world action!
-          </EuiFlyout>
-        ),
+      overlays.openFlyout(
+        toMountPoint(<EuiFlyoutBody>Hello World, I am a hello world action!</EuiFlyoutBody>),
         {
           'data-test-subj': 'helloWorldAction',
+          ownFocus: true,
         }
       );
     },