[Security Solution][Expandable flyout] Introducing Flyout history in …

…document flyout (elastic#184970)

## Summary

This PR introduced flyout history in expandable flyouts to keep tracked
of previously opened flyouts. The history button is available when
feature flag `newExpandableFlyoutNavigationEnabled` is enabled.

Flag is currently default `False`

### Changes in
[kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout)
package

- When `openFlyout` is called, the **right** panel will be appended to
the `history` slice in redux.
- History can be accessed via `useExpandableFlyoutHistory` API

![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68)

### Changes to expandable flyouts in security solution

- When feature flag is on, opening more than 1 flyout will show a
history icon. Currently max at 10 entries
- When user clicks a flyout from the history, it does not add on top on
history, instead the position will be moved up. There is no duplicate
entries.

![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525)

**To illustrate how ordering works:**
-> History: [host1, user1, alert1]
-> clicks alert1
-> History: [alert1, host1, user1]
Keep in mind this is slightly different in the actual implementation, as
we do not display the current entry (i.e. alert1 in this example)

### Other changes in order to support flyout history
- Added a preview panel for network. Previously we reused the panel for
both network flyout and network preview. A dedicated network preview
with out history is now available
- Replaced `openRightPanel` with `openFlyout` in applicable places
- Added `isPreview` and `isPreviewMode` checks in EA flyouts

## How to test
- Enable feature flag `newExpandableFlyoutNavigationEnabled`

<details>
<summary>✅  Alerts page</summary>
Available for alert, host, user, rule name and ip's
<img
src="https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c"
/>
</details>

<details>
<summary>✅  Explore pages (event table)</summary>
Available for events, host, user, rule name and ip's
<img
src="https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a"
/>
</details>

<details>
<summary>✅  Cases</summary>
Note: the rule and entity link still go to a page, this will be
addressed in a separate PR
<img
src="https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486"
/>
</details>

<details>
<summary>✅  Discover in severless</summary>
- enable `discover.experimental.enabledProfiles:
['security-root-profile']`
<img
src="https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62"
/>
</details>

<details>
<summary>❌ Disabled in alert preview </summary>
<img
src="https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193"
/>
</details>

<details>
<summary>❌ Disabled in preview mode </summary>
<img
src="https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93"
/>
</details>

## WIP
- [x] Investigate performance with process history
- [ ] Final ui of the entries - pending UIUX team

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit 5b6887d)

# Conflicts:
#	x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/host_name.test.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/user_name.test.tsx

packages/kbn-expandable-flyout/README.md

@@ -61,6 +61,8 @@ To control (or mutate) flyout's layout, you can utilize [useExpandableFlyoutApi]
 
 > The expandable flyout propagates the `onClose` callback from the EuiFlyout component. As we recommend having a single instance of the flyout in your application, it's up to the application's code to dispatch the event (through Redux, window events, observable, prop drilling...). 
 
+When calling `openFlyout`, the right panel state is automatically appended in the `history` slice in the redux context. To access the flyout's history, you can use the [useExpandableFlyoutHistory](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_history.ts) hook.
+
 ## Usage
 
 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:

packages/kbn-expandable-flyout/index.ts

@@ -11,6 +11,7 @@ export { ExpandableFlyout } from './src';
 
 export { useExpandableFlyoutApi } from './src/hooks/use_expandable_flyout_api';
 export { useExpandableFlyoutState } from './src/hooks/use_expandable_flyout_state';
+export { useExpandableFlyoutHistory } from './src/hooks/use_expandable_flyout_history';
 
 export { type FlyoutPanels as ExpandableFlyoutState } from './src/store/state';
 

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

@@ -58,6 +58,7 @@ describe('Container', () => {
             },
             left: undefined,
             preview: undefined,
+            history: [{ id: 'key' }],
           },
         },
       },
@@ -85,6 +86,7 @@ describe('Container', () => {
               id: 'key',
             },
             preview: undefined,
+            history: [],
           },
         },
       },
@@ -112,6 +114,7 @@ describe('Container', () => {
                 id: 'key',
               },
             ],
+            history: [],
           },
         },
       },
@@ -137,6 +140,7 @@ describe('Container', () => {
             },
             left: undefined,
             preview: undefined,
+            history: [],
           },
         },
       },
@@ -163,6 +167,7 @@ describe('Container', () => {
             },
             left: undefined,
             preview: undefined,
+            history: [],
           },
         },
       },

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

@@ -30,6 +30,7 @@ describe('PreviewSection', () => {
               id: 'key',
             },
           ],
+          history: [],
         },
       },
     },

packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_history.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { REDUX_ID_FOR_MEMORY_STORAGE } from '../constants';
+import { useExpandableFlyoutContext } from '../context';
+import { selectHistoryById, useSelector } from '../store/redux';
+
+/**
+ * This hook allows you to access the flyout state, read open right, left and preview panels.
+ */
+export const useExpandableFlyoutHistory = () => {
+  const { urlKey } = useExpandableFlyoutContext();
+  // if no urlKey is provided, we are in memory storage mode and use the reserved word 'memory'
+  const id = urlKey || REDUX_ID_FOR_MEMORY_STORAGE;
+  return useSelector(selectHistoryById(id));
+};

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

@@ -111,6 +111,7 @@ export const Right: Story<void> = () => {
           },
           left: undefined,
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -139,6 +140,7 @@ export const Left: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -171,6 +173,7 @@ export const Preview: Story<void> = () => {
               id: 'preview1',
             },
           ],
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -206,6 +209,7 @@ export const MultiplePreviews: Story<void> = () => {
               id: 'preview2',
             },
           ],
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -232,6 +236,7 @@ export const CollapsedPushMode: Story<void> = () => {
           },
           left: undefined,
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -260,6 +265,7 @@ export const ExpandedPushMode: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -288,6 +294,7 @@ export const DisableTypeSelection: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -318,6 +325,7 @@ export const ResetWidths: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },
@@ -343,6 +351,7 @@ export const DisableResizeWidthSelection: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
+          history: [{ id: 'right' }],
         },
       },
     },

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

@@ -51,6 +51,7 @@ describe('ExpandableFlyout', () => {
             },
             left: undefined,
             preview: undefined,
+            history: [{ id: 'key' }],
           },
         },
       },

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

@@ -34,6 +34,7 @@ describe('UrlSynchronizer', () => {
             right: { id: 'key1' },
             left: { id: 'key11' },
             preview: undefined,
+            history: [{ id: 'key1' }],
           },
         },
         needsSync: true,
@@ -93,6 +94,7 @@ describe('UrlSynchronizer', () => {
             right: { id: 'key1' },
             left: { id: 'key2' },
             preview: undefined,
+            history: [{ id: 'key1' }],
           },
         },
         needsSync: true,