Improve checkboxes visibility implementation

Feature #13862

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

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 c877a1546602f566d66585fcb7a960d6fd1d57d9..21839ff51e7d2e9c792ec93312ca7a6bd2fd26fe 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
@@ -28,18 +28,15 @@ export interface ProjectsTreePickerDataProps {
     includeCollections?: boolean;
     includeFiles?: boolean;
     rootItemIcon: IconType;
-    rootItemSelection?: boolean;
-    projectsSelection?: boolean;
-    collectionsSelection?: boolean;
-    filesSelection?: boolean;
+    showSelection?: boolean;
     loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
 }
 
 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & Partial<PickedTreePickerProps>;
 
-const mapStateToProps = (_: any, { rootItemIcon, ...props }: ProjectsTreePickerProps) => ({
+const mapStateToProps = (_: any, { rootItemIcon, showSelection }: ProjectsTreePickerProps) => ({
     render: renderTreeItem(rootItemIcon),
-    showSelection: isSelectionVisible(props),
+    showSelection: isSelectionVisible(showSelection),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles, ...props }: ProjectsTreePickerProps): PickedTreePickerProps => ({
@@ -92,26 +89,16 @@ 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;
+
+const isSelectionVisible = (shouldBeVisible?: boolean) =>
+    ({ status, items }: TreeItem<ProjectsTreePickerItem>): boolean => {
+        if (shouldBeVisible) {
+            if (items && items.length > 0) {
+                return items.every(isSelectionVisible(shouldBeVisible));
             }
-        } else if ('type' in data) {
-            return !!params.filesSelection;
-        } else {
-            return !!params.rootItemSelection;
+            return status === TreeItemStatus.LOADED;
         }
+        return false;
     };
 
 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>

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 550f0851751f85229f90e5be800184086d40b7a7..5d6bb78c7df4b69fc84c62303c0c1e459e9d13de 100644 (file)
--- a/src/views-components/projects-tree-picker/projects-tree-picker.tsx
+++ b/src/views-components/projects-tree-picker/projects-tree-picker.tsx
@@ -3,12 +3,10 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Dispatch } from 'redux';
-import { connect } from 'react-redux';
 import { HomeTreePicker } from '~/views-components/projects-tree-picker/home-tree-picker';
 import { SharedTreePicker } from '~/views-components/projects-tree-picker/shared-tree-picker';
 import { FavoritesTreePicker } from '~/views-components/projects-tree-picker/favorites-tree-picker';
-import { getProjectsTreePickerIds, treePickerActions } from '~/store/tree-picker/tree-picker-actions';
+import { getProjectsTreePickerIds } from '~/store/tree-picker/tree-picker-actions';
 import { TreeItem } from '~/components/tree/tree';
 import { ProjectsTreePickerItem } from './generic-projects-tree-picker';
 
@@ -16,10 +14,7 @@ export interface ProjectsTreePickerProps {
     pickerId: string;
     includeCollections?: boolean;
     includeFiles?: boolean;
-    rootItemSelection?: boolean;
-    projectsSelection?: boolean;
-    collectionsSelection?: boolean;
-    filesSelection?: boolean;
+    showSelection?: boolean;
     toggleItemActive?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<ProjectsTreePickerItem>, pickerId: string) => void;
 }
 

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