[bugfix] Replace panel flyout opens 2 flyouts (#76931) (#77140)

* fix replace panel flyout opens 2 flyouts

* fix sample action flyout

Author: Dosant

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

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

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