18984: Add indeterminate ui for process type filters

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx
index 6514078dea44891063a33a132421c9c5fb5ff460..659a385dc17f5742c0d3b8169f456848467faefc 100644 (file)
--- a/src/components/data-table-filters/data-table-filters-tree.tsx
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -83,6 +83,7 @@ const filterToTreeItem = (filters: DataTableFilters) =>
         const node = getNode(id)(filters) || initTreeNode({ id: '', value: 'InvalidNode' });
         const items = getNodeChildrenIds(node.id)(filters)
             .map(filterToTreeItem(filters));
+        const isIndeterminate = !node.selected && items.some(i => i.selected || i.indeterminate);
 
         return {
             active: node.active,
@@ -91,6 +92,7 @@ const filterToTreeItem = (filters: DataTableFilters) =>
             items: items.length > 0 ? items : undefined,
             open: node.expanded,
             selected: node.selected,
+            indeterminate: isIndeterminate,
             status: TreeItemStatus.LOADED,
         };
     };

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 3ae884b67cb1e6e51e452ea6e68df0155be7cc1b..6e562dfa52bd0e72bd2cdc2e4039bfaf25bcd6f4 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -97,6 +97,7 @@ export interface TreeItem<T> {
     open: boolean;
     active: boolean;
     selected?: boolean;
+    indeterminate?: boolean;
     flatTree?: boolean;
     status: TreeItemStatus;
     items?: Array<TreeItem<T>>;
@@ -292,6 +293,7 @@ export const Tree = withStyles(styles)(
                             {showSelection(it) && !useRadioButtons &&
                                 <Checkbox
                                     checked={it.selected}
+                                    indeterminate={!it.selected && it.indeterminate}
                                     className={classes.checkbox}
                                     color="primary"
                                     onClick={this.handleCheckboxChange(it)} />}