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

README.md

@@ -329,13 +329,35 @@ If you have classes with a lot of columns and you filter them often with the sam
           {
             "name": "email",
             "filterSortToTop": true
-          }          
+          }
         ]
       }
     }
 ]
 ```
 
+### Persistent Filters
+
+`classPreference` allows for filters to be saved across sessions. To save the current filters, navigate to *App Settings > Export Class Preferences*.
+
+For example:
+
+```json
+"apps": [
+  {
+    "classPreference": {
+        "_Role": {
+          "filters": [
+            {
+              "name": "Filter Name",
+              "filter": "[{\"field\":\"objectId\",\"constraint\":\"exists\"}]"
+            }
+          ]
+        }
+      }
+]
+```
+
 # Running as Express Middleware
 
 Instead of starting Parse Dashboard with the CLI, you can also run it as an [express](https://github.com/expressjs/express) middleware.
@@ -452,7 +474,7 @@ With MFA enabled, a user must provide a one-time password that is typically boun
 
 The user requires an authenticator app to generate the one-time password. These apps are provided by many 3rd parties and mostly for free.
 
-If you create a new user by running `parse-dashboard --createUser`, you will be  asked whether you want to enable MFA for the new user. To enable MFA for an existing user, 
+If you create a new user by running `parse-dashboard --createUser`, you will be  asked whether you want to enable MFA for the new user. To enable MFA for an existing user,
 run `parse-dashboard --createMFA` to generate a `mfa` secret that you then add to the existing user configuration, for example:
 
 ```json

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() {