21128: Merge branch 'main' into 21128-toolbar-context-menu

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

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 28f1966aa173264b627c03a75651b39bb4ccb2c9..11a9540290cc21eb9aa3995f93124608775f0254 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 import { List, ListItem, ListItemIcon, Checkbox, Radio, Collapse } from "@material-ui/core";
 import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
-import { CollectionIcon, DefaultIcon, DirectoryIcon, FileIcon, ProjectIcon, FilterGroupIcon, FreezeIcon } from 'components/icon/icon';
+import { CollectionIcon, DefaultIcon, DirectoryIcon, FileIcon, ProjectIcon, ProcessIcon, FilterGroupIcon, FreezeIcon } from 'components/icon/icon';
 import { ReactElement } from "react";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import classnames from "classnames";
@@ -14,6 +14,7 @@ import { ArvadosTheme } from 'common/custom-theme';
 import { SidePanelRightArrowIcon } from '../icon/icon';
 import { ResourceKind } from 'models/resource';
 import { GroupClass } from 'models/group';
+import { SidePanelTreeCategory } from 'store/side-panel-tree/side-panel-tree-actions';
 
 type CssRules = 'list'
     | 'listItem'
@@ -27,7 +28,8 @@ type CssRules = 'list'
     | 'checkbox'
     | 'childItem'
     | 'childItemIcon'
-    | 'frozenIcon';
+    | 'frozenIcon'
+    | 'indentSpacer';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     list: {
@@ -45,9 +47,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.palette.grey["700"],
         height: '14px',
         width: '14px',
+        marginBottom: '0.4rem',
     },
     toggableIcon: {
-        fontSize: '14px'
+        fontSize: '14px',
     },
     renderContainer: {
         flex: 1
@@ -89,6 +92,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.palette.grey["600"],
         marginLeft: '10px',
     },
+    indentSpacer: {
+        width: '0.25rem'
+    }
 });
 
 export enum TreeItemStatus {
@@ -99,6 +105,7 @@ export enum TreeItemStatus {
 
 export interface TreeItem<T> {
     data: T;
+    depth?: number;
     id: string;
     open: boolean;
     active: boolean;
@@ -155,6 +162,10 @@ const getActionAndId = (event: any, initAction: string | undefined = undefined)
     return [action, id];
 };
 
+const isInFavoritesTree = (item: TreeItem<any>): boolean => {
+    return item.id === SidePanelTreeCategory.FAVORITES || item.id === SidePanelTreeCategory.PUBLIC_FAVORITES;
+}
+
 interface FlatTreeProps {
     it: TreeItem<any>;
     levelIndentation: number;
@@ -177,7 +188,7 @@ const FLAT_TREE_ACTIONS = {
     toggleActive: 'TOGGLE_ACTIVE',
 };
 
-const ItemIcon = React.memo(({ type, kind, active, groupClass, classes }: any) => {
+const ItemIcon = React.memo(({ type, kind, headKind, active, groupClass, classes }: any) => {
     let Icon = ProjectIcon;
 
     if (groupClass === GroupClass.FILTER) {
@@ -198,10 +209,14 @@ const ItemIcon = React.memo(({ type, kind, active, groupClass, classes }: any) =
     }
 
     if (kind) {
+        if(kind === ResourceKind.LINK && headKind) kind = headKind;
         switch (kind) {
             case ResourceKind.COLLECTION:
                 Icon = CollectionIcon;
                 break;
+            case ResourceKind.CONTAINER_REQUEST:
+                Icon = ProcessIcon;
+                break;
             default:
                 break;
         }
@@ -240,11 +255,14 @@ const FlatTree = (props: FlatTreeProps) =>
                 .map((item: any) => <div key={item.id} data-id={item.id}
                     className={classnames(props.classes.childItem, { [props.classes.active]: item.active })}
                     style={{ paddingLeft: `${item.depth * props.levelIndentation}px` }}>
-                    <i data-action={FLAT_TREE_ACTIONS.toggleOpen} className={props.classes.toggableIconContainer}>
-                        <ListItemIcon className={props.getToggableIconClassNames(item.open, item.active)}>
-                            {props.getProperArrowAnimation(item.status, item.items!)}
-                        </ListItemIcon>
-                    </i>
+                    {isInFavoritesTree(props.it) ? 
+                        <div className={props.classes.indentSpacer} />
+                        :
+                        <i data-action={FLAT_TREE_ACTIONS.toggleOpen} className={props.classes.toggableIconContainer}>
+                            <ListItemIcon className={props.getToggableIconClassNames(item.open, item.active)}>
+                                {props.getProperArrowAnimation(item.status, item.items!)}
+                            </ListItemIcon> 
+                        </i>}
                     {props.showSelection(item) && !props.useRadioButtons &&
                         <Checkbox
                             checked={item.selected}
@@ -258,7 +276,7 @@ const FlatTree = (props: FlatTreeProps) =>
                             color="primary" />}
                     <div data-action={FLAT_TREE_ACTIONS.toggleActive} className={props.classes.renderContainer} ref={item.active ? props.selectedRef : undefined}>
                         <span style={{ display: 'flex', alignItems: 'center' }}>
-                            <ItemIcon type={item.data.type} active={item.active} kind={item.data.kind} groupClass={item.data.kind === ResourceKind.GROUP ? item.data.groupClass : ''} classes={props.classes} />
+                            <ItemIcon type={item.data.type} active={item.active} kind={item.data.kind} headKind={item.data.headKind || null} groupClass={item.data.kind === ResourceKind.GROUP ? item.data.groupClass : ''} classes={props.classes} />
                             <span style={{ fontSize: '0.875rem' }}>
                                 {item.data.name}
                             </span>
@@ -326,6 +344,9 @@ export const Tree = withStyles(styles)(
         const { levelIndentation = 20, itemRightPadding = 20 } = props;
         return <List className={list}>
             {items && items.map((it: TreeItem<T>, idx: number) => {
+                if (isInFavoritesTree(it) && it.open === true && it.items && it.items.length) {
+                    it = { ...it, items: it.items.filter(item => item.depth && item.depth < 3) }
+                }
                 return <div key={`item/${level}/${it.id}`}>
                     <ListItem button className={listItem}
                         style={{