[8.x] [Security Solution][Expandable flyout] Introducing Flyout histo…

…ry in document flyout (#184970) (#203702) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Expandable flyout] Introducing Flyout history in document flyout (#184970)](#184970)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Dec 11, 2024 · c4658e7 · c4658e7
1 parent cf8499e
commit c4658e7
Show file tree

Hide file tree

Showing 56 changed files with 1,320 additions and 206 deletions.
diff --git a/packages/kbn-expandable-flyout/README.md b/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:

diff --git a/packages/kbn-expandable-flyout/index.ts b/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';
 

diff --git a/packages/kbn-expandable-flyout/src/components/container.test.tsx b/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: [],
           },
         },
       },

diff --git a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx
@@ -30,6 +30,7 @@ describe('PreviewSection', () => {
               id: 'key',
             },
           ],
+          history: [],
         },
       },
     },

diff --git a/packages/kbn-expandable-flyout/src/hooks/use_expandable_flyout_history.ts b/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));
+};
diff --git a/packages/kbn-expandable-flyout/src/index.stories.tsx b/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' }],
         },
       },
     },

diff --git a/packages/kbn-expandable-flyout/src/index.test.tsx b/packages/kbn-expandable-flyout/src/index.test.tsx
@@ -51,6 +51,7 @@ describe('ExpandableFlyout', () => {
             },
             left: undefined,
             preview: undefined,
+            history: [{ id: 'key' }],
           },
         },
       },

diff --git a/packages/kbn-expandable-flyout/src/provider.test.tsx b/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,
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ describe('PreviewSection', () => { @@
                   id: 'key',
                 },
               ],
+              history: [],
             },
           },
         },
@@ Expand Down @@