Merge branch 'main' into 21224-project-details

[arvados.git] / 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 b708ad622c8ccfa141a7118c516d8cef33fcc8b7..ca2db7217f25e77075ff38377a406184f20ab906 100644 (file)
--- 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<number>(),
-    LOAD_DETAILS_PANEL: ofType<string>()
+    LOAD_DETAILS_PANEL: ofType<string>(),
+    START_TRANSITION: ofType<{}>(),
+    END_TRANSITION: ofType<{}>(),
 });
 
 export type DetailsPanelAction = UnionOf<typeof detailsPanelActions>;
@@ -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<any>(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<any>(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<any>(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<any>(loadDetailsPanel(getState().detailsPanel.resourceUuid));
-    }
-};
+}
\ No newline at end of file