fix: Header checkbox in data browser does not indicate when a few rows are selected (#2957)

Author: mtrezza

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -45,6 +45,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       readonly,
       preventSchemaEdits,
       selected,
+      indeterminate,
       isDataLoaded,
       setSelectedObjectId,
       setCurrent,
@@ -61,7 +62,16 @@ export default class DataBrowserHeaderBar extends React.Component {
         style={{ position: 'sticky', left: 0, zIndex: 11 }}
       >
         {readonly ? null : (
-          <input type="checkbox" checked={selected} onChange={e => selectAll(e.target.checked)} />
+          <input
+            type="checkbox"
+            checked={selected}
+            ref={input => {
+              if (input) {
+                input.indeterminate = indeterminate;
+              }
+            }}
+            onChange={e => selectAll(e.target.checked)}
+          />
         )}
       </div>,
     ];

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -581,7 +581,18 @@ export default class BrowserTable extends React.Component {
           selected={
             !!this.props.selection &&
             !!this.props.data &&
-            Object.values(this.props.selection).filter(checked => checked).length ===
+            this.props.data.length > 0 &&
+            (!!this.props.selection['*'] ||
+              Object.values(this.props.selection).filter(checked => checked).length ===
+                this.props.data.length)
+          }
+          indeterminate={
+            !!this.props.selection &&
+            !!this.props.data &&
+            this.props.data.length > 0 &&
+            !this.props.selection['*'] &&
+            Object.values(this.props.selection).filter(checked => checked).length > 0 &&
+            Object.values(this.props.selection).filter(checked => checked).length !==
               this.props.data.length
           }
           selectAll={checked =>