X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/cf035c0589f045849ba635a82b6857fdd6f618ed..75b209b2cbd37e3510fd726e737fa5457a6a8d77:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 7265380a2a..a05d4db564 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -3,26 +3,33 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; - import { StyleRulesCallback, Theme, 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 } from "react-redux"; -import Tree, { TreeItem } from "../../components/tree/tree"; -import { Project } from "../../models/project"; -import { RootState } from "../../store/root-reducer"; -import ProjectList from "../../components/project-list/project-list"; +import { connect, DispatchProp } from "react-redux"; import { Route, Switch } from "react-router"; -import { Link } from "react-router-dom"; - -import { actions as projectActions } from "../../store/project-action"; -import ListItemText from "@material-ui/core/ListItemText/ListItemText"; +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, { MainAppBarActionProps, MainAppBarMenuItem } from '../../views-components/main-app-bar/main-app-bar'; +import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs'; +import { push } from 'react-router-redux'; +import projectActions, { getProjectList } from "../../store/project/project-action"; +import ProjectTree from '../../views-components/project-tree/project-tree'; +import { TreeItem, TreeItemStatus } from "../../components/tree/tree"; +import { Project } from "../../models/project"; +import { getTreePath, findTreeItem } from '../../store/project/project-reducer'; +import ProjectPanel from '../project-panel/project-panel'; +import { PROJECT_EXPLORER_ID } from '../../views-components/project-explorer/project-explorer'; +import { ProjectExplorerItem } from '../../views-components/project-explorer/project-explorer-item'; +import sidePanelActions from '../../store/side-panel/side-panel-action'; +import { projectService } from '../../services/services'; +import SidePanel, { SidePanelItem } from '../../components/side-panel/side-panel'; const drawerWidth = 240; +const appBarHeight = 102; -type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar'; +type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; const styles: StyleRulesCallback = (theme: Theme) => ({ root: { @@ -31,77 +38,222 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ overflow: 'hidden', position: 'relative', display: 'flex', - width: '100%', - height: '100%' + width: '100vw', + height: '100vh' }, appBar: { zIndex: theme.zIndex.drawer + 1, - backgroundColor: '#692498' + 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, + display: "flex", + flexGrow: 1, minWidth: 0, + paddingTop: appBarHeight + }, + content: { + padding: theme.spacing.unit * 3, + overflowY: "auto", + flexGrow: 1 }, toolbar: theme.mixins.toolbar }); -interface WorkbenchProps { +interface WorkbenchDataProps { projects: Array>; - toggleProjectTreeItem: (id: string) => any; + user?: User; + sidePanelItems: SidePanelItem[]; +} + +interface WorkbenchActionProps { +} + +type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; + +interface NavBreadcrumb extends Breadcrumb { + itemId: string; + status: TreeItemStatus; +} + +interface NavMenuItem extends MainAppBarMenuItem { + action: () => void; } interface WorkbenchState { + anchorEl: any; + breadcrumbs: NavBreadcrumb[]; + searchText: string; + menuItems: { + accountMenu: NavMenuItem[], + helpMenu: NavMenuItem[], + anonymousMenu: NavMenuItem[] + }; } -class Workbench extends React.Component, WorkbenchState> { +class Workbench extends React.Component { + state = { + 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()) + } + ] + } + }; + + + mainAppBarActions: MainAppBarActionProps = { + onBreadcrumbClick: ({ itemId, status }: NavBreadcrumb) => { + this.toggleProjectTreeItemOpen(itemId, status); + }, + onSearch: searchText => { + this.setState({ searchText }); + this.props.dispatch(push(`/search?q=${searchText}`)); + }, + onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action() + }; + + toggleProjectTreeItemOpen = (itemId: string, status: TreeItemStatus) => { + if (status === TreeItemStatus.Loaded) { + this.openProjectItem(itemId); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId)); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); + } else { + this.props.dispatch(getProjectList(itemId)) + .then(() => { + this.openProjectItem(itemId); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId)); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); + }); + } + } + + toggleProjectTreeItemActive = (itemId: string, status: TreeItemStatus) => { + if (status === TreeItemStatus.Loaded) { + this.openProjectItem(itemId); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); + this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId)); + } else { + this.props.dispatch(getProjectList(itemId)) + .then(() => { + this.openProjectItem(itemId); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); + this.props.dispatch(sidePanelActions.RESET_SIDE_PANEL_ACTIVITY(itemId)); + }); + } + } + + toggleSidePanelOpen = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_OPEN(itemId)); + } + + toggleSidePanelActive = (itemId: string) => { + this.props.dispatch(sidePanelActions.TOGGLE_SIDE_PANEL_ITEM_ACTIVE(itemId)); + this.props.dispatch(projectActions.RESET_PROJECT_TREE_ACTIVITY(itemId)); + } + + openProjectItem = (itemId: string) => { + const branch = getTreePath(this.props.projects, itemId); + this.setState({ + breadcrumbs: branch.map(item => ({ + label: item.data.name, + itemId: item.data.uuid, + status: item.status + })) + }); + this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); + this.props.dispatch(push(`/project/${itemId}`)); + + const project = findTreeItem(this.props.projects, itemId); + const items: ProjectExplorerItem[] = project && project.items + ? project.items.map(({ data }) => ({ + uuid: data.uuid, + name: data.name, + type: data.kind, + owner: data.ownerUuid, + lastModified: data.modifiedAt + })) + : []; + this.props.dispatch(dataExplorerActions.SET_ITEMS({ id: PROJECT_EXPLORER_ID, items })); + } + render() { - const {classes} = this.props; + const { classes, user, projects, sidePanelItems } = this.props; return (
- - - - Arvados
Workbench 2 - - - - -
- } - /> - -
-
- - - Hello new workbench! - - - +
+ +
+ {user && + +
+ + + + } +
+
+ + + +
); } } -export default connect( +export default connect( (state: RootState) => ({ - projects: state.projects - }), { - toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id) - } + projects: state.projects, + user: state.auth.user, + sidePanelItems: state.sidePanel, + }) )( withStyles(styles)(Workbench) );