feat: Add export of saved data browser filters via classPreference settings

src/components/CategoryList/CategoryList.react.js

@@ -136,7 +136,7 @@ export default class CategoryList extends React.Component {
               </div>
               {this.state.openClasses.includes(id) &&
                 c.filters.map((filterData, index) => {
-                  const { name, filter } = filterData;
+                  const { name, filter, readonly } = filterData;
                   const url = `${this.props.linkPrefix}${c.name}?filters=${encodeURIComponent(filter)}`;
                   return (
                     <div className={styles.childLink}>
@@ -150,6 +150,7 @@ export default class CategoryList extends React.Component {
                       >
                         <span>{name}</span>
                       </Link>
+                      {!readonly &&
                       <a
                         className={styles.close}
                         onClick={(e) => {
@@ -159,6 +160,7 @@ export default class CategoryList extends React.Component {
                       >
                         ×
                       </a>
+                      }
                     </div>
                   );
                 })}

src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js

@@ -16,6 +16,7 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
 import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
+import * as ClassPreferences from 'lib/ClassPreferences';
 import bcrypt from 'bcryptjs';
 import * as OTPAuth from 'otpauth';
 import QRCode from 'qrcode';
@@ -38,9 +39,10 @@ export default class DashboardSettings extends DashboardView {
       message: null,
       passwordInput: '',
       passwordHidden: true,
-      columnData: {
+      copyData: {
         data: '',
         show: false,
+        type: ''
       },
       newUser: {
         data: '',
@@ -53,7 +55,14 @@ export default class DashboardSettings extends DashboardView {
   getColumns() {
     const data = ColumnPreferences.getAllPreferences(this.context.applicationId);
     this.setState({
-      columnData: { data: JSON.stringify(data, null, 2), show: true },
+      copyData: { data: JSON.stringify(data, null, 2), show: true, type: 'Column Preferences' },
+    });
+  }
+
+  getClasses() {
+    const data = ClassPreferences.getAllPreferences(this.context.applicationId);
+    this.setState({
+      copyData: { data: JSON.stringify(data, null, 2), show: true, type: 'Class Preferences' },
     });
   }
 
@@ -190,14 +199,14 @@ export default class DashboardSettings extends DashboardView {
         <Field input={<Button color="blue" value="Create" width="120px" onClick={() => this.createUser()} />} />
       </Fieldset>
     );
-    const columnPreferences = (
+    const copyData = (
       <div>
-        <div className={styles.columnData}>
-          <CodeSnippet source={this.state.columnData.data} language="json" />
+        <div className={styles.copyData}>
+          <CodeSnippet source={this.state.copyData.data} language="json" />
         </div>
         <div className={styles.footer}>
-          <Button color="blue" value="Copy" width="120px" onClick={() => this.copy(this.state.columnData.data, 'Column Preferences')} />
-          <Button primary={true} value="Done" width="120px" onClick={() => this.setState({ columnData: { data: '', show: false } })} />
+          <Button color="blue" value="Copy" width="120px" onClick={() => this.copy(this.state.copyData.data, this.state.copyData.type)} />
+          <Button primary={true} value="Done" width="120px" onClick={() => this.setState({ copyData: { data: '', show: false } })} />
         </div>
       </div>
     );
@@ -225,9 +234,10 @@ export default class DashboardSettings extends DashboardView {
       <div className={styles.settings_page}>
         <Fieldset legend="Dashboard Configuration">
           <Field label={<Label text="Export Column Preferences" />} input={<FormButton color="blue" value="Export" onClick={() => this.getColumns()} />} />
+          <Field label={<Label text="Export Class Preferences" />} input={<FormButton color="blue" value="Export" onClick={() => this.getClasses()} />} />
           <Field label={<Label text="Create New User" />} input={<FormButton color="blue" value="Create" onClick={() => this.setState({ createUserInput: true })} />} />
         </Fieldset>
-        {this.state.columnData.show && columnPreferences}
+        {this.state.copyData.show && copyData}
         {this.state.createUserInput && createUserInput}
         {this.state.newUser.show && userData}
         <Toolbar section="Settings" subsection="Dashboard Configuration" />

src/dashboard/Settings/DashboardSettings/DashboardSettings.scss

@@ -1,4 +1,4 @@
-.columnData {
+.copyData {
   max-height: 50vh;
   overflow-y: scroll;
 }

src/lib/ClassPreferences.js

@@ -38,3 +38,20 @@ export function getPreferences(appId, className) {
 function path(appId, className) {
   return `ParseDashboard:${VERSION}:${appId}:ClassPreference:${className}`;
 }
+
+export function getAllPreferences(appId) {
+  const storageKeys = Object.keys(localStorage);
+  const result = {};
+  for (const key of storageKeys) {
+    const split = key.split(':')
+    if (split.length <= 1 || split[2] !== appId) {
+      continue;
+    }
+    const className = split.at(-1);
+    const preferences = getPreferences(appId, className);
+    if (preferences) {
+      result[className] = preferences;
+    }
+  }
+  return result;
+}

src/lib/ParseApp.js

@@ -8,6 +8,7 @@
 import * as AJAX      from 'lib/AJAX';
 import encodeFormData from 'lib/encodeFormData';
 import Parse          from 'parse';
+import { updatePreferences, getPreferences } from 'lib/ClassPreferences';
 
 function setEnablePushSource(setting, enable) {
   let path = `/apps/${this.slug}/update_push_notifications`;
@@ -44,7 +45,8 @@ export default class ParseApp {
     supportedPushLocales,
     preventSchemaEdits,
     graphQLServerURL,
-    columnPreference
+    columnPreference,
+    classPreference
   }) {
     this.name = appName;
     this.createdAt = created_at ? new Date(created_at) : new Date();
@@ -97,6 +99,21 @@ export default class ParseApp {
     }
 
     this.hasCheckedForMigraton = false;
+
+    if (classPreference) {
+      for (const className in classPreference) {
+        const preferences = getPreferences(appId, className) || { filters: [] };
+        const { filters } = classPreference[className];
+        for (const filter of filters) {
+          filter.readonly = true;
+          if (preferences.filters.some(row => JSON.stringify(row) === JSON.stringify(filter))) {
+            continue;
+          }
+          preferences.filters.push(filter);
+        }
+        updatePreferences(preferences, appId, className);
+      }
+    }
   }
 
   setParseKeys() {