X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/28b6afc1e8ccf652c7a8fd43e22a8ac788febd85..021860aaac214729d2bb5f3aab09a55feed00655:/services/workbench2/src/store/details-panel/details-panel-action.ts diff --git a/services/workbench2/src/store/details-panel/details-panel-action.ts b/services/workbench2/src/store/details-panel/details-panel-action.ts index b708ad622c..ca2db7217f 100644 --- a/services/workbench2/src/store/details-panel/details-panel-action.ts +++ b/services/workbench2/src/store/details-panel/details-panel-action.ts @@ -15,11 +15,14 @@ import { CollectionResource } from 'models/collection'; import { extractUuidKind, ResourceKind } from 'models/resource'; export const SLIDE_TIMEOUT = 500; +export const CLOSE_DRAWER = 'CLOSE_DRAWER' export const detailsPanelActions = unionize({ TOGGLE_DETAILS_PANEL: ofType<{}>(), OPEN_DETAILS_PANEL: ofType(), - LOAD_DETAILS_PANEL: ofType() + LOAD_DETAILS_PANEL: ofType(), + START_TRANSITION: ofType<{}>(), + END_TRANSITION: ofType<{}>(), }); export type DetailsPanelAction = UnionOf; @@ -41,6 +44,7 @@ export const loadDetailsPanel = (uuid: string) => export const openDetailsPanel = (uuid?: string, tabNr: number = 0) => (dispatch: Dispatch) => { + startDetailsPanelTransition(dispatch) dispatch(detailsPanelActions.OPEN_DETAILS_PANEL(tabNr)); if (uuid !== undefined) { dispatch(loadDetailsPanel(uuid)); @@ -63,14 +67,28 @@ export const refreshCollectionVersionsList = (uuid: string) => ); }; -export const toggleDetailsPanel = () => (dispatch: Dispatch, getState: () => RootState) => { - // because of material-ui issue resizing details panel breaks tabs. - // triggering window resize event fixes that. +export const toggleDetailsPanel = (uuid: string = '') => (dispatch: Dispatch, getState: () => RootState) => { + const { detailsPanel }= getState() + const isTargetUuidNew = uuid !== detailsPanel.resourceUuid + if(isTargetUuidNew && uuid !== CLOSE_DRAWER && detailsPanel.isOpened){ + dispatch(loadDetailsPanel(uuid)); + } else { + // because of material-ui issue resizing details panel breaks tabs. + // triggering window resize event fixes that. + setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, SLIDE_TIMEOUT); + startDetailsPanelTransition(dispatch) + dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); + if (getState().detailsPanel.isOpened) { + dispatch(loadDetailsPanel(isTargetUuidNew ? uuid : detailsPanel.resourceUuid)); + } + } + }; + + const startDetailsPanelTransition = (dispatch) => { + dispatch(detailsPanelActions.START_TRANSITION()) setTimeout(() => { - window.dispatchEvent(new Event('resize')); + dispatch(detailsPanelActions.END_TRANSITION()) }, SLIDE_TIMEOUT); - dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); - if (getState().detailsPanel.isOpened) { - dispatch(loadDetailsPanel(getState().detailsPanel.resourceUuid)); - } -}; +} \ No newline at end of file