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, {
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 CreateProjectDialog from "../../views-components/create-project-dialog/create-project-dialog";
+import { authService } from '../../services/services';
+
const drawerWidth = 240;
const appBarHeight = 100;
}
interface WorkbenchState {
+ contextMenu: {
+ anchorEl?: HTMLElement;
+ itemUuid?: string;
+ };
anchorEl: any;
searchText: string;
menuItems: {
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
+ contextMenu: {
+ anchorEl: undefined,
+ itemUuid: undefined
+ },
+ isCreationDialogOpen: false,
anchorEl: null,
searchText: "",
breadcrumbs: [],
onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
onDetailsPanelToggle: () => {
this.setState(prev => ({ isDetailsPanelOpened: !prev.isDetailsPanelOpened }));
+ },
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: NavBreadcrumb) => {
+ this.openContextMenu(event, breadcrumb.itemId);
}
};
this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId));
}
+ handleCreationDialogOpen = (itemUuid: string) => {
+ this.closeContextMenu();
+ this.props.dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: itemUuid }));
+ }
+
+
+ openContextMenu = (event: React.MouseEvent<HTMLElement>, itemUuid: string) => {
+ event.preventDefault();
+ this.setState({
+ contextMenu: {
+ anchorEl: mockAnchorFromMouseEvent(event),
+ itemUuid
+ }
+ });
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
+ openCreateDialog = (item: ContextMenuAction) => {
+ const { itemUuid } = this.state.contextMenu;
+ if (item.openCreateDialog && itemUuid) {
+ this.handleCreationDialogOpen(itemUuid);
+ }
+ }
+
render() {
const path = getTreePath(this.props.projects, this.props.currentProjectId);
const breadcrumbs = path.map(item => ({
searchText={this.state.searchText}
user={this.props.user}
menuItems={this.state.menuItems}
- {...this.mainAppBarActions}
- />
+ {...this.mainAppBarActions} />
</div>
{user &&
<Drawer
<SidePanel
toggleOpen={this.toggleSidePanelOpen}
toggleActive={this.toggleSidePanelActive}
- sidePanelItems={this.props.sidePanelItems}>
+ sidePanelItems={this.props.sidePanelItems}
+ onContextMenu={(event) => this.openContextMenu(event, authService.getUuid() || "")}>
<ProjectTree
projects={this.props.projects}
toggleOpen={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.OPEN))}
toggleActive={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
- />
+ onContextMenu={(event, item) => this.openContextMenu(event, item.data.uuid)} />
</SidePanel>
</Drawer>}
<main className={classes.contentWrapper}>
<Route path="/projects/:id" render={this.renderProjectPanel} />
</Switch>
</div>
- <DetailsPanel
- isOpened={this.state.isDetailsPanelOpened}
+ <DetailsPanel
+ isOpened={this.state.isDetailsPanelOpened}
onCloseDrawer={this.mainAppBarActions.onDetailsPanelToggle} />
</main>
+ <ContextMenu
+ anchorEl={this.state.contextMenu.anchorEl}
+ actions={contextMenuActions}
+ onActionClick={this.openCreateDialog}
+ onClose={this.closeContextMenu} />
+ <CreateProjectDialog />
</div>
);
}
renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
onItemClick={item => this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE))}
+ onContextMenu={(event, item) => this.openContextMenu(event, item.uuid)}
+ onDialogOpen={this.handleCreationDialogOpen}
{...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<WorkbenchDataProps>(
(state: RootState) => ({
projects / arvados.git / blobdiff