Add props for controlling which checkboxes should be visible

Feature #13862

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index df3fc7f3bd76bbf396e8f16e0975dede4c87d0d7..b6d771976391de5ba4e1a0e840e550b856a49319 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -87,7 +87,7 @@ export interface TreeProps<T> {
     level?: number;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
     render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
-    showSelection?: boolean;
+    showSelection?: boolean | ((item: TreeItem<T>) => boolean);
     toggleItemActive: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
     toggleItemOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
     toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
@@ -99,6 +99,10 @@ export const Tree = withStyles(styles)(
             const level = this.props.level ? this.props.level : 0;
             const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu, disableRipple } = this.props;
             const { list, listItem, loader, toggableIconContainer, renderContainer } = classes;
+            const isCheckboxVisible = typeof this.props.showSelection === 'function'
+                ? this.props.showSelection
+                : () => this.props.showSelection ? true : false;
+
             return <List component="div" className={list}>
                 {items && items.map((it: TreeItem<T>, idx: number) =>
                     <div key={`item/${level}/${idx}`}>
@@ -114,7 +118,7 @@ export const Tree = withStyles(styles)(
                                     {this.getProperArrowAnimation(it.status, it.items!)}
                                 </ListItemIcon>
                             </i>
-                            {this.props.showSelection &&
+                            { isCheckboxVisible(it) &&
                                 <Checkbox
                                     checked={it.selected}
                                     className={classes.checkbox}

diff --git a/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx b/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
index 1ddbe3ac6c0fc6813edad569032612087b50c084..c877a1546602f566d66585fcb7a960d6fd1d57d9 100644 (file)
--- a/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
+++ b/src/views-components/projects-tree-picker/generic-projects-tree-picker.tsx
@@ -25,18 +25,21 @@ export type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsR
 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
 
 export interface ProjectsTreePickerDataProps {
-    pickerId: string;
     includeCollections?: boolean;
     includeFiles?: boolean;
     rootItemIcon: IconType;
+    rootItemSelection?: boolean;
+    projectsSelection?: boolean;
+    collectionsSelection?: boolean;
+    filesSelection?: boolean;
     loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
 }
 
 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
 
-const mapStateToProps = (_: any, { pickerId, rootItemIcon }: ProjectsTreePickerProps) => ({
+const mapStateToProps = (_: any, { rootItemIcon, ...props }: ProjectsTreePickerProps) => ({
     render: renderTreeItem(rootItemIcon),
-    pickerId,
+    showSelection: isSelectionVisible(props),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
@@ -89,6 +92,27 @@ const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIc
         return rootIcon;
     }
 };
+interface IsSelectionVisibleParams {
+    rootItemSelection?: boolean;
+    projectsSelection?: boolean;
+    collectionsSelection?: boolean;
+    filesSelection?: boolean;
+}
+const isSelectionVisible = (params: IsSelectionVisibleParams) =>
+    ({ data, status }: TreeItem<ProjectsTreePickerItem>) => {
+        if ('kind' in data) {
+            switch (data.kind) {
+                case ResourceKind.COLLECTION:
+                    return !!params.collectionsSelection;
+                default:
+                    return !!params.projectsSelection;
+            }
+        } else if ('type' in data) {
+            return !!params.filesSelection;
+        } else {
+            return !!params.rootItemSelection;
+        }
+    };
 
 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
     <ListItemTextIcon

diff --git a/src/views-components/projects-tree-picker/projects-tree-picker.tsx b/src/views-components/projects-tree-picker/projects-tree-picker.tsx
index 798281382772c6df5402e74d2425057d169f587a..550f0851751f85229f90e5be800184086d40b7a7 100644 (file)
--- a/src/views-components/projects-tree-picker/projects-tree-picker.tsx
+++ b/src/views-components/projects-tree-picker/projects-tree-picker.tsx
@@ -16,14 +16,18 @@ export interface ProjectsTreePickerProps {
     pickerId: string;
     includeCollections?: boolean;
     includeFiles?: boolean;
+    rootItemSelection?: boolean;
+    projectsSelection?: boolean;
+    collectionsSelection?: boolean;
+    filesSelection?: boolean;
     toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
 }
 
-export const ProjectsTreePicker =  ({ pickerId, ...props }: ProjectsTreePickerProps) => {
+export const ProjectsTreePicker = ({ pickerId, ...props }: ProjectsTreePickerProps) => {
     const { home, shared, favorites } = getProjectsTreePickerIds(pickerId);
     return <div>
         <HomeTreePicker pickerId={home} {...props} />
         <SharedTreePicker pickerId={shared} {...props} />
         <FavoritesTreePicker pickerId={favorites} {...props} />
     </div>;
-    };
+};

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index dd68cb8f8ca5ffc472a33fd7dd3616fbd5e32f68..3a23f214e6c3e20270c840d5fff8282b7c1eaed4 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -93,11 +93,20 @@ export const WorkbenchPanel =
                         </Grid>
                         <Grid item xs className={classes.content}>
                             <p>Projects only</p>
-                            <ProjectsTreePicker pickerId="testPicker1"/>
+                            <ProjectsTreePicker pickerId="testPicker1" />
                             <p>Collections included</p>
-                            <ProjectsTreePicker pickerId="testPicker2" includeCollections/>
+                            <ProjectsTreePicker
+                                pickerId="testPicker2"
+                                includeCollections
+                                collectionsSelection
+                            />
                             <p>Files included</p>
-                            <ProjectsTreePicker pickerId="testPicker3" includeCollections includeFiles toggleItemActive={(...args: any[]) => console.log(args)}/>
+                            <ProjectsTreePicker
+                                pickerId="testPicker3"
+                                includeCollections
+                                includeFiles
+                                filesSelection
+                                toggleItemActive={(...args: any[]) => console.log(args)} />
                             <Switch>
                                 <Route path={Routes.PROJECTS} component={ProjectPanel} />
                                 <Route path={Routes.COLLECTIONS} component={CollectionPanel} />