nav poc

packages/kbn-expandable-flyout/index.ts

@@ -11,8 +11,12 @@ 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';
+export {
+  type FlyoutPanels as ExpandableFlyoutState,
+  type FlyoutHistoryProps,
+} from './src/store/state';
 
 export { ExpandableFlyoutProvider } from './src/provider';
 export { withExpandableFlyoutProvider } from './src/with_provider';

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

@@ -21,6 +21,7 @@ import {
   openPreviewPanelAction,
   openRightPanelAction,
   previousPreviewPanelAction,
+  goBackAction,
 } from '../store/actions';
 import { useDispatch } from '../store/redux';
 import { FlyoutPanelProps, type ExpandableFlyoutApi } from '../types';
@@ -87,6 +88,13 @@ export const useExpandableFlyoutApi = () => {
   }, [dispatch, id, history]);
 
   const closePanels = useCallback(() => dispatch(closePanelsAction({ id })), [dispatch, id]);
+  const goBack = useCallback(() => {
+    if (id === REDUX_ID_FOR_MEMORY_STORAGE) {
+      dispatch(goBackAction({ id }));
+    } else {
+      history.goBack();
+    }
+  }, [dispatch, id, history]);
 
   const api: ExpandableFlyoutApi = useMemo(
     () => ({
@@ -99,6 +107,7 @@ export const useExpandableFlyoutApi = () => {
       closePreviewPanel,
       closeFlyout: closePanels,
       previousPreviewPanel,
+      goBack,
     }),
     [
       openPanels,
@@ -110,6 +119,7 @@ export const useExpandableFlyoutApi = () => {
       closePreviewPanel,
       closePanels,
       previousPreviewPanel,
+      goBack,
     ]
   );
 

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

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

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

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

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

packages/kbn-expandable-flyout/src/store/actions.ts

@@ -32,6 +32,7 @@ export enum ActionType {
   changeUserSectionWidths = 'change_user_section_widths',
 
   resetAllUserWidths = 'reset_all_user_widths',
+  goBack = 'goBack',
 }
 
 export const openPanelsAction = createAction<{
@@ -197,3 +198,10 @@ export const changeUserSectionWidthsAction = createAction<{
 }>(ActionType.changeUserSectionWidths);
 
 export const resetAllUserChangedWidthsAction = createAction(ActionType.resetAllUserWidths);
+
+export const goBackAction = createAction<{
+  /**
+   * Unique identifier for the flyout (either the urlKey or 'memory')
+   */
+  id: string;
+}>(ActionType.goBack);