X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/52cc3b912c703c24bc90e67aaf24e8ad912d3ebf..fef17c665b0d6acb4be97c9dcf4a6cb7a92ee6ef:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 72eb0ddc..eaf3a2ee 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -3,12 +3,11 @@ // 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 } 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, { @@ -19,59 +18,26 @@ import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; import { push } from 'react-router-redux'; import ProjectTree from '../../views-components/project-tree/project-tree'; import { TreeItem } from "../../components/tree/tree"; -import { Project } from "../../models/project"; -import { getTreePath, findTreeItem } from '../../store/project/project-reducer'; +import { getTreePath } 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 DetailsPanel from '../../views-components/details-panel/details-panel'; +import { ArvadosTheme } from '../../common/custom-theme'; +import ContextMenu, { ContextMenuKind } from "../../views-components/context-menu"; +import CreateProjectDialog from "../../views-components/create-project-dialog/create-project-dialog"; +import { authService } from '../../services/services'; -const drawerWidth = 240; -const appBarHeight = 102; - -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; - -const styles: StyleRulesCallback = (theme: Theme) => ({ - root: { - flexGrow: 1, - zIndex: 1, - overflow: 'hidden', - position: 'relative', - display: 'flex', - width: '100vw', - height: '100vh' - }, - 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, - display: "flex", - flexGrow: 1, - minWidth: 0, - paddingTop: appBarHeight - }, - content: { - padding: theme.spacing.unit * 3, - overflowY: "auto", - flexGrow: 1 - }, - toolbar: theme.mixins.toolbar -}); +import detailsPanelActions, { loadDetails } from "../../store/details-panel/details-panel-action"; +import contextMenuActions from "../../store/context-menu/context-menu-actions"; +import { SidePanelIdentifiers } from '../../store/side-panel/side-panel-reducer'; +import { ProjectResource } from '../../models/project'; +import { ResourceKind } from '../../models/resource'; interface WorkbenchDataProps { - projects: Array>; + projects: Array>; currentProjectId: string; user?: User; sidePanelItems: SidePanelItem[]; @@ -100,8 +66,10 @@ interface WorkbenchState { }; } + class Workbench extends React.Component { state = { + isCreationDialogOpen: false, anchorEl: null, searchText: "", breadcrumbs: [], @@ -131,29 +99,9 @@ class Workbench extends React.Component { } }; - mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { - this.props.dispatch(setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.BOTH)); - }, - onSearch: searchText => { - this.setState({ searchText }); - this.props.dispatch(push(`/search?q=${searchText}`)); - }, - onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action() - }; - - toggleSidePanelOpen = (itemId: string) => { - this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(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 branch = getTreePath(this.props.projects, this.props.currentProjectId); - const breadcrumbs = branch.map(item => ({ + 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 @@ -168,8 +116,7 @@ class Workbench extends React.Component { searchText={this.state.searchText} user={this.props.user} menuItems={this.state.menuItems} - {...this.mainAppBarActions} - /> + {...this.mainAppBarActions} /> {user && { + sidePanelItems={this.props.sidePanelItems} + onContextMenu={(event) => this.openContextMenu(event, authService.getUuid() || "", ContextMenuKind.RootProject)}> - this.props.dispatch( - setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.OPEN) - )} - toggleActive={itemId => - this.props.dispatch( - setProjectItem(itemId, ResourceKind.PROJECT, ItemMode.ACTIVE) - )} - /> + toggleOpen={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + onContextMenu={(event, item) => this.openContextMenu(event, item.data.uuid, ContextMenuKind.Project)} + toggleActive={itemId => { + this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE)); + this.props.dispatch(loadDetails(itemId, ResourceKind.Project)); + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(SidePanelIdentifiers.Projects)); + }} /> }
- +
+ { user && }
+ + ); } + + renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onContextMenu={(event, item) => this.openContextMenu(event, item.uuid, ContextMenuKind.Project)} + onDialogOpen={this.handleCreationDialogOpen} + onItemClick={item => { + this.props.dispatch(loadDetails(item.uuid, item.kind as ResourceKind)); + }} + onItemDoubleClick={item => { + this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE)); + this.props.dispatch(loadDetails(item.uuid, ResourceKind.Project)); + }} + {...props} /> + + mainAppBarActions: MainAppBarActionProps = { + onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { + this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); + this.props.dispatch(loadDetails(itemId, ResourceKind.Project)); + }, + onSearch: searchText => { + this.setState({ searchText }); + this.props.dispatch(push(`/search?q=${searchText}`)); + }, + onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(), + onDetailsPanelToggle: () => { + this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); + }, + onContextMenu: (event: React.MouseEvent, breadcrumb: NavBreadcrumb) => { + this.openContextMenu(event, breadcrumb.itemId, ContextMenuKind.Project); + } + }; + + toggleSidePanelOpen = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); + } + + toggleSidePanelActive = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId)); + this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId)); + this.props.dispatch(push("/")); + } + + handleCreationDialogOpen = (itemUuid: string) => { + this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid })); + } + + openContextMenu = (event: React.MouseEvent, itemUuid: string, kind: ContextMenuKind) => { + event.preventDefault(); + this.props.dispatch( + contextMenuActions.OPEN_CONTEXT_MENU({ + position: { x: event.clientX, y: event.clientY }, + resource: { uuid: itemUuid, kind } + }) + ); + } + + } +const drawerWidth = 240; +const appBarHeight = 100; + +type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + flexGrow: 1, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + width: '100vw', + height: '100vh' + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + position: "absolute", + width: "100%" + }, + drawerPaper: { + position: 'relative', + width: drawerWidth, + display: 'flex', + flexDirection: 'column', + }, + contentWrapper: { + backgroundColor: theme.palette.background.default, + display: "flex", + flexGrow: 1, + minWidth: 0, + paddingTop: appBarHeight + }, + content: { + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`, + overflowY: "auto", + flexGrow: 1 + }, + toolbar: theme.mixins.toolbar +}); + export default connect( (state: RootState) => ({ projects: state.projects.items,