X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3015426750f11fdc97d55a29f2a662e2f272f5d4..73699c70c40d2e82f1871ba042ea5d8a79cd5fd1:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index dcc26ed9e7..b8baeadc63 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -6,26 +6,33 @@ import * as React from 'react'; import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import { connect, DispatchProp } from "react-redux"; - -import ProjectList from "../../components/project-list/project-list"; -import { Route, Switch } from "react-router"; +import { Route, Switch, RouteComponentProps, withRouter } 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, { MainAppBarActionProps, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar'; +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 from "../../store/project/project-action"; -import sidePanelActions from '../../store/side-panel/side-panel-action'; -import ProjectTree from '../../components/project-tree/project-tree'; -import { TreeItem, TreeItemStatus } from "../../components/tree/tree"; +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 SidePanel, {SidePanelItem} from '../../components/side-panel/side-panel'; +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'; 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: { @@ -46,19 +53,27 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ 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 * 3, + overflowY: "auto", + flexGrow: 1 }, toolbar: theme.mixins.toolbar }); interface WorkbenchDataProps { projects: Array>; + currentProjectId: string; user?: User; sidePanelItems: SidePanelItem[]; } @@ -69,7 +84,7 @@ interface WorkbenchActionProps { type WorkbenchProps = WorkbenchDataProps & WorkbenchActionProps & DispatchProp & WithStyles; interface NavBreadcrumb extends Breadcrumb { - path: string; + itemId: string; } interface NavMenuItem extends MainAppBarMenuItem { @@ -78,7 +93,6 @@ interface NavMenuItem extends MainAppBarMenuItem { interface WorkbenchState { anchorEl: any; - breadcrumbs: NavBreadcrumb[]; searchText: string; menuItems: { accountMenu: NavMenuItem[], @@ -91,15 +105,7 @@ class Workbench extends React.Component { state = { anchorEl: null, searchText: "", - breadcrumbs: [ - { - label: "Projects", - path: "/projects" - }, { - label: "Project 1", - path: "/projects/project-1" - } - ], + breadcrumbs: [], menuItems: { accountMenu: [ { @@ -126,9 +132,10 @@ class Workbench extends React.Component { } }; - mainAppBarActions: MainAppBarActionProps = { - onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)), + onBreadcrumbClick: ({ itemId }: NavBreadcrumb) => { + this.props.dispatch(setProjectItem(itemId, ItemMode.BOTH)); + }, onSearch: searchText => { this.setState({ searchText }); this.props.dispatch(push(`/search?q=${searchText}`)); @@ -136,37 +143,29 @@ class Workbench extends React.Component { onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action() }; - toggleProjectTreeItemOpen = (itemId: string, status: TreeItemStatus) => { - if (status === TreeItemStatus.Loaded) { - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId)); - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); - } else { - this.props.dispatch(projectService.getProjectList(itemId)).then(() => { - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(itemId)); - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(itemId)); - }); - } - } - - toggleProjectTreeItemActive = (itemId: string) => { - this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(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)); } render() { - const { classes, user, projects, sidePanelItems } = this.props; + 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 (
{ }}>
+ toggleOpen={this.toggleSidePanelOpen} + toggleActive={this.toggleSidePanelActive} + sidePanelItems={this.props.sidePanelItems}> + projects={this.props.projects} + toggleOpen={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.OPEN))} + toggleActive={itemId => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + /> } -
-
- - - +
+
+ + + +
); } + + renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => this.props.dispatch(setProjectItem(itemId, ItemMode.ACTIVE))} + onItemClick={item => this.props.dispatch(setProjectItem(item.uuid, ItemMode.ACTIVE))} + {...props} /> + } export default connect( (state: RootState) => ({ - projects: state.projects, + projects: state.projects.items, + currentProjectId: state.projects.currentItemId, user: state.auth.user, - sidePanelItems: state.sidePanel, + sidePanelItems: state.sidePanel }) )( withStyles(styles)(Workbench)