From e6d69724ebd2256128e983d4a95bd1d46dd71592 Mon Sep 17 00:00:00 2001 From: Pawel Kowalczyk Date: Mon, 9 Jul 2018 15:49:36 +0200 Subject: [PATCH] action-on-new-project-click Feature #13694 Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk --- src/components/context-menu/context-menu.tsx | 1 + src/views/project-panel/project-panel.tsx | 45 ++------------------ src/views/workbench/workbench.tsx | 28 ++++++------ 3 files changed, 18 insertions(+), 56 deletions(-) diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx index 7751be49..48e63ba0 100644 --- a/src/components/context-menu/context-menu.tsx +++ b/src/components/context-menu/context-menu.tsx @@ -8,6 +8,7 @@ import { DefaultTransformOrigin } from "../popover/helpers"; export interface ContextMenuAction { name: string; icon: string; + openCreateDialog?: boolean; } export type ContextMenuActionGroup = ContextMenuAction[]; diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index 2cdb6712..f1b82357 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -7,7 +7,6 @@ import { ProjectPanelItem } from './project-panel-item'; import { Grid, Typography, Button, Toolbar, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; import { formatDate, formatFileSize } from '../../common/formatters'; import DataExplorer from "../../views-components/data-explorer/data-explorer"; -import { ContextMenuAction } from '../../components/context-menu/context-menu'; import { DispatchProp, connect } from 'react-redux'; import { DataColumns } from '../../components/data-table/data-table'; import { RouteComponentProps } from 'react-router'; @@ -16,8 +15,6 @@ import { ResourceKind } from '../../models/kinds'; import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters'; import { ContainerRequestState } from '../../models/container-request'; import { SortDirection } from '../../components/data-table/data-column'; -import DialogProjectCreate from '../../components/dialog-create/dialog-project-create'; -import { mockAnchorFromMouseEvent } from "../../components/popover/helpers"; export const PROJECT_PANEL_ID = "projectPanel"; @@ -25,33 +22,18 @@ export interface ProjectPanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } -interface DataExplorerState { - contextMenu: { - anchorEl?: HTMLElement; - item?: T; - }; - open?: boolean; -} - type ProjectPanelProps = { currentItemId: string, onItemClick: (item: ProjectPanelItem) => void, onItemRouteChange: (itemId: string) => void, onContextMenu: (event: React.MouseEvent, item: ProjectPanelItem) => void; - handleCreationDialogOpen: () => void; - handleCreationDialogClose: () => void; - isCreationDialogOpen: boolean; + onDialogOpen: () => void; } & DispatchProp & WithStyles & RouteComponentProps<{ id: string }>; -class ProjectPanel extends React.Component> { - state: DataExplorerState = { - contextMenu: {}, - open: false, - }; - +class ProjectPanel extends React.Component { render() { return
@@ -61,10 +43,9 @@ class ProjectPanel extends React.Component Run a process - -
{ - alert(`Executing ${action.name} on ${item.name}`); - } - - openContextMenu = (event: React.MouseEvent, item: any) => { - event.preventDefault(); - event.stopPropagation(); - this.setState({ - contextMenu: { - anchorEl: mockAnchorFromMouseEvent(event), - item - } - }); - } - - closeContextMenu = () => { - this.setState({ contextMenu: {} }); - } - } type CssRules = "toolbar" | "button"; diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 78211afe..9c1336c0 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -6,9 +6,8 @@ import * as React from 'react'; 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, { @@ -20,18 +19,17 @@ 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 from '../../components/context-menu/context-menu'; +import ContextMenu, { ContextMenuAction } from '../../components/context-menu/context-menu'; import { mockAnchorFromMouseEvent } from '../../components/popover/helpers'; +import DialogProjectCreate from '../../components/dialog-create/dialog-project-create'; const drawerWidth = 240; const appBarHeight = 100; @@ -172,6 +170,7 @@ class Workbench extends React.Component { } handleCreationDialogOpen = () => { + this.closeContextMenu(); this.setState({ isCreationDialogOpen: true }); } @@ -189,6 +188,9 @@ class Workbench extends React.Component { this.setState({ contextMenu: {} }); } + openCreateDialog = (item: ContextMenuAction) => + item.openCreateDialog ? this.handleCreationDialogOpen() : void 0 + render() { const path = getTreePath(this.props.projects, this.props.currentProjectId); const breadcrumbs = path.map(item => ({ @@ -206,8 +208,7 @@ class Workbench extends React.Component { searchText={this.state.searchText} user={this.props.user} menuItems={this.state.menuItems} - {...this.mainAppBarActions} - /> + {...this.mainAppBarActions} />
{user && { + ); } @@ -251,16 +253,14 @@ class Workbench extends React.Component { onItemRouteChange={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} onItemClick={item => this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE))} onContextMenu={this.openContextMenu} - handleCreationDialogOpen={this.handleCreationDialogOpen} - handleCreationDialogClose={this.handleCreationDialogClose} - isCreationDialogOpen={this.state.isCreationDialogOpen} + onDialogOpen={this.handleCreationDialogOpen} {...props} /> - } const contextMenuActions = [[{ icon: "fas fa-plus fa-fw", - name: "New project" + name: "New project", + openCreateDialog: true }, { icon: "fas fa-users fa-fw", name: "Share" -- 2.30.2