fix double flyouts in add panel flow (#65861)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

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>
+      </>
     );
   }
 }

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,
     }
   );
 }