Merge branch '21026-sanitize-html'

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

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 d964012dcefa348a7182660bca2e9d27985a5675..d52b58f5ae30ac6f09ed533a0e52e4213c13a8c7 100644 (file)
--- a/src/components/data-table-filters/data-table-filters-tree.tsx
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -2,12 +2,12 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
-import { Tree, toggleNodeSelection, getNode, initTreeNode, getNodeChildrenIds, selectNode, deselectNodes } from '~/models/tree';
-import { Tree as TreeComponent, TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import React from "react";
+import { Tree, toggleNodeSelection, getNode, initTreeNode, getNodeChildrenIds, selectNode, deselectNodes } from 'models/tree';
+import { Tree as TreeComponent, TreeItem, TreeItemStatus } from 'components/tree/tree';
 import { noop, map } from "lodash/fp";
-import { toggleNodeCollapse } from '~/models/tree';
-import { countNodes, countChildren } from '~/models/tree';
+import { toggleNodeCollapse } from 'models/tree';
+import { countNodes, countChildren } from 'models/tree';
 
 export interface DataTableFilterItem {
     name: string;
@@ -34,15 +34,17 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
             levelIndentation={hasSubfilters ? 20 : 0}
             itemRightPadding={20}
             items={filtersToTree(filters)}
-            render={renderItem}
+            render={this.props.mutuallyExclusive ? renderRadioItem : renderItem}
             showSelection
             useRadioButtons={this.props.mutuallyExclusive}
-            toggleItemRadioButton={this.toggleRadioButtonFilter}
             disableRipple
             onContextMenu={noop}
-            toggleItemActive={noop}
+            toggleItemActive={
+                this.props.mutuallyExclusive
+                    ? this.toggleRadioButtonFilter
+                    : this.toggleFilter
+            }
             toggleItemOpen={this.toggleOpen}
-            toggleItemSelection={this.toggleFilter}
         />;
     }
 
@@ -50,21 +52,21 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
      * Handler for when a tree item is toggled via a radio button.
      * Ensures mutual exclusivity among filter tree items.
      */
-    toggleRadioButtonFilter = (item: TreeItem<DataTableFilterItem>) => {
+    toggleRadioButtonFilter = (_: any, item: TreeItem<DataTableFilterItem>) => {
         const { onChange = noop } = this.props;
 
         // If the filter is already selected, do nothing.
         if (item.selected) { return; }
 
         // Otherwise select this node and deselect the others
-        const filters = selectNode(item.id)(this.props.filters);
+        const filters = selectNode(item.id, true)(this.props.filters);
         const toDeselect = Object.keys(this.props.filters).filter((id) => (id !== item.id));
-        onChange(deselectNodes(toDeselect)(filters));
+        onChange(deselectNodes(toDeselect, true)(filters));
     }
 
     toggleFilter = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
         const { onChange = noop } = this.props;
-        onChange(toggleNodeSelection(item.id)(this.props.filters));
+        onChange(toggleNodeSelection(item.id, true)(this.props.filters));
     }
 
     toggleOpen = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
@@ -74,13 +76,24 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
 }
 
 const renderItem = (item: TreeItem<DataTableFilterItem>) =>
-    <span>{item.data.name}</span>;
+    <span>
+        {item.data.name}
+        {item.initialState !== item.selected ? <>
+            *
+        </> : null}
+    </span>;
+
+const renderRadioItem = (item: TreeItem<DataTableFilterItem>) =>
+    <span>
+        {item.data.name}
+    </span>;
 
 const filterToTreeItem = (filters: DataTableFilters) =>
     (id: string): TreeItem<any> => {
         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,
@@ -89,6 +102,8 @@ const filterToTreeItem = (filters: DataTableFilters) =>
             items: items.length > 0 ? items : undefined,
             open: node.expanded,
             selected: node.selected,
+            initialState: node.initialState,
+            indeterminate: isIndeterminate,
             status: TreeItemStatus.LOADED,
         };
     };