X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/5e88476747d9fb0c77ef76d63430192fa4b77f22..5844264e8def16755e8da6e7e57a716e69a130ff:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index bac0b473..8cc5fc22 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -3,30 +3,40 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; - -import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import { connect, DispatchProp } from "react-redux"; -import { Route, Switch } from "react-router"; +import { Route, Switch, RouteComponentProps, withRouter } from "react-router"; import authActions from "../../store/auth/auth-action"; +import dataExplorerActions from "../../store/data-explorer/data-explorer-action"; import { User } from "../../models/user"; import { RootState } from "../../store/store"; -import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar'; +import MainAppBar, { + MainAppBarActionProps, + MainAppBarMenuItem +} from '../../views-components/main-app-bar/main-app-bar'; import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; import { push } from 'react-router-redux'; -import projectActions, { getProjectList } from "../../store/project/project-action"; import ProjectTree from '../../views-components/project-tree/project-tree'; -import { TreeItem, TreeItemStatus } from "../../components/tree/tree"; +import { TreeItem } from "../../components/tree/tree"; import { Project } from "../../models/project"; -import { getTreePath } from '../../store/project/project-reducer'; -import ProjectPanel from '../project-panel/project-panel'; +import { getTreePath, findTreeItem } from '../../store/project/project-reducer'; +import sidePanelActions from '../../store/side-panel/side-panel-action'; +import SidePanel, { SidePanelItem } from '../../components/side-panel/side-panel'; +import { ResourceKind } from "../../models/resource"; +import { ItemMode, setProjectItem } from "../../store/navigation/navigation-action"; +import projectActions from "../../store/project/project-action"; +import ProjectPanel from "../project-panel/project-panel"; +import { sidePanelData } from '../../store/side-panel/side-panel-reducer'; +import DetailsPanel from '../../views-components/details-panel/details-panel'; +import { ArvadosTheme } from '../../common/custom-theme'; const drawerWidth = 240; -const appBarHeight = 102; +const appBarHeight = 100; type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; -const styles: StyleRulesCallback = (theme: Theme) => ({ +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { flexGrow: 1, zIndex: 1, @@ -38,13 +48,14 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }, appBar: { zIndex: theme.zIndex.drawer + 1, - backgroundColor: '#692498', position: "absolute", width: "100%" }, drawerPaper: { position: 'relative', width: drawerWidth, + display: 'flex', + flexDirection: 'column', }, contentWrapper: { backgroundColor: theme.palette.background.default, @@ -54,7 +65,7 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ paddingTop: appBarHeight }, content: { - padding: theme.spacing.unit * 3, + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, overflowY: "auto", flexGrow: 1 }, @@ -63,7 +74,9 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ interface WorkbenchDataProps { projects: Array>; + currentProjectId: string; user?: User; + sidePanelItems: SidePanelItem[]; } interface WorkbenchActionProps { @@ -73,7 +86,6 @@ type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & interface NavBreadcrumb extends Breadcrumb { itemId: string; - status: TreeItemStatus; } interface NavMenuItem extends MainAppBarMenuItem { @@ -82,13 +94,13 @@ interface NavMenuItem extends MainAppBarMenuItem { interface WorkbenchState { anchorEl: any; - breadcrumbs: NavBreadcrumb[]; searchText: string; menuItems: { accountMenu: NavMenuItem[], helpMenu: NavMenuItem[], anonymousMenu: NavMenuItem[] }; + isDetailsPanelOpened: boolean; } class Workbench extends React.Component { @@ -119,50 +131,47 @@ class Workbench extends React.Component { action: () => this.props.dispatch(authActions.LOGIN()) } ] - } + }, + isDetailsPanelOpened: false }; - mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: ({ itemId, status }: NavBreadcrumb) => { - this.toggleProjectTreeItem(itemId, status); + onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { + this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); }, onSearch: searchText => { this.setState({ searchText }); this.props.dispatch(push(`/search?q=${searchText}`)); }, - onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action() + onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(), + onDetailsPanelToggle: () => { + this.setState(prev => ({ isDetailsPanelOpened: !prev.isDetailsPanelOpened })); + } }; - toggleProjectTreeItem = (itemId: string, status: TreeItemStatus) => { - if (status === TreeItemStatus.Loaded) { - this.openProjectItem(itemId); - } else { - this.props.dispatch(getProjectList(itemId)) - .then(() => this.openProjectItem(itemId)); - } + toggleSidePanelOpen = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); } - openProjectItem = (itemId: string) => { - const branch = getTreePath(this.props.projects, itemId); - this.setState({ - breadcrumbs: branch.map(item => ({ - label: item.data.name, - itemId: item.data.uuid, - status: item.status - })) - }); - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId)); - this.props.dispatch(push(`/project/${itemId}`)); + toggleSidePanelActive = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId)); + this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId)); } render() { + const path = getTreePath(this.props.projects, this.props.currentProjectId); + const breadcrumbs = path.map(item => ({ + label: item.data.name, + itemId: item.data.uuid, + status: item.status + })); + const { classes, user } = this.props; return (
{ paper: classes.drawerPaper, }}>
- + + this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + toggleActive={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + /> + }
- +
+
); } + + renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onItemClick={item => this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE))} + {...props} /> + } export default connect( (state: RootState) => ({ - projects: state.projects, - user: state.auth.user + projects: state.projects.items, + currentProjectId: state.projects.currentItemId, + user: state.auth.user, + sidePanelItems: state.sidePanel }) )( withStyles(styles)(Workbench)