From dbef9899ac8ec88c4c8b54146e26fa4418c25cbb Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 2 Aug 2023 11:37:19 +0100
Subject: [PATCH] Nested folders: Clear selection state in tree view when
 indeterminate (#72595)

* clear selection state when indeterminate

* ensure search state is properly cleared when toggling the indeterminate checkbox

* select everything in view
---
 .../components/CheckboxHeaderCell.tsx         |  9 +++++++-
 .../search/page/components/columns.tsx        | 22 +++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/CheckboxHeaderCell.tsx b/public/app/features/browse-dashboards/components/CheckboxHeaderCell.tsx
index 910a18103b3..b476b803f3d 100644
--- a/public/app/features/browse-dashboards/components/CheckboxHeaderCell.tsx
+++ b/public/app/features/browse-dashboards/components/CheckboxHeaderCell.tsx
@@ -11,7 +11,14 @@ export default function CheckboxHeaderCell({ isSelected, onAllSelectionChange }:
     <Checkbox
       value={state === SelectionState.Selected}
       indeterminate={state === SelectionState.Mixed}
-      onChange={(ev) => onAllSelectionChange?.(ev.currentTarget.checked)}
+      onChange={(ev) => {
+        if (state === SelectionState.Mixed) {
+          // Ensure clicking an indeterminate checkbox always clears the selection
+          onAllSelectionChange?.(false);
+        } else {
+          onAllSelectionChange?.(ev.currentTarget.checked);
+        }
+      }}
     />
   );
 }
diff --git a/public/app/features/search/page/components/columns.tsx b/public/app/features/search/page/components/columns.tsx
index 5369dadc035..f30bbc15eb9 100644
--- a/public/app/features/search/page/components/columns.tsx
+++ b/public/app/features/search/page/components/columns.tsx
@@ -64,21 +64,21 @@ export const generateColumns = (
       id: `column-checkbox`,
       width,
       Header: () => {
+        const { view } = response;
+        const hasSelection = selection('*', '*');
+        const allSelected = view.every((item) => selection(item.kind, item.uid));
         return (
           <Checkbox
-            indeterminate={selection('*', '*')}
-            checked={false}
+            indeterminate={!allSelected && hasSelection}
+            checked={allSelected}
             disabled={!response}
             onChange={(e) => {
-              const { view } = response;
-              const count = Math.min(view.length, 50);
-              const hasSelection = selection('*', '*');
-              for (let i = 0; i < count; i++) {
-                const item = view.get(i);
-                if (item.uid && item.kind) {
-                  if (hasSelection === selection(item.kind, item.uid)) {
-                    selectionToggle(item.kind, item.uid);
-                  }
+              if (hasSelection) {
+                clearSelection();
+              } else {
+                for (let i = 0; i < view.length; i++) {
+                  const item = view.get(i);
+                  selectionToggle(item.kind, item.uid);
                 }
               }
             }}