feat: Add confirmation dialog to handle conflicts when migrating settings to server (parse-community#3092)

Author: mtrezza

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

@@ -15,6 +15,7 @@ import Option from 'components/Dropdown/Option.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
+import Modal from 'components/Modal/Modal.react';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import * as ClassPreferences from 'lib/ClassPreferences';
 import ViewPreferencesManager from 'lib/ViewPreferencesManager';
@@ -47,6 +48,8 @@ export default class DashboardSettings extends DashboardView {
       passwordHidden: true,
       migrationLoading: false,
       storagePreference: 'local', // Will be updated in componentDidMount
+      showConflictModal: false,
+      migrationConflicts: [],
       copyData: {
         data: '',
         show: false,
@@ -95,7 +98,7 @@ export default class DashboardSettings extends DashboardView {
     }
   }
 
-  async migrateToServer() {
+  async migrateToServer(overwriteConflicts = false) {
     if (!this.viewPreferencesManager) {
       this.showNote('ViewPreferencesManager not initialized');
       return;
@@ -106,6 +109,11 @@ export default class DashboardSettings extends DashboardView {
       return;
     }
 
+    if (!this.scriptManager) {
+      this.showNote('ScriptManager 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;
@@ -115,14 +123,30 @@ export default class DashboardSettings extends DashboardView {
 
     try {
       // Migrate views
-      const viewsResult = await this.viewPreferencesManager.migrateToServer(this.context.applicationId);
+      const viewsResult = await this.viewPreferencesManager.migrateToServer(this.context.applicationId, overwriteConflicts);
 
       // Migrate filters
-      const filtersResult = await this.filterPreferencesManager.migrateToServer(this.context.applicationId);
+      const filtersResult = await this.filterPreferencesManager.migrateToServer(this.context.applicationId, overwriteConflicts);
+
+      // Migrate scripts
+      const scriptsResult = await this.scriptManager.migrateToServer(this.context.applicationId, overwriteConflicts);
+
+      // Check for conflicts
+      const allConflicts = [
+        ...(viewsResult.conflicts || []),
+        ...(filtersResult.conflicts || []),
+        ...(scriptsResult.conflicts || [])
+      ];
+
+      if (allConflicts.length > 0 && !overwriteConflicts) {
+        // Show conflict dialog
+        this.showConflictDialog(allConflicts);
+        return;
+      }
 
-      const totalItems = viewsResult.viewCount + filtersResult.filterCount;
+      const totalItems = viewsResult.viewCount + filtersResult.filterCount + scriptsResult.scriptCount;
 
-      if (viewsResult.success && filtersResult.success) {
+      if (viewsResult.success && filtersResult.success && scriptsResult.success) {
         if (totalItems > 0) {
           const messages = [];
           if (viewsResult.viewCount > 0) {
@@ -131,9 +155,12 @@ export default class DashboardSettings extends DashboardView {
           if (filtersResult.filterCount > 0) {
             messages.push(`${filtersResult.filterCount} filter(s)`);
           }
-          this.showNote(`Successfully migrated ${messages.join(' and ')} to server storage.`);
+          if (scriptsResult.scriptCount > 0) {
+            messages.push(`${scriptsResult.scriptCount} script(s)`);
+          }
+          this.showNote(`Successfully migrated ${messages.join(', ')} to server storage.`);
         } else {
-          this.showNote('No views or filters found to migrate.');
+          this.showNote('No views, filters, or scripts found to migrate.');
         }
       }
     } catch (error) {
@@ -143,6 +170,25 @@ export default class DashboardSettings extends DashboardView {
     }
   }
 
+  showConflictDialog(conflicts) {
+    this.setState({
+      migrationLoading: false,
+      showConflictModal: true,
+      migrationConflicts: conflicts
+    });
+  }
+
+  handleConflictOverwrite() {
+    this.setState({ showConflictModal: false });
+    // User chose to overwrite - retry migration with overwrite flag
+    this.migrateToServer(true);
+  }
+
+  handleConflictCancel() {
+    this.setState({ showConflictModal: false, migrationConflicts: [] });
+    this.showNote('Migration aborted. Server settings were not modified.');
+  }
+
   async deleteFromBrowser() {
     if (!window.confirm('Are you sure you want to delete all dashboard settings from browser storage? This action cannot be undone.')) {
       return;
@@ -533,7 +579,7 @@ export default class DashboardSettings extends DashboardView {
               label={
                 <Label
                   text="Migrate Settings to Server"
-                  description="Migrates browser-stored settings to the server. ⚠️ This overwrites existing dashboard settings on the server."
+                  description="Migrates browser-stored settings to the server. If conflicts are detected, you'll be asked whether to overwrite or abort."
                 />
               }
               input={
@@ -565,12 +611,119 @@ export default class DashboardSettings extends DashboardView {
         {this.state.copyData.show && copyData}
         {this.state.createUserInput && createUserInput}
         {this.state.newUser.show && userData}
+        {this.state.showConflictModal && this.renderConflictModal()}
         <Toolbar section="Settings" subsection="Dashboard Configuration" />
         <Notification note={this.state.message} isErrorNote={false} />
       </div>
     );
   }
 
+  renderConflictModal() {
+    const { migrationConflicts } = this.state;
+
+    // Format conflict details
+    const viewConflicts = migrationConflicts.filter(c => c.type === 'view');
+    const filterConflicts = migrationConflicts.filter(c => c.type === 'filter');
+    const scriptConflicts = migrationConflicts.filter(c => c.type === 'script');
+
+    const conflictList = (
+      <div style={{ padding: '20px', fontSize: '14px' }}>
+        <p style={{ marginBottom: '15px' }}>
+          The following settings already exist on the server:
+        </p>
+
+        <div style={{
+          maxHeight: '300px',
+          overflowY: 'auto',
+          marginBottom: '15px',
+          border: '1px solid #e0e0e0',
+          borderRadius: '4px',
+          padding: '10px'
+        }}>
+          {viewConflicts.length > 0 && (
+            <div style={{ marginBottom: (filterConflicts.length > 0 || scriptConflicts.length > 0) ? '15px' : '0' }}>
+              <strong>Views ({viewConflicts.length}):</strong>
+              <ul style={{ marginTop: '5px', marginBottom: '0', paddingLeft: '20px' }}>
+                {viewConflicts.map(conflict => {
+                  const viewName = conflict.local?.name || conflict.server?.name || '';
+                  return (
+                    <li key={conflict.id}>
+                      {viewName || 'Unnamed view'}
+                      <span style={{ fontFamily: 'monospace', fontSize: '12px', color: '#666', marginLeft: '8px' }}>
+                        [{conflict.id}]
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+
+          {filterConflicts.length > 0 && (
+            <div style={{ marginBottom: scriptConflicts.length > 0 ? '15px' : '0' }}>
+              <strong>Filters ({filterConflicts.length}):</strong>
+              <ul style={{ marginTop: '5px', marginBottom: '0', paddingLeft: '20px' }}>
+                {filterConflicts.map(conflict => {
+                  const filterName = conflict.local?.name || conflict.server?.name || '';
+                  const className = conflict.className || 'Unknown class';
+                  const displayText = filterName
+                    ? `${filterName} (${className})`
+                    : className;
+                  return (
+                    <li key={conflict.id}>
+                      {displayText}
+                      <span style={{ fontFamily: 'monospace', fontSize: '12px', color: '#666', marginLeft: '8px' }}>
+                        [{conflict.id}]
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+
+          {scriptConflicts.length > 0 && (
+            <div>
+              <strong>Scripts ({scriptConflicts.length}):</strong>
+              <ul style={{ marginTop: '5px', marginBottom: '0', paddingLeft: '20px' }}>
+                {scriptConflicts.map(conflict => {
+                  const scriptName = conflict.local?.name || conflict.server?.name || '';
+                  return (
+                    <li key={conflict.id}>
+                      {scriptName || 'Unnamed script'}
+                      <span style={{ fontFamily: 'monospace', fontSize: '12px', color: '#666', marginLeft: '8px' }}>
+                        [{conflict.id}]
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <p style={{ marginTop: '15px', fontWeight: 'bold' }}>
+          Do you want to overwrite the server settings with your local settings?
+        </p>
+      </div>
+    );
+
+    return (
+      <Modal
+        type={Modal.Types.DANGER}
+        icon="warn-outline"
+        title="Migration Conflicts Detected"
+        subtitle="Settings with the same ID already exist on the server"
+        confirmText="Overwrite Server Settings"
+        cancelText="Cancel Migration"
+        onConfirm={() => this.handleConflictOverwrite()}
+        onCancel={() => this.handleConflictCancel()}
+      >
+        {conflictList}
+      </Modal>
+    );
+  }
+
   renderContent() {
     return (
       <FlowView

src/lib/FilterPreferencesManager.js

@@ -98,17 +98,28 @@ export default class FilterPreferencesManager {
   /**
    * Migrates filters from local storage to server storage for all classes
    * @param {string} appId - The application ID
-   * @returns {Promise<{success: boolean, filterCount: number}>}
+   * @param {boolean} overwriteConflicts - If true, overwrite server filters with same ID
+   * @returns {Promise<{success: boolean, filterCount: number, conflicts?: Array}>}
    */
-  async migrateToServer(appId) {
+  async migrateToServer(appId, overwriteConflicts = false) {
     if (!this.serverStorage.isServerConfigEnabled()) {
       throw new Error('Server configuration is not enabled for this app');
     }
 
     const allPreferences = getAllPreferences(appId);
     let totalFilterCount = 0;
+    const allConflicts = [];
 
     try {
+      // Get all existing filters from server
+      const existingFilterConfigs = await this.serverStorage.getConfigsByPrefix(
+        'browser.filters.filter.',
+        appId
+      );
+      const existingFilterIds = Object.keys(existingFilterConfigs).map(key =>
+        key.replace('browser.filters.filter.', '')
+      );
+
       for (const [className, preferences] of Object.entries(allPreferences)) {
         if (preferences.filters && preferences.filters.length > 0) {
           // Ensure all filters have UUIDs before migrating
@@ -119,11 +130,42 @@ export default class FilterPreferencesManager {
             return filter;
           });
 
-          await this._saveFiltersToServer(appId, className, filtersWithIds);
-          totalFilterCount += filtersWithIds.length;
+          // Check for conflicts in this class
+          const localFilterIds = filtersWithIds.map(f => f.id);
+          const conflictingIds = localFilterIds.filter(id => existingFilterIds.includes(id));
+
+          if (conflictingIds.length > 0 && !overwriteConflicts) {
+            // Collect conflicts
+            conflictingIds.forEach(id => {
+              const localFilter = filtersWithIds.find(f => f.id === id);
+              const serverFilterKey = `browser.filters.filter.${id}`;
+              const serverFilter = existingFilterConfigs[serverFilterKey];
+              allConflicts.push({
+                id,
+                type: 'filter',
+                className,
+                local: localFilter,
+                server: serverFilter
+              });
+            });
+          }
+
+          if (overwriteConflicts || conflictingIds.length === 0) {
+            // Only migrate if no conflicts or overwriting
+            await this._migrateFiltersToServer(appId, className, filtersWithIds, existingFilterIds, overwriteConflicts);
+            totalFilterCount += filtersWithIds.length;
+          }
         }
       }
 
+      if (allConflicts.length > 0 && !overwriteConflicts) {
+        return {
+          success: false,
+          filterCount: 0,
+          conflicts: allConflicts
+        };
+      }
+
       return { success: true, filterCount: totalFilterCount };
     } catch (error) {
       console.error('Failed to migrate filters to server:', error);
@@ -176,6 +218,54 @@ export default class FilterPreferencesManager {
     return this.serverStorage.isServerConfigEnabled();
   }
 
+  /**
+   * Migrates filters to server storage with merge/overwrite logic
+   * @private
+   */
+  async _migrateFiltersToServer(appId, className, filters, existingFilterIds, overwriteConflicts) {
+    try {
+      // Save local filters to server
+      await Promise.all(
+        filters.map(filter => {
+          const filterId = filter.id;
+          const filterConfig = { ...filter };
+          delete filterConfig.id; // Don't store ID in the config itself
+
+          // Add className to the object
+          filterConfig.className = className;
+
+          // Remove null and undefined values to keep the storage clean
+          Object.keys(filterConfig).forEach(key => {
+            if (filterConfig[key] === null || filterConfig[key] === undefined) {
+              delete filterConfig[key];
+            }
+          });
+
+          // Stringify the filter if it exists and is an array/object
+          if (filterConfig.filter && (Array.isArray(filterConfig.filter) || typeof filterConfig.filter === 'object')) {
+            filterConfig.filter = JSON.stringify(filterConfig.filter);
+          }
+
+          // Only save if we're overwriting conflicts or if this filter doesn't exist on server
+          if (overwriteConflicts || !existingFilterIds.includes(filterId)) {
+            return this.serverStorage.setConfig(
+              `browser.filters.filter.${filterId}`,
+              filterConfig,
+              appId
+            );
+          }
+          return Promise.resolve(); // Skip conflicting filters when not overwriting
+        })
+      );
+
+      // Note: We don't delete server filters that aren't in local storage
+      // This preserves server-side settings that don't conflict with local ones
+    } catch (error) {
+      console.error('Failed to migrate filters to server:', error);
+      throw error;
+    }
+  }
+
   /**
    * Gets filters for a specific class from server storage
    * @private