Skip to content

Commit

Permalink
flyout history
Browse files Browse the repository at this point in the history
  • Loading branch information
christineweng committed Aug 28, 2024
1 parent 6bb38c8 commit 270e441
Show file tree
Hide file tree
Showing 33 changed files with 470 additions and 43 deletions.
3 changes: 2 additions & 1 deletion packages/kbn-expandable-flyout/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ 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 FlyoutState as ExpandableFlyoutState } from './src/state';
export { type FlyoutState as ExpandableFlyoutState, type FlyoutHistoryProps } from './src/state';

export { ExpandableFlyoutProvider } from './src/provider';
export { withExpandableFlyoutProvider } from './src/with_provider';
Expand Down
8 changes: 8 additions & 0 deletions packages/kbn-expandable-flyout/src/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export enum ActionType {
previousPreviewPanel = 'previous_preview_panel',
closeFlyout = 'close_flyout',
urlChanged = 'urlChanged',
goBack = 'goBack',
}

export const openPanelsAction = createAction<{
Expand Down Expand Up @@ -119,3 +120,10 @@ export const urlChangedAction = createAction<{
*/
id: string;
}>(ActionType.urlChanged);

export const goBackAction = createAction<{
/**
* Unique identifier for the flyout (either the urlKey or 'memory')
*/
id: string;
}>(ActionType.goBack);
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
openPreviewPanelAction,
openRightPanelAction,
previousPreviewPanelAction,
goBackAction,
} from '../actions';
import { useDispatch } from '../redux';
import { FlyoutPanelProps, type ExpandableFlyoutApi } from '../types';
Expand Down Expand Up @@ -86,6 +87,7 @@ export const useExpandableFlyoutApi = () => {
}, [dispatch, id, history]);

const closePanels = useCallback(() => dispatch(closePanelsAction({ id })), [dispatch, id]);
const goBack = useCallback(() => dispatch(goBackAction({ id })), [dispatch, id]);

const api: ExpandableFlyoutApi = useMemo(
() => ({
Expand All @@ -98,6 +100,7 @@ export const useExpandableFlyoutApi = () => {
closePreviewPanel,
closeFlyout: closePanels,
previousPreviewPanel,
goBack,
}),
[
openPanels,
Expand All @@ -109,6 +112,7 @@ export const useExpandableFlyoutApi = () => {
closePreviewPanel,
closePanels,
previousPreviewPanel,
goBack,
]
);

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* 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 { REDUX_ID_FOR_MEMORY_STORAGE } from '../constants';
import { useExpandableFlyoutContext } from '../context';
import { selectHistoryById, useSelector } from '../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));
};
4 changes: 4 additions & 0 deletions packages/kbn-expandable-flyout/src/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export const Right: Story<void> = () => {
},
left: undefined,
preview: undefined,
history: [],
},
},
};
Expand All @@ -131,6 +132,7 @@ export const Left: Story<void> = () => {
id: 'left',
},
preview: undefined,
history: [],
},
},
};
Expand All @@ -157,6 +159,7 @@ export const Preview: Story<void> = () => {
id: 'preview1',
},
],
history: [],
},
},
};
Expand Down Expand Up @@ -186,6 +189,7 @@ export const MultiplePreviews: Story<void> = () => {
id: 'preview2',
},
],
history: [],
},
},
};
Expand Down
4 changes: 4 additions & 0 deletions packages/kbn-expandable-flyout/src/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ describe('ExpandableFlyout', () => {
},
left: undefined,
preview: undefined,
history: [],
},
},
};
Expand All @@ -74,6 +75,7 @@ describe('ExpandableFlyout', () => {
id: 'key',
},
preview: undefined,
history: [],
},
},
};
Expand All @@ -98,6 +100,7 @@ describe('ExpandableFlyout', () => {
id: 'key',
},
],
history: [],
},
},
};
Expand All @@ -120,6 +123,7 @@ describe('ExpandableFlyout', () => {
},
left: undefined,
preview: undefined,
history: [],
},
},
};
Expand Down
2 changes: 2 additions & 0 deletions packages/kbn-expandable-flyout/src/provider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ describe('UrlSynchronizer', () => {
const initialState: State = {
byId: {
[urlKey]: {
history: [],
right: { id: 'key1' },
left: { id: 'key11' },
preview: undefined,
Expand Down Expand Up @@ -85,6 +86,7 @@ describe('UrlSynchronizer', () => {
right: { id: 'key1' },
left: { id: 'key2' },
preview: undefined,
history: [],
},
},
needsSync: true,
Expand Down
Loading

0 comments on commit 270e441

Please sign in to comment.