refs #13610 Merge branch '13610-projects-hierarchy'

[arvados.git] / src / components / project-tree / project-tree.tsx

diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
index 310dcedbdeed070fe242dffb10f8fb9a1c89560b..5243b5e7ee71507143fb07ebe1faf5ac49f4f4f7 100644 (file)
--- a/src/components/project-tree/project-tree.tsx
+++ b/src/components/project-tree/project-tree.tsx
@@ -35,12 +35,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     }
 });
 
-export interface WorkbenchProps {
+export interface ProjectTreeProps {
     projects: Array<TreeItem<Project>>;
-    toggleProjectTreeItem: (id: string) => any;
+    toggleProjectTreeItem: (id: string) => void;
 }
 
-class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
+class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
     render(): ReactElement<any> {
         const {classes, projects} = this.props;
         const {active, listItemText, row, treeContainer} = classes;
@@ -48,13 +48,21 @@ class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRule
             <div className={treeContainer}>
                 <Tree items={projects}
                     toggleItem={this.props.toggleProjectTreeItem}
-                    render={(project: TreeItem<Project>) => <span className={row}>
-                        <ListItemIcon className={project.active ? active : ''}>{project.data.icon}</ListItemIcon>
-                        <ListItemText className={listItemText} primary={<Typography className={project.active ? active : ''}>{project.data.name}</Typography>} />
-                    </span>} />
+                    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)
\ No newline at end of file
+export default withStyles(styles)(ProjectTree)