diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index 0408b6ebc0..e63a9a208e 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/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
- {readonly ? null : selectAll(e.target.checked)} />}
+ {readonly
+ ? null
+ : selectAll(e.target.checked)} />
+ }
];
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index be4c3dc317..2f21ff4c88 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -64,7 +64,3 @@
margin: 0 -4px;
cursor: ew-resize;
}
-
-.disabled {
- cursor: not-allowed;
-}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index b41a7b2739..b4e7bcd284 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/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 {
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 9ba3584252..4f0af38a7a 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/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 {
{table}
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}