Merge branch 'release-please--branches--main--components--toolbar' of github.com:launchdarkly/launchdarkly-toolbar into release-please--branches--main--components--toolbar

Author: cspath1

.github/actions/ci/action.yml

@@ -38,6 +38,8 @@ runs:
         VITE_LD_BASE_URL: https://app.launchdarkly.com
         VITE_LD_STREAM_URL: https://clientstream.launchdarkly.com
         VITE_LD_EVENTS_URL: https://events.launchdarkly.com
+        VITE_LD_DEV_SERVER_URL: http://localhost:8765
+        VITE_LD_DEV_SERVER_PROJECT_KEY: developer-toolbar-sandbox
 
     - name: Run Unit Tests
       shell: bash
@@ -91,6 +93,8 @@ runs:
         VITE_LD_BASE_URL: https://app.launchdarkly.com
         VITE_LD_STREAM_URL: https://clientstream.launchdarkly.com
         VITE_LD_EVENTS_URL: https://events.launchdarkly.com
+        VITE_LD_DEV_SERVER_URL: http://localhost:8765
+        VITE_LD_DEV_SERVER_PROJECT_KEY: developer-toolbar-sandbox
 
     - name: Upload Playwright Artifacts
       uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  "packages/toolbar": "1.0.3"
+  "packages/toolbar": "1.1.0"
 }

CONTRIBUTING.md

@@ -57,7 +57,8 @@ an easy and intuitive way to test local changes to the Developer Toolbar within
 application. To set up the Demo application + Developer Toolbar to use one of your LaunchDarkly projects, copy
 the values in `.env.example` into a `.env` (or `.env.local`) file, and replace `VITE_LD_CLIENT_SIDE_ID` with the
 LaunchDarkly Client-Side ID of the project/environment you would like to test against.
-The other values in `env.example` are most likely fine as-is.
+The other values in `env.example` are most likely fine as-is. If you are planning on developing features for/testing using
+a local dev-server, ensure you also update `VITE_LD_DEV_SERVER_URL` and `VITE_LD_DEV_SERVER_URL_PROJECT_KEY` to valid values.
 
 ## Toolbar Integration Modes
 
@@ -196,7 +197,7 @@ The demo application is the best way to test your changes:
 **Testing Both Modes:**
 
 - **SDK Mode**: Test flag overrides, event interception, and real-time updates
-- **Dev Server Mode**: Test dev server connection, flag browsing, and CLI integration
+- **Dev Server Mode**: Test dev server connection, flag browsing + overrides (via the dev server), and CLI integration
 
 ## Testing
 

e2e/tests/sdk-mode.spec.ts

@@ -110,10 +110,10 @@ test.describe('LaunchDarkly Toolbar - SDK Mode', () => {
 
       // JSON flag override
       await page.getByTestId('flag-control-json-object-flag').getByRole('button', { name: 'Edit' }).click();
-      const jsonInput = page.getByTestId('flag-input-json-object-flag');
+      const jsonInput = page.getByTestId('json-editor-json-object-flag').getByRole('textbox');
       const customJson = '{"environment": "test", "feature": "enabled", "count": 42}';
       await jsonInput.fill(customJson);
-      await page.getByRole('button', { name: 'Confirm' }).click();
+      await page.getByTestId('flag-confirm-json-object-flag').click();
       await expect(page.getByTestId('flag-row-json-object-flag').getByTestId('override-indicator')).toBeVisible();
       await expect(page.getByText('Clear all overrides (4)')).toBeVisible();
 
@@ -192,13 +192,12 @@ test.describe('LaunchDarkly Toolbar - SDK Mode', () => {
         .getByRole('button', { name: 'Edit' });
 
       await jsonFlagEditButton.click();
-      const jsonInput = page.getByTestId('flag-input-json-object-flag');
+      const jsonInput = page.getByTestId('json-editor-json-object-flag').getByRole('textbox');
 
       const validJson = '{"environment": "test", "enabled": true}';
       await jsonInput.fill(validJson);
 
-      const confirmButton = page.getByRole('button', { name: 'Confirm' });
-      await confirmButton.click();
+      await page.getByTestId('flag-confirm-json-object-flag').click();
 
       // Verify override was created
       await expect(jsonFlagRow.getByTestId('override-indicator')).toBeVisible();

package.json

@@ -27,13 +27,13 @@
     "test:e2e:local:ui": "TEST_ENV=local playwright test --ui --config=./e2e/playwright.config.ts"
   },
   "devDependencies": {
-    "@playwright/test": "^1.53.1",
+    "@playwright/test": "^1.56.1",
     "@types/node": "^24.9.1",
     "http-server": "^14.1.1",
     "prettier": "^3.5.3",
-    "storybook": "^9.1.13",
+    "storybook": "^9.1.16",
     "storybook-addon-rslib": "^2.1.2",
-    "storybook-react-rsbuild": "^2.0.0",
+    "storybook-react-rsbuild": "^2.1.2",
     "tsx": "^4.20.6"
   },
   "packageManager": "[email protected]"

packages/demo/.env.example

@@ -2,3 +2,9 @@ VITE_LD_CLIENT_SIDE_ID=your-client-side-id
 VITE_LD_BASE_URL=https://app.launchdarkly.com
 VITE_LD_STREAM_URL=https://clientstream.launchdarkly.com
 VITE_LD_EVENTS_URL=https://events.launchdarkly.com
+VITE_LD_DEV_SERVER_URL=http://localhost:8765
+
+# This is used as the client-side ID for the LD Client when connecting
+# to the dev server. If you intend to use DevServerMode, configure this
+# to the project key in your dev-server that you want to connect to
+VITE_LD_DEV_SERVER_PROJECT_KEY=your-dev-server-url-project-key

packages/demo/README.md

@@ -101,6 +101,7 @@ This demo is part of a pnpm monorepo workspace and automatically uses the local
 1. **Toolbar not appearing**: Check if the dev server URL is correct and accessible
 2. **Connection issues**: Verify your LaunchDarkly dev server is running with CORS enabled
 3. **No flags showing**: Ensure the project key is correct and flags exist in the environment
+4. **Flags are showing, but values are not the same between the toolbar and the app**: Ensure the toolbar is not using the `FlagOverridePlugin` in dev server mode
 
 ### SDK Mode Issues
 

packages/demo/package.json

@@ -15,26 +15,26 @@
   },
   "dependencies": {
     "@launchdarkly/toolbar": "workspace:*",
-    "launchdarkly-js-client-sdk": "^3.8.1",
+    "launchdarkly-js-client-sdk": "^3.9.0",
     "launchdarkly-react-client-sdk": "^3.9.0",
-    "msw": "^2.11.5",
+    "msw": "^2.11.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.1.0",
     "eslint": "^9.30.1",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.3.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.11"
+    "vite": "^7.1.12"
   },
   "msw": {
     "workerDirectory": [

packages/demo/src/App.tsx

@@ -4,28 +4,16 @@ import './App.css';
 import { Home } from './pages/Home';
 import { DevServerMode } from './pages/DevServerMode';
 import { SDKMode } from './pages/SDKMode';
-import { useLaunchDarklyProvider } from './hooks/useLaunchDarklyProvider';
-import { LoadingScreen } from './components/LoadingScreen';
-import { MockModeIndicator } from './components/MockModeIndicator';
 
 function App() {
-  const { LDProvider, isLoading, isUsingMocks } = useLaunchDarklyProvider();
-
-  if (!LDProvider) {
-    return <LoadingScreen isLoading={isLoading} />;
-  }
-
   return (
-    <LDProvider>
-      {isUsingMocks && <MockModeIndicator />}
-      <Router>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/dev-server" element={<DevServerMode />} />
-          <Route path="/sdk" element={<SDKMode />} />
-        </Routes>
-      </Router>
-    </LDProvider>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/dev-server" element={<DevServerMode />} />
+        <Route path="/sdk" element={<SDKMode />} />
+      </Routes>
+    </Router>
   );
 }
 

packages/demo/src/hooks/useLaunchDarklyProvider.ts

@@ -1,16 +1,25 @@
 import { useState, useEffect, useRef } from 'react';
-import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
+import { asyncWithLDProvider, type LDPlugin } from 'launchdarkly-react-client-sdk';
 import { DEMO_CONFIG, demoLog } from '../config/demo';
 import { startMockWorker, stopMockWorker } from '../mocks';
-import { flagOverridePlugin, eventInterceptionPlugin } from '../plugins';
 
 export interface UseLaunchDarklyProviderReturn {
   LDProvider: React.FC<{ children: React.ReactNode }> | null;
   isUsingMocks: boolean;
   isLoading: boolean;
 }
 
-export function useLaunchDarklyProvider(): UseLaunchDarklyProviderReturn {
+interface UseLaunchDarklyProviderProps {
+  clientSideID: string;
+  baseUrl: string;
+  streamUrl: string;
+  eventsUrl: string;
+  plugins: LDPlugin[];
+}
+
+export function useLaunchDarklyProvider(props: UseLaunchDarklyProviderProps): UseLaunchDarklyProviderReturn {
+  const { clientSideID, baseUrl, streamUrl, eventsUrl, plugins } = props;
+
   const [LDProvider, setLDProvider] = useState<React.FC<{ children: React.ReactNode }> | null>(null);
   const [isUsingMocks, setIsUsingMocks] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -29,12 +38,12 @@ export function useLaunchDarklyProvider(): UseLaunchDarklyProviderReturn {
 
         // Initialize LaunchDarkly provider
         const Provider = await asyncWithLDProvider({
-          clientSideID: import.meta.env.VITE_LD_CLIENT_SIDE_ID,
+          clientSideID,
           options: {
-            baseUrl: import.meta.env.VITE_LD_BASE_URL,
-            streamUrl: import.meta.env.VITE_LD_STREAM_URL,
-            eventsUrl: import.meta.env.VITE_LD_EVENTS_URL,
-            plugins: [flagOverridePlugin, eventInterceptionPlugin],
+            baseUrl,
+            streamUrl,
+            eventsUrl,
+            plugins,
           },
         });