feat(Database Browser): Select all objects (#1219)

* feat(Database Browser): Select all objects

Allows users to select all objects. This is only enabled when the lazy loading has loaded all possible objects, since we don't have a way to select all objects based on a query.

* fix: Select all checkbox title when disabled

* fix: Select all visible objects

* feat: Fetch more objects when deleting

Author: douglasmuraoka

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -14,12 +14,16 @@ import { DndProvider }     from 'react-dnd'
 
 export default class DataBrowserHeaderBar extends React.Component {
   render() {
-    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits } = this.props;
+    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits, selected } = this.props;
     let elements = [
-      // Note: bulk checkbox is disabled as all rows are selected (not just visible ones due to current lazy loading implementation)
-      // TODO: add bulk checking only visible rows
       <div key='check' className={[styles.wrap, styles.check].join(' ')}>
-        {readonly ? null : <input className={styles.disabled} type='checkbox' disabled={true} checked={false} onChange={(e) => selectAll(e.target.checked)} />}
+        {readonly
+          ? null
+          : <input
+              type='checkbox'
+              checked={selected}
+              onChange={(e) => selectAll(e.target.checked)} />
+        }
       </div>
     ];
 

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -64,7 +64,3 @@
   margin: 0 -4px;
   cursor: ew-resize;
 }
-
-.disabled {
-  cursor: not-allowed;
-}

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

@@ -37,6 +37,9 @@ import { Helmet }                         from 'react-helmet';
 import PropTypes                          from 'lib/PropTypes';
 import ParseApp                           from 'lib/ParseApp';
 
+// The initial and max amount of rows fetched by lazy loading
+const MAX_ROWS_FETCHED = 200;
+
 export default
 @subscribeTo('Schema', 'schema')
 class Browser extends DashboardView {
@@ -337,7 +340,7 @@ class Browser extends DashboardView {
       query.ascending(field)
     }
 
-    query.limit(200);
+    query.limit(MAX_ROWS_FETCHED);
 
     let promise = query.find({ useMasterKey: true });
     let isUnique = false;
@@ -374,7 +377,7 @@ class Browser extends DashboardView {
     } else {
       delete filteredCounts[source];
     }
-    this.setState({ data: data, filters, lastMax: 200 , filteredCounts: filteredCounts});
+    this.setState({ data: data, filters, lastMax: MAX_ROWS_FETCHED , filteredCounts: filteredCounts});
   }
 
   async fetchRelation(relation, filters = new List()) {
@@ -386,7 +389,7 @@ class Browser extends DashboardView {
       selection: {},
       data,
       filters,
-      lastMax: 200,
+      lastMax: MAX_ROWS_FETCHED,
     });
   }
 
@@ -429,14 +432,16 @@ class Browser extends DashboardView {
       query.lessThan('createdAt', this.state.data[this.state.data.length - 1].get('createdAt'));
     }
     query.addDescending('createdAt');
-    query.limit(200);
+    query.limit(MAX_ROWS_FETCHED);
 
     query.find({ useMasterKey: true }).then((nextPage) => {
       if (className === this.props.params.className) {
-        this.setState((state) => ({ data: state.data.concat(nextPage)}));
+        this.setState((state) => ({
+          data: state.data.concat(nextPage)
+        }));
       }
     });
-    this.setState({ lastMax: this.state.lastMax + 200 });
+    this.setState({ lastMax: this.state.lastMax + MAX_ROWS_FETCHED });
   }
 
   updateFilters(filters) {
@@ -587,7 +592,7 @@ class Browser extends DashboardView {
           this.state.counts[className] = 0;
           this.setState({
             data: [],
-            lastMax: 200,
+            lastMax: MAX_ROWS_FETCHED,
             selection: {},
           });
         }
@@ -640,7 +645,14 @@ class Browser extends DashboardView {
               this.state.data.splice(indexes[i] - i, 1);
             }
             this.state.counts[className] -= indexes.length;
-            this.forceUpdate();
+
+            // If after deletion, the remaining elements on the table is lesser than the maximum allowed elements
+            // we fetch more data to fill the table
+            if (this.state.data.length < MAX_ROWS_FETCHED) {
+              this.prefetchData(this.props, this.context);
+            } else {
+              this.forceUpdate();
+            }
           }
         }, (error) => {
           let errorDeletingNote = null;
@@ -669,9 +681,6 @@ class Browser extends DashboardView {
 
   selectRow(id, checked) {
     this.setState(({ selection }) => {
-      if (id === '*') {
-        return { selection: checked ? { '*': true } : {} };
-      }
       if (checked) {
         selection[id] = true;
       } else {

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

@@ -23,8 +23,6 @@ const ROW_HEIGHT = 31;
 
 const READ_ONLY = [ 'objectId', 'createdAt', 'updatedAt' ];
 
-let scrolling = false;
-
 export default class BrowserTable extends React.Component {
   constructor() {
     super();
@@ -59,9 +57,6 @@ export default class BrowserTable extends React.Component {
   }
 
   handleScroll() {
-    if (scrolling) {
-      return;
-    }
     if (!this.props.data || this.props.data.length === 0) {
       return;
     }
@@ -329,8 +324,12 @@ export default class BrowserTable extends React.Component {
       <div className={[styles.browser, browserUtils.isSafari() ? styles.safari : ''].join(' ')}>
         {table}
         <DataBrowserHeaderBar
-          selected={this.props.selection['*']}
-          selectAll={this.props.selectRow.bind(null, '*')}
+          selected={
+            this.props.selection &&
+            this.props.data &&
+            Object.values(this.props.selection).filter(checked => checked).length === this.props.data.length
+          }
+          selectAll={checked => this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))}
           headers={headers}
           updateOrdering={this.props.updateOrdering}
           readonly={!!this.props.relation || !!this.props.isUnique}