X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/219d452e647c01754bf71b91086b15cc9f00027a..838af71bfe460c7f5a03121acf8a4d239893cdac:/src/components/tree/tree.tsx

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index ea15b6b1bd..8a56739758 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -9,7 +9,7 @@ import { ReactElement } from "react";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import * as classnames from "classnames";
 
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
 import { SidePanelRightArrowIcon } from '../icon/icon';
 
 type CssRules = 'list'
@@ -65,9 +65,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 export enum TreeItemStatus {
-    INITIAL,
-    PENDING,
-    LOADED
+    INITIAL = 'initial',
+    PENDING = 'pending',
+    LOADED = 'loaded'
 }
 
 export interface TreeItem<T> {
@@ -80,7 +80,7 @@ export interface TreeItem<T> {
     items?: Array<TreeItem<T>>;
 }
 
-interface TreeProps<T> {
+export interface TreeProps<T> {
     items?: Array<TreeItem<T>>;
     render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
     toggleItemOpen: (id: string, status: TreeItemStatus) => void;
@@ -110,7 +110,7 @@ export const Tree = withStyles(styles)(
                             <i onClick={() => this.props.toggleItemOpen(it.id, it.status)}
                                 className={toggableIconContainer}>
                                 <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
-                                    {it.status !== TreeItemStatus.INITIAL && it.items && it.items.length === 0 ? <span /> : <SidePanelRightArrowIcon />}
+                                    {this.getProperArrowAnimation(it.status, it.items!)}
                                 </ListItemIcon>
                             </i>
                             {this.props.showSelection &&
@@ -140,6 +140,12 @@ export const Tree = withStyles(styles)(
             </List>;
         }
 
+        getProperArrowAnimation = (status: string, items: Array<TreeItem<T>>) => {
+            return status === TreeItemStatus.PENDING ||
+            (status === TreeItemStatus.LOADED && !items) || 
+            (status === TreeItemStatus.LOADED && items && items.length === 0) ? <span /> : <SidePanelRightArrowIcon />;
+        }
+
         getToggableIconClassNames = (isOpen?: boolean, isActive?: boolean) => {
             const { iconOpen, iconClose, active, toggableIcon } = this.props.classes;
             return classnames(toggableIcon, {