NestedFolders: Indicate when folders have mixed-selection children (grafana#67337)

* Show indeterminate checkbox for folders with partially selected children

* When selecting an item, check ancestors to see if all their children are now selected

* reword comment

* fix test

* fix lint

* Check all descendants for mixed state

* Use indeterminate checkbox

* fix test description

* make header checkbox select/unselect automatically

* mixed header checkbox:

* fix tests

* add tests

Author: joshhunt

public/app/features/browse-dashboards/BrowseDashboardsPage.test.tsx

@@ -75,9 +75,10 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
 
   it('displays the filters and hides the actions initially', async () => {
     render(<BrowseDashboardsPage {...props} />);
+    await screen.findByPlaceholderText('Search for dashboards and folders');
 
-    expect(await screen.findByText('Sort')).toBeInTheDocument();
-    expect(await screen.findByText('Filter by tag')).toBeInTheDocument();
+    expect(screen.queryByText('Sort')).toBeInTheDocument();
+    expect(screen.queryByText('Filter by tag')).toBeInTheDocument();
 
     expect(screen.queryByRole('button', { name: 'Move' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();

public/app/features/browse-dashboards/components/BrowseView.test.tsx

@@ -116,6 +116,26 @@ describe('browse-dashboards BrowseView', () => {
     const grandparentCheckbox = screen.queryByTestId(selectors.pages.BrowseDashbards.table.checkbox(folderA.item.uid));
     expect(grandparentCheckbox).not.toBeChecked();
   });
+
+  it('shows indeterminate checkboxes when a descendant is selected', async () => {
+    render(<BrowseView canSelect={true} folderUID={undefined} width={WIDTH} height={HEIGHT} />);
+    await screen.findByText(folderA.item.title);
+
+    await expandFolder(folderA.item.uid);
+    await expandFolder(folderA_folderB.item.uid);
+
+    await clickCheckbox(folderA_folderB_dashbdB.item.uid);
+
+    const parentCheckbox = screen.queryByTestId(
+      selectors.pages.BrowseDashbards.table.checkbox(folderA_folderB.item.uid)
+    );
+    expect(parentCheckbox).not.toBeChecked();
+    expect(parentCheckbox).toBePartiallyChecked();
+
+    const grandparentCheckbox = screen.queryByTestId(selectors.pages.BrowseDashbards.table.checkbox(folderA.item.uid));
+    expect(grandparentCheckbox).not.toBeChecked();
+    expect(grandparentCheckbox).toBePartiallyChecked();
+  });
 });
 
 async function expandFolder(uid: string) {

public/app/features/browse-dashboards/components/BrowseView.tsx

@@ -9,8 +9,10 @@ import {
   fetchChildren,
   setFolderOpenState,
   setItemSelectionState,
+  useChildrenByParentUIDState,
   setAllSelection,
 } from '../state';
+import { DashboardTreeSelection, SelectionState } from '../types';
 
 import { DashboardsTree } from './DashboardsTree';
 
@@ -25,10 +27,7 @@ export function BrowseView({ folderUID, width, height, canSelect }: BrowseViewPr
   const dispatch = useDispatch();
   const flatTree = useFlatTreeState(folderUID);
   const selectedItems = useCheckboxSelectionState();
-
-  useEffect(() => {
-    dispatch(fetchChildren(folderUID));
-  }, [dispatch, folderUID]);
+  const childrenByParentUID = useChildrenByParentUIDState();
 
   const handleFolderClick = useCallback(
     (clickedFolderUID: string, isOpen: boolean) => {
@@ -41,23 +40,91 @@ export function BrowseView({ folderUID, width, height, canSelect }: BrowseViewPr
     [dispatch]
   );
 
+  useEffect(() => {
+    dispatch(fetchChildren(folderUID));
+  }, [handleFolderClick, dispatch, folderUID]);
+
   const handleItemSelectionChange = useCallback(
     (item: DashboardViewItem, isSelected: boolean) => {
       dispatch(setItemSelectionState({ item, isSelected }));
     },
     [dispatch]
   );
 
+  const isSelected = useCallback(
+    (item: DashboardViewItem | '$all'): SelectionState => {
+      if (item === '$all') {
+        // We keep the boolean $all state up to date in redux, so we can short-circut
+        // the logic if we know this has been selected
+        if (selectedItems.$all) {
+          return SelectionState.Selected;
+        }
+
+        // Otherwise, if we have any selected items, then it should be in 'mixed' state
+        for (const selection of Object.values(selectedItems)) {
+          if (typeof selection === 'boolean') {
+            continue;
+          }
+
+          for (const uid in selection) {
+            const isSelected = selection[uid];
+            if (isSelected) {
+              return SelectionState.Mixed;
+            }
+          }
+        }
+
+        // Otherwise otherwise, nothing is selected and header should be unselected
+        return SelectionState.Unselected;
+      }
+
+      const isSelected = selectedItems[item.kind][item.uid];
+      if (isSelected) {
+        return SelectionState.Selected;
+      }
+
+      // Because if _all_ children, then the parent is selected (and bailed in the previous check),
+      // this .some check will only return true if the children are partially selected
+      const isMixed = hasSelectedDescendants(item, childrenByParentUID, selectedItems);
+      if (isMixed) {
+        return SelectionState.Mixed;
+      }
+
+      return SelectionState.Unselected;
+    },
+    [selectedItems, childrenByParentUID]
+  );
+
   return (
     <DashboardsTree
       canSelect={canSelect}
       items={flatTree}
       width={width}
       height={height}
-      selectedItems={selectedItems}
+      isSelected={isSelected}
       onFolderClick={handleFolderClick}
       onAllSelectionChange={(newState) => dispatch(setAllSelection({ isSelected: newState }))}
       onItemSelectionChange={handleItemSelectionChange}
     />
   );
 }
+
+function hasSelectedDescendants(
+  item: DashboardViewItem,
+  childrenByParentUID: Record<string, DashboardViewItem[] | undefined>,
+  selectedItems: DashboardTreeSelection
+): boolean {
+  const children = childrenByParentUID[item.uid];
+  if (!children) {
+    return false;
+  }
+
+  return children.some((v) => {
+    const thisIsSelected = selectedItems[v.kind][v.uid];
+    if (thisIsSelected) {
+      return thisIsSelected;
+    }
+
+    return hasSelectedDescendants(v, childrenByParentUID, selectedItems);
+  });
+}

public/app/features/browse-dashboards/components/CheckboxCell.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { selectors } from '@grafana/e2e-selectors';
+import { Checkbox } from '@grafana/ui';
+
+import { DashboardsTreeCellProps, SelectionState } from '../types';
+
+export default function CheckboxCell({
+  row: { original: row },
+  isSelected,
+  onItemSelectionChange,
+}: DashboardsTreeCellProps) {
+  const item = row.item;
+
+  if (item.kind === 'ui-empty-folder' || !isSelected) {
+    return null;
+  }
+
+  const state = isSelected(item);
+
+  return (
+    <Checkbox
+      data-testid={selectors.pages.BrowseDashbards.table.checkbox(item.uid)}
+      value={state === SelectionState.Selected}
+      indeterminate={state === SelectionState.Mixed}
+      onChange={(ev) => onItemSelectionChange?.(item, ev.currentTarget.checked)}
+    />
+  );
+}

public/app/features/browse-dashboards/components/CheckboxHeaderCell.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Checkbox } from '@grafana/ui';
+
+import { DashboardTreeHeaderProps, SelectionState } from '../types';
+
+export default function CheckboxHeaderCell({ isSelected, onAllSelectionChange }: DashboardTreeHeaderProps) {
+  const state = isSelected?.('$all') ?? SelectionState.Unselected;
+
+  return (
+    <Checkbox
+      value={state === SelectionState.Selected}
+      indeterminate={state === SelectionState.Mixed}
+      onChange={(ev) => onAllSelectionChange?.(ev.currentTarget.checked)}
+    />
+  );
+}

public/app/features/browse-dashboards/components/DashboardsTree.test.tsx

@@ -7,6 +7,7 @@ import { assertIsDefined } from 'test/helpers/asserts';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { wellFormedDashboard, wellFormedEmptyFolder, wellFormedFolder } from '../fixtures/dashboardsTreeItem.fixture';
+import { SelectionState } from '../types';
 
 import { DashboardsTree } from './DashboardsTree';
 
@@ -22,19 +23,14 @@ describe('browse-dashboards DashboardsTree', () => {
   const emptyFolderIndicator = wellFormedEmptyFolder();
   const dashboard = wellFormedDashboard(2);
   const noop = () => {};
-  const selectedItems = {
-    $all: false,
-    folder: {},
-    dashboard: {},
-    panel: {},
-  };
+  const isSelected = () => SelectionState.Unselected;
 
   it('renders a dashboard item', () => {
     render(
       <DashboardsTree
         canSelect
         items={[dashboard]}
-        selectedItems={selectedItems}
+        isSelected={isSelected}
         width={WIDTH}
         height={HEIGHT}
         onFolderClick={noop}
@@ -53,7 +49,7 @@ describe('browse-dashboards DashboardsTree', () => {
       <DashboardsTree
         canSelect={false}
         items={[dashboard]}
-        selectedItems={selectedItems}
+        isSelected={isSelected}
         width={WIDTH}
         height={HEIGHT}
         onFolderClick={noop}
@@ -71,7 +67,7 @@ describe('browse-dashboards DashboardsTree', () => {
       <DashboardsTree
         canSelect
         items={[folder]}
-        selectedItems={selectedItems}
+        isSelected={isSelected}
         width={WIDTH}
         height={HEIGHT}
         onFolderClick={noop}
@@ -89,7 +85,7 @@ describe('browse-dashboards DashboardsTree', () => {
       <DashboardsTree
         canSelect
         items={[folder]}
-        selectedItems={selectedItems}
+        isSelected={isSelected}
         width={WIDTH}
         height={HEIGHT}
         onFolderClick={handler}
@@ -108,7 +104,7 @@ describe('browse-dashboards DashboardsTree', () => {
       <DashboardsTree
         canSelect
         items={[emptyFolderIndicator]}
-        selectedItems={selectedItems}
+        isSelected={isSelected}
         width={WIDTH}
         height={HEIGHT}
         onFolderClick={noop}