[Security Solutioin][Expandable flyout] Fix preview flashing when going back (#188703)

## Summary

This PR fixes an UI bug. When preview status is tracked in url, opening
multiple previews, and clicking `Back` flashes. This is a follow up of
the preview logic changes in
https://github.com/elastic/kibana/pull/186130

To avoid url keeping track of all the previews (which will cause url
length explosion), we only keep the last preview in url, and to keep url
and redux state in sync, redux also always has 1 preview. Before the
fix, we would call `previousPreviewPanelAction`, which empty the preview
array and caused the preview panel to disappear.


**Before**
In a split second, you can see the preview disappears (showing Endpoint
security) and then the user preview appears. Redux shows a call of
`previousPreviewPanelAction` and it empties the preview array


https://github.com/user-attachments/assets/babb12f2-1c1d-422a-87ef-153ed207817b

After


https://github.com/user-attachments/assets/b2ef891c-181d-4da3-9efb-e4afc7123a99
This commit is contained in:
christineweng 2024-07-19 10:47:18 -05:00 committed by GitHub
parent 6238d7f853
commit 001436c8ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -78,9 +78,9 @@ export const useExpandableFlyoutApi = () => {
);
const previousPreviewPanel = useCallback(() => {
dispatch(previousPreviewPanelAction({ id }));
if (id !== REDUX_ID_FOR_MEMORY_STORAGE) {
if (id === REDUX_ID_FOR_MEMORY_STORAGE) {
dispatch(previousPreviewPanelAction({ id }));
} else {
history.goBack();
}
}, [dispatch, id, history]);