tree test

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

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8d9e35edc9ac7ca4d5ba77e22530d9382bf2686d..6f39ac78e05c3752dee124e6447f98490eedc4d5 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,20 +10,17 @@ 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 { 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 ListItemIcon from '@material-ui/core/ListItemIcon';
+import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
 
 const drawerWidth = 240;
 
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -49,37 +46,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: theme.spacing.unit * 3,
         minWidth: 0,
     },
-    row: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    treeContainer: {
-        position: 'absolute',        
-        overflowX: 'visible',
-        marginTop: '80px',
-        minWidth: drawerWidth,
-        whiteSpace: 'nowrap'
-    },
     toolbar: theme.mixins.toolbar
 });
 
-interface WorkbenchProps {
-    projects: Array<TreeItem<Project>>;
-    toggleProjectTreeItem: (id: string) => any;
-}
-
-interface WorkbenchState {
-}
-
-class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, WorkbenchState> {
+class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
     render() {
-        const {classes, projects} = this.props;
+        const { classes } = this.props;
         return (
             <div className={classes.root}>
                 <AppBar position="absolute" className={classes.appBar}>
                     <Toolbar>
                         <Typography variant="title" color="inherit" noWrap>
-                            Arvados<br/>Workbench 2
+                            Arvados<br />Workbench 2
                         </Typography>
                     </Toolbar>
                 </AppBar>
@@ -88,24 +66,18 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                     classes={{
                         paper: classes.drawerPaper,
                     }}>
-                    <div className={classes.toolbar}/>
-                    <div className={classes.treeContainer}>
-                        <Tree items={projects}
-                            toggleItem={this.props.toggleProjectTreeItem}
-                            render={(p: Project) => <span className={classes.row}>
-                                <div><ListItemIcon>{p.icon}</ListItemIcon></div>
-                                <div><ListItemText primary={p.name}/></div>
-                            </span>}
-                            />
-                    </div>
+                    <div className={classes.toolbar} />
+                    <ProjectTree
+                        projects={this.props.projects}
+                        toggleProjectTreeItem={this.props.toggleProjectTreeItem} />
                 </Drawer>
                 <main className={classes.content}>
-                    <div className={classes.toolbar}/>
+                    <div className={classes.toolbar} />
                     <Switch>
                         <Route exact path="/">
                             <Typography noWrap>Hello new workbench!</Typography>
                         </Route>
-                        <Route path="/project/:name" component={ProjectList}/>
+                        <Route path="/project/:name" component={ProjectList} />
                     </Switch>
                 </main>
             </div>