X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/d116e491ef904d97dcece5ab1632bef08906ec87..b0de143e088973715681f7eb6c41f2dccb648c2b:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index ea8fce80..b2bdac80 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, RouteComponentProps, withRouter } 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,22 +18,30 @@ 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 { sidePanelData } from '../../store/side-panel/side-panel-reducer'; +import DetailsPanel from '../../views-components/details-panel/details-panel'; +import { ArvadosTheme } from '../../common/custom-theme'; +import ContextMenu, { ContextMenuAction } from '../../components/context-menu/context-menu'; +import { mockAnchorFromMouseEvent } from '../../components/popover/helpers'; +import DialogProjectCreate from "../../views-components/create-project-dialog/create-project-dialog"; +import { authService } from '../../services/services'; + +import detailsPanelActions, { loadDetails } from "../../store/details-panel/details-panel-action"; +import { SidePanelIdentifiers } from '../../store/side-panel/side-panel-reducer'; +import { ProjectResource } from '../../models/project'; +import { ResourceKind } from '../../models/resource'; 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, @@ -46,7 +53,6 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }, appBar: { zIndex: theme.zIndex.drawer + 1, - backgroundColor: '#692498', position: "absolute", width: "100%" }, @@ -64,7 +70,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 }, @@ -72,7 +78,7 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }); interface WorkbenchDataProps { - projects: Array>; + projects: Array>; currentProjectId: string; user?: User; sidePanelItems: SidePanelItem[]; @@ -92,7 +98,10 @@ interface NavMenuItem extends MainAppBarMenuItem { } interface WorkbenchState { - isCreationDialogOpen: boolean; + contextMenu: { + anchorEl?: HTMLElement; + itemUuid?: string; + }; anchorEl: any; searchText: string; menuItems: { @@ -102,8 +111,13 @@ interface WorkbenchState { }; } + class Workbench extends React.Component { state = { + contextMenu: { + anchorEl: undefined, + itemUuid: undefined + }, isCreationDialogOpen: false, anchorEl: null, searchText: "", @@ -137,12 +151,19 @@ class Workbench extends React.Component { 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() + onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(), + onDetailsPanelToggle: () => { + this.props.dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); + }, + onContextMenu: (event: React.MouseEvent, breadcrumb: NavBreadcrumb) => { + this.openContextMenu(event, breadcrumb.itemId); + } }; toggleSidePanelOpen = (itemId: string) => { @@ -152,14 +173,34 @@ class Workbench extends React.Component { 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.closeContextMenu(); + this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid })); } - handleCreationDialogOpen = () => { - this.setState({ isCreationDialogOpen: true }); + + openContextMenu = (event: React.MouseEvent, itemUuid: string) => { + event.preventDefault(); + this.setState({ + contextMenu: { + anchorEl: mockAnchorFromMouseEvent(event), + itemUuid + } + }); } - handleCreationDialogClose = () => { - this.setState({ isCreationDialogOpen: false }); + closeContextMenu = () => { + this.setState({ contextMenu: {} }); + } + + openCreateDialog = (item: ContextMenuAction) => { + const { itemUuid } = this.state.contextMenu; + if (item.openCreateDialog && itemUuid) { + this.handleCreationDialogOpen(itemUuid); + } } render() { @@ -179,8 +220,7 @@ class Workbench extends React.Component { searchText={this.state.searchText} user={this.props.user} menuItems={this.state.menuItems} - {...this.mainAppBarActions} - /> + {...this.mainAppBarActions} /> {user && { toggleOpen={this.toggleSidePanelOpen} toggleActive={this.toggleSidePanelActive} sidePanelItems={this.props.sidePanelItems} - handleCreationDialogOpen={this.handleCreationDialogOpen} - handleCreationDialogClose={this.handleCreationDialogClose}> + onContextMenu={(event) => this.openContextMenu(event, authService.getUuid() || "")}> this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} - toggleActive={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} - handleCreationDialogOpen={this.handleCreationDialogOpen} - handleCreationDialogClose={this.handleCreationDialogClose} - /> + onContextMenu={(event, item) => this.openContextMenu(event, item.data.uuid)} + 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)); + }} /> }
@@ -210,21 +251,60 @@ class Workbench extends React.Component { +
+ + ); } renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} - onItemClick={item => this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE))} - handleCreationDialogOpen={this.handleCreationDialogOpen} - handleCreationDialogClose={this.handleCreationDialogClose} - isCreationDialogOpen={this.state.isCreationDialogOpen} + onContextMenu={(event, item) => this.openContextMenu(event, item.uuid)} + 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} /> - } +const contextMenuActions = [[{ + icon: "fas fa-plus fa-fw", + name: "New project", + openCreateDialog: true +}, { + icon: "fas fa-users fa-fw", + name: "Share" +}, { + icon: "fas fa-sign-out-alt fa-fw", + name: "Move to" +}, { + icon: "fas fa-star fa-fw", + name: "Add to favourite" +}, { + icon: "fas fa-edit fa-fw", + name: "Rename" +}, { + icon: "fas fa-copy fa-fw", + name: "Make a copy" +}, { + icon: "fas fa-download fa-fw", + name: "Download" +}], [{ + icon: "fas fa-trash-alt fa-fw", + name: "Remove" +} +]]; + export default connect( (state: RootState) => ({ projects: state.projects.items,