From ee63ba213e2e56a57e0cd49f6c7ce9bde5014f53 Mon Sep 17 00:00:00 2001
From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Mon, 17 Dec 2018 12:51:33 +0100
Subject: [PATCH] 14489-any-menus-persists-after-route-change

Feature #14489

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
---
 .../data-explorer/data-explorer.tsx           |  9 ++--
 src/routes/route-change-handlers.ts           |  4 ++
 .../data-explorer/data-explorer.tsx           |  3 +-
 .../main-app-bar/account-menu.tsx             |  9 ++--
 .../main-app-bar/admin-menu.tsx               |  9 ++--
 .../main-app-bar/help-menu.tsx                | 54 ++++++++++++-------
 .../side-panel/side-panel.tsx                 | 17 +++---
 7 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 4175fbc6..56958c80 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -49,6 +49,7 @@ interface DataExplorerDataProps<T> {
     paperProps?: PaperProps;
     actions?: React.ReactNode;
     hideSearchInput?: boolean;
+    currentRoute?: string;
 }
 
 interface DataExplorerActionProps<T> {
@@ -79,9 +80,10 @@ export const DataExplorer = withStyles(styles)(
                 columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
-                dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput
+                dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
+                currentRoute
             } = this.props;
-            return <Paper className={classes.root} {...paperProps}>
+            return <Paper className={classes.root} {...paperProps} key={currentRoute}>
                 <Toolbar className={classes.toolbar}>
                     <Grid container justify="space-between" wrap="nowrap" alignItems="center">
                         {!hideSearchInput && <div className={classes.searchBox}>
@@ -105,8 +107,7 @@ export const DataExplorer = withStyles(styles)(
                     onSortToggle={onSortToggle}
                     extractKey={extractKey}
                     working={working}
-                    defaultView={dataTableDefaultView}
-                />
+                    defaultView={dataTableDefaultView} />
                 <Toolbar className={classes.footer}>
                     <Grid container justify="flex-end">
                         <TablePagination
diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts
index 655c806f..bc5cbb6a 100644
--- a/src/routes/route-change-handlers.ts
+++ b/src/routes/route-change-handlers.ts
@@ -8,6 +8,8 @@ import * as Routes from '~/routes/routes';
 import * as WorkbenchActions from '~/store/workbench/workbench-actions';
 import { navigateToRootProject } from '~/store/navigation/navigation-action';
 import { dialogActions } from '~/store/dialog/dialog-actions';
+import { contextMenuActions } from '~/store/context-menu/context-menu-actions';
+import { searchBarActions } from '~/store/search-bar/search-bar-actions';
 
 export const addRouteChangeHandlers = (history: History, store: RootStore) => {
     const handler = handleLocationChange(store);
@@ -40,6 +42,8 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
     const linksMatch = Routes.matchLinksRoute(pathname);
 
     store.dispatch(dialogActions.CLOSE_ALL_DIALOGS());
+    store.dispatch(contextMenuActions.CLOSE_CONTEXT_MENU());
+    store.dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
 
     if (projectMatch) {
         store.dispatch(WorkbenchActions.loadProject(projectMatch.params.id));
diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 710d202d..78b40795 100644
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -23,7 +23,8 @@ interface Props {
 const mapStateToProps = (state: RootState, { id }: Props) => {
     const progress = state.progressIndicator.find(p => p.id === id);
     const working = progress && progress.working;
-    return { ...getDataExplorer(state.dataExplorer, id), working };
+    const currentRoute = state.router.location ? state.router.location.pathname : '';
+    return { ...getDataExplorer(state.dataExplorer, id), working, currentRoute };
 };
 
 const mapDispatchToProps = () => {
diff --git a/src/views-components/main-app-bar/account-menu.tsx b/src/views-components/main-app-bar/account-menu.tsx
index 1609aafa..b9df186f 100644
--- a/src/views-components/main-app-bar/account-menu.tsx
+++ b/src/views-components/main-app-bar/account-menu.tsx
@@ -17,19 +17,22 @@ import { openUserVirtualMachines } from "~/store/virtual-machines/virtual-machin
 
 interface AccountMenuProps {
     user?: User;
+    currentRoute: string;
 }
 
 const mapStateToProps = (state: RootState): AccountMenuProps => ({
-    user: state.auth.user
+    user: state.auth.user,
+    currentRoute: state.router.location ? state.router.location.pathname : ''
 });
 
 export const AccountMenu = connect(mapStateToProps)(
-    ({ user, dispatch }: AccountMenuProps & DispatchProp<any>) =>
+    ({ user, dispatch, currentRoute }: AccountMenuProps & DispatchProp<any>) =>
         user
             ? <DropdownMenu
                 icon={<UserPanelIcon />}
                 id="account-menu"
-                title="Account Management">
+                title="Account Management"
+                key={currentRoute}>
                 <MenuItem>
                     {getUserFullname(user)}
                 </MenuItem>
diff --git a/src/views-components/main-app-bar/admin-menu.tsx b/src/views-components/main-app-bar/admin-menu.tsx
index 88aafbae..b47bbd52 100644
--- a/src/views-components/main-app-bar/admin-menu.tsx
+++ b/src/views-components/main-app-bar/admin-menu.tsx
@@ -17,19 +17,22 @@ import { openUserPanel } from "~/store/users/users-actions";
 
 interface AdminMenuProps {
     user?: User;
+    currentRoute: string;
 }
 
 const mapStateToProps = (state: RootState): AdminMenuProps => ({
-    user: state.auth.user
+    user: state.auth.user,
+    currentRoute: state.router.location ? state.router.location.pathname : ''
 });
 
 export const AdminMenu = connect(mapStateToProps)(
-    ({ user, dispatch }: AdminMenuProps & DispatchProp<any>) =>
+    ({ user, dispatch, currentRoute }: AdminMenuProps & DispatchProp<any>) =>
         user
             ? <DropdownMenu
                 icon={<AdminMenuIcon />}
                 id="admin-menu"
-                title="Admin Panel">
+                title="Admin Panel"
+                key={currentRoute}>
                 <MenuItem onClick={() => dispatch(openRepositoriesPanel())}>Repositories</MenuItem>
                 <MenuItem onClick={() => dispatch(openAdminVirtualMachines())}>Virtual Machines</MenuItem>
                 <MenuItem onClick={() => dispatch(NavigationAction.navigateToSshKeysAdmin)}>Ssh Keys</MenuItem>
diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
index 26604228..94da69e7 100644
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -3,11 +3,14 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { MenuItem, Typography, ListSubheader } from "@material-ui/core";
+import { MenuItem, Typography } from "@material-ui/core";
 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
 import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
 import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { RootState } from "~/store/store";
+import { compose } from "redux";
+import { connect } from "react-redux";
 
 type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
 
@@ -52,22 +55,33 @@ const links = [
     },
 ];
 
-export const HelpMenu = withStyles(styles)(
-    ({ classes }: WithStyles<CssRules>) =>
-        <DropdownMenu
-            icon={<HelpIcon />}
-            id="help-menu"
-            title="Help">
-            <MenuItem disabled>Help</MenuItem>
-            {
-                links.map(link =>
-                    <MenuItem key={link.title}>
-                        <a href={link.link} target="_blank" className={classes.link}>
-                            <ImportContactsIcon className={classes.icon} />
-                            <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
-                        </a>
-                    </MenuItem>
-                )
-            }
-        </DropdownMenu>
-);
+interface HelpMenuProps {
+    currentRoute: string;
+}
+
+const mapStateToProps = ({ router }: RootState) => ({
+    currentRoute: router.location ? router.location.pathname : '',
+});
+
+export const HelpMenu = compose(
+    connect(mapStateToProps),
+    withStyles(styles))(
+        ({ classes, currentRoute }: HelpMenuProps & WithStyles<CssRules>) =>
+            <DropdownMenu
+                icon={<HelpIcon />}
+                id="help-menu"
+                title="Help"
+                key={currentRoute}>
+                <MenuItem disabled>Help</MenuItem>
+                {
+                    links.map(link =>
+                        <MenuItem key={link.title}>
+                            <a href={link.link} target="_blank" className={classes.link}>
+                                <ImportContactsIcon className={classes.icon} />
+                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                            </a>
+                        </MenuItem>
+                    )
+                }
+            </DropdownMenu>
+    );
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 12e82dfb..62d9dc35 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -8,7 +8,7 @@ import { ArvadosTheme } from '~/common/custom-theme';
 import { SidePanelTree, SidePanelTreeProps } from '~/views-components/side-panel-tree/side-panel-tree';
 import { compose, Dispatch } from 'redux';
 import { connect } from 'react-redux';
-import { navigateFromSidePanel } from '../../store/side-panel/side-panel-action';
+import { navigateFromSidePanel } from '~/store/side-panel/side-panel-action';
 import { Grid } from '@material-ui/core';
 import { SidePanelButton } from '~/views-components/side-panel-button/side-panel-button';
 import { RootState } from '~/store/store';
@@ -33,14 +33,15 @@ const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
     }
 });
 
-const mapStateToProps = (state: RootState) => ({
+const mapStateToProps = ({ router }: RootState) => ({
+    currentRoute: router.location ? router.location.pathname : '',
 });
 
 export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
-    ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps) =>
-    <Grid item xs>
-        <SidePanelButton />
-        <SidePanelTree {...props} />
-    </Grid>
-));
+        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
+            <Grid item xs>
+                <SidePanelButton key={props.currentRoute} />
+                <SidePanelTree {...props} />
+            </Grid>
+    ));
-- 
2.30.2