Exclude hidden fields (#1734)

* get column preference correctly from localstorage

* refreshing after a column is marked visible

* prevent request for always cached fields

* prevent request for password at _User

* set flag cached & making request if not cached

* add cache flag for cached preferences

* refetch data on showAll columns

Author: sadakchap

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -40,7 +40,14 @@ export default class ColumnsConfiguration extends React.Component {
   }
 
   showAll() {
-    this.props.handleColumnsOrder(this.props.order.map(order => ({ ...order, visible: true })));
+    let shouldReload = false;
+    let updatedOrder = this.props.order.map(field => {
+      if (!shouldReload && !field.cached) {
+        shouldReload = true;
+      }
+      return { ...field, visible: true }
+    });
+    this.props.handleColumnsOrder(updatedOrder, shouldReload);
   }
 
   hideAll() {
@@ -84,7 +91,19 @@ export default class ColumnsConfiguration extends React.Component {
                           name,
                           visible
                         };
-                        handleColumnsOrder(updatedOrder);
+                        let shouldReload = visible;
+                        // these fields are always cached as they are never excluded from server
+                        // therefore no need to make another request.
+                        if (name === 'objectId' || name === 'createdAt' || name === 'updatedAt' || name === 'ACL') {
+                          shouldReload = false;
+                        }
+                        if (this.props.className === '_User' && name === 'password') {
+                          shouldReload = false;
+                        }
+                        if (updatedOrder[index].cached) {
+                          shouldReload = false;
+                        }
+                        handleColumnsOrder(updatedOrder, shouldReload);
                       }}
                       handleColumnDragDrop={handleColumnDragDrop} />
                   })}

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

@@ -675,12 +675,13 @@ class Browser extends DashboardView {
   }
 
   excludeFields(query, className) {
-    let columns = ColumnPreferences.getPreferences(this.props.params.appId, className);
+    let columns = ColumnPreferences.getPreferences(this.context.currentApp.applicationId, className);
     if (columns) {
       columns = columns.filter(clmn => !clmn.visible).map(clmn => clmn.name);
       for (let columnsKey in columns) {
         query.exclude(columns[columnsKey]);
       }
+      ColumnPreferences.updateCachedColumns(this.context.currentApp.applicationId, className);
     }
   }
 

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

@@ -219,6 +219,7 @@ let BrowserToolbar = ({
         handleColumnDragDrop={handleColumnDragDrop}
         order={order}
         disabled={isPendingEditCloneRows}
+        className={classNameForEditors}
       />
       <div className={styles.toolbarSeparator} />
       {onAddRow && (

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

@@ -87,14 +87,15 @@ export default class DataBrowser extends React.Component {
     document.body.removeEventListener('keydown', this.handleKey);
   }
 
-  updatePreferences(order) {
+  updatePreferences(order, shouldReload) {
     if (this.saveOrderTimeout) {
       clearTimeout(this.saveOrderTimeout);
     }
     let appId = this.context.currentApp.applicationId;
     let className = this.props.className;
     this.saveOrderTimeout = setTimeout(() => {
       ColumnPreferences.updatePreferences(order, appId, className)
+      shouldReload && this.props.onRefresh();
     }, 1000);
   }
 
@@ -262,9 +263,9 @@ export default class DataBrowser extends React.Component {
     this.setState({ contextMenuX, contextMenuY, contextMenuItems });
   }
 
-  handleColumnsOrder(order) {
+  handleColumnsOrder(order, shouldReload) {
     this.setState({ order: [ ...order ] }, () => {
-      this.updatePreferences(order);
+      this.updatePreferences(order, shouldReload);
     });
   }
 

src/lib/ColumnPreferences.js

@@ -73,7 +73,7 @@ export function getColumnSort(sortBy, appId, className) {
 
 export function getOrder(cols, appId, className, defaultPrefs) {
 
-  let prefs = getPreferences(appId, className) || [ { name: 'objectId', width: DEFAULT_WIDTH, visible: true } ];
+  let prefs = getPreferences(appId, className) || [ { name: 'objectId', width: DEFAULT_WIDTH, visible: true, cached: true } ];
   if (defaultPrefs) {
     prefs = defaultPrefs;
   }
@@ -87,21 +87,30 @@ export function getOrder(cols, appId, className, defaultPrefs) {
   for (let name in cols) {
     requested[name] = true;
     if (!seen[name]) {
-      order.push({ name: name, width: DEFAULT_WIDTH, visible: !defaultPrefs, required: cols[name]['required'] });
+      order.push({ name: name, width: DEFAULT_WIDTH, visible: !defaultPrefs, required: cols[name]['required'], cached: !defaultPrefs });
       seen[name] = true;
       updated = true;
     }
   }
   let filtered = [];
   for (let i = 0; i < order.length; i++) {
-    const { name, visible, required } = order[i];
+    const { name, visible, required, cached } = order[i];
 
     // If "visible" attribute is not defined, sets to true
     // and updates the cached preferences.
     if (typeof visible === 'undefined') {
       order[i].visible = true;
+      order[i].cached = visible;
       updated = true;
     }
+
+    // If "cached" attribute is not defined, set it to visible attr
+    // and updates the cached preferences.
+    if (typeof cached === 'undefined') {
+      order[i].cached = order[i].visible;
+      updated = true;
+    }
+
     // If "required" attribute is not defined, set it to false
     if (typeof required === 'undefined') {
       order[i].required = false;
@@ -118,6 +127,18 @@ export function getOrder(cols, appId, className, defaultPrefs) {
   return filtered;
 }
 
+export function updateCachedColumns(appId, className) {
+  let prefs = getPreferences(appId, className);
+  let order = [].concat(prefs);
+
+  for (let col of order) {
+    let { visible } = col;
+    col.cached = visible;
+  }
+  updatePreferences(order, appId, className);
+  return order;
+}
+
 function path(appId, className) {
   return `ParseDashboard:${VERSION}:${appId}:${className}`;
 }