From e5b4054a8e8899d9e4353d077464bb840d4b067e Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Mon, 11 May 2020 09:36:45 +0200
Subject: [PATCH] fix double flyouts in add panel flow (#65861)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../add_panel/add_panel_flyout.test.tsx              |  4 ++++
 .../panel_actions/add_panel/add_panel_flyout.tsx     | 12 +++---------
 .../add_panel/open_add_panel_flyout.tsx              |  3 ++-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
index 282b0f05891e0..3894d6fbed382 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
@@ -18,6 +18,7 @@
  */
 
 import * as React from 'react';
+import { EuiFlyout } from '@elastic/eui';
 import { AddPanelFlyout } from './add_panel_flyout';
 import {
   ContactCardEmbeddableFactory,
@@ -75,6 +76,9 @@ test('createNewEmbeddable() add embeddable to container', async () => {
     />
   ) as ReactWrapper<unknown, unknown, AddPanelFlyout>;
 
+  // https://github.com/elastic/kibana/issues/64789
+  expect(component.exists(EuiFlyout)).toBe(false);
+
   expect(Object.values(container.getInput().panels).length).toBe(0);
   component.instance().createNewEmbeddable(CONTACT_CARD_EMBEDDABLE);
   await new Promise(r => setTimeout(r, 1));
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
index 5bf3f69a95c30..4c23916675e8f 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
@@ -21,13 +21,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { ReactElement } from 'react';
 import { CoreSetup } from 'src/core/public';
 
-import {
-  EuiContextMenuItem,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiContextMenuItem, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 
 import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { IContainer } from '../../../../containers';
@@ -152,7 +146,7 @@ export class AddPanelFlyout extends React.Component<Props, State> {
     );
 
     return (
-      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
+      <>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
             <h2>
@@ -161,7 +155,7 @@ export class AddPanelFlyout extends React.Component<Props, State> {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{savedObjectsFinder}</EuiFlyoutBody>
-      </EuiFlyout>
+      </>
     );
   }
 }
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
index a452e07b51577..867092b78ef7a 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
@@ -55,7 +55,8 @@ export async function openAddPanelFlyout(options: {
       />
     ),
     {
-      'data-test-subj': 'addPanelFlyout',
+      'data-test-subj': 'dashboardAddPanel',
+      ownFocus: true,
     }
   );
 }