elastic · akowalska622 · Jan 22, 2026 · Jan 22, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/src/platform/plugins/shared/data/moon.yml b/src/platform/plugins/shared/data/moon.yml
@@ -70,6 +70,7 @@ dependsOn:
   - '@kbn/apm-utils'
   - '@kbn/std'
   - '@kbn/core-elasticsearch-server'
+  - '@kbn/css-utils'
 tags:
   - plugin
   - prod

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { InspectFlyout } from './inspect_flyout';
@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiFlyoutBody, EuiSpacer, EuiText, type UseEuiTheme } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { css } from '@emotion/react';
+import { CodeEditor } from '@kbn/code-editor';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
+import type { UISession } from '../../types';
+
+interface InspectFlyoutProps {
+  searchSession: UISession;
+}
+
+export const InspectFlyout: React.FC<InspectFlyoutProps> = ({ searchSession }) => {
+  const styles = useMemoCss(componentStyles);
+
+  const renderInfo = () => {
+    return (
+      <div css={styles.jsonCodeEditor}>
+        <CodeEditor
+          languageId="json"
+          value={JSON.stringify(searchSession, null, 2)}
+          options={{
+            readOnly: true,
+            lineNumbers: 'off',
+            fontSize: 12,
+            minimap: {
+              enabled: false,
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+            automaticLayout: true,
+          }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <EuiFlyoutBody css={styles.flyout} data-test-subj="searchSessionsFlyout">
+      <EuiText>
+        <EuiText size="xs">
+          <p>
+            <FormattedMessage
+              id="data.sessions.management.backgroundSearchFlyoutText"
+              defaultMessage="Configuration for this background search"
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        {renderInfo()}
+      </EuiText>
+    </EuiFlyoutBody>
+  );
+};
+
+const componentStyles = {
+  flyout: css({
+    '.euiFlyoutBody__overflowContent': {
+      height: '100%',
+      overflow: 'hidden',
+      '> div': {
+        height: '100%',
+      },
+    },
+  }),
+  jsonCodeEditor: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      height: `calc(100% - ${euiTheme.size.l})`,
+    }),
+};
@@ -21,11 +21,12 @@ export const getAction = (
   api: SearchSessionsMgmtAPI,
   actionType: ACTION,
   uiSession: UISession,
-  core: CoreStart
+  core: CoreStart,
+  isWithinFlyout: boolean = false
 ): IClickActionDescriptor | null => {
   switch (actionType) {
     case ACTION.INSPECT:
-      return createInspectActionDescriptor(api, uiSession, core);
+      return createInspectActionDescriptor(api, uiSession, core, isWithinFlyout);
     case ACTION.DELETE:
       return createDeleteActionDescriptor(api, uiSession, core);
     case ACTION.EXTEND:

@@ -7,106 +7,20 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlyoutBody, EuiFlyoutHeader, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
 import type { CoreStart } from '@kbn/core/public';
-import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { toMountPoint } from '@kbn/react-kibana-mount';
-import { CodeEditor } from '@kbn/code-editor';
 import type { UISession } from '../../../types';
 import type { IClickActionDescriptor } from './types';
 import type { SearchSessionsMgmtAPI } from '../../../lib/api';
-
-interface InspectFlyoutProps {
-  searchSession: UISession;
-}
-
-const InspectFlyout: React.FC<InspectFlyoutProps> = ({ searchSession }) => {
-  const renderInfo = () => {
-    return (
-      <Fragment>
-        <CodeEditor
-          languageId="json"
-          value={JSON.stringify(searchSession, null, 2)}
-          options={{
-            readOnly: true,
-            lineNumbers: 'off',
-            fontSize: 12,
-            minimap: {
-              enabled: false,
-            },
-            scrollBeyondLastLine: false,
-            wordWrap: 'on',
-            wrappingIndent: 'indent',
-            automaticLayout: true,
-          }}
-        />
-      </Fragment>
-    );
-  };
-
-  return (
-    <>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2 id="flyoutTitle">
-            <FormattedMessage
-              id="data.sessions.management.backgroundSearchFlyoutTitle"
-              defaultMessage="Inspect background search"
-            />
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody css={styles.flyout} data-test-subj="searchSessionsFlyout">
-        <EuiText>
-          <EuiText size="xs">
-            <p>
-              <FormattedMessage
-                id="data.sessions.management.backgroundSearchFlyoutText"
-                defaultMessage="Configuration for this background search"
-              />
-            </p>
-          </EuiText>
-          <EuiSpacer />
-          {renderInfo()}
-        </EuiText>
-      </EuiFlyoutBody>
-    </>
-  );
-};
-
-interface InspectFlyoutWrapperProps {
-  searchSession: UISession;
-  uiSettings: CoreStart['uiSettings'];
-  settings: CoreStart['settings'];
-  theme: CoreStart['theme'];
-}
-
-const InspectFlyoutWrapper: React.FC<InspectFlyoutWrapperProps> = ({
-  searchSession,
-  uiSettings,
-  settings,
-  theme,
-}) => {
-  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
-    uiSettings,
-    settings,
-    theme,
-  });
-
-  return (
-    <KibanaReactContextProvider>
-      <InspectFlyout searchSession={searchSession} />
-    </KibanaReactContextProvider>
-  );
-};
+import { InspectFlyout } from '../../inspect_flyout';
 
 export const createInspectActionDescriptor = (
   api: SearchSessionsMgmtAPI,
   uiSession: UISession,
-  core: CoreStart
+  core: CoreStart,
+  isWithinFlyout: boolean = false
 ): IClickActionDescriptor => ({
   iconType: 'document',
   label: (
@@ -117,26 +31,18 @@ export const createInspectActionDescriptor = (
     />
   ),
   onClick: async () => {
-    const flyoutWrapper = (
-      <InspectFlyoutWrapper
-        uiSettings={core.uiSettings}
-        settings={core.settings}
-        theme={core.theme}
-        searchSession={uiSession}
-      />
-    );
-    const overlay = core.overlays.openFlyout(toMountPoint(flyoutWrapper, core));
+    const overlay = core.overlays.openSystemFlyout(<InspectFlyout searchSession={uiSession} />, {
+      id: `inspect-background-search-${uiSession.id}`,
+      title: i18n.translate('data.sessions.management.backgroundSearchFlyoutTitle', {
+        defaultMessage: 'Inspect {name}',
+        values: { name: uiSession.name },
+      }),
+      flyoutMenuProps: { hideTitle: false },
+      size: 'm',
+      session: isWithinFlyout ? 'inherit' : 'start',
+      type: 'overlay',
+      outsideClickCloses: true,
+    });
     await overlay.onClose;
   },
 });
-
-const styles = {
-  flyout: css({
-    '.euiFlyoutBody__overflowContent': {
-      height: '100%',
-      '> div': {
-        height: '100%',
-      },
-    },
-  }),
-};
@@ -28,6 +28,7 @@ interface PopoverActionItemsProps {
   onActionComplete: OnActionComplete;
   core: CoreStart;
   allowedActions?: UISession['actions'];
+  isWithinFlyout?: boolean;
 }
 
 export const PopoverActionsMenu = ({
@@ -36,6 +37,7 @@ export const PopoverActionsMenu = ({
   session,
   core,
   allowedActions,
+  isWithinFlyout = false,
 }: PopoverActionItemsProps) => {
   const [isPopoverOpen, setPopover] = useState(false);
 
@@ -71,7 +73,7 @@ export const PopoverActionsMenu = ({
     }) || [];
   // Generic set of actions - up to the API to return what is available
   const items = actions.reduce((itemSet, actionType) => {
-    const actionDef = getAction(api, actionType, session, core);
+    const actionDef = getAction(api, actionType, session, core, isWithinFlyout);
     if (actionDef) {
       const { label, iconType, onClick } = actionDef;
 

@@ -6,13 +6,11 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
-import type extendSessionIcon from './icons/extend_session.svg';
-
 export type OnActionComplete = () => void;
 export type OnActionDismiss = () => void;
 
 export interface IClickActionDescriptor {
   label: React.ReactNode;
-  iconType: 'trash' | 'cancel' | typeof extendSessionIcon;
+  iconType: string;
   onClick: () => Promise<void> | void;
 }
@@ -22,11 +22,13 @@ export const actionsColumn = ({
   core,
   onActionComplete,
   allowedActions,
+  isWithinFlyout = false,
 }: {
   core: CoreStart;
   api: SearchSessionsMgmtAPI;
   onActionComplete: OnActionComplete;
   allowedActions?: UISession['actions'];
+  isWithinFlyout?: boolean;
 }): EuiBasicTableColumn<UISession> => ({
   field: 'actions',
   name: i18n.translate('data.mgmt.searchSessions.table.headerActions', {
@@ -47,6 +49,7 @@ export const actionsColumn = ({
             core={core}
             allowedActions={allowedActions}
             onActionComplete={onActionComplete}
+            isWithinFlyout={isWithinFlyout}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

@@ -52,7 +52,6 @@ const setup = () => {
   render(
     <IntlProvider>
       <Flyout
-        flyoutId="test"
         onClose={onClose}
         api={api}
         config={mockConfig}
@@ -70,11 +69,6 @@ const setup = () => {
 };
 
 describe('<Flyout />', () => {
-  it('render the title', () => {
-    setup();
-    expect(screen.getByText('Background searches')).toBeVisible();
-  });
-
   it('renders the table', () => {
     setup();
     expect(screen.getByTestId('searchSessionsMgmtUiTable')).toBeVisible();