[ARVADOS-WORKBENCH2] created: 1.3.0-137-gee63ba21
Git user
git at public.curoverse.com
Mon Dec 17 06:51:56 EST 2018
at ee63ba213e2e56a57e0cd49f6c7ce9bde5014f53 (commit)
commit ee63ba213e2e56a57e0cd49f6c7ce9bde5014f53
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Mon Dec 17 12:51:33 2018 +0100
14489-any-menus-persists-after-route-change
Feature #14489
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
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>
+ ));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list