tree test

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

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index b11a1360c4665318871e289af6739f85517cb56c..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' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -49,29 +46,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: theme.spacing.unit * 3,
         minWidth: 0,
     },
-    row: {
-        display: 'flex'
-    },
     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>
@@ -80,22 +66,18 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                     classes={{
                         paper: classes.drawerPaper,
                     }}>
-                    <div className={classes.toolbar}/>
-                    <Tree items={projects}
-                        toggleItem={this.props.toggleProjectTreeItem}
-                        render={(p: Project) => <span className={classes.row}>
-                            <div style={{marginTop: "3px"}}><ListItemIcon>{p.icon}</ListItemIcon></div>
-                            <div><ListItemText primary={p.name}/></div>
-                        </span>}
-                        />
+                    <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>