chore: [REL-10965] toolbar redesign part two (#362)

* feat: add branching path based on feature flag

* refactor: update toolbar state to be context instead of hook

* feat: scaffold out new layout

* feat: click to drag + collapse toolbar

* feat: add feature flag for the interactive tab

* refactor: remove unused icon

* feat: add FilterTuneIcon

* refactor: move things around

* feat: set active tab for new UI

* feat: scaffold out dynamic content renderer

* feat: a whole bunch more refactoring

* feat: even more refactoring

* feat: clean up new Settings tab

* feat: work on Flag item styling

* refactor: clean up placeholders

* refactor: remove placeholder Toggle component

* feat: scaffold out rough new Events/Monitoring tab

* feat: Add EventsContent

* refactor: remove extra dummy data

* refactor: clean up

* fix: fix bug

* fix: set default tab if missing

* fix: fix failing e2e tests

* test: add tests

* feat: show all icons, disable based on feature flag

* chore: run pnpm format

* feat: add new dropdown for sub-tab selection

* chore: run pnpm format

* fix: remove unused import

* refactor: restructure project (#361)

* refactor: minor updates

* feat: wire up search functionality

* test: add tests for TabSearchProvider

* test: fix tests

* feat: filter events based on search term with new UI

* feat: setting filtering + tests

* feat: pull flags dynamically for new ui

* feat: get closer to matching parity for feature flag list

* chore: run pnpm format

* feat: almost get things working

* feat: get height working for JSON

* feat: add override indicator next to flag name

* feat: more styling updates

* feat: pretty much matching parity now (sdk mode)

* fix: fix dev server mode

* test: add tests

* refactor: clean up

* refactor: clean up

* refactor: consistent components

* fix: fix failing tests

* refactor: address some PR feedback

* fix: fix issue

* fix: actually fix this time

* refactor: update border colors

* refactor: big refactor of context definitions

* refactor: final clean up

* refactor: providers throw errors if used improperly

Author: cspath1

packages/toolbar/src/core/services/DevServerClient.ts

@@ -1,17 +1,13 @@
+import { ApiVariation } from '../ui/Toolbar/types/ldApi';
+
 export interface DevServerProjectResponse {
   _lastSyncedFromSource: number;
-  availableVariations: Record<string, Variation[]>;
+  availableVariations: Record<string, ApiVariation[]>;
   flagsState: Record<string, FlagState>;
   overrides: Record<string, Override>;
   sourceEnvironmentKey: string;
 }
 
-export interface Variation {
-  _id: string;
-  name: string;
-  value: any;
-}
-
 export interface FlagState {
   value: any;
   version: number;

packages/toolbar/src/core/services/FlagStateManager.ts

@@ -1,6 +1,6 @@
-import { DevServerClient, Variation } from './DevServerClient';
+import { DevServerClient } from './DevServerClient';
 import { EnhancedFlag } from '../types/devServer';
-import { ApiFlag } from '../ui/Toolbar/types/ldApi';
+import { ApiFlag, ApiVariation } from '../ui/Toolbar/types/ldApi';
 
 export class FlagStateManager {
   private devServerClient: DevServerClient;
@@ -39,7 +39,7 @@ export class FlagStateManager {
         isOverridden: !!override,
         originalValue: flagState.value,
         availableVariations: variations,
-        type: apiFlag?.kind || this.determineFlagType(variations, currentValue),
+        type: this.determineFlagType(variations, currentValue),
         sourceEnvironment: devServerData.sourceEnvironmentKey,
         enabled: flagState.value !== null && flagState.value !== undefined,
       };
@@ -57,33 +57,21 @@ export class FlagStateManager {
   }
 
   private determineFlagType(
-    variations: Variation[],
+    variations: ApiVariation[],
     currentValue: any,
   ): 'boolean' | 'multivariate' | 'string' | 'number' | 'object' {
     // If we have exactly 2 variations and they're both boolean, it's a boolean flag
     if (variations.length === 2 && variations.every((v) => typeof v.value === 'boolean')) {
       return 'boolean';
     }
 
-    // If we have more than 2 variations, it's multivariate
-    if (variations.length > 2) {
+    if (variations.length >= 2 && !variations.some((v) => typeof v.value === 'object')) {
       return 'multivariate';
     }
 
-    // Determine type based on current value
-    if (typeof currentValue === 'string') {
-      return 'string';
-    }
-
-    if (typeof currentValue === 'number') {
-      return 'number';
-    }
-
-    if (typeof currentValue === 'object') {
-      return 'object';
-    }
-
-    // Default to boolean for simple flags
+    if (typeof currentValue === 'string') return 'string';
+    if (typeof currentValue === 'number') return 'number';
+    if (typeof currentValue === 'object') return 'object';
     return 'boolean';
   }
 

packages/toolbar/src/core/tests/ApiProvider.test.tsx

@@ -1,17 +1,22 @@
 import { render, screen, waitFor, act } from '@testing-library/react';
 import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';
-import { ApiProvider, useApi } from '../ui/Toolbar/context/ApiProvider';
-import { getErrorTopic, getResponseTopic, IFRAME_COMMANDS, IFRAME_EVENTS } from '../ui/Toolbar/context/IFrameProvider';
+import { ApiProvider, useApi } from '../ui/Toolbar/context/api/ApiProvider';
+import {
+  getErrorTopic,
+  getResponseTopic,
+  IFRAME_COMMANDS,
+  IFRAME_EVENTS,
+} from '../ui/Toolbar/context/api/IFrameProvider';
 import '@testing-library/jest-dom/vitest';
 import React from 'react';
 
 // Mock the AuthProvider
-vi.mock('../ui/Toolbar/context/AuthProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/AuthProvider', () => ({
   useAuthContext: vi.fn(),
 }));
 
 // Mock the IFrameProvider
-vi.mock('../ui/Toolbar/context/IFrameProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/IFrameProvider', () => ({
   IFRAME_COMMANDS: {
     GET_PROJECTS: 'GET_PROJECTS',
     GET_FLAGS: 'GET_FLAGS',
@@ -29,7 +34,7 @@ vi.mock('../ui/Toolbar/context/IFrameProvider', () => ({
 }));
 
 // Mock the AnalyticsProvider
-vi.mock('../ui/Toolbar/context/AnalyticsProvider', () => ({
+vi.mock('../ui/Toolbar/context/telemetry/AnalyticsProvider', () => ({
   useAnalytics: vi.fn().mockReturnValue({
     trackLoginSuccess: vi.fn(),
     trackLoginCancelled: vi.fn(),
@@ -38,8 +43,8 @@ vi.mock('../ui/Toolbar/context/AnalyticsProvider', () => ({
   }),
 }));
 
-import { useAuthContext } from '../ui/Toolbar/context/AuthProvider';
-import { useIFrameContext } from '../ui/Toolbar/context/IFrameProvider';
+import { useAuthContext } from '../ui/Toolbar/context/api/AuthProvider';
+import { useIFrameContext } from '../ui/Toolbar/context/api/IFrameProvider';
 
 // Test component that uses the API context
 function TestConsumer() {

packages/toolbar/src/core/tests/AuthenticationModal.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { AuthenticationModal } from '../ui/Toolbar/components/AuthenticationModal/AuthenticationModal';
-import { IFrameProvider } from '../ui/Toolbar/context/IFrameProvider';
+import { IFrameProvider } from '../ui/Toolbar/context/api/IFrameProvider';
 
 // Mock the oauthPopup utility
 vi.mock('../ui/Toolbar/utils/oauthPopup', () => ({
@@ -17,7 +17,7 @@ const mockAuthContext = {
   setAuthenticating: vi.fn(),
 };
 
-vi.mock('../ui/Toolbar/context/AuthProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/AuthProvider', () => ({
   useAuthContext: () => mockAuthContext,
   AuthProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));

packages/toolbar/src/core/tests/DevServerProvider.test.tsx

@@ -54,24 +54,43 @@ vi.mock('../services/FlagStateManager', () => {
 // Create mock for getProjects that can be overridden in tests
 const mockGetProjects = vi.fn().mockResolvedValue([{ key: 'test-project', name: 'Test Project' }]);
 const mockProjectKey = { current: 'test-project' };
+const mockGetProjectFlags = vi.fn().mockResolvedValue({ items: [] });
 
-// Mock the ProjectProvider
-vi.mock('../ui/Toolbar/context/ProjectProvider', () => ({
-  ProjectProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+// Mock the api module which exports all API-related context
+vi.mock('../ui/Toolbar/context/api', () => ({
   useProjectContext: () => ({
     projectKey: mockProjectKey.current,
     projects: [{ key: 'test-project', name: 'Test Project' }],
     getProjects: mockGetProjects,
     loading: false,
     error: null,
   }),
+  useFlagsContext: () => ({
+    flags: [],
+    loading: false,
+    getProjectFlags: mockGetProjectFlags,
+  }),
+  useApi: () => ({
+    apiReady: true,
+    getFlag: vi.fn(),
+    getProjects: vi.fn(),
+    getFlags: vi.fn(),
+  }),
 }));
 
-// Create mock for getProjectFlags that we can track
-const mockGetProjectFlags = vi.fn().mockResolvedValue({ items: [] });
+// Also mock the individual files for direct imports
+vi.mock('../ui/Toolbar/context/api/ProjectProvider', () => ({
+  ProjectProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useProjectContext: () => ({
+    projectKey: mockProjectKey.current,
+    projects: [{ key: 'test-project', name: 'Test Project' }],
+    getProjects: mockGetProjects,
+    loading: false,
+    error: null,
+  }),
+}));
 
-// Mock the FlagsProvider
-vi.mock('../ui/Toolbar/context/FlagsProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/FlagsProvider', () => ({
   FlagsProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useFlagsContext: () => ({
     flags: [],
@@ -80,6 +99,16 @@ vi.mock('../ui/Toolbar/context/FlagsProvider', () => ({
   }),
 }));
 
+vi.mock('../ui/Toolbar/context/api/ApiProvider', () => ({
+  ApiProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useApi: () => ({
+    apiReady: true,
+    getFlag: vi.fn(),
+    getProjects: vi.fn(),
+    getFlags: vi.fn(),
+  }),
+}));
+
 // Test component that consumes the context
 function TestConsumer() {
   const { state, refresh } = useDevServerContext();

packages/toolbar/src/core/tests/ExpandedToolbarContentLegacy.test.tsx

@@ -2,13 +2,13 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { expect, test, describe, vi, beforeEach } from 'vitest';
 import { ExpandedToolbarContentLegacy } from '../ui/Toolbar/components/legacy';
 import { DevServerProvider } from '../ui/Toolbar/context/DevServerProvider';
-import { ToolbarUIProvider } from '../ui/Toolbar/context/ToolbarUIProvider';
-import { SearchProvider } from '../ui/Toolbar/context/SearchProvider';
-import { AnalyticsProvider } from '../ui/Toolbar/context/AnalyticsProvider';
-import { InternalClientProvider } from '../ui/Toolbar/context/InternalClientProvider';
-import { ToolbarStateProvider } from '../ui/Toolbar/context/ToolbarStateProvider';
+import { ToolbarUIProvider } from '../ui/Toolbar/context/state/ToolbarUIProvider';
+import { SearchProvider } from '../ui/Toolbar/context/state/SearchProvider';
+import { AnalyticsProvider } from '../ui/Toolbar/context/telemetry/AnalyticsProvider';
+import { InternalClientProvider } from '../ui/Toolbar/context/telemetry/InternalClientProvider';
+import { ToolbarStateProvider } from '../ui/Toolbar/context/state/ToolbarStateProvider';
 import { StarredFlagsProvider } from '../ui/Toolbar/context/StarredFlagsProvider';
-import { PluginsProvider } from '../ui/Toolbar/context/PluginsProvider';
+import { PluginsProvider } from '../ui/Toolbar/context/state/PluginsProvider';
 import { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../types';
 import '@testing-library/jest-dom/vitest';
 import React from 'react';
@@ -60,7 +60,7 @@ vi.mock('../services/FlagStateManager', () => {
 });
 
 // Mock the AuthProvider to return authenticated state
-vi.mock('../ui/Toolbar/context/AuthProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/AuthProvider', () => ({
   AuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useAuthContext: () => ({
     authenticated: true,
@@ -71,7 +71,7 @@ vi.mock('../ui/Toolbar/context/AuthProvider', () => ({
 }));
 
 // Mock the IFrameProvider
-vi.mock('../ui/Toolbar/context/IFrameProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/IFrameProvider', () => ({
   IFrameProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useIFrameContext: () => ({
     ref: { current: null },
@@ -80,7 +80,7 @@ vi.mock('../ui/Toolbar/context/IFrameProvider', () => ({
 }));
 
 // Mock the ProjectProvider
-vi.mock('../ui/Toolbar/context/ProjectProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/ProjectProvider', () => ({
   ProjectProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useProjectContext: () => ({
     projectKey: 'test-project',
@@ -92,7 +92,7 @@ vi.mock('../ui/Toolbar/context/ProjectProvider', () => ({
 }));
 
 // Mock the FlagsProvider
-vi.mock('../ui/Toolbar/context/FlagsProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/FlagsProvider', () => ({
   FlagsProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useFlagsContext: () => ({
     flags: {},
@@ -103,7 +103,7 @@ vi.mock('../ui/Toolbar/context/FlagsProvider', () => ({
 }));
 
 // Mock the ActiveTabProvider
-vi.mock('../ui/Toolbar/context/ActiveTabProvider', () => ({
+vi.mock('../ui/Toolbar/context/state/ActiveTabProvider', () => ({
   ActiveTabProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useActiveTabContext: () => ({
     activeTab: 'settings',
@@ -175,8 +175,8 @@ function TestWrapper({
       >
         <InternalClientProvider>
           <AnalyticsProvider>
-            <ToolbarStateProvider domId="test-toolbar">
-              <SearchProvider>
+            <SearchProvider>
+              <ToolbarStateProvider domId="test-toolbar">
                 <StarredFlagsProvider>
                   <PluginsProvider
                     baseUrl={baseUrl}
@@ -186,8 +186,8 @@ function TestWrapper({
                     {children}
                   </PluginsProvider>
                 </StarredFlagsProvider>
-              </SearchProvider>
-            </ToolbarStateProvider>
+              </ToolbarStateProvider>
+            </SearchProvider>
           </AnalyticsProvider>
         </InternalClientProvider>
       </DevServerProvider>

packages/toolbar/src/core/tests/FlagSdkOverrideProvider.test.tsx

@@ -41,7 +41,7 @@ const API_FLAGS = [
 ];
 
 // Mock the FlagsProvider
-vi.mock('../ui/Toolbar/context/FlagsProvider', () => ({
+vi.mock('../ui/Toolbar/context/api/FlagsProvider', () => ({
   FlagsProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   useFlagsContext: () => ({
     flags: API_FLAGS,
@@ -247,7 +247,7 @@ describe('FlagSdkOverrideProvider', () => {
 
   test('displays flags from LD client even when API flags are empty', async () => {
     // Mock FlagsProvider to return empty flags (simulating API not loaded yet)
-    const emptyFlagsModule = await import('../ui/Toolbar/context/FlagsProvider');
+    const emptyFlagsModule = await import('../ui/Toolbar/context/api/FlagsProvider');
     vi.spyOn(emptyFlagsModule, 'useFlagsContext').mockReturnValue({
       flags: [], // Empty API flags
       loading: false,