[Security Solution] expandable flyout - folder structure (#168473)

packages/kbn-expandable-flyout/.storybook/main.js

@@ -0,0 +1,9 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;

packages/kbn-expandable-flyout/README.md

@@ -9,30 +9,36 @@ The flyout is composed of 3 sections:
 - a left wider section to show more details
 - a preview section, that overlays the right section. This preview section can display multiple panels one after the other and displays a `Back` button
 
-At the moment, displaying more than one flyout within the same plugin might be complicated, unless there are in difference areas in the codebase and the contexts don't conflict with each other.
+> Run `yarn storybook expandable_flyout` to take a quick look at the expandable flyout in action
 
-## What the package offers
+## Design decisions
 
-The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/index) that renders the UI.
+The expandable-flyout package is designed to render a single flyout for an entire plugin. While displaying multiple flyouts might be feasible, it will be a bit complicated, and we recommend instead to build multiple panels, with each their own context to manage their data (for example, take a look at the Security Solution [setup](https://github.com/elastic/kibana/tree/main/x-pack/plugins/security_solution/public/flyout)).
 
-The ExpandableFlyout [React context](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/context) that exposes the following api:
+The expandable-flyout is making some strict UI design decisions:
+- when in collapsed mode (i.e. when only the right/preview section is open), the flyout's width is fixed to the EUI `s` size
+- when in expanded mode (i.e. when the left section is opened), the flyout's width is fixed to the EUI `l` size. Internally the right, left and preview sections' widths are set to a hardcoded percentage (40%, 60$ and 40% respectively)
+
+## Package API
+
+The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/index.tsx) renders the UI, leveraging an [EuiFlyout](https://eui.elastic.co/#/layout/flyout).
+
+The ExpandableFlyout [React context](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx) manages the internal state of the expandable flyout, and exposes the following api:
 - **openFlyout**: open the flyout with a set of panels
-- **openFlyoutRightPanel**: open a right panel
-- **openFlyoutLeftPanel**: open a left panel
-- **openFlyoutPreviewPanel**: open a preview panel
-- **closeFlyoutRightPanel**: close the right panel
-- **closeFlyoutLeftPanel**: close the left panel
-- **closeFlyoutPreviewPanel**: close the preview panels
-- **previousFlyoutPreviewPanel**: navigate to the previous preview panel
+- **openRightPanel**: open a right panel
+- **openLeftPanel**: open a left panel
+- **openPreviewPanel**: open a preview panel
+- **closeRightPanel**: close the right panel
+- **closeLeftPanel**: close the left panel
+- **closePreviewPanel**: close the preview panels
+- **previousPreviewPanel**: navigate to the previous preview panel
 - **closeFlyout**: close the flyout
 
-To retrieve the flyout's layout (left, right and preview panels), you can use the **panels** from the same [React context](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/context);
-
-- To have more details about how these above api work, see the code documentation [here](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/utils/helpers).
+To retrieve the flyout's layout (left, right and preview panels), you can use the **panels** from the same [React context](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx).
 
 ## Usage
 
-To use the expandable flyout in your plugin, first you need wrap your code with the context provider at a high enough level as follows:
+To use the expandable flyout in your plugin, first you need wrap your code with the [context provider](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx) at a high enough level as follows:
 ```typescript jsx
 <ExpandableFlyoutProvider>
   
@@ -41,25 +47,20 @@ To use the expandable flyout in your plugin, first you need wrap your code with
 </ExpandableFlyoutProvider>
 ```
 
-Then use the React UI component where you need:
+Then use the [React UI component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/index.tsx) where you need:
 
 ```typescript jsx
 <ExpandableFlyout registeredPanels={myPanels} />
 ```
-where `myPanels` is a list of all the panels that can be rendered in the flyout (see interface [here](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/index)).
+_where `myPanels` is a list of all the panels that can be rendered in the flyout_
 
 
 ## Terminology
 
 ### Section
 
-One of the 3 areas of the flyout (left, right or preview).
+One of the 3 areas of the flyout (**left**, **right** or **preview**).
 
 ### Panel
 
-A set of properties defining what's displayed in one of the flyout section.
-
-## Future work
-
-- add the feature to save the flyout state (layout) to the url (https://github.com/elastic/security-team/issues/6119)
-- introduce the notion of scope to be able to handle more than one flyout per plugin??
+A set of properties defining what's displayed in one of the flyout section (see interface [here](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/types.ts)).

packages/kbn-expandable-flyout/src/components/left_section.tsx

@@ -8,7 +8,7 @@
 
 import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import { LEFT_SECTION } from './test_ids';
+import { LEFT_SECTION_TEST_ID } from './test_ids';
 
 interface LeftSectionProps {
   /**
@@ -30,7 +30,7 @@ export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: Le
     [width]
   );
   return (
-    <EuiFlexItem grow data-test-subj={LEFT_SECTION} style={style}>
+    <EuiFlexItem grow data-test-subj={LEFT_SECTION_TEST_ID} style={style}>
       {component}
     </EuiFlexItem>
   );

packages/kbn-expandable-flyout/src/components/preview_section.test.tsx

@@ -9,7 +9,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { PreviewSection } from './preview_section';
-import { PREVIEW_SECTION_BACK_BUTTON, PREVIEW_SECTION_CLOSE_BUTTON } from './test_ids';
+import {
+  PREVIEW_SECTION_BACK_BUTTON_TEST_ID,
+  PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID,
+} from './test_ids';
 import { ExpandableFlyoutContext } from '../context';
 
 describe('PreviewSection', () => {
@@ -36,7 +39,7 @@ describe('PreviewSection', () => {
       </ExpandableFlyoutContext.Provider>
     );
 
-    expect(getByTestId(PREVIEW_SECTION_CLOSE_BUTTON)).toBeInTheDocument();
+    expect(getByTestId(PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID)).toBeInTheDocument();
   });
 
   it('should render back button in header', () => {
@@ -50,6 +53,6 @@ describe('PreviewSection', () => {
       </ExpandableFlyoutContext.Provider>
     );
 
-    expect(getByTestId(PREVIEW_SECTION_BACK_BUTTON)).toBeInTheDocument();
+    expect(getByTestId(PREVIEW_SECTION_BACK_BUTTON_TEST_ID)).toBeInTheDocument();
   });
 });

packages/kbn-expandable-flyout/src/components/preview_section.tsx

@@ -19,10 +19,10 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { has } from 'lodash';
 import {
-  PREVIEW_SECTION_BACK_BUTTON,
-  PREVIEW_SECTION_CLOSE_BUTTON,
-  PREVIEW_SECTION_HEADER,
-  PREVIEW_SECTION,
+  PREVIEW_SECTION_BACK_BUTTON_TEST_ID,
+  PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID,
+  PREVIEW_SECTION_HEADER_TEST_ID,
+  PREVIEW_SECTION_TEST_ID,
 } from './test_ids';
 import { useExpandableFlyoutContext } from '../..';
 import { BACK_BUTTON, CLOSE_BUTTON } from './translations';
@@ -97,7 +97,7 @@ export const PreviewSection: React.FC<PreviewSectionProps> = ({
       <EuiButtonIcon
         iconType="cross"
         onClick={() => closePreviewPanel()}
-        data-test-subj={PREVIEW_SECTION_CLOSE_BUTTON}
+        data-test-subj={PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID}
         aria-label={CLOSE_BUTTON}
       />
     </EuiFlexItem>
@@ -110,7 +110,7 @@ export const PreviewSection: React.FC<PreviewSectionProps> = ({
           iconType="arrowLeft"
           iconSide="left"
           onClick={() => previousPreviewPanel()}
-          data-test-subj={PREVIEW_SECTION_BACK_BUTTON}
+          data-test-subj={PREVIEW_SECTION_BACK_BUTTON_TEST_ID}
           aria-label={BACK_BUTTON}
         >
           {BACK_BUTTON}
@@ -140,7 +140,7 @@ export const PreviewSection: React.FC<PreviewSectionProps> = ({
           box-shadow: 0px 0px 5px 5px ${euiTheme.colors.darkShade};
         `}
         className="eui-yScroll"
-        data-test-subj={PREVIEW_SECTION}
+        data-test-subj={PREVIEW_SECTION_TEST_ID}
       >
         {isPreviewBanner(banner) && (
           <EuiSplitPanel.Inner grow={false} color={banner.backgroundColor} paddingSize="none">
@@ -149,7 +149,11 @@ export const PreviewSection: React.FC<PreviewSectionProps> = ({
             </EuiText>
           </EuiSplitPanel.Inner>
         )}
-        <EuiSplitPanel.Inner grow={false} paddingSize="s" data-test-subj={PREVIEW_SECTION_HEADER}>
+        <EuiSplitPanel.Inner
+          grow={false}
+          paddingSize="s"
+          data-test-subj={PREVIEW_SECTION_HEADER_TEST_ID}
+        >
           {header}
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="none">{component}</EuiSplitPanel.Inner>

packages/kbn-expandable-flyout/src/components/right_section.tsx

@@ -8,7 +8,7 @@
 
 import { EuiFlexItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import { RIGHT_SECTION } from './test_ids';
+import { RIGHT_SECTION_TEST_ID } from './test_ids';
 
 interface RightSectionProps {
   /**
@@ -34,7 +34,7 @@ export const RightSection: React.FC<RightSectionProps> = ({
   );
 
   return (
-    <EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION}>
+    <EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION_TEST_ID}>
       {component}
     </EuiFlexItem>
   );

packages/kbn-expandable-flyout/src/components/test_ids.ts

@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-export const RIGHT_SECTION = 'rightSection';
+export const RIGHT_SECTION_TEST_ID = 'rightSection';
 
-export const LEFT_SECTION = 'leftSection';
+export const LEFT_SECTION_TEST_ID = 'leftSection';
 
-export const PREVIEW_SECTION = 'previewSection';
+export const PREVIEW_SECTION_TEST_ID = 'previewSection';
 
-export const PREVIEW_SECTION_CLOSE_BUTTON = 'previewSectionCloseButton';
+export const PREVIEW_SECTION_CLOSE_BUTTON_TEST_ID = 'previewSectionCloseButton';
 
-export const PREVIEW_SECTION_BACK_BUTTON = 'previewSectionBackButton';
+export const PREVIEW_SECTION_BACK_BUTTON_TEST_ID = 'previewSectionBackButton';
 
-export const PREVIEW_SECTION_HEADER = 'previewSectionHeader';
+export const PREVIEW_SECTION_HEADER_TEST_ID = 'previewSectionHeader';

packages/kbn-expandable-flyout/src/index.stories.tsx

@@ -0,0 +1,196 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Story } from '@storybook/react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiPanel,
+  EuiTitle,
+} from '@elastic/eui';
+import { ExpandableFlyout } from '.';
+import { ExpandableFlyoutContext } from './context';
+
+export default {
+  component: ExpandableFlyout,
+  title: 'ExpandableFlyout',
+};
+
+const registeredPanels = [
+  {
+    key: 'right',
+    component: () => (
+      <>
+        <EuiFlyoutHeader>
+          <EuiTitle size="m">
+            <h1>{'Right panel header'}</h1>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <p>{'Example of a right component body'}</p>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButton color="primary">{'Footer button'}</EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </>
+    ),
+  },
+  {
+    key: 'left',
+    component: () => (
+      <EuiPanel hasShadow={false}>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="m">
+              <h1>{'Left panel header'}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <p>{'Example of a left component content'}</p>
+          <EuiFlexItem grow={false} />
+        </EuiFlexGroup>
+      </EuiPanel>
+    ),
+  },
+  {
+    key: 'preview1',
+    component: () => (
+      <EuiPanel hasShadow={false}>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="m">
+              <h1>{'Preview panel header'}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <p>{'Example of a preview component content'}</p>
+          <EuiFlexItem grow={false} />
+        </EuiFlexGroup>
+      </EuiPanel>
+    ),
+  },
+  {
+    key: 'preview2',
+    component: () => (
+      <EuiPanel hasShadow={false}>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="m">
+              <h1>{'Second preview panel header'}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <p>{'Example of another preview component content'}</p>
+          <EuiFlexItem grow={false} />
+        </EuiFlexGroup>
+      </EuiPanel>
+    ),
+  },
+];
+
+export const Right: Story<void> = () => {
+  const context: ExpandableFlyoutContext = {
+    panels: {
+      right: {
+        id: 'right',
+      },
+      left: {},
+      preview: [],
+    },
+    closeFlyout: () => window.alert('closeFlyout api'),
+  } as unknown as ExpandableFlyoutContext;
+
+  return (
+    <ExpandableFlyoutContext.Provider value={context}>
+      <ExpandableFlyout registeredPanels={registeredPanels} />
+    </ExpandableFlyoutContext.Provider>
+  );
+};
+
+export const Left: Story<void> = () => {
+  const context: ExpandableFlyoutContext = {
+    panels: {
+      right: {
+        id: 'right',
+      },
+      left: {
+        id: 'left',
+      },
+      preview: [],
+    },
+    closeFlyout: () => window.alert('closeFlyout api'),
+  } as unknown as ExpandableFlyoutContext;
+
+  return (
+    <ExpandableFlyoutContext.Provider value={context}>
+      <ExpandableFlyout registeredPanels={registeredPanels} />
+    </ExpandableFlyoutContext.Provider>
+  );
+};
+
+export const Preview: Story<void> = () => {
+  const context: ExpandableFlyoutContext = {
+    panels: {
+      right: {
+        id: 'right',
+      },
+      left: {
+        id: 'left',
+      },
+      preview: [
+        {
+          id: 'preview1',
+        },
+      ],
+    },
+    closePreviewPanel: () => window.alert('closePreviewPanel api'),
+    closeFlyout: () => window.alert('closeFlyout api'),
+  } as unknown as ExpandableFlyoutContext;
+
+  return (
+    <ExpandableFlyoutContext.Provider value={context}>
+      <ExpandableFlyout registeredPanels={registeredPanels} />
+    </ExpandableFlyoutContext.Provider>
+  );
+};
+
+export const MultiplePreviews: Story<void> = () => {
+  const context: ExpandableFlyoutContext = {
+    panels: {
+      right: {
+        id: 'right',
+      },
+      left: {
+        id: 'left',
+      },
+      preview: [
+        {
+          id: 'preview1',
+        },
+        {
+          id: 'preview2',
+        },
+      ],
+    },
+    closePreviewPanel: () => window.alert('closePreviewPanel api'),
+    previousPreviewPanel: () => window.alert('previousPreviewPanel api'),
+    closeFlyout: () => window.alert('closeFlyout api'),
+  } as unknown as ExpandableFlyoutContext;
+
+  return (
+    <ExpandableFlyoutContext.Provider value={context}>
+      <ExpandableFlyout registeredPanels={registeredPanels} />
+    </ExpandableFlyoutContext.Provider>
+  );
+};

packages/kbn-expandable-flyout/src/index.test.tsx

@@ -10,7 +10,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Panel } from './types';
 import { ExpandableFlyout } from '.';
-import { LEFT_SECTION, PREVIEW_SECTION, RIGHT_SECTION } from './components/test_ids';
+import {
+  LEFT_SECTION_TEST_ID,
+  PREVIEW_SECTION_TEST_ID,
+  RIGHT_SECTION_TEST_ID,
+} from './components/test_ids';
 import { ExpandableFlyoutContext } from './context';
 
 describe('ExpandableFlyout', () => {
@@ -56,7 +60,7 @@ describe('ExpandableFlyout', () => {
       </ExpandableFlyoutContext.Provider>
     );
 
-    expect(getByTestId(RIGHT_SECTION)).toBeInTheDocument();
+    expect(getByTestId(RIGHT_SECTION_TEST_ID)).toBeInTheDocument();
   });
 
   it('should render left section', () => {
@@ -76,7 +80,7 @@ describe('ExpandableFlyout', () => {
       </ExpandableFlyoutContext.Provider>
     );
 
-    expect(getByTestId(LEFT_SECTION)).toBeInTheDocument();
+    expect(getByTestId(LEFT_SECTION_TEST_ID)).toBeInTheDocument();
   });
 
   it('should render preview section', () => {
@@ -98,6 +102,6 @@ describe('ExpandableFlyout', () => {
       </ExpandableFlyoutContext.Provider>
     );
 
-    expect(getByTestId(PREVIEW_SECTION)).toBeInTheDocument();
+    expect(getByTestId(PREVIEW_SECTION_TEST_ID)).toBeInTheDocument();
   });
 });

src/dev/storybook/aliases.ts

@@ -27,9 +27,9 @@ export const storybookAliases = {
   dashboard: 'src/plugins/dashboard/.storybook',
   data: 'src/plugins/data/.storybook',
   discover: 'src/plugins/discover/.storybook',
-  log_explorer: 'x-pack/plugins/log_explorer/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
   es_ui_shared: 'src/plugins/es_ui_shared/.storybook',
+  expandable_flyout: 'packages/kbn-expandable-flyout/.storybook',
   expression_error: 'src/plugins/expression_error/.storybook',
   expression_image: 'src/plugins/expression_image/.storybook',
   expression_metric_vis: 'src/plugins/chart_expressions/expression_legacy_metric/.storybook',
@@ -45,6 +45,7 @@ export const storybookAliases = {
   infra: 'x-pack/plugins/infra/.storybook',
   kibana_react: 'src/plugins/kibana_react/.storybook',
   lists: 'x-pack/plugins/lists/.storybook',
+  log_explorer: 'x-pack/plugins/log_explorer/.storybook',
   management: 'packages/kbn-management/storybook/config',
   observability: 'x-pack/plugins/observability/.storybook',
   observability_ai_assistant: 'x-pack/plugins/observability_ai_assistant/.storybook',

x-pack/plugins/security_solution/public/common/components/control_columns/row_action/index.tsx

@@ -12,7 +12,7 @@ import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { dataTableActions, TableId } from '@kbn/securitysolution-data-table';
 import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { ENABLE_EXPANDABLE_FLYOUT_SETTING } from '../../../../../common/constants';
-import { RightPanelKey } from '../../../../flyout/right';
+import { RightPanelKey } from '../../../../flyout/document_details/right';
 import type {
   SetEventsDeleted,
   SetEventsLoading,

x-pack/plugins/security_solution/public/common/components/event_details/response_actions_view.tsx

@@ -11,7 +11,7 @@ import type { EuiTabbedContentTab } from '@elastic/eui';
 import { EuiLink, EuiNotificationBadge, EuiSpacer } from '@elastic/eui';
 import type { Ecs } from '@kbn/cases-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { RESPONSE_NO_DATA_TEST_ID } from '../../../flyout/left/components/test_ids';
+import { RESPONSE_NO_DATA_TEST_ID } from '../../../flyout/document_details/left/components/test_ids';
 import type { SearchHit } from '../../../../common/search_strategy';
 import type {
   ExpandedEventFieldsObject,

x-pack/plugins/security_solution/public/detections/pages/alerts/alert_details_redirect.tsx

@@ -23,7 +23,7 @@ import { URL_PARAM_KEY } from '../../../common/hooks/use_url_state';
 import { inputsSelectors } from '../../../common/store';
 import { formatPageFilterSearchParam } from '../../../../common/utils/format_page_filter_search_param';
 import { resolveFlyoutParams } from './utils';
-import { FLYOUT_URL_PARAM } from '../../../flyout/shared/hooks/url/use_sync_flyout_state_with_url';
+import { FLYOUT_URL_PARAM } from '../../../flyout/document_details/shared/hooks/url/use_sync_flyout_state_with_url';
 
 export const AlertDetailsRedirect = () => {
   const { alertId } = useParams<{ alertId: string }>();

x-pack/plugins/security_solution/public/detections/pages/alerts/utils.ts

@@ -6,7 +6,7 @@
  */
 
 import { encode } from '@kbn/rison';
-import { expandableFlyoutStateFromEventMeta } from '../../../flyout/shared/hooks/url/expandable_flyout_state_from_event_meta';
+import { expandableFlyoutStateFromEventMeta } from '../../../flyout/document_details/shared/hooks/url/expandable_flyout_state_from_event_meta';
 
 export interface ResolveFlyoutParamsConfig {
   index: string;

x-pack/plugins/security_solution/public/flyout/README.md

@@ -1,44 +1,51 @@
-# expandable flyout panels
+# Security Solution expandable flyouts
+
+For more info on the expandable flyout, see the `@kbn/expandable-flyout` package.
 
 ## Description
 
-This folder hosts the panels that are displayed in the expandable flyout (see `@kbn/expandable-flyout` package).
+The Security Solution plugin aims at having a single instance of the expandable flyout. That instance can display as many panels as we need. This folder hosts all the panels that are can be displayed in the Security Solution flyout. Panels can be differentiated as to be displayed in different sections of the expandable flyout (right, left or preview), but ultimately, nothing prevents us from displaying a panel in any section we want.
 
-> Remember to add any new panels to the `index.tsx` at the root of the `flyout` folder. These are passed to the `@kbn/expandable-flyout` package as `registeredPanels`.
+> Remember to add any new panels to the `index.tsx` at the root of the [flyout folder](https://github.com/elastic/kibana/tree/main/x-pack/plugins/security_solution/public/flyout). These are passed to the `@kbn/expandable-flyout` package as `registeredPanels`. Failing to do so will result in the panel not being rendered.
 
 ## Notes
 
-At the moment, we only have a single expandable flyout for the Security Solution plugin. This flyout will be used for all documents (signals, events, indicators, assets and findings). We're using a set of generic right/left/preview panels, hence the following folder structure:
-
-```
-flyout
-│   index.tsx
-│   README.md
-│
-└───right
-└───left
-└───preview
-```
-
-If different right, left or preview panels are needed, we should refactor the folder structure as follows:
+The structure of the `flyout` folder is intended to work as follows:
+- multiple top level folders referring to the _type_ of flyout (for example document details, user, host, rule, cases...) and would contain all the panels for that flyout _type_. Each of these top level folders can be organized the way you want, but we recommend following a similar structure to the one we have for the `document_details` flyout type, where the `right`, `left` and `preview` folders correspond to the panels displayed in the right, left and preview flyout sections respectively. The `shared` folder contains any shared components/hooks/services/helpers that are used within the other folders.
+```
+document_details
+└─── right
+└─── left
+└─── preview
+└─── shared
+```
+- one top level `shared` folder containing all the components/hooks/services/helpers that are used across multiple flyout types. Putting code in this folder should be very deliberate, and should follow some guidelines:
+  - code built in isolation (meaning that it should not be built with a specific flyout type or usage in mind)
+  - extensively tested
+  - components should have storybook stories
 
+The `flyout` folder structure should therefore look like this:
 ```
 flyout
 │   index.tsx
+│   jest.config.js
 │   README.md    
 │
-└───documents
-│   └───right
-│   └───left
-│   └───preview
+└─── document_details
+│   └─── right
+│   └─── left
+│   └─── preview
 │
-└───new_type
-│   └───right
-│   └───left
-│   └───preview
+└─── new_type
+│   └─── right
+│   └─── preview
 │
-└───other_new_type
-    └───right
-    └───left
-    └───preview
+└─── other_new_type
+│   └─── right
+│   └─── left
+│
+└─── ...
+│
+└─── shared
+    └─── components
 ```

x-pack/plugins/security_solution/public/flyout/document_details/isolate_host/content.tsx

@@ -10,11 +10,11 @@ import React, { useCallback } from 'react';
 import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { EuiPanel } from '@elastic/eui';
 import { RightPanelKey } from '../right';
-import { useBasicDataFromDetailsData } from '../../timelines/components/side_panel/event_details/helpers';
-import { EndpointIsolateSuccess } from '../../common/components/endpoint/host_isolation';
-import { useHostIsolationTools } from '../../timelines/components/side_panel/event_details/use_host_isolation_tools';
+import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
+import { EndpointIsolateSuccess } from '../../../common/components/endpoint/host_isolation';
+import { useHostIsolationTools } from '../../../timelines/components/side_panel/event_details/use_host_isolation_tools';
 import { useIsolateHostPanelContext } from './context';
-import { HostIsolationPanel } from '../../detections/components/host_isolation';
+import { HostIsolationPanel } from '../../../detections/components/host_isolation';
 
 /**
  * Document details expandable flyout section content for the isolate host component, displaying the form or the success banner

x-pack/plugins/security_solution/public/flyout/document_details/isolate_host/context.tsx

@@ -9,8 +9,8 @@ import type { TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common';
 import React, { createContext, memo, useContext, useMemo } from 'react';
 
 import { useEventDetails } from '../shared/hooks/use_event_details';
-import { FlyoutError } from '../shared/components/flyout_error';
-import { FlyoutLoading } from '../shared/components/flyout_loading';
+import { FlyoutError } from '../../shared/components/flyout_error';
+import { FlyoutLoading } from '../../shared/components/flyout_loading';
 import type { IsolateHostPanelProps } from '.';
 
 export interface IsolateHostPanelContext {

x-pack/plugins/security_solution/public/flyout/document_details/isolate_host/test_ids.ts

@@ -5,6 +5,6 @@
  * 2.0.
  */
 
-import { PREFIX } from '../shared/test_ids';
+import { PREFIX } from '../../shared/test_ids';
 
 export const FLYOUT_HEADER_TITLE_TEST_ID = `${PREFIX}HeaderTitle` as const;

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { AnalyzeGraph } from './analyze_graph';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
 
@@ -18,7 +18,7 @@ jest.mock('react-router-dom', () => {
   return { ...actual, useLocation: jest.fn().mockReturnValue({ pathname: '' }) };
 });
 
-jest.mock('../../../resolver/view/use_resolver_query_params_cleaner');
+jest.mock('../../../../resolver/view/use_resolver_query_params_cleaner');
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.tsx

@@ -10,9 +10,9 @@ import React, { useMemo } from 'react';
 
 import { useLeftPanelContext } from '../context';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
-import { Resolver } from '../../../resolver/view';
-import { useTimelineDataFilters } from '../../../timelines/containers/use_timeline_data_filters';
-import { isActiveTimeline } from '../../../helpers';
+import { Resolver } from '../../../../resolver/view';
+import { useTimelineDataFilters } from '../../../../timelines/containers/use_timeline_data_filters';
+import { isActiveTimeline } from '../../../../helpers';
 
 export const ANALYZE_GRAPH_ID = 'analyze_graph';
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { CorrelationsDetails } from './correlations_details';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { LeftPanelContext } from '../context';
 import { useShowRelatedAlertsByAncestry } from '../../shared/hooks/use_show_related_alerts_by_ancestry';
 import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_show_related_alerts_by_same_source_event';
@@ -27,7 +27,7 @@ import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_re
 import { useFetchRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_fetch_related_alerts_by_same_source_event';
 import { useFetchRelatedCases } from '../../shared/hooks/use_fetch_related_cases';
 import { mockContextValue } from '../mocks/mock_context';
-import { EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID } from '../../shared/components/test_ids';
+import { EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID } from '../../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details_alerts_table.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { EuiBasicTable } from '@elastic/eui';
 import { CorrelationsDetailsAlertsTable, columns } from './correlations_details_alerts_table';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details_alerts_table.tsx

@@ -15,13 +15,13 @@ import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
-import type { DataProvider } from '../../../../common/types';
-import { SeverityBadge } from '../../../detections/components/rules/severity_badge';
+import type { DataProvider } from '../../../../../common/types';
+import { SeverityBadge } from '../../../../detections/components/rules/severity_badge';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
-import { InvestigateInTimelineButton } from '../../../common/components/event_details/table/investigate_in_timeline_button';
-import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../../detections/components/alerts_table/translations';
-import { getDataProvider } from '../../../common/components/event_details/table/use_action_cell_data_provider';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
+import { InvestigateInTimelineButton } from '../../../../common/components/event_details/table/investigate_in_timeline_button';
+import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../../../detections/components/alerts_table/translations';
+import { getDataProvider } from '../../../../common/components/event_details/table/use_action_cell_data_provider';
 
 export const TIMESTAMP_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS';
 const dataProviderLimit = 5;

x-pack/plugins/security_solution/public/flyout/document_details/left/components/entities_details.test.tsx

@@ -9,18 +9,18 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { EntitiesDetails } from './entities_details';
 import { ENTITIES_DETAILS_TEST_ID, HOST_DETAILS_TEST_ID, USER_DETAILS_TEST_ID } from './test_ids';
 import { mockContextValue } from '../mocks/mock_context';
-import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../shared/components/test_ids';
+import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
   return { ...actual, useLocation: jest.fn().mockReturnValue({ pathname: '' }) };
 });
 
-jest.mock('../../../resolver/view/use_resolver_query_params_cleaner');
+jest.mock('../../../../resolver/view/use_resolver_query_params_cleaner');
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {

x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.test.tsx

@@ -7,21 +7,21 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import type { Anomalies } from '../../../common/components/ml/types';
-import { TestProviders } from '../../../common/mock';
+import type { Anomalies } from '../../../../common/components/ml/types';
+import { TestProviders } from '../../../../common/mock';
 import { HostDetails } from './host_details';
-import { useMlCapabilities } from '../../../common/components/ml/hooks/use_ml_capabilities';
-import { useRiskScore } from '../../../explore/containers/risk_score';
-import { mockAnomalies } from '../../../common/components/ml/mock';
-import { useHostDetails } from '../../../explore/hosts/containers/hosts/details';
-import { useHostRelatedUsers } from '../../../common/containers/related_entities/related_users';
-import { RiskSeverity } from '../../../../common/search_strategy';
+import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
+import { useRiskScore } from '../../../../explore/containers/risk_score';
+import { mockAnomalies } from '../../../../common/components/ml/mock';
+import { useHostDetails } from '../../../../explore/hosts/containers/hosts/details';
+import { useHostRelatedUsers } from '../../../../common/containers/related_entities/related_users';
+import { RiskSeverity } from '../../../../../common/search_strategy';
 import {
   HOST_DETAILS_TEST_ID,
   HOST_DETAILS_INFO_TEST_ID,
   HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID,
 } from './test_ids';
-import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../shared/components/test_ids';
+import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -39,8 +39,8 @@ jest.mock('react-redux', () => {
 
 const from = '2022-07-28T08:20:18.966Z';
 const to = '2022-07-28T08:20:18.966Z';
-jest.mock('../../../common/containers/use_global_time', () => {
-  const actual = jest.requireActual('../../../common/containers/use_global_time');
+jest.mock('../../../../common/containers/use_global_time', () => {
+  const actual = jest.requireActual('../../../../common/containers/use_global_time');
   return {
     ...actual,
     useGlobalTime: jest
@@ -53,19 +53,19 @@ jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('uuid'),
 }));
 
-jest.mock('../../../common/components/ml/hooks/use_ml_capabilities');
+jest.mock('../../../../common/components/ml/hooks/use_ml_capabilities');
 const mockUseMlUserPermissions = useMlCapabilities as jest.Mock;
 
 const mockUseHasSecurityCapability = jest.fn().mockReturnValue(false);
-jest.mock('../../../helper_hooks', () => ({
+jest.mock('../../../../helper_hooks', () => ({
   useHasSecurityCapability: () => mockUseHasSecurityCapability(),
 }));
 
-jest.mock('../../../common/containers/sourcerer', () => ({
+jest.mock('../../../../common/containers/sourcerer', () => ({
   useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['index'] }),
 }));
 
-jest.mock('../../../common/components/ml/anomaly/anomaly_table_provider', () => ({
+jest.mock('../../../../common/components/ml/anomaly/anomaly_table_provider', () => ({
   AnomalyTableProvider: ({
     children,
   }: {
@@ -77,13 +77,13 @@ jest.mock('../../../common/components/ml/anomaly/anomaly_table_provider', () =>
   }) => children({ anomaliesData: mockAnomalies, isLoadingAnomaliesData: false, jobNameById: {} }),
 }));
 
-jest.mock('../../../explore/hosts/containers/hosts/details');
+jest.mock('../../../../explore/hosts/containers/hosts/details');
 const mockUseHostDetails = useHostDetails as jest.Mock;
 
-jest.mock('../../../common/containers/related_entities/related_users');
+jest.mock('../../../../common/containers/related_entities/related_users');
 const mockUseHostsRelatedUsers = useHostRelatedUsers as jest.Mock;
 
-jest.mock('../../../explore/containers/risk_score');
+jest.mock('../../../../explore/containers/risk_score');
 const mockUseRiskScore = useRiskScore as jest.Mock;
 
 const timestamp = '2022-07-25T08:20:18.966Z';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx

@@ -21,36 +21,36 @@ import {
 } from '@elastic/eui';
 import type { EuiBasicTableColumn } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { getSourcererScopeId } from '../../../helpers';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
-import type { RelatedUser } from '../../../../common/search_strategy/security_solution/related_entities/related_users';
-import type { RiskSeverity } from '../../../../common/search_strategy';
-import { HostOverview } from '../../../overview/components/host_overview';
-import { AnomalyTableProvider } from '../../../common/components/ml/anomaly/anomaly_table_provider';
-import { InspectButton, InspectButtonContainer } from '../../../common/components/inspect';
-import { NetworkDetailsLink } from '../../../common/components/links';
-import { RiskScoreEntity } from '../../../../common/search_strategy';
-import { RiskScoreLevel } from '../../../explore/components/risk_score/severity/common';
-import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers';
-import { InputsModelId } from '../../../common/store/inputs/constants';
+import { getSourcererScopeId } from '../../../../helpers';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
+import type { RelatedUser } from '../../../../../common/search_strategy/security_solution/related_entities/related_users';
+import type { RiskSeverity } from '../../../../../common/search_strategy';
+import { HostOverview } from '../../../../overview/components/host_overview';
+import { AnomalyTableProvider } from '../../../../common/components/ml/anomaly/anomaly_table_provider';
+import { InspectButton, InspectButtonContainer } from '../../../../common/components/inspect';
+import { NetworkDetailsLink } from '../../../../common/components/links';
+import { RiskScoreEntity } from '../../../../../common/search_strategy';
+import { RiskScoreLevel } from '../../../../explore/components/risk_score/severity/common';
+import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/field_renderers';
+import { InputsModelId } from '../../../../common/store/inputs/constants';
 import {
   SecurityCellActions,
   CellActionsMode,
   SecurityCellActionsTrigger,
-} from '../../../common/components/cell_actions';
-import { useGlobalTime } from '../../../common/containers/use_global_time';
-import { useSourcererDataView } from '../../../common/containers/sourcerer';
-import { manageQuery } from '../../../common/components/page/manage_query';
-import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
-import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
-import { hostToCriteria } from '../../../common/components/ml/criteria/host_to_criteria';
-import { useHostDetails } from '../../../explore/hosts/containers/hosts/details';
-import { useHostRelatedUsers } from '../../../common/containers/related_entities/related_users';
-import { useMlCapabilities } from '../../../common/components/ml/hooks/use_ml_capabilities';
-import { getEmptyTagValue } from '../../../common/components/empty_value';
+} from '../../../../common/components/cell_actions';
+import { useGlobalTime } from '../../../../common/containers/use_global_time';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { manageQuery } from '../../../../common/components/page/manage_query';
+import { scoreIntervalToDateTime } from '../../../../common/components/ml/score/score_interval_to_datetime';
+import { setAbsoluteRangeDatePicker } from '../../../../common/store/inputs/actions';
+import { hostToCriteria } from '../../../../common/components/ml/criteria/host_to_criteria';
+import { useHostDetails } from '../../../../explore/hosts/containers/hosts/details';
+import { useHostRelatedUsers } from '../../../../common/containers/related_entities/related_users';
+import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
 import { HOST_DETAILS_TEST_ID, HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID } from './test_ids';
-import { ENTITY_RISK_LEVEL } from '../../../explore/components/risk_score/translations';
-import { useHasSecurityCapability } from '../../../helper_hooks';
+import { ENTITY_RISK_LEVEL } from '../../../../explore/components/risk_score/translations';
+import { useHasSecurityCapability } from '../../../../helper_hooks';
 
 const HOST_DETAILS_ID = 'entities-hosts-details';
 const RELATED_USERS_ID = 'entities-hosts-related-users';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { InvestigationGuide } from './investigation_guide';
 import { LeftPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { INVESTIGATION_GUIDE_TEST_ID, INVESTIGATION_GUIDE_LOADING_TEST_ID } from './test_ids';
 import { mockContextValue } from '../mocks/mock_context';
 import { useInvestigationGuide } from '../../shared/hooks/use_investigation_guide';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.tsx

@@ -10,8 +10,8 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useInvestigationGuide } from '../../shared/hooks/use_investigation_guide';
 import { useLeftPanelContext } from '../context';
 import { INVESTIGATION_GUIDE_TEST_ID, INVESTIGATION_GUIDE_LOADING_TEST_ID } from './test_ids';
-import { InvestigationGuideView } from '../../../common/components/event_details/investigation_guide_view';
-import { FlyoutLoading } from '../../shared/components/flyout_loading';
+import { InvestigationGuideView } from '../../../../common/components/event_details/investigation_guide_view';
+import { FlyoutLoading } from '../../../shared/components/flyout_loading';
 
 /**
  * Investigation guide displayed in the left panel.

x-pack/plugins/security_solution/public/flyout/document_details/left/components/prevalence_details.test.tsx

@@ -21,8 +21,8 @@ import {
   PREVALENCE_DETAILS_TABLE_UPSELL_CELL_TEST_ID,
 } from './test_ids';
 import { usePrevalence } from '../../shared/hooks/use_prevalence';
-import { TestProviders } from '../../../common/mock';
-import { licenseService } from '../../../common/hooks/use_license';
+import { TestProviders } from '../../../../common/mock';
+import { licenseService } from '../../../../common/hooks/use_license';
 
 jest.mock('../../shared/hooks/use_prevalence');
 
@@ -34,7 +34,7 @@ jest.mock('react-redux', () => {
     useDispatch: () => mockDispatch,
   };
 });
-jest.mock('../../../common/hooks/use_license', () => {
+jest.mock('../../../../common/hooks/use_license', () => {
   const licenseServiceInstance = {
     isPlatinumPlus: jest.fn(),
   };

x-pack/plugins/security_solution/public/flyout/document_details/left/components/prevalence_details.tsx

@@ -22,9 +22,9 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { FormattedCount } from '../../../common/components/formatted_number';
-import { useLicense } from '../../../common/hooks/use_license';
-import { InvestigateInTimelineButton } from '../../../common/components/event_details/table/investigate_in_timeline_button';
+import { FormattedCount } from '../../../../common/components/formatted_number';
+import { useLicense } from '../../../../common/hooks/use_license';
+import { InvestigateInTimelineButton } from '../../../../common/components/event_details/table/investigate_in_timeline_button';
 import type { PrevalenceData } from '../../shared/hooks/use_prevalence';
 import { usePrevalence } from '../../shared/hooks/use_prevalence';
 import {
@@ -43,9 +43,9 @@ import { useLeftPanelContext } from '../context';
 import {
   getDataProvider,
   getDataProviderAnd,
-} from '../../../common/components/event_details/table/use_action_cell_data_provider';
-import { getEmptyTagValue } from '../../../common/components/empty_value';
-import { IS_OPERATOR } from '../../../../common/types';
+} from '../../../../common/components/event_details/table/use_action_cell_data_provider';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
+import { IS_OPERATOR } from '../../../../../common/types';
 
 export const PREVALENCE_TAB_ID = 'prevalence-details';
 const DEFAULT_FROM = 'now-30d';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_alerts_by_ancestry.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import {
   CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID,
@@ -18,7 +18,7 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
 
 jest.mock('../../shared/hooks/use_fetch_related_alerts_by_ancestry');

x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_alerts_by_same_source_event.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import {
   CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TEST_ID,
   CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TABLE_TEST_ID,
@@ -18,7 +18,7 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
 
 jest.mock('../../shared/hooks/use_fetch_related_alerts_by_same_source_event');

x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_alerts_by_session.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import {
   CORRELATIONS_DETAILS_BY_SESSION_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_SESSION_SECTION_TEST_ID,
@@ -19,7 +19,7 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 
 jest.mock('../../shared/hooks/use_fetch_related_alerts_by_session');
 jest.mock('../hooks/use_paginated_alerts');

x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.test.tsx

@@ -18,10 +18,10 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 
 jest.mock('../../shared/hooks/use_fetch_related_cases');
-jest.mock('../../../common/components/links', () => ({
+jest.mock('../../../../common/components/links', () => ({
   CaseDetailsLink: jest
     .fn()
     .mockImplementation(({ title }) => <>{`<CaseDetailsLink title="${title}" />`}</>),

x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.tsx

@@ -11,13 +11,13 @@ import { EuiInMemoryTable } from '@elastic/eui';
 import type { RelatedCase } from '@kbn/cases-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
-import { CaseDetailsLink } from '../../../common/components/links';
+import { CaseDetailsLink } from '../../../../common/components/links';
 import {
   CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_CASES_SECTION_TEST_ID,
 } from './test_ids';
 import { useFetchRelatedCases } from '../../shared/hooks/use_fetch_related_cases';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
 
 const ICON = 'warning';
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/response_details.test.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftPanelContext } from '../context';
-import { rawEventData, TestProviders } from '../../../common/mock';
+import { rawEventData, TestProviders } from '../../../../common/mock';
 import { RESPONSE_DETAILS_TEST_ID } from './test_ids';
 import { ResponseDetails } from './response_details';
-import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 
-jest.mock('../../../common/hooks/use_experimental_features');
-jest.mock('../../../common/lib/kibana', () => {
-  const originalModule = jest.requireActual('../../../common/lib/kibana');
+jest.mock('../../../../common/hooks/use_experimental_features');
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
   return {
     ...originalModule,
     useKibana: jest.fn().mockReturnValue({

x-pack/plugins/security_solution/public/flyout/document_details/left/components/response_details.tsx

@@ -11,9 +11,9 @@ import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { RESPONSE_DETAILS_TEST_ID } from './test_ids';
 import { useLeftPanelContext } from '../context';
-import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
-import { useOsqueryTab } from '../../../common/components/event_details/osquery_tab';
-import { useResponseActionsView } from '../../../common/components/event_details/response_actions_view';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { useOsqueryTab } from '../../../../common/components/event_details/osquery_tab';
+import { useResponseActionsView } from '../../../../common/components/event_details/response_actions_view';
 
 const ExtendedFlyoutWrapper = styled.div`
  figure {

x-pack/plugins/security_solution/public/flyout/document_details/left/components/session_view.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { SESSION_VIEW_TEST_ID } from './test_ids';
 import { SessionView } from './session_view';
 import {
@@ -32,8 +32,8 @@ const mockFieldsData = (prop: string) => {
   return mockData[prop];
 };
 
-jest.mock('../../../common/lib/kibana', () => {
-  const originalModule = jest.requireActual('../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
   return {
     ...originalModule,
     useKibana: jest.fn().mockReturnValue({

x-pack/plugins/security_solution/public/flyout/document_details/left/components/session_view.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../shared/constants/field_names';
 import { getField } from '../../shared/utils';
 import { SESSION_VIEW_TEST_ID } from './test_ids';
-import { useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../../../common/lib/kibana';
 import { useLeftPanelContext } from '../context';
 
 export const SESSION_VIEW_ID = 'session-view';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/suppressed_alerts.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import {
   CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_SECTION_TEST_ID,
   SUPPRESSED_ALERTS_SECTION_TECHNICAL_PREVIEW_TEST_ID,
@@ -17,7 +17,7 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 import { LeftPanelContext } from '../context';
 import { mockContextValue } from '../mocks/mock_context';
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/suppressed_alerts.tsx

@@ -9,13 +9,13 @@ import React from 'react';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { EuiBetaBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
 import {
   CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_SECTION_TEST_ID,
   SUPPRESSED_ALERTS_SECTION_TECHNICAL_PREVIEW_TEST_ID,
 } from './test_ids';
-import { SUPPRESSED_ALERTS_COUNT_TECHNICAL_PREVIEW } from '../../../common/components/event_details/insights/translations';
-import { InvestigateInTimelineAction } from '../../../detections/components/alerts_table/timeline_actions/investigate_in_timeline_action';
+import { SUPPRESSED_ALERTS_COUNT_TECHNICAL_PREVIEW } from '../../../../common/components/event_details/insights/translations';
+import { InvestigateInTimelineAction } from '../../../../detections/components/alerts_table/timeline_actions/investigate_in_timeline_action';
 
 export interface SuppressedAlertsProps {
   /**

x-pack/plugins/security_solution/public/flyout/document_details/left/components/test_ids.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { PREFIX } from '../../shared/test_ids';
+import { PREFIX } from '../../../shared/test_ids';
 
 /* Visualization tab */
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/threat_intelligence_details.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import {
   THREAT_INTELLIGENCE_DETAILS_ENRICHMENTS_TEST_ID,
   THREAT_INTELLIGENCE_DETAILS_LOADING_TEST_ID,
@@ -17,8 +17,8 @@ import {
 import { ThreatIntelligenceDetails } from './threat_intelligence_details';
 import { useThreatIntelligenceDetails } from '../hooks/use_threat_intelligence_details';
 
-jest.mock('../../../common/lib/kibana', () => {
-  const originalModule = jest.requireActual('../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
   return {
     ...originalModule,
     useKibana: jest.fn().mockReturnValue({

x-pack/plugins/security_solution/public/flyout/document_details/left/components/threat_intelligence_details.tsx

@@ -8,11 +8,11 @@
 import React from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import isEmpty from 'lodash/isEmpty';
-import { EnrichmentRangePicker } from '../../../common/components/event_details/cti_details/enrichment_range_picker';
-import { ThreatDetailsView } from '../../../common/components/event_details/cti_details/threat_details_view';
+import { EnrichmentRangePicker } from '../../../../common/components/event_details/cti_details/enrichment_range_picker';
+import { ThreatDetailsView } from '../../../../common/components/event_details/cti_details/threat_details_view';
 import { useThreatIntelligenceDetails } from '../hooks/use_threat_intelligence_details';
 import { THREAT_INTELLIGENCE_DETAILS_LOADING_TEST_ID } from './test_ids';
-import { FlyoutLoading } from '../../shared/components/flyout_loading';
+import { FlyoutLoading } from '../../../shared/components/flyout_loading';
 
 export const THREAT_INTELLIGENCE_TAB_ID = 'threat-intelligence-details';
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.test.tsx

@@ -7,21 +7,21 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import type { Anomalies } from '../../../common/components/ml/types';
-import { TestProviders } from '../../../common/mock';
+import type { Anomalies } from '../../../../common/components/ml/types';
+import { TestProviders } from '../../../../common/mock';
 import { UserDetails } from './user_details';
-import { useMlCapabilities } from '../../../common/components/ml/hooks/use_ml_capabilities';
-import { useRiskScore } from '../../../explore/containers/risk_score';
-import { mockAnomalies } from '../../../common/components/ml/mock';
-import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details';
-import { useUserRelatedHosts } from '../../../common/containers/related_entities/related_hosts';
-import { RiskSeverity } from '../../../../common/search_strategy';
+import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
+import { useRiskScore } from '../../../../explore/containers/risk_score';
+import { mockAnomalies } from '../../../../common/components/ml/mock';
+import { useObservedUserDetails } from '../../../../explore/users/containers/users/observed_details';
+import { useUserRelatedHosts } from '../../../../common/containers/related_entities/related_hosts';
+import { RiskSeverity } from '../../../../../common/search_strategy';
 import {
   USER_DETAILS_TEST_ID,
   USER_DETAILS_INFO_TEST_ID,
   USER_DETAILS_RELATED_HOSTS_TABLE_TEST_ID,
 } from './test_ids';
-import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../shared/components/test_ids';
+import { EXPANDABLE_PANEL_CONTENT_TEST_ID } from '../../../shared/components/test_ids';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -39,8 +39,8 @@ jest.mock('react-redux', () => {
 
 const from = '2022-07-20T08:20:18.966Z';
 const to = '2022-07-28T08:20:18.966Z';
-jest.mock('../../../common/containers/use_global_time', () => {
-  const actual = jest.requireActual('../../../common/containers/use_global_time');
+jest.mock('../../../../common/containers/use_global_time', () => {
+  const actual = jest.requireActual('../../../../common/containers/use_global_time');
   return {
     ...actual,
     useGlobalTime: jest
@@ -53,14 +53,14 @@ jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('uuid'),
 }));
 
-jest.mock('../../../common/components/ml/hooks/use_ml_capabilities');
+jest.mock('../../../../common/components/ml/hooks/use_ml_capabilities');
 const mockUseMlUserPermissions = useMlCapabilities as jest.Mock;
 
-jest.mock('../../../common/containers/sourcerer', () => ({
+jest.mock('../../../../common/containers/sourcerer', () => ({
   useSourcererDataView: jest.fn().mockReturnValue({ selectedPatterns: ['index'] }),
 }));
 
-jest.mock('../../../common/components/ml/anomaly/anomaly_table_provider', () => ({
+jest.mock('../../../../common/components/ml/anomaly/anomaly_table_provider', () => ({
   AnomalyTableProvider: ({
     children,
   }: {
@@ -72,15 +72,15 @@ jest.mock('../../../common/components/ml/anomaly/anomaly_table_provider', () =>
   }) => children({ anomaliesData: mockAnomalies, isLoadingAnomaliesData: false, jobNameById: {} }),
 }));
 
-jest.mock('../../../helper_hooks', () => ({ useHasSecurityCapability: () => true }));
+jest.mock('../../../../helper_hooks', () => ({ useHasSecurityCapability: () => true }));
 
-jest.mock('../../../explore/users/containers/users/observed_details');
+jest.mock('../../../../explore/users/containers/users/observed_details');
 const mockUseObservedUserDetails = useObservedUserDetails as jest.Mock;
 
-jest.mock('../../../common/containers/related_entities/related_hosts');
+jest.mock('../../../../common/containers/related_entities/related_hosts');
 const mockUseUsersRelatedHosts = useUserRelatedHosts as jest.Mock;
 
-jest.mock('../../../explore/containers/risk_score');
+jest.mock('../../../../explore/containers/risk_score');
 const mockUseRiskScore = useRiskScore as jest.Mock;
 
 const timestamp = '2022-07-25T08:20:18.966Z';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx

@@ -21,36 +21,36 @@ import {
 } from '@elastic/eui';
 import type { EuiBasicTableColumn } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { getSourcererScopeId } from '../../../helpers';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
-import type { RelatedHost } from '../../../../common/search_strategy/security_solution/related_entities/related_hosts';
-import type { RiskSeverity } from '../../../../common/search_strategy';
-import { UserOverview } from '../../../overview/components/user_overview';
-import { AnomalyTableProvider } from '../../../common/components/ml/anomaly/anomaly_table_provider';
-import { InspectButton, InspectButtonContainer } from '../../../common/components/inspect';
-import { NetworkDetailsLink } from '../../../common/components/links';
-import { RiskScoreEntity } from '../../../../common/search_strategy';
-import { RiskScoreLevel } from '../../../explore/components/risk_score/severity/common';
-import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers';
+import { getSourcererScopeId } from '../../../../helpers';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
+import type { RelatedHost } from '../../../../../common/search_strategy/security_solution/related_entities/related_hosts';
+import type { RiskSeverity } from '../../../../../common/search_strategy';
+import { UserOverview } from '../../../../overview/components/user_overview';
+import { AnomalyTableProvider } from '../../../../common/components/ml/anomaly/anomaly_table_provider';
+import { InspectButton, InspectButtonContainer } from '../../../../common/components/inspect';
+import { NetworkDetailsLink } from '../../../../common/components/links';
+import { RiskScoreEntity } from '../../../../../common/search_strategy';
+import { RiskScoreLevel } from '../../../../explore/components/risk_score/severity/common';
+import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/field_renderers';
 import {
   SecurityCellActions,
   CellActionsMode,
   SecurityCellActionsTrigger,
-} from '../../../common/components/cell_actions';
-import { InputsModelId } from '../../../common/store/inputs/constants';
-import { useGlobalTime } from '../../../common/containers/use_global_time';
-import { useSourcererDataView } from '../../../common/containers/sourcerer';
-import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
-import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
-import { hostToCriteria } from '../../../common/components/ml/criteria/host_to_criteria';
-import { manageQuery } from '../../../common/components/page/manage_query';
-import { useObservedUserDetails } from '../../../explore/users/containers/users/observed_details';
-import { useUserRelatedHosts } from '../../../common/containers/related_entities/related_hosts';
-import { useMlCapabilities } from '../../../common/components/ml/hooks/use_ml_capabilities';
-import { getEmptyTagValue } from '../../../common/components/empty_value';
+} from '../../../../common/components/cell_actions';
+import { InputsModelId } from '../../../../common/store/inputs/constants';
+import { useGlobalTime } from '../../../../common/containers/use_global_time';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { scoreIntervalToDateTime } from '../../../../common/components/ml/score/score_interval_to_datetime';
+import { setAbsoluteRangeDatePicker } from '../../../../common/store/inputs/actions';
+import { hostToCriteria } from '../../../../common/components/ml/criteria/host_to_criteria';
+import { manageQuery } from '../../../../common/components/page/manage_query';
+import { useObservedUserDetails } from '../../../../explore/users/containers/users/observed_details';
+import { useUserRelatedHosts } from '../../../../common/containers/related_entities/related_hosts';
+import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
 import { USER_DETAILS_RELATED_HOSTS_TABLE_TEST_ID, USER_DETAILS_TEST_ID } from './test_ids';
-import { ENTITY_RISK_LEVEL } from '../../../explore/components/risk_score/translations';
-import { useHasSecurityCapability } from '../../../helper_hooks';
+import { ENTITY_RISK_LEVEL } from '../../../../explore/components/risk_score/translations';
+import { useHasSecurityCapability } from '../../../../helper_hooks';
 
 const USER_DETAILS_ID = 'entities-users-details';
 const RELATED_HOSTS_ID = 'entities-users-related-hosts';

x-pack/plugins/security_solution/public/flyout/document_details/left/context.tsx

@@ -9,13 +9,13 @@ import type { BrowserFields, TimelineEventsDetailsItem } from '@kbn/timelines-pl
 import React, { createContext, memo, useContext, useMemo } from 'react';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { useEventDetails } from '../shared/hooks/use_event_details';
-import { FlyoutError } from '../shared/components/flyout_error';
-import { FlyoutLoading } from '../shared/components/flyout_loading';
-import type { SearchHit } from '../../../common/search_strategy';
+import { FlyoutError } from '../../shared/components/flyout_error';
+import { FlyoutLoading } from '../../shared/components/flyout_loading';
+import type { SearchHit } from '../../../../common/search_strategy';
 import type { LeftPanelProps } from '.';
-import type { GetFieldsData } from '../../common/hooks/use_get_fields_data';
-import { useBasicDataFromDetailsData } from '../../timelines/components/side_panel/event_details/helpers';
-import { useRuleWithFallback } from '../../detection_engine/rule_management/logic/use_rule_with_fallback';
+import type { GetFieldsData } from '../../../common/hooks/use_get_fields_data';
+import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
+import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
 
 export interface LeftPanelContext {
   /**

x-pack/plugins/security_solution/public/flyout/document_details/left/hooks/use_fetch_alerts.test.tsx

@@ -8,11 +8,11 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../../../common/lib/kibana';
 import { createFindAlerts } from '../services/find_alerts';
 import { useFetchAlerts, type UseAlertsQueryParams } from './use_fetch_alerts';
 
-jest.mock('../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 jest.mock('../services/find_alerts');
 
 describe('useFetchAlerts', () => {

x-pack/plugins/security_solution/public/flyout/document_details/left/hooks/use_fetch_alerts.ts

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import type { AggregationsAggregate, SearchResponse } from '@elastic/elasticsearch/lib/api/types';
 import { isNumber } from 'lodash';
-import { useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../../../common/lib/kibana';
 import { type AlertsQueryParams, createFindAlerts } from '../services/find_alerts';
 
 export type UseAlertsQueryParams = AlertsQueryParams;

x-pack/plugins/security_solution/public/flyout/document_details/left/hooks/use_threat_intelligence_details.test.ts

@@ -8,25 +8,25 @@
 import { useThreatIntelligenceDetails } from './use_threat_intelligence_details';
 import { renderHook } from '@testing-library/react-hooks';
 
-import { useTimelineEventsDetails } from '../../../timelines/containers/details';
-import { useSourcererDataView } from '../../../common/containers/sourcerer';
-import { useRouteSpy } from '../../../common/utils/route/use_route_spy';
+import { useTimelineEventsDetails } from '../../../../timelines/containers/details';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { useRouteSpy } from '../../../../common/utils/route/use_route_spy';
 import { useLeftPanelContext } from '../context';
-import { useInvestigationTimeEnrichment } from '../../../common/containers/cti/event_enrichment';
-import { SecurityPageName } from '../../../../common/constants';
-import type { RouteSpyState } from '../../../common/utils/route/types';
+import { useInvestigationTimeEnrichment } from '../../../../common/containers/cti/event_enrichment';
+import { SecurityPageName } from '../../../../../common/constants';
+import type { RouteSpyState } from '../../../../common/utils/route/types';
 import {
   type GetBasicDataFromDetailsData,
   useBasicDataFromDetailsData,
-} from '../../../timelines/components/side_panel/event_details/helpers';
+} from '../../../../timelines/components/side_panel/event_details/helpers';
 import { mockContextValue } from '../mocks/mock_context';
 
-jest.mock('../../../timelines/containers/details');
-jest.mock('../../../common/containers/sourcerer');
-jest.mock('../../../common/utils/route/use_route_spy');
+jest.mock('../../../../timelines/containers/details');
+jest.mock('../../../../common/containers/sourcerer');
+jest.mock('../../../../common/utils/route/use_route_spy');
 jest.mock('../context');
-jest.mock('../../../common/containers/cti/event_enrichment');
-jest.mock('../../../timelines/components/side_panel/event_details/helpers');
+jest.mock('../../../../common/containers/cti/event_enrichment');
+jest.mock('../../../../timelines/components/side_panel/event_details/helpers');
 
 describe('useThreatIntelligenceDetails', () => {
   beforeEach(() => {

x-pack/plugins/security_solution/public/flyout/document_details/left/hooks/use_threat_intelligence_details.ts

@@ -6,22 +6,22 @@
  */
 
 import { useMemo } from 'react';
-import type { RunTimeMappings } from '../../../../common/api/search_strategy';
-import type { CtiEnrichment, EventFields } from '../../../../common/search_strategy';
-import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
+import type { RunTimeMappings } from '../../../../../common/api/search_strategy';
+import type { CtiEnrichment, EventFields } from '../../../../../common/search_strategy';
+import { useBasicDataFromDetailsData } from '../../../../timelines/components/side_panel/event_details/helpers';
 import {
   filterDuplicateEnrichments,
   getEnrichmentFields,
   parseExistingEnrichments,
   timelineDataToEnrichment,
-} from '../../../common/components/event_details/cti_details/helpers';
-import { SecurityPageName } from '../../../../common/constants';
-import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+} from '../../../../common/components/event_details/cti_details/helpers';
+import { SecurityPageName } from '../../../../../common/constants';
+import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 
-import { useInvestigationTimeEnrichment } from '../../../common/containers/cti/event_enrichment';
-import { useTimelineEventsDetails } from '../../../timelines/containers/details';
-import { useSourcererDataView } from '../../../common/containers/sourcerer';
-import { useRouteSpy } from '../../../common/utils/route/use_route_spy';
+import { useInvestigationTimeEnrichment } from '../../../../common/containers/cti/event_enrichment';
+import { useTimelineEventsDetails } from '../../../../timelines/containers/details';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { useRouteSpy } from '../../../../common/utils/route/use_route_spy';
 import { useLeftPanelContext } from '../context';
 
 export interface ThreatIntelligenceDetailsValue {

x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/test_ids.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { PREFIX } from '../../shared/test_ids';
+import { PREFIX } from '../../../shared/test_ids';
 
 const VISUALIZE_TAB_TEST_ID = `${PREFIX}VisualizeTab` as const;
 export const VISUALIZE_TAB_BUTTON_GROUP_TEST_ID = `${VISUALIZE_TAB_TEST_ID}ButtonGroup` as const;

x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx

@@ -21,8 +21,8 @@ import {
 } from './test_ids';
 import { ANALYZE_GRAPH_ID, AnalyzeGraph } from '../components/analyze_graph';
 import { SESSION_VIEW_ID, SessionView } from '../components/session_view';
-import { ALERTS_ACTIONS } from '../../../common/lib/apm/user_actions';
-import { useStartTransaction } from '../../../common/lib/apm/use_start_transaction';
+import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
+import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
 
 const visualizeButtons: EuiButtonGroupOptionProps[] = [
   {

x-pack/plugins/security_solution/public/flyout/document_details/left/test_ids.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { PREFIX } from '../shared/test_ids';
+import { PREFIX } from '../../shared/test_ids';
 
 export const VISUALIZE_TAB_TEST_ID = `${PREFIX}FlyoutVisualizeTab` as const;
 export const INSIGHTS_TAB_TEST_ID = `${PREFIX}FlyoutInsightsTab` as const;

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/alert_reason_preview.test.tsx

@@ -13,7 +13,7 @@ import { mockContextValue } from '../mocks/mock_context';
 import { ALERT_REASON_PREVIEW_BODY_TEST_ID } from './test_ids';
 import { AlertReasonPreview } from './alert_reason_preview';
 import { ThemeProvider } from 'styled-components';
-import { getMockTheme } from '../../../common/lib/kibana/kibana_react.mock';
+import { getMockTheme } from '../../../../common/lib/kibana/kibana_react.mock';
 
 const mockTheme = getMockTheme({ eui: { euiFontSizeXS: '' } });
 

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/alert_reason_preview.tsx

@@ -12,9 +12,9 @@ import { euiThemeVars } from '@kbn/ui-theme';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ALERT_REASON_PREVIEW_BODY_TEST_ID } from './test_ids';
 import { usePreviewPanelContext } from '../context';
-import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer';
-import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
-import { FlyoutError } from '../../shared/components/flyout_error';
+import { getRowRenderer } from '../../../../timelines/components/timeline/body/renderers/get_row_renderer';
+import { defaultRowRenderers } from '../../../../timelines/components/timeline/body/renderers';
+import { FlyoutError } from '../../../shared/components/flyout_error';
 
 const ReasonPreviewContainerWrapper = styled.div`
   overflow-x: auto;

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.test.tsx

@@ -13,16 +13,16 @@ import { mockContextValue } from '../mocks/mock_context';
 import { mockFlyoutContextValue } from '../../shared/mocks/mock_flyout_context';
 import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
 import { ThemeProvider } from 'styled-components';
-import { getMockTheme } from '../../../common/lib/kibana/kibana_react.mock';
-import { TestProviders } from '../../../common/mock';
-import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
-import { getStepsData } from '../../../detections/pages/detection_engine/rules/helpers';
+import { getMockTheme } from '../../../../common/lib/kibana/kibana_react.mock';
+import { TestProviders } from '../../../../common/mock';
+import { useRuleWithFallback } from '../../../../detection_engine/rule_management/logic/use_rule_with_fallback';
+import { getStepsData } from '../../../../detections/pages/detection_engine/rules/helpers';
 import {
   mockAboutStepRule,
   mockDefineStepRule,
   mockScheduleStepRule,
-} from '../../../detection_engine/rule_management_ui/components/rules_table/__mocks__/mock';
-import { useGetSavedQuery } from '../../../detections/pages/detection_engine/rules/use_get_saved_query';
+} from '../../../../detection_engine/rule_management_ui/components/rules_table/__mocks__/mock';
+import { useGetSavedQuery } from '../../../../detections/pages/detection_engine/rules/use_get_saved_query';
 import {
   RULE_PREVIEW_BODY_TEST_ID,
   RULE_PREVIEW_ABOUT_HEADER_TEST_ID,
@@ -36,16 +36,16 @@ import {
   RULE_PREVIEW_LOADING_TEST_ID,
 } from './test_ids';
 
-jest.mock('../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 const mockUseRuleWithFallback = useRuleWithFallback as jest.Mock;
-jest.mock('../../../detection_engine/rule_management/logic/use_rule_with_fallback');
+jest.mock('../../../../detection_engine/rule_management/logic/use_rule_with_fallback');
 
 const mockGetStepsData = getStepsData as jest.Mock;
-jest.mock('../../../detections/pages/detection_engine/rules/helpers');
+jest.mock('../../../../detections/pages/detection_engine/rules/helpers');
 
 const mockUseGetSavedQuery = useGetSavedQuery as jest.Mock;
-jest.mock('../../../detections/pages/detection_engine/rules/use_get_saved_query');
+jest.mock('../../../../detections/pages/detection_engine/rules/use_get_saved_query');
 
 const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
 

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview.tsx

@@ -7,20 +7,20 @@
 import React, { memo, useState, useEffect } from 'react';
 import { EuiText, EuiHorizontalRule, EuiSpacer, EuiPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useKibana } from '../../../common/lib/kibana';
-import { useGetSavedQuery } from '../../../detections/pages/detection_engine/rules/use_get_saved_query';
-import type { Rule } from '../../../detection_engine/rule_management/logic';
+import { useKibana } from '../../../../common/lib/kibana';
+import { useGetSavedQuery } from '../../../../detections/pages/detection_engine/rules/use_get_saved_query';
+import type { Rule } from '../../../../detection_engine/rule_management/logic';
 import { usePreviewPanelContext } from '../context';
 import { ExpandableSection } from '../../right/components/expandable_section';
-import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
-import { getStepsData } from '../../../detections/pages/detection_engine/rules/helpers';
+import { useRuleWithFallback } from '../../../../detection_engine/rule_management/logic/use_rule_with_fallback';
+import { getStepsData } from '../../../../detections/pages/detection_engine/rules/helpers';
 import { RulePreviewTitle } from './rule_preview_title';
-import { StepAboutRuleReadOnly } from '../../../detections/components/rules/step_about_rule';
-import { StepDefineRuleReadOnly } from '../../../detections/components/rules/step_define_rule';
-import { StepScheduleRuleReadOnly } from '../../../detections/components/rules/step_schedule_rule';
-import { StepRuleActionsReadOnly } from '../../../detections/components/rules/step_rule_actions';
-import { FlyoutLoading } from '../../shared/components/flyout_loading';
-import { FlyoutError } from '../../shared/components/flyout_error';
+import { StepAboutRuleReadOnly } from '../../../../detections/components/rules/step_about_rule';
+import { StepDefineRuleReadOnly } from '../../../../detections/components/rules/step_define_rule';
+import { StepScheduleRuleReadOnly } from '../../../../detections/components/rules/step_schedule_rule';
+import { StepRuleActionsReadOnly } from '../../../../detections/components/rules/step_rule_actions';
+import { FlyoutLoading } from '../../../shared/components/flyout_loading';
+import { FlyoutError } from '../../../shared/components/flyout_error';
 import {
   RULE_PREVIEW_BODY_TEST_ID,
   RULE_PREVIEW_ABOUT_TEST_ID,

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview_footer.test.tsx

@@ -7,7 +7,7 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { mockContextValue } from '../mocks/mock_context';
 import { PreviewPanelContext } from '../context';
 import { RULE_PREVIEW_FOOTER_TEST_ID, RULE_PREVIEW_NAVIGATE_TO_RULE_TEST_ID } from './test_ids';

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview_footer.tsx

@@ -9,8 +9,8 @@ import React, { memo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiFlyoutFooter } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { usePreviewPanelContext } from '../context';
-import { RenderRuleName } from '../../../timelines/components/timeline/body/renderers/formatted_field_helpers';
-import { SIGNAL_RULE_NAME_FIELD_NAME } from '../../../timelines/components/timeline/body/renderers/constants';
+import { RenderRuleName } from '../../../../timelines/components/timeline/body/renderers/formatted_field_helpers';
+import { SIGNAL_RULE_NAME_FIELD_NAME } from '../../../../timelines/components/timeline/body/renderers/constants';
 import { RULE_PREVIEW_FOOTER_TEST_ID } from './test_ids';
 
 /**

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview_title.test.tsx

@@ -11,8 +11,8 @@ import type { RulePreviewTitleProps } from './rule_preview_title';
 import { RulePreviewTitle } from './rule_preview_title';
 import { mockFlyoutContextValue } from '../../shared/mocks/mock_flyout_context';
 import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
-import { TestProviders } from '../../../common/mock';
-import type { Rule } from '../../../detection_engine/rule_management/logic';
+import { TestProviders } from '../../../../common/mock';
+import type { Rule } from '../../../../detection_engine/rule_management/logic';
 import {
   RULE_PREVIEW_TITLE_TEST_ID,
   RULE_PREVIEW_RULE_CREATED_BY_TEST_ID,

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/rule_preview_title.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import { EuiTitle, EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
-import { DELETED_RULE } from '../../../detection_engine/rule_details_ui/pages/rule_details/translations';
-import type { Rule } from '../../../detection_engine/rule_management/logic';
-import { CreatedBy, UpdatedBy } from '../../../detections/components/rules/rule_info';
+import { DELETED_RULE } from '../../../../detection_engine/rule_details_ui/pages/rule_details/translations';
+import type { Rule } from '../../../../detection_engine/rule_management/logic';
+import { CreatedBy, UpdatedBy } from '../../../../detections/components/rules/rule_info';
 import {
   RULE_PREVIEW_TITLE_TEST_ID,
   RULE_PREVIEW_RULE_CREATED_BY_TEST_ID,

x-pack/plugins/security_solution/public/flyout/document_details/preview/components/test_ids.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { PREFIX } from '../../shared/test_ids';
+import { PREFIX } from '../../../shared/test_ids';
 import { CONTENT_TEST_ID, HEADER_TEST_ID } from '../../right/components/expandable_section';
 
 /* Rule preview */

x-pack/plugins/security_solution/public/flyout/document_details/preview/context.tsx

@@ -9,8 +9,8 @@ import React, { createContext, memo, useContext, useMemo } from 'react';
 import type { DataViewBase } from '@kbn/es-query';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { useEventDetails } from '../shared/hooks/use_event_details';
-import { FlyoutError } from '../shared/components/flyout_error';
-import { FlyoutLoading } from '../shared/components/flyout_loading';
+import { FlyoutError } from '../../shared/components/flyout_error';
+import { FlyoutLoading } from '../../shared/components/flyout_loading';
 import type { PreviewPanelProps } from '.';
 
 export interface PreviewPanelContext {

x-pack/plugins/security_solution/public/flyout/document_details/right/components/about_section.test.tsx

@@ -8,12 +8,12 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
 import { ABOUT_SECTION_CONTENT_TEST_ID, ABOUT_SECTION_HEADER_TEST_ID } from './test_ids';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { AboutSection } from './about_section';
 import { RightPanelContext } from '../context';
 import { mockContextValue } from '../mocks/mock_context';
 
-jest.mock('../../../common/components/link_to');
+jest.mock('../../../../common/components/link_to');
 
 const renderAboutSection = (expanded: boolean = false) =>
   render(

x-pack/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview.test.tsx

@@ -7,8 +7,8 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { TestProviders } from '../../../common/mock';
-import { useAlertPrevalenceFromProcessTree } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
+import { TestProviders } from '../../../../common/mock';
+import { useAlertPrevalenceFromProcessTree } from '../../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
 import { mockContextValue } from '../mocks/mock_context';
 import { mockDataFormattedForFieldBrowser } from '../../shared/mocks/mock_data_formatted_for_field_browser';
 import { RightPanelContext } from '../context';
@@ -16,7 +16,7 @@ import { AnalyzerPreview } from './analyzer_preview';
 import { ANALYZER_PREVIEW_TEST_ID } from './test_ids';
 import * as mock from '../mocks/mock_analyzer_data';
 
-jest.mock('../../../common/containers/alerts/use_alert_prevalence_from_process_tree', () => ({
+jest.mock('../../../../common/containers/alerts/use_alert_prevalence_from_process_tree', () => ({
   useAlertPrevalenceFromProcessTree: jest.fn(),
 }));
 const mockUseAlertPrevalenceFromProcessTree = useAlertPrevalenceFromProcessTree as jest.Mock;

x-pack/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview.tsx

@@ -13,9 +13,9 @@ import { ANALYZER_PREVIEW_TEST_ID, ANALYZER_PREVIEW_LOADING_TEST_ID } from './te
 import { getTreeNodes } from '../utils/analyzer_helpers';
 import { ANCESTOR_ID, RULE_INDICES } from '../../shared/constants/field_names';
 import { useRightPanelContext } from '../context';
-import { useAlertPrevalenceFromProcessTree } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
-import type { StatsNode } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
-import { isActiveTimeline } from '../../../helpers';
+import { useAlertPrevalenceFromProcessTree } from '../../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
+import type { StatsNode } from '../../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
+import { isActiveTimeline } from '../../../../helpers';
 
 const CHILD_COUNT_LIMIT = 3;
 const ANCESTOR_LEVEL = 3;

x-pack/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview_container.test.tsx

@@ -6,14 +6,14 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import React from 'react';
 import { RightPanelContext } from '../context';
 import { mockContextValue } from '../mocks/mock_context';
 import { AnalyzerPreviewContainer } from './analyzer_preview_container';
-import { isInvestigateInResolverActionEnabled } from '../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
+import { isInvestigateInResolverActionEnabled } from '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
 import { ANALYZER_PREVIEW_TEST_ID } from './test_ids';
-import { useAlertPrevalenceFromProcessTree } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
+import { useAlertPrevalenceFromProcessTree } from '../../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
 import * as mock from '../mocks/mock_analyzer_data';
 import {
   EXPANDABLE_PANEL_CONTENT_TEST_ID,
@@ -21,14 +21,16 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 import { mockDataFormattedForFieldBrowser } from '../../shared/mocks/mock_data_formatted_for_field_browser';
-import { useInvestigateInTimeline } from '../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
+import { useInvestigateInTimeline } from '../../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
 
-jest.mock('../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver');
-jest.mock('../../../common/containers/alerts/use_alert_prevalence_from_process_tree');
 jest.mock(
-  '../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline'
+  '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver'
+);
+jest.mock('../../../../common/containers/alerts/use_alert_prevalence_from_process_tree');
+jest.mock(
+  '../../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline'
 );
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');

x-pack/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview_container.tsx

@@ -10,16 +10,16 @@ import { useDispatch } from 'react-redux';
 import { TimelineTabs } from '@kbn/securitysolution-data-table';
 import { EuiLink, EuiMark } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useStartTransaction } from '../../../common/lib/apm/use_start_transaction';
-import { useInvestigateInTimeline } from '../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
-import { ALERTS_ACTIONS } from '../../../common/lib/apm/user_actions';
-import { getScopedActions } from '../../../helpers';
-import { setActiveTabTimeline } from '../../../timelines/store/timeline/actions';
+import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
+import { useInvestigateInTimeline } from '../../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
+import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
+import { getScopedActions } from '../../../../helpers';
+import { setActiveTabTimeline } from '../../../../timelines/store/timeline/actions';
 import { useRightPanelContext } from '../context';
-import { isInvestigateInResolverActionEnabled } from '../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
+import { isInvestigateInResolverActionEnabled } from '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
 import { AnalyzerPreview } from './analyzer_preview';
 import { ANALYZER_PREVIEW_TEST_ID } from './test_ids';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
 
 const timelineId = 'timeline-1';
 

x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
 import { RightPanelContext } from '../context';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { CorrelationsOverview } from './correlations_overview';
 import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details';
 import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
@@ -36,7 +36,7 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 
 jest.mock('../../shared/hooks/use_show_related_alerts_by_ancestry');
 jest.mock('../../shared/hooks/use_show_related_alerts_by_same_source_event');

x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.tsx

@@ -9,7 +9,7 @@ import React, { useCallback } from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
 import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
 import { useShowRelatedAlertsBySession } from '../../shared/hooks/use_show_related_alerts_by_session';
 import { RelatedAlertsBySession } from './related_alerts_by_session';
 import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_show_related_alerts_by_same_source_event';

x-pack/plugins/security_solution/public/flyout/document_details/right/components/description.tsx

@@ -13,7 +13,7 @@ import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { useRightPanelContext } from '../context';
-import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
+import { useBasicDataFromDetailsData } from '../../../../timelines/components/side_panel/event_details/helpers';
 import {
   DESCRIPTION_DETAILS_TEST_ID,
   DESCRIPTION_TITLE_TEST_ID,

x-pack/plugins/security_solution/public/flyout/document_details/right/components/entities_overview.test.tsx

@@ -14,14 +14,14 @@ import {
   INSIGHTS_ENTITIES_TEST_ID,
 } from './test_ids';
 import { EntitiesOverview } from './entities_overview';
-import { TestProviders } from '../../../common/mock';
+import { TestProviders } from '../../../../common/mock';
 import { mockGetFieldsData } from '../../shared/mocks/mock_get_fields_data';
 import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID,
   EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
-} from '../../shared/components/test_ids';
+} from '../../../shared/components/test_ids';
 
 const TOGGLE_ICON_TEST_ID = EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID(INSIGHTS_ENTITIES_TEST_ID);
 const TITLE_LINK_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(INSIGHTS_ENTITIES_TEST_ID);

x-pack/plugins/security_solution/public/flyout/document_details/right/components/entities_overview.tsx

@@ -10,7 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { INSIGHTS_ENTITIES_TEST_ID } from './test_ids';
-import { ExpandablePanel } from '../../shared/components/expandable_panel';
+import { ExpandablePanel } from '../../../shared/components/expandable_panel';
 import { useRightPanelContext } from '../context';
 import { getField } from '../../shared/utils';
 import { HostEntityOverview } from './host_entity_overview';