[Security Solution][Expandable flyout] show last open in the history

x-pack/solutions/security/packages/expandable-flyout/README.md

@@ -46,6 +46,10 @@ The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/ma
 
 To retrieve the flyout's layout (left, right and preview panels), you can utilize [useExpandableFlyoutState](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/packages/expandable-flyout/src/hooks/use_expandable_flyout_state.ts).
 
+The flyout also stores a history of all the opened panels (we push values via the `openPanelsAction` action only) for
+the current session. That history can be retrieved
+using [useExpandableFlyoutHistory](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/packages/expandable-flyout/src/hooks/use_expandable_flyout_history.ts).
+
 To control (or mutate) flyout's layout, you can utilize [useExpandableFlyoutApi](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/packages/expandable-flyout/src/hooks/use_expandable_flyout_api.ts).
 
 **Expandable Flyout API** exposes the following methods:

x-pack/solutions/security/packages/expandable-flyout/index.ts

@@ -16,4 +16,9 @@ export { type FlyoutPanels as ExpandableFlyoutState } from './src/store/state';
 export { ExpandableFlyoutProvider } from './src/provider';
 
 export type { ExpandableFlyoutProps } from './src';
-export type { FlyoutPanelProps, PanelPath, ExpandableFlyoutApi } from './src/types';
+export type {
+  FlyoutPanelProps,
+  PanelPath,
+  ExpandableFlyoutApi,
+  FlyoutPanelHistory,
+} from './src/types';

x-pack/solutions/security/packages/expandable-flyout/src/components/container.test.tsx

@@ -12,8 +12,8 @@ import { Panel } from '../types';
 import {
   LEFT_SECTION_TEST_ID,
   PREVIEW_SECTION_TEST_ID,
-  SETTINGS_MENU_BUTTON_TEST_ID,
   RIGHT_SECTION_TEST_ID,
+  SETTINGS_MENU_BUTTON_TEST_ID,
 } from './test_ids';
 import { initialUiState, type State } from '../store/state';
 import { TestProvider } from '../test/provider';
@@ -56,7 +56,7 @@ describe('Container', () => {
             },
             left: undefined,
             preview: undefined,
-            history: [{ id: 'key' }],
+            history: [{ lastOpen: Date.now(), panel: { id: 'key1' } }],
           },
         },
       },

x-pack/solutions/security/packages/expandable-flyout/src/index.stories.tsx

@@ -109,7 +109,7 @@ export const Right: Story<void> = () => {
           },
           left: undefined,
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -138,7 +138,7 @@ export const Left: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -171,7 +171,7 @@ export const Preview: Story<void> = () => {
               id: 'preview1',
             },
           ],
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -207,7 +207,7 @@ export const MultiplePreviews: Story<void> = () => {
               id: 'preview2',
             },
           ],
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -234,7 +234,7 @@ export const CollapsedPushMode: Story<void> = () => {
           },
           left: undefined,
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -263,7 +263,7 @@ export const ExpandedPushMode: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -292,7 +292,7 @@ export const DisableTypeSelection: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -323,7 +323,7 @@ export const ResetWidths: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },
@@ -349,7 +349,7 @@ export const DisableResizeWidthSelection: Story<void> = () => {
             id: 'left',
           },
           preview: undefined,
-          history: [{ id: 'right' }],
+          history: [{ lastOpen: Date.now(), panel: { id: 'right' } }],
         },
       },
     },

x-pack/solutions/security/packages/expandable-flyout/src/index.test.tsx

@@ -49,7 +49,7 @@ describe('ExpandableFlyout', () => {
             },
             left: undefined,
             preview: undefined,
-            history: [{ id: 'key' }],
+            history: [{ lastOpen: Date.now(), panel: { id: 'key' } }],
           },
         },
       },

x-pack/solutions/security/packages/expandable-flyout/src/provider.test.tsx

@@ -32,7 +32,7 @@ describe('UrlSynchronizer', () => {
             right: { id: 'key1' },
             left: { id: 'key11' },
             preview: undefined,
-            history: [{ id: 'key1' }],
+            history: [{ lastOpen: Date.now(), panel: { id: 'key1' } }],
           },
         },
         needsSync: true,
@@ -92,7 +92,7 @@ describe('UrlSynchronizer', () => {
             right: { id: 'key1' },
             left: { id: 'key2' },
             preview: undefined,
-            history: [{ id: 'key1' }],
+            history: [{ lastOpen: Date.now(), panel: { id: 'key1' } }],
           },
         },
         needsSync: true,