Create data-explorer and project-explorer prototype

[arvados-workbench2.git] / src / views / workbench / workbench.tsx

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 7cccfe3034698057db006cde792dc0e4d201a915..f45394718e9c0b625b3034ccc392d48ee52879c4 100644 (file)
--- 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";
@@ -24,9 +22,14 @@ import { AccountCircle } from "@material-ui/icons";
 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 { actions as projectActions } from "../../store/project-action";
-import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
+import ProjectTree from '../../components/project-tree/project-tree';
+import { TreeItem } from "../../components/tree/tree";
+import { Project } from "../../models/project";
+import { projectService } from '../../services/services';
+import ProjectExplorer from '../project-explorer/project-explorer';
+import { push } from 'react-router-redux';
 
 const drawerWidth = 240;
 
@@ -61,7 +64,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 });
 
 interface WorkbenchDataProps {
-    projects: Project[];
+    projects: Array<TreeItem<Project>>;
     user?: User;
 }
 
@@ -103,6 +106,13 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
         });
     };
 
+    toggleProjectTreeItem = (itemId: string) => {
+        this.props.dispatch<any>(projectService.getProjectList(itemId)).then(() => {
+            this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(itemId));
+            this.props.dispatch(push(`/project/${itemId}`))
+        });
+    };
+
     render() {
         const {classes, user} = this.props;
         return (
@@ -157,14 +167,14 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                         paper: classes.drawerPaper,
                     }}>
                     <div className={classes.toolbar}/>
-                           <ProjectTree
+                    <ProjectTree
                         projects={this.props.projects}
-                        toggleProjectTreeItem={this.props.toggleProjectTreeItem}/>
+                        toggleProjectTreeItem={this.toggleProjectTreeItem}/>
                 </Drawer>}
                 <main className={classes.content}>
                     <div className={classes.toolbar}/>
                     <Switch>
-                        <Route path="/project/:name" component={ProjectList}/>
+                        <Route path="/project/:name" component={ProjectExplorer}/>
                     </Switch>
                 </main>
             </div>
@@ -176,9 +186,7 @@ export default connect<WorkbenchDataProps>(
     (state: RootState) => ({
         projects: state.projects,
         user: state.auth.user
-    }){
-        toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id)
-    }
+    })
 )(
     withStyles(styles)(Workbench)
 );