X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/5e88476747d9fb0c77ef76d63430192fa4b77f22..c90e813adcec89899d9db95843295a84fb058c3e:/src/views-components/project-tree/project-tree.tsx

diff --git a/src/views-components/project-tree/project-tree.tsx b/src/views-components/project-tree/project-tree.tsx
index fd32ff04..f51b65e0 100644
--- a/src/views-components/project-tree/project-tree.tsx
+++ b/src/views-components/project-tree/project-tree.tsx
@@ -12,6 +12,36 @@ import Typography from '@material-ui/core/Typography';
 import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
 import { Project } from '../../models/project';
 
+export interface ProjectTreeProps {
+    projects: Array<TreeItem<Project>>;
+    toggleOpen: (id: string, status: TreeItemStatus) => void;
+    toggleActive: (id: string, status: TreeItemStatus) => void;
+}
+
+class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
+    render(): ReactElement<any> {
+        const { classes, projects, toggleOpen, toggleActive } = this.props;
+        const { active, listItemText, row, treeContainer } = classes;
+        return (
+            <div className={treeContainer}>
+                <Tree items={projects}
+                    toggleItemOpen={toggleOpen}
+                    toggleItemActive={toggleActive}
+                    render={(project: TreeItem<Project>) =>
+                        <span className={row}>
+                            <ListItemIcon className={project.active ? active : ''}>
+                                <i className="fas fa-folder" />
+                            </ListItemIcon>
+                            <ListItemText className={listItemText} primary={
+                                <Typography className={project.active ? active : ''}>{project.data.name}</Typography>
+                            } />
+                        </span>
+                    } />
+            </div>
+        );
+    }
+}
+
 type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
@@ -27,42 +57,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         marginLeft: '20px',
     },
     treeContainer: {
-        marginTop: '37px',
-        overflowX: 'visible',
-        overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',
+        marginLeft: '13px',
     }
 });
 
-export interface ProjectTreeProps {
-    projects: Array<TreeItem<Project>>;
-    toggleProjectTreeItem: (id: string, status: TreeItemStatus) => void;
-}
-
-class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
-    render(): ReactElement<any> {
-        const {classes, projects} = this.props;
-        const {active, listItemText, row, treeContainer} = classes;
-        return (
-            <div className={treeContainer}>
-                <Tree items={projects}
-                    toggleItem={this.props.toggleProjectTreeItem}
-                    render={(project: TreeItem<Project>, level: number) =>
-                        <span className={row}>
-                            <ListItemIcon className={project.active ? active : ''}>
-                                {level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>}
-                            </ListItemIcon>
-                            <ListItemText className={listItemText} primary={
-                                <Typography className={project.active ? active : ''}>
-                                    {project.data.name}
-                                </Typography>
-                            }/>
-                        </span>
-                    }/>
-            </div>
-        );
-    }
-}
-
 export default withStyles(styles)(ProjectTree);