feat(app): integrate clear mode UI and URL handling

Author: tarqd

app.js

@@ -1,6 +1,11 @@
 import * as LDClient from 'launchdarkly-js-client-sdk';
 import { EventInterceptionPlugin } from '@launchdarkly/toolbar';
-import { createFlagUrlOverridePlugin } from './flag-url-override-plugin.js';
+import {
+    createFlagUrlOverridePlugin,
+    CLEAR_MODE_EXPLICIT,
+    CLEAR_MODE_ALWAYS,
+    CLEAR_MODE_AUTO
+} from './flag-url-override-plugin.js';
 
 // Custom Logger Implementation
 class CustomLogger {
@@ -56,6 +61,21 @@ function getClientSideIdFromUrl() {
     return urlParams.get('clientSideId') || '';
 }
 
+// Get clear mode from query parameter and map to symbol
+function getClearModeFromUrl() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const clearModeStr = urlParams.get('clearMode') || 'auto';
+
+    // Map string to symbol
+    const modeMap = {
+        'auto': CLEAR_MODE_AUTO,
+        'explicit': CLEAR_MODE_EXPLICIT,
+        'always': CLEAR_MODE_ALWAYS
+    };
+
+    return modeMap[clearModeStr] || CLEAR_MODE_AUTO;
+}
+
 // Helper function to format reason object
 function formatReason(reason) {
     if (!reason) return 'N/A';
@@ -157,8 +177,11 @@ async function initializeLaunchDarkly(clientSideID) {
     logger.info('Initializing LaunchDarkly client...');
 
     // Create plugin instances that will be shared between client and toolbar
+    // Get clearMode from URL (defaults to AUTO for reliable URL sharing)
+    const clearMode = getClearModeFromUrl();
     const flagOverridePlugin = createFlagUrlOverridePlugin({
         parameterPrefix: 'ld_override_',
+        clearMode: clearMode,
         overrideOptions: {},
         logger: logger
     });
@@ -233,10 +256,32 @@ function initApp() {
     // Get client-side ID from URL
     const clientSideId = getClientSideIdFromUrl();
 
-    // Populate the form input with the current value
-    const input = document.getElementById('clientSideId');
-    if (input) {
-        input.value = clientSideId;
+    // Populate the form inputs with current values
+    const clientIdInput = document.getElementById('clientSideId');
+    if (clientIdInput) {
+        clientIdInput.value = clientSideId;
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const clearModeSelect = document.getElementById('clearMode');
+    const clearModeNotice = document.getElementById('clearModeNotice');
+
+    if (clearModeSelect) {
+        const clearModeStr = urlParams.get('clearMode') || 'auto';
+        clearModeSelect.value = clearModeStr;
+
+        // Add change listener to update URL when clearMode changes
+        clearModeSelect.addEventListener('change', (e) => {
+            const url = new URL(window.location.href);
+            url.searchParams.set('clearMode', e.target.value);
+            window.history.replaceState({}, '', url.toString());
+            logger.info(`Clear mode changed to: ${e.target.value}`);
+
+            // Show notice to reload
+            if (clearModeNotice) {
+                clearModeNotice.classList.add('visible');
+            }
+        });
     }
 
     // Initialize LaunchDarkly if clientSideId is provided

index.html

@@ -157,6 +157,32 @@
         .form-group button:active {
             background-color: #1f34bb;
         }
+        .form-group select {
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+            background-color: white;
+            cursor: pointer;
+        }
+        .form-group select:focus {
+            outline: none;
+            border-color: #405BFF;
+            box-shadow: 0 0 0 2px rgba(64, 91, 255, 0.1);
+        }
+        .reload-notice {
+            display: none;
+            color: #FF9800;
+            font-size: 0.9em;
+            margin-top: 5px;
+            padding: 8px;
+            background-color: #FFF3E0;
+            border-radius: 4px;
+            border-left: 3px solid #FF9800;
+        }
+        .reload-notice.visible {
+            display: block;
+        }
     </style>
 </head>
 <body>
@@ -170,6 +196,17 @@ <h2>Configuration</h2>
                 <input type="text" id="clientSideId" name="clientSideId" placeholder="Enter your LaunchDarkly client-side ID" />
                 <button type="submit">Load SDK</button>
             </div>
+            <div class="form-group">
+                <label for="clearMode">Override Behavior:</label>
+                <select id="clearMode" name="clearMode">
+                    <option value="auto">Clear all existing local overrides when overrides are set in the URL</option>
+                    <option value="explicit">Only clear local overrides when URL includes ld_override__clear</option>
+                    <option value="always">Only use URL overrides, ignore local storage</option>
+                </select>
+                <div id="clearModeNotice" class="reload-notice">
+                    Setting updated. Click "Load SDK" to apply changes.
+                </div>
+            </div>
         </form>
     </div>