X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/762c232937e6825839ada7d682542601aaffbd90..28bb06ae7b9983da793f2459c5cc3e8debd71949:/src/views/workbench/workbench.tsx

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index f002ad9a9a..3d0a7ad310 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,8 +10,6 @@ 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 Tree from "../../components/tree/tree";
-import { Project } from "../../models/project";
 import ProjectList from "../../components/project-list/project-list";
 import { Route, Switch } from "react-router";
 import { Link } from "react-router-dom";
@@ -27,6 +25,11 @@ import { RootState } from "../../store/store";
 import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItems, MainAppBarMenuItem } from '../../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 ProjectTree from '../../components/project-tree/project-tree';
+import { TreeItem } from "../../components/tree/tree";
+import { Project } from "../../models/project";
+import { projectService } from '../../services/services';
 
 const drawerWidth = 240;
 
@@ -63,7 +66,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 });
 
 interface WorkbenchDataProps {
-    projects: Project[];
+    projects: Array<TreeItem<Project>>;
     user?: User;
 }
 
@@ -140,6 +143,12 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
         onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
     }
 
+    toggleProjectTreeItem = (itemId: string) => {
+        this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
+            this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
+        });
+    };
+
     render() {
         const { classes, user } = this.props;
         return (
@@ -154,17 +163,16 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                     />
                 </div>
                 {user &&
-                    <Drawer
-                        variant="permanent"
-                        classes={{
-                            paper: classes.drawerPaper,
-                        }}>
-                        <div className={classes.toolbar} />
-                        <div className={classes.toolbar} />
-                        <Tree items={this.props.projects} render={(p: Project) =>
-                            <Link to={`/project/${p.name}`}>{p.name}</Link>
-                        } />
-                    </Drawer>}
+                <Drawer
+                    variant="permanent"
+                    classes={{
+                        paper: classes.drawerPaper,
+                    }}>
+                    <div className={classes.toolbar}/>
+                    <ProjectTree
+                        projects={this.props.projects}
+                        toggleProjectTreeItem={this.toggleProjectTreeItem}/>
+                </Drawer>}
                 <main className={classes.content}>
                     <div className={classes.toolbar} />
                     <div className={classes.toolbar} />