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';
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";
type: ResourceKind | ContainerRequestState;
}
-interface DataExplorerState<T> {
- contextMenu: {
- anchorEl?: HTMLElement;
- item?: T;
- };
- open?: boolean;
-}
-
type ProjectPanelProps = {
currentItemId: string,
onItemClick: (item: ProjectPanelItem) => void,
onItemRouteChange: (itemId: string) => void,
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
- handleCreationDialogOpen: () => void;
- handleCreationDialogClose: () => void;
- isCreationDialogOpen: boolean;
+ onDialogOpen: () => void;
}
& DispatchProp
& WithStyles<CssRules>
& RouteComponentProps<{ id: string }>;
-class ProjectPanel extends React.Component<ProjectPanelProps, DataExplorerState<any>> {
- state: DataExplorerState<any> = {
- contextMenu: {},
- open: false,
- };
-
+class ProjectPanel extends React.Component<ProjectPanelProps> {
render() {
return <div>
<div className={this.props.classes.toolbar}>
<Button color="primary" variant="raised" className={this.props.classes.button}>
Run a process
</Button>
- <Button color="primary" onClick={this.props.handleCreationDialogOpen} variant="raised" className={this.props.classes.button}>
+ <Button color="primary" onClick={this.props.onDialogOpen} variant="raised" className={this.props.classes.button}>
New project
</Button>
- <DialogProjectCreate open={this.props.isCreationDialogOpen} handleClose={this.props.handleCreationDialogClose}/>
</div>
<DataExplorer
id={PROJECT_PANEL_ID}
this.props.onItemRouteChange(match.params.id);
}
}
-
- executeAction = (action: ContextMenuAction, item: ProjectPanelItem) => {
- alert(`Executing ${action.name} on ${item.name}`);
- }
-
- openContextMenu = (event: React.MouseEvent<HTMLElement>, item: any) => {
- event.preventDefault();
- event.stopPropagation();
- this.setState({
- contextMenu: {
- anchorEl: mockAnchorFromMouseEvent(event),
- item
- }
- });
- }
-
- closeContextMenu = () => {
- this.setState({ contextMenu: {} });
- }
-
}
type CssRules = "toolbar" | "button";
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 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;
}
handleCreationDialogOpen = () => {
+ this.closeContextMenu();
this.setState({ isCreationDialogOpen: true });
}
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 => ({
searchText={this.state.searchText}
user={this.props.user}
menuItems={this.state.menuItems}
- {...this.mainAppBarActions}
- />
+ {...this.mainAppBarActions} />
</div>
{user &&
<Drawer
<ContextMenu
anchorEl={this.state.contextMenu.anchorEl}
actions={contextMenuActions}
- onActionClick={console.log}
+ onActionClick={this.openCreateDialog}
onClose={this.closeContextMenu} />
+ <DialogProjectCreate open={this.state.isCreationDialogOpen} handleClose={this.handleCreationDialogClose} />
</div>
);
}
onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
onItemClick={item => this.props.dispatch<any>(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"