X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/9999a9db9fede0e1971dc792389982b428a1bb19..7cac459611f4e4d089cedbe13120553f97152509:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 59495e94..257c7c4f 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -3,37 +3,42 @@ // 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 AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; import { connect, DispatchProp } from "react-redux"; -import ProjectList from "../../components/project-list/project-list"; -import { Route, Switch } from "react-router"; -import { Link } from "react-router-dom"; -import Button from "@material-ui/core/Button/Button"; +import { Route, Switch, RouteComponentProps, withRouter } from "react-router"; import authActions from "../../store/auth/auth-action"; -import IconButton from "@material-ui/core/IconButton/IconButton"; -import Menu from "@material-ui/core/Menu/Menu"; -import MenuItem from "@material-ui/core/MenuItem/MenuItem"; -import { AccountCircle } from "@material-ui/icons"; +import dataExplorerActions from "../../store/data-explorer/data-explorer-action"; import { User } from "../../models/user"; -import Grid from "@material-ui/core/Grid/Grid"; import { RootState } from "../../store/store"; -import projectActions from "../../store/project/project-action" - -import ProjectTree from '../../components/project-tree/project-tree'; -import { TreeItem, TreeItemStatus } from "../../components/tree/tree"; +import MainAppBar, { + MainAppBarActionProps, + MainAppBarMenuItem +} from '../../views-components/main-app-bar/main-app-bar'; +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 { projectService } from '../../services/services'; +import { getTreePath, findTreeItem } 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 { mockAnchorFromMouseEvent } from '../../components/popover/helpers'; const drawerWidth = 240; +const appBarHeight = 100; -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar'; +type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; -const styles: StyleRulesCallback = (theme: Theme) => ({ +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { flexGrow: 1, zIndex: 1, @@ -45,25 +50,35 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ }, appBar: { zIndex: theme.zIndex.drawer + 1, - backgroundColor: '#692498' + position: "absolute", + width: "100%" }, drawerPaper: { position: 'relative', width: drawerWidth, + display: 'flex', + flexDirection: 'column', }, - content: { - flexGrow: 1, + contentWrapper: { backgroundColor: theme.palette.background.default, - padding: theme.spacing.unit * 3, - height: '100%', + 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 }); interface WorkbenchDataProps { projects: Array>; + currentProjectId: string; user?: User; + sidePanelItems: SidePanelItem[]; } interface WorkbenchActionProps { @@ -71,96 +86,126 @@ interface WorkbenchActionProps { type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; +interface NavBreadcrumb extends Breadcrumb { + itemId: string; +} + +interface NavMenuItem extends MainAppBarMenuItem { + action: () => void; +} + interface WorkbenchState { + contextMenu: { + anchorEl?: HTMLElement; + }; + isCreationDialogOpen: boolean; anchorEl: any; + searchText: string; + menuItems: { + accountMenu: NavMenuItem[], + helpMenu: NavMenuItem[], + anonymousMenu: NavMenuItem[] + }; + isDetailsPanelOpened: boolean; } class Workbench extends React.Component { - constructor(props: WorkbenchProps) { - super(props); - this.state = { - anchorEl: null + state = { + contextMenu: { + anchorEl: undefined + }, + isCreationDialogOpen: false, + anchorEl: null, + searchText: "", + breadcrumbs: [], + menuItems: { + accountMenu: [ + { + label: "Logout", + action: () => this.props.dispatch(authActions.LOGOUT()) + }, + { + label: "My account", + action: () => this.props.dispatch(push("/my-account")) + } + ], + helpMenu: [ + { + label: "Help", + action: () => this.props.dispatch(push("/help")) + } + ], + anonymousMenu: [ + { + label: "Sign in", + action: () => this.props.dispatch(authActions.LOGIN()) + } + ] + }, + isDetailsPanelOpened: false + }; + + mainAppBarActions: MainAppBarActionProps = { + onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { + this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); + }, + onSearch: searchText => { + this.setState({ searchText }); + this.props.dispatch(push(`/search?q=${searchText}`)); + }, + onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(), + onDetailsPanelToggle: () => { + this.setState(prev => ({ isDetailsPanelOpened: !prev.isDetailsPanelOpened })); } + }; + + toggleSidePanelOpen = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); } - login = () => { - this.props.dispatch(authActions.LOGIN()); - }; + toggleSidePanelActive = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId)); + this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId)); + } - logout = () => { - this.handleClose(); - this.props.dispatch(authActions.LOGOUT()); - }; + handleCreationDialogOpen = () => { + this.setState({ isCreationDialogOpen: true }); + } - handleOpenMenu = (event: React.MouseEvent) => { - this.setState({ - anchorEl: event.currentTarget - }); - }; + handleCreationDialogClose = () => { + this.setState({ isCreationDialogOpen: false }); + } - handleClose = () => { - this.setState({ - anchorEl: null - }); - }; + openContextMenu = (event: React.MouseEvent, item: any) => { + event.preventDefault(); + this.setState({ contextMenu: { anchorEl: mockAnchorFromMouseEvent(event) } }); + console.log(item); + } - toggleProjectTreeItem = (itemId: string, status: TreeItemStatus) => { - if (status === TreeItemStatus.Loaded) { - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId)) - } else { - this.props.dispatch(projectService.getProjectList(itemId)).then(() => { - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId)); - }) - } - }; + closeContextMenu = () => { + this.setState({ contextMenu: {} }); + } render() { + 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 + })); + const { classes, user } = this.props; return (
- - - - Arvados
Workbench 2 - - {user ? - - - - {user.firstName} {user.lastName} - - - - - - - - - Logout - My account - - - : - - } - - +
+ +
{user && { paper: classes.drawerPaper, }}>
- + + this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + toggleActive={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onContextMenu={this.openContextMenu} /> + } -
-
- - - +
+
+ + + +
+
+
); } + + renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => 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} + {...props} /> + +} + +const contextMenuActions = [[{ + icon: "fas fa-plus fa-fw", + name: "New project" +}, { + 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, - user: state.auth.user + projects: state.projects.items, + currentProjectId: state.projects.currentItemId, + user: state.auth.user, + sidePanelItems: state.sidePanel }) )( withStyles(styles)(Workbench)