Force window resize after open/close details panel because of material-ui issue

Feature #14420

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>

diff --git a/src/store/details-panel/details-panel-action.ts b/src/store/details-panel/details-panel-action.ts
index 2724a3e3465dbbac374a029f1f68c321dce2a9b1..ed717165515435fc2eee433a7feb36e1cc8f0c15 100644 (file)
--- a/src/store/details-panel/details-panel-action.ts
+++ b/src/store/details-panel/details-panel-action.ts
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { unionize, ofType, UnionOf } from '~/common/unionize';
+import { Dispatch } from 'redux';
 
 export const detailsPanelActions = unionize({
     TOGGLE_DETAILS_PANEL: ofType<{}>(),
@@ -13,6 +14,12 @@ export type DetailsPanelAction = UnionOf<typeof detailsPanelActions>;
 
 export const loadDetailsPanel = (uuid: string) => detailsPanelActions.LOAD_DETAILS_PANEL(uuid);
 
-
-
-
+export const toggleDetailsPanel = () => (dispatch: Dispatch) => {
+    // because of material-ui issue resizing details panel breaks tabs.
+    // triggering window resize event fixes that.
+    const detailsPanelAnimationDuration = 500;
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, detailsPanelAnimationDuration);
+    dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+};

diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
index a33f78d12d5c922005eb70db8c08f5ee243d5d60..9d26fad2ff86a7659b90d1dfdd21b2e679576208 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -15,6 +15,7 @@ import { toggleCollectionTrashed } from "~/store/trash/trash-actions";
 import { detailsPanelActions } from '~/store/details-panel/details-panel-action';
 import { openSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
 import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const collectionActionSet: ContextMenuActionSet = [[
     {
@@ -62,7 +63,7 @@ export const collectionActionSet: ContextMenuActionSet = [[
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     },
     // {

diff --git a/src/views-components/context-menu/action-sets/collection-resource-action-set.ts b/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
index c398a0a2c0a904f2e017720fbd12cfeaf7a29185..7730b1453812f730aab765254275298ab14e5bda 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-resource-action-set.ts
@@ -15,6 +15,7 @@ import { toggleCollectionTrashed } from "~/store/trash/trash-actions";
 import { detailsPanelActions } from '~/store/details-panel/details-panel-action';
 import { openSharingDialog } from "~/store/sharing-dialog/sharing-dialog-actions";
 import { openAdvancedTabDialog } from '~/store/advanced-tab/advanced-tab';
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const collectionResourceActionSet: ContextMenuActionSet = [[
     {
@@ -63,7 +64,7 @@ export const collectionResourceActionSet: ContextMenuActionSet = [[
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     },
     {

diff --git a/src/views-components/context-menu/action-sets/process-action-set.ts b/src/views-components/context-menu/action-sets/process-action-set.ts
index 5db50dd50d85a86f61cdc94d9b05c0b65415c2da..2d152543caa248eb9e5b19e1edc35993aab396a4 100644 (file)
--- a/src/views-components/context-menu/action-sets/process-action-set.ts
+++ b/src/views-components/context-menu/action-sets/process-action-set.ts
@@ -19,6 +19,7 @@ import { detailsPanelActions } from '~/store/details-panel/details-panel-action'
 import { openSharingDialog } from "~/store/sharing-dialog/sharing-dialog-actions";
 import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab";
 import { openProcessInputDialog } from "~/store/processes/process-input-actions";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const processActionSet: ContextMenuActionSet = [[
     {
@@ -96,7 +97,7 @@ export const processActionSet: ContextMenuActionSet = [[
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     },
     // {

diff --git a/src/views-components/context-menu/action-sets/process-resource-action-set.ts b/src/views-components/context-menu/action-sets/process-resource-action-set.ts
index 4a0a83b91d69130d9ccc0a274fd323aca9b4140c..21f3041591c2a828d1fc9bea6370ac03c0a64010 100644 (file)
--- a/src/views-components/context-menu/action-sets/process-resource-action-set.ts
+++ b/src/views-components/context-menu/action-sets/process-resource-action-set.ts
@@ -12,6 +12,7 @@ import { openProcessUpdateDialog } from "~/store/processes/process-update-action
 import { openCopyProcessDialog } from '~/store/processes/process-copy-actions';
 import { detailsPanelActions } from '~/store/details-panel/details-panel-action';
 import { openSharingDialog } from "~/store/sharing-dialog/sharing-dialog-actions";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const processResourceActionSet: ContextMenuActionSet = [[
     {
@@ -54,7 +55,7 @@ export const processResourceActionSet: ContextMenuActionSet = [[
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     }
     // {

diff --git a/src/views-components/context-menu/action-sets/project-action-set.ts b/src/views-components/context-menu/action-sets/project-action-set.ts
index aa82c7fa2864de5174a2f1779a8c00ba06b127d2..9b8ced5663037596646b1d1598ebd8eb6bc74d80 100644 (file)
--- a/src/views-components/context-menu/action-sets/project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/project-action-set.ts
@@ -16,6 +16,7 @@ import { detailsPanelActions } from '~/store/details-panel/details-panel-action'
 import { ShareIcon } from '~/components/icon/icon';
 import { openSharingDialog } from "~/store/sharing-dialog/sharing-dialog-actions";
 import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const projectActionSet: ContextMenuActionSet = [[
     {
@@ -71,7 +72,7 @@ export const projectActionSet: ContextMenuActionSet = [[
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     },
     {

diff --git a/src/views-components/context-menu/action-sets/trashed-collection-action-set.ts b/src/views-components/context-menu/action-sets/trashed-collection-action-set.ts
index 1f91d7e54361258ca45048284bf2033a51d78e45..cefef345f0a0df2b842a764a0ae37ce0b1a5d25e 100644 (file)
--- a/src/views-components/context-menu/action-sets/trashed-collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/trashed-collection-action-set.ts
@@ -7,13 +7,14 @@ import { DetailsIcon, ProvenanceGraphIcon, AdvancedIcon, RestoreFromTrashIcon }
 import { toggleCollectionTrashed } from "~/store/trash/trash-actions";
 import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
 import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 export const trashedCollectionActionSet: ContextMenuActionSet = [[
     {
         icon: DetailsIcon,
         name: "View details",
         execute: dispatch => {
-            dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+            dispatch<any>(toggleDetailsPanel());
         }
     },
     {

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 5e5ccefcd37fd6e9df165fa2ea4d7d4ec0c240d2..113cf09611e634a9c6464d48f00a392aee7c3a74 100644 (file)
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -24,6 +24,7 @@ import { DetailsResource } from "~/models/details";
 import { getResource } from '~/store/resources/resources';
 import { ResourceData } from "~/store/resources-data/resources-data-reducer";
 import { getResourceData } from "~/store/resources-data/resources-data";
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
 
@@ -84,7 +85,7 @@ const mapStateToProps = ({ detailsPanel, resources, resourcesData }: RootState)
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     onCloseDrawer: () => {
-        dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
+        dispatch<any>(toggleDetailsPanel());
     }
 });
 

diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index 6fb419e36710aa187e0f28a79b46fba82ed5f0d7..b0478377ba1a8f05490a662966a0cd7755d4bfc8 100644 (file)
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -10,6 +10,7 @@ import { detailsPanelActions } from "~/store/details-panel/details-panel-action"
 import { connect } from 'react-redux';
 import { RootState } from '~/store/store';
 import { matchWorkflowRoute } from '~/routes/routes';
+import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action';
 
 interface MainContentBarProps {
     onDetailsPanelToggle: () => void;
@@ -25,7 +26,7 @@ const isWorkflowPath = ({ router }: RootState) => {
 export const MainContentBar = connect((state: RootState) => ({
     buttonVisible: !isWorkflowPath(state)
 }), {
-        onDetailsPanelToggle: detailsPanelActions.TOGGLE_DETAILS_PANEL
+        onDetailsPanelToggle: toggleDetailsPanel
     })((props: MainContentBarProps) =>
         <Toolbar>
             <Grid container>