feat: Add storing data browser filters on server (#3090)

Author: mtrezza

src/components/CategoryList/CategoryList.react.js

@@ -36,7 +36,8 @@ export default class CategoryList extends React.Component {
 
   componentDidUpdate(prevProps) {
     // Auto-expand if the URL params changed (e.g., user navigated to a different filter)
-    if (prevProps.params !== this.props.params) {
+    // OR if categories changed (e.g., filters finished loading asynchronously)
+    if (prevProps.params !== this.props.params || prevProps.categories !== this.props.categories) {
       this._autoExpandForSelectedFilter();
     }
     this._updateHighlight();

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

@@ -38,6 +38,8 @@ import { ActionTypes } from 'lib/stores/SchemaStore';
 import stringCompare from 'lib/stringCompare';
 import subscribeTo from 'lib/subscribeTo';
 import { withRouter } from 'lib/withRouter';
+import FilterPreferencesManager from 'lib/FilterPreferencesManager';
+import { prefersServerStorage } from 'lib/StoragePreferences';
 import Parse from 'parse';
 import React from 'react';
 import { Helmet } from 'react-helmet';
@@ -129,6 +131,7 @@ class Browser extends DashboardView {
     this.subsection = 'Browser';
     this.noteTimeout = null;
     this.currentQuery = null;
+    this.filterPreferencesManager = null;
     const limit = window.localStorage?.getItem('browserLimit');
 
     this.state = {
@@ -188,6 +191,7 @@ class Browser extends DashboardView {
       AggregationPanelData: {},
       isLoadingInfoPanel: false,
       errorAggregatedData: {},
+      classFilters: {}, // Map of className -> filters array
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -298,6 +302,52 @@ class Browser extends DashboardView {
       this.setState({ configData: data });
       this.classAndCloudFuntionMap(this.state.configData);
     });
+
+    // Initialize FilterPreferencesManager
+    if (this.context) {
+      this.filterPreferencesManager = new FilterPreferencesManager(this.context);
+      // Load all class filters if schema is already available
+      if (this.props.schema?.data?.get('classes')) {
+        this.loadAllClassFilters();
+      }
+    }
+  }
+
+  async loadAllClassFilters(propsToUse) {
+    if (!this.filterPreferencesManager) {
+      return;
+    }
+
+    // Use provided props or fall back to this.props
+    const props = propsToUse || this.props;
+    const schema = props.schema;
+    if (!schema || !schema.data) {
+      return;
+    }
+
+    const classFilters = {};
+
+    // Load filters for all classes
+    const classList = schema.data.get('classes');
+    if (classList) {
+      const classNames = Object.keys(classList.toObject());
+      await Promise.all(
+        classNames.map(async (className) => {
+          try {
+            const filters = await this.filterPreferencesManager.getFilters(
+              this.context.applicationId,
+              className
+            );
+            classFilters[className] = filters || [];
+          } catch (error) {
+            console.error(`Failed to load filters for class ${className}:`, error);
+            classFilters[className] = [];
+          }
+        })
+      );
+    }
+
+    this.setState({ classFilters });
   }
 
   componentWillUnmount() {
@@ -340,6 +390,15 @@ class Browser extends DashboardView {
       );
       this.redirectToFirstClass(nextProps.schema.data.get('classes'), nextContext);
     }
+
+    // Load filters when schema becomes available or changes
+    if (
+      nextProps.schema?.data?.get('classes') &&
+      (!this.props.schema?.data?.get('classes') ||
+        this.props.params.appId !== nextProps.params.appId)
+    ) {
+      this.loadAllClassFilters(nextProps);
+    }
   }
 
   setLoadingInfoPanel(bool) {
@@ -1294,7 +1353,7 @@ class Browser extends DashboardView {
     });
   }
 
-  saveFilters(filters, name, relativeDate, filterId = null) {
+  async saveFilters(filters, name, relativeDate, filterId = null) {
     const jsonFilters = filters.toJSON();
     if (relativeDate && jsonFilters?.length) {
       for (let i = 0; i < jsonFilters.length; i++) {
@@ -1364,15 +1423,16 @@ class Browser extends DashboardView {
         });
       }
     } else {
-      // Check if this is updating a legacy filter (no filterId but filter content matches existing filter without ID)
-      const existingLegacyFilterIndex = preferences.filters.findIndex(filter =>
-        !filter.id && filter.name === name && filter.filter === _filters
+      // Check if this is updating an existing filter by name and content match
+      // (legacy filters get auto-assigned UUIDs when read, so we match by content)
+      const existingFilterIndex = preferences.filters.findIndex(filter =>
+        filter.name === name && filter.filter === _filters
       );
 
-      if (existingLegacyFilterIndex !== -1) {
-        // Convert legacy filter to modern filter by adding an ID
-        newFilterId = crypto.randomUUID();
-        preferences.filters[existingLegacyFilterIndex] = {
+      if (existingFilterIndex !== -1) {
+        // Update existing filter, keeping its ID
+        newFilterId = preferences.filters[existingFilterIndex].id;
+        preferences.filters[existingFilterIndex] = {
           name,
           id: newFilterId,
           filter: _filters,
@@ -1388,19 +1448,60 @@ class Browser extends DashboardView {
       }
     }
 
-    ClassPreferences.updatePreferences(
-      preferences,
-      this.context.applicationId,
-      this.props.params.className
-    );
+    // Use FilterPreferencesManager if available, otherwise fallback to local storage
+    if (this.filterPreferencesManager) {
+      const filterToSave = {
+        id: newFilterId,
+        name,
+        className: this.props.params.className,
+        filter: _filters,
+      };
+      await this.filterPreferencesManager.saveFilter(
+        this.context.applicationId,
+        this.props.params.className,
+        filterToSave,
+        preferences.filters
+      );
+    } else {
+      // Fallback to local storage
+      ClassPreferences.updatePreferences(
+        preferences,
+        this.context.applicationId,
+        this.props.params.className
+      );
+    }
+
+    // Reload filters for this class to update the sidebar
+    await this.reloadClassFilters(this.props.params.className);
 
     super.forceUpdate();
 
     // Return the filter ID for new filters so the caller can apply them
     return newFilterId;
   }
 
-  deleteFilter(filterIdOrObject) {
+  async reloadClassFilters(className) {
+    if (!this.filterPreferencesManager) {
+      return;
+    }
+
+    try {
+      const filters = await this.filterPreferencesManager.getFilters(
+        this.context.applicationId,
+        className
+      );
+      this.setState(prevState => ({
+        classFilters: {
+          ...prevState.classFilters,
+          [className]: filters || []
+        }
+      }));
+    } catch (error) {
+      console.error(`Failed to reload filters for class ${className}:`, error);
+    }
+  }
+
+  async deleteFilter(filterIdOrObject) {
     const preferences = ClassPreferences.getPreferences(
       this.context.applicationId,
       this.props.params.className
@@ -1425,13 +1526,27 @@ class Browser extends DashboardView {
         }
       }
 
-      ClassPreferences.updatePreferences(
-        { ...preferences, filters: updatedFilters },
-        this.context.applicationId,
-        this.props.params.className
-      );
+      // Use FilterPreferencesManager if available, otherwise fallback to local storage
+      if (this.filterPreferencesManager) {
+        await this.filterPreferencesManager.deleteFilter(
+          this.context.applicationId,
+          this.props.params.className,
+          filterIdOrObject,
+          updatedFilters
+        );
+      } else {
+        // Fallback to local storage
+        ClassPreferences.updatePreferences(
+          { ...preferences, filters: updatedFilters },
+          this.context.applicationId,
+          this.props.params.className
+        );
+      }
     }
 
+    // Reload filters for this class to update the sidebar
+    await this.reloadClassFilters(this.props.params.className);
+
     super.forceUpdate();
   }
 
@@ -2263,13 +2378,24 @@ class Browser extends DashboardView {
     }
     const allCategories = [];
     for (const row of [...special, ...categories]) {
-      const { filters = [] } = ClassPreferences.getPreferences(
-        this.context.applicationId,
-        row.name
-      );
-      // Set filters sorted alphabetically
-      row.filters = filters.sort((a, b) => a.name.localeCompare(b.name));
-      allCategories.push(row);
+      let filters = this.state.classFilters[row.name];
+
+      // Fallback to local storage ONLY if not using server storage and filters not loaded yet
+      if (filters === undefined &&
+          (!this.filterPreferencesManager?.isServerConfigEnabled() ||
+           !prefersServerStorage(this.context.applicationId))) {
+        const prefs = ClassPreferences.getPreferences(this.context.applicationId, row.name);
+        filters = prefs?.filters || [];
+      } else if (filters === undefined) {
+        filters = [];
+      }
+
+      // Set filters sorted alphabetically and create a new row object to trigger re-render
+      const sortedFilters = filters.sort((a, b) => a.name.localeCompare(b.name));
+      allCategories.push({
+        ...row,
+        filters: sortedFilters
+      });
     }
 
     return (

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

@@ -18,6 +18,7 @@ import Notification from 'dashboard/Data/Browser/Notification.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import * as ClassPreferences from 'lib/ClassPreferences';
 import ViewPreferencesManager from 'lib/ViewPreferencesManager';
+import FilterPreferencesManager from 'lib/FilterPreferencesManager';
 import ScriptManager from 'lib/ScriptManager';
 import bcrypt from 'bcryptjs';
 import * as OTPAuth from 'otpauth';
@@ -29,6 +30,7 @@ export default class DashboardSettings extends DashboardView {
     this.section = 'App Settings';
     this.subsection = 'Dashboard Configuration';
     this.viewPreferencesManager = null;
+    this.filterPreferencesManager = null;
     this.scriptManager = null;
 
     this.state = {
@@ -65,6 +67,7 @@ export default class DashboardSettings extends DashboardView {
   initializeManagers() {
     if (this.context) {
       this.viewPreferencesManager = new ViewPreferencesManager(this.context);
+      this.filterPreferencesManager = new FilterPreferencesManager(this.context);
       this.scriptManager = new ScriptManager(this.context);
       this.loadStoragePreference();
     }
@@ -85,6 +88,11 @@ export default class DashboardSettings extends DashboardView {
       // Show a notification about the change
       this.showNote(`Storage preference changed to ${preference === 'server' ? 'server' : 'browser'}`);
     }
+
+    // Filters use the same storage preference as views
+    if (this.filterPreferencesManager) {
+      this.filterPreferencesManager.setStoragePreference(this.context.applicationId, preference);
+    }
   }
 
   async migrateToServer() {
@@ -93,6 +101,11 @@ export default class DashboardSettings extends DashboardView {
       return;
     }
 
+    if (!this.filterPreferencesManager) {
+      this.showNote('FilterPreferencesManager not initialized');
+      return;
+    }
+
     if (!this.viewPreferencesManager.isServerConfigEnabled()) {
       this.showNote('Server configuration is not enabled for this app. Please add a "config" section to your app configuration.');
       return;
@@ -101,16 +114,30 @@ export default class DashboardSettings extends DashboardView {
     this.setState({ migrationLoading: true });
 
     try {
-      const result = await this.viewPreferencesManager.migrateToServer(this.context.applicationId);
-      if (result.success) {
-        if (result.viewCount > 0) {
-          this.showNote(`Successfully migrated ${result.viewCount} view(s) to server storage.`);
+      // Migrate views
+      const viewsResult = await this.viewPreferencesManager.migrateToServer(this.context.applicationId);
+
+      // Migrate filters
+      const filtersResult = await this.filterPreferencesManager.migrateToServer(this.context.applicationId);
+
+      const totalItems = viewsResult.viewCount + filtersResult.filterCount;
+
+      if (viewsResult.success && filtersResult.success) {
+        if (totalItems > 0) {
+          const messages = [];
+          if (viewsResult.viewCount > 0) {
+            messages.push(`${viewsResult.viewCount} view(s)`);
+          }
+          if (filtersResult.filterCount > 0) {
+            messages.push(`${filtersResult.filterCount} filter(s)`);
+          }
+          this.showNote(`Successfully migrated ${messages.join(' and ')} to server storage.`);
         } else {
-          this.showNote('No views found to migrate.');
+          this.showNote('No views or filters found to migrate.');
         }
       }
     } catch (error) {
-      this.showNote(`Failed to migrate views: ${error.message}`);
+      this.showNote(`Failed to migrate settings: ${error.message}`);
     } finally {
       this.setState({ migrationLoading: false });
     }
@@ -126,15 +153,21 @@ export default class DashboardSettings extends DashboardView {
       return;
     }
 
+    if (!this.filterPreferencesManager) {
+      this.showNote('FilterPreferencesManager not initialized');
+      return;
+    }
+
     if (!this.scriptManager) {
       this.showNote('ScriptManager not initialized');
       return;
     }
 
     const viewsSuccess = this.viewPreferencesManager.deleteFromBrowser(this.context.applicationId);
+    const filtersSuccess = this.filterPreferencesManager.deleteFromBrowser(this.context.applicationId);
     const scriptsSuccess = this.scriptManager.deleteFromBrowser(this.context.applicationId);
 
-    if (viewsSuccess && scriptsSuccess) {
+    if (viewsSuccess && filtersSuccess && scriptsSuccess) {
       this.showNote('Successfully deleted dashboard settings from browser storage.');
     } else {
       this.showNote('Failed to delete all dashboard settings from browser storage.');
@@ -474,7 +507,7 @@ export default class DashboardSettings extends DashboardView {
         {this.viewPreferencesManager && this.scriptManager && this.viewPreferencesManager.isServerConfigEnabled() && (
           <Fieldset legend="Settings Storage">
             <div style={{ marginBottom: '20px', color: '#666', fontSize: '14px', textAlign: 'center' }}>
-              Storing dashboard settings on the server rather than locally in the browser storage makes the settings available across devices and browsers. It also prevents them from getting lost when resetting the browser website data. Settings that can be stored on the server are currently Views, Keyboard Shortcuts and JS Console scripts.
+              Storing dashboard settings on the server rather than locally in the browser storage makes the settings available across devices and browsers. It also prevents them from getting lost when resetting the browser website data. Settings that can be stored on the server are currently Data Browser Filters, Views, Keyboard Shortcuts and JS Console scripts.
             </div>
             <Field
               label={