Merge conflicts

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

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 365835a90a127d101a73c36d1df0040d32003d0c..564360263c363461d5b558c1f298dce802b31498 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,16 +10,20 @@ 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 from "../../components/tree/tree";
+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';
+
 const drawerWidth = 240;
 
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'active' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -35,6 +39,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         zIndex: theme.zIndex.drawer + 1,
         backgroundColor: '#692498'
     },
+    active: {
+        color: '#4285F6',
+    },
     drawerPaper: {
         position: 'relative',
         width: drawerWidth,
@@ -45,11 +52,23 @@ 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: Project[]
+    projects: Array<TreeItem<Project>>;
+    toggleProjectTreeItem: (id: string) => any;
 }
 
 interface WorkbenchState {
@@ -57,8 +76,7 @@ interface WorkbenchState {
 
 class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, WorkbenchState> {
     render() {
-        const {classes} = this.props;
-
+        const {classes, projects} = this.props;
         return (
             <div className={classes.root}>
                 <AppBar position="absolute" className={classes.appBar}>
@@ -74,9 +92,15 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                         paper: classes.drawerPaper,
                     }}>
                     <div className={classes.toolbar}/>
-                    <Tree items={this.props.projects} render={(p: Project) =>
-                        <Link to={`/project/${p.name}`}>{p.name}</Link>
-                    }/>
+                    <div className={classes.treeContainer}>
+                        <Tree items={projects}
+                            toggleItem={this.props.toggleProjectTreeItem}
+                            render={(project: TreeItem<Project>) => <span className={classes.row}>
+                                <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
+                                <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
+                            </span>}
+                            />
+                    </div>
                 </Drawer>
                 <main className={classes.content}>
                     <div className={classes.toolbar}/>
@@ -92,10 +116,12 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
     }
 }
 
-export default connect<WorkbenchProps>(
+export default connect(
     (state: RootState) => ({
         projects: state.projects
-    })
+    }), {
+        toggleProjectTreeItem: (id: string) => projectActions.toggleProjectTreeItem(id)
+    }
 )(
     withStyles(styles)(Workbench)
 );