17114: Code cleanup, style cleanup

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>01~

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 7371654bcb8a30ac5c5dcc8f509524442c37549b..25398288ffb1df9e33caafd517bccd57d56244ef 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -5,6 +5,7 @@
 import * as React from 'react';
 import { List, ListItem, ListItemIcon, Checkbox, Radio } from "@material-ui/core";
 import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
+import { ProjectIcon } from '~/components/icon/icon';
 import { ReactElement } from "react";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import classnames from "classnames";
@@ -22,7 +23,8 @@ type CssRules = 'list'
     | 'iconOpen'
     | 'toggableIcon'
     | 'checkbox'
-    | 'childItem';
+    | 'childItem'
+    | 'childItemIcon';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     list: {
@@ -47,9 +49,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     renderContainer: {
         flex: 1
     },
-    active: {
-        color: theme.palette.primary.main,
-    },
     iconClose: {
         transition: 'all 0.1s ease',
     },
@@ -69,10 +68,19 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: 'flex',
         padding: '3px 20px',
         fontSize: '0.875rem',
+        alignItems: 'center',
         '&:hover': {
             backgroundColor: 'rgba(0, 0, 0, 0.08)',
         }
     },
+    childItemIcon: {
+        marginLeft: '8px',
+        marginRight: '16px',
+        color: 'rgba(0, 0, 0, 0.54)',
+    },
+    active: {
+        color: theme.palette.primary.main,
+    },
 });
 
 export enum TreeItemStatus {
@@ -113,18 +121,6 @@ export interface TreeProps<T> {
     useRadioButtons?: boolean;
 }
 
-const flatTree = (depth: number, items?: any): [] => {
-    return items ? items.reduce((prev: any, next: any) => {
-        const { items } = next;
-        // delete next.items;
-        return [
-            ...prev,
-            { ...next, depth },
-            ...(next.open ? flatTree(depth + 1, items) : []),
-        ];
-    }, []) : [];
-};
-
 const getActionAndId = (event: any, initAction: string | undefined = undefined) => {
     const { nativeEvent: { target } } = event;
     let currentTarget: HTMLElement = target as HTMLElement;
@@ -150,21 +146,15 @@ export const Tree = withStyles(styles)(
         render(): ReactElement<any> {
             const level = this.props.level ? this.props.level : 0;
             const { classes, render, items, toggleItemActive, disableRipple, currentItemUuid, useRadioButtons } = this.props;
-            const { list, listItem, loader, toggableIconContainer, renderContainer, childItem, active } = classes;
+            const { list, listItem, loader, toggableIconContainer, renderContainer, childItem, active, childItemIcon } = classes;
             const showSelection = typeof this.props.showSelection === 'function'
                 ? this.props.showSelection
                 : () => this.props.showSelection ? true : false;
 
             const { levelIndentation = 20, itemRightPadding = 20 } = this.props;
 
-            const flatItems = (items || [])
-                .map(parentItem => ({
-                    ...parentItem,
-                    items: flatTree(2, parentItem.items || []),
-                }));
-
             return <List className={list}>
-                {flatItems && flatItems.map((it: TreeItem<T>, idx: number) =>
+                {items && items.map((it: TreeItem<T>, idx: number) =>
                     <div key={`item/${level}/${it.id}`}>
                         <ListItem button className={listItem}
                             style={{
@@ -198,7 +188,7 @@ export const Tree = withStyles(styles)(
                                 {render(it, level)}
                             </div>
                         </ListItem>
-                        {it.items && it.items.length > 0 &&
+                        {it.open && it.items && it.items.length > 0 &&
                             <div
                                 onContextMenu={(event) => {
                                     const [action, id] = getActionAndId(event, 'CONTEXT_MENU');
@@ -223,6 +213,7 @@ export const Tree = withStyles(styles)(
                             >
                                 {
                                     it.items
+                                        .slice(0, 30)
                                         .map((item: any) => <div key={item.id} data-id={item.id}
                                             className={classnames(childItem, { [active]: item.active })}
                                             style={{ paddingLeft: `${item.depth * levelIndentation}px`}}>
@@ -231,21 +222,16 @@ export const Tree = withStyles(styles)(
                                                     {this.getProperArrowAnimation(item.status, item.items!)}
                                                 </ListItemIcon>
                                             </i>
-                                            <div style={{ marginLeft: '8px' }} data-action="TOGGLE_ACTIVE" className={renderContainer}>
-                                                {item.data.name}
+                                            <div data-action="TOGGLE_ACTIVE" className={renderContainer}>
+                                                <span style={{ display: 'flex', alignItems: 'center' }}>
+                                                    <ProjectIcon className={classnames({ [active]: item.active }, childItemIcon)} />
+                                                    <span style={{ fontSize: '0.875rem' }}>
+                                                        {item.data.name}
+                                                    </span>
+                                                </span>
                                             </div>
                                         </div>)
                                 }
-                                {/* <Tree
-                                    showSelection={this.props.showSelection}
-                                    items={it.items}
-                                    render={render}
-                                    disableRipple={disableRipple}
-                                    toggleItemOpen={toggleItemOpen}
-                                    toggleItemActive={toggleItemActive}
-                                    level={level + 1}
-                                    onContextMenu={onContextMenu}
-                                    toggleItemSelection={this.props.toggleItemSelection} /> */}
                             </div>}
                     </div>)}
             </List>;

diff --git a/src/views-components/side-panel-tree/side-panel-tree.tsx b/src/views-components/side-panel-tree/side-panel-tree.tsx
index d96a3c837cb1db51948448c7205a0810b7d4b379..8181caf7cc6c98acd0b83e5a01b7e03a66e9851e 100644 (file)
--- a/src/views-components/side-panel-tree/side-panel-tree.tsx
+++ b/src/views-components/side-panel-tree/side-panel-tree.tsx
@@ -41,7 +41,7 @@ export const SidePanelTree = connect(undefined, mapDispatchToProps)(
     (props: SidePanelTreeActionProps) =>
         <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />);
 
-const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
+export const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
     const name = typeof item.data === 'string' ? item.data : item.data.name;
     const warn = typeof item.data !== 'string' && item.data.kind === ResourceKind.PROJECT
         ? <IllegalNamingWarning name={name} />
@@ -52,7 +52,6 @@ const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
         nameDecorator={warn}
         isActive={item.active}
         hasMargin={true}
-        iconSize={1.25}
     />;
 };
 

diff --git a/src/views-components/tree-picker/tree-picker.ts b/src/views-components/tree-picker/tree-picker.ts
index cb829059a5889f5e2872b9a95b602fa03c429cf9..e7dc2a84edbcf84d6e41d7961a3218022e5a0cb1 100644 (file)
--- a/src/views-components/tree-picker/tree-picker.ts
+++ b/src/views-components/tree-picker/tree-picker.ts
@@ -18,6 +18,18 @@ export interface TreePickerProps<T> {
     toggleItemSelection: Callback<T>;
 }
 
+const flatTree = (depth: number, items?: any): [] => {
+    return items ? items.reduce((prev: any, next: any) => {
+        const { items } = next;
+        // delete next.items;
+        return [
+            ...prev,
+            { ...next, depth },
+            ...(next.open ? flatTree(depth + 1, items) : []),
+        ];
+    }, []) : [];
+};
+
 const memoizedMapStateToProps = () => {
     let prevTree: Ttree<any>;
     let mappedProps: Pick<TreeProps<any>, 'items' | 'disableRipple'>;
@@ -29,6 +41,10 @@ const memoizedMapStateToProps = () => {
                 disableRipple: true,
                 items: getNodeChildrenIds('')(tree)
                     .map(treePickerToTreeItems(tree))
+                    .map(parentItem => ({
+                        ...parentItem,
+                        items: flatTree(2, parentItem.items || []),
+                    }))
             };
         }
         return mappedProps;