@launchdarkly/toolbar 1.5.0 → 2.0.0-beta.1

package/dist/core/services/DevServerClient.d.ts

@@ -21,14 +21,11 @@ export interface Override {
 export declare class DevServerClient {
     private baseUrl;
     private projectKey;
-    constructor(baseUrl: string, projectKey?: string);
-    setProjectKey(projectKey: string): void;
-    getProjectKey(): string | null;
+    constructor(baseUrl: string, projectKey: string);
     getProjectData(): Promise<DevServerProjectResponse>;
     setOverride(flagKey: string, value: any): Promise<{
         override: boolean;
         value: any;
     }>;
     clearOverride(flagKey: string): Promise<void>;
-    getAvailableProjects(): Promise<string[]>;
 }

package/dist/core/services/FlagStateManager.d.ts

@@ -1,14 +1,17 @@
 import { DevServerClient } from './DevServerClient';
 import { EnhancedFlag } from '../types/devServer';
+import { ApiFlag } from '../ui/Toolbar/types/ldApi';
 export declare class FlagStateManager {
     private devServerClient;
     private listeners;
+    private apiFlags;
     constructor(devServerClient: DevServerClient);
     getEnhancedFlags(): Promise<Record<string, EnhancedFlag>>;
     private formatFlagName;
     private determineFlagType;
     setOverride(flagKey: string, value: any): Promise<void>;
     clearOverride(flagKey: string): Promise<void>;
+    setApiFlags(apiFlags: ApiFlag[]): void;
     subscribe(listener: (flags: Record<string, EnhancedFlag>) => void): () => void;
     private notifyListeners;
     destroy(): void;

package/dist/core/ui/Toolbar/Header/Header.css.d.ts

@@ -16,3 +16,5 @@ export declare const searchFieldWrapperSvg: string;
 export declare const searchWrapper: string;
 export declare const environmentWrapper: string;
 export declare const icon: string;
+export declare const environmentLabelWrapper: string;
+export declare const environmentTooltip: string;

package/dist/core/ui/Toolbar/Header/Header.d.ts

@@ -6,7 +6,6 @@ export interface HeaderProps {
     onClose: () => void;
     searchIsExpanded: boolean;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
-    label: string;
     mode: ToolbarMode;
     onMouseDown?: (event: React.MouseEvent) => void;
     onOpenConfig?: () => void;

package/dist/core/ui/Toolbar/LaunchDarklyToolbar.d.ts

@@ -18,5 +18,6 @@ export interface LaunchDarklyToolbarProps {
     pollIntervalInMs?: number;
     position?: ToolbarPosition;
     domId: string;
+    clientSideId?: string;
 }
 export declare function LaunchDarklyToolbar(props: LaunchDarklyToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/core/ui/Toolbar/TabContent/SettingsTabContent.d.ts

@@ -5,8 +5,6 @@ interface SettingsTabContentProps {
     onToggleReloadOnFlagChange: () => void;
     isAutoCollapseEnabled: boolean;
     onToggleAutoCollapse: () => void;
-    optInToNewFeatures: boolean;
-    onToggleOptInToNewFeatures: () => void;
 }
 export declare function SettingsTabContent(props: SettingsTabContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/core/ui/Toolbar/components/ExpandedToolbarContent.d.ts

@@ -20,8 +20,6 @@ interface ExpandedToolbarContentProps {
     onHeaderMouseDown?: (event: React.MouseEvent) => void;
     reloadOnFlagChangeIsEnabled: boolean;
     onToggleReloadOnFlagChange: () => void;
-    optInToNewFeatures: boolean;
-    onToggleOptInToNewFeatures: () => void;
 }
 export declare const ExpandedToolbarContent: React.ForwardRefExoticComponent<ExpandedToolbarContentProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/core/ui/Toolbar/components/Feedback/Feedback.css.d.ts

@@ -0,0 +1,9 @@
+export declare const feedbackContainer: string;
+export declare const title: string;
+export declare const sentimentContainer: string;
+export declare const sentimentButton: string;
+export declare const commentForm: string;
+export declare const textField: string;
+export declare const submitButton: string;
+export declare const successMessage: string;
+export declare const successIcon: string;

package/dist/core/ui/Toolbar/components/Feedback/Feedback.d.ts

@@ -0,0 +1,7 @@
+import type { FeedbackSentiment } from '../../../../../types/analytics';
+interface FeedbackProps {
+    onSubmit: (feedback: string, sentiment: FeedbackSentiment) => void;
+    title?: string;
+}
+export declare function Feedback(props: FeedbackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/LoginScreen.css.d.ts

@@ -0,0 +1,14 @@
+export declare const loginContainer: string;
+export declare const loginHeader: string;
+export declare const headerLogo: string;
+export declare const loginMainContent: string;
+export declare const closeButtonArea: string;
+export declare const actionButton: string;
+export declare const loginContent: string;
+export declare const title: string;
+export declare const description: string;
+export declare const errorMessage: string;
+export declare const loginButton: string;
+export declare const spinner: string;
+export declare const helpText: string;
+export declare const helpLink: string;

package/dist/core/ui/Toolbar/components/LoginScreen.d.ts

@@ -0,0 +1,10 @@
+interface LoginScreenProps {
+    onClose: () => void;
+    onLogin: () => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+}
+/**
+ * Login screen component that prompts users to authenticate with LaunchDarkly
+ */
+export declare function LoginScreen(props: LoginScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/TabContentRenderer.d.ts

@@ -11,8 +11,6 @@ interface TabContentRendererProps {
     onToggleReloadOnFlagChange: () => void;
     isAutoCollapseEnabled: boolean;
     onToggleAutoCollapse: () => void;
-    optInToNewFeatures: boolean;
-    onToggleOptInToNewFeatures: () => void;
 }
 export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/core/ui/Toolbar/components/icons/LaunchDarklyIcon.d.ts

@@ -1,5 +1,6 @@
 interface LaunchDarklyIconProps {
     className?: string;
+    onMouseDown?: (event: React.MouseEvent) => void;
 }
-export declare function LaunchDarklyIcon({ className }: LaunchDarklyIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LaunchDarklyIcon({ className, onMouseDown }: LaunchDarklyIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/core/ui/Toolbar/components/icons/ThumbDownIcon.d.ts

@@ -0,0 +1,5 @@
+interface IconProps {
+    className?: string;
+}
+export declare function ThumbDownIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/icons/ThumbUpIcon.d.ts

@@ -0,0 +1,5 @@
+interface IconProps {
+    className?: string;
+}
+export declare function ThumbUpIcon({ className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/ui/Toolbar/components/icons/index.d.ts

@@ -13,3 +13,5 @@ export { CancelIcon } from './CancelIcon';
 export { StarIcon } from './StarIcon';
 export { StarOutlineIcon } from './StarOutlineIcon';
 export { PersonPassword } from './PersonPassword';
+export { ThumbUpIcon } from './ThumbUpIcon';
+export { ThumbDownIcon } from './ThumbDownIcon';

package/dist/core/ui/Toolbar/components/index.d.ts

@@ -1,4 +1,5 @@
 export { ActionButtonsContainer } from './ActionButtonsContainer';
+export { LoginScreen } from './LoginScreen';
 export { CircleLogo } from './CircleLogo';
 export { ConnectionStatus } from './ConnectionStatus';
 export { DoNotTrackWarning } from './DoNotTrackWarning';

package/dist/core/ui/Toolbar/context/ActiveTabProvider.d.ts

@@ -0,0 +1,10 @@
+import type { ActiveTabId } from '../types/toolbar';
+type ActiveTabContextType = {
+    activeTab: ActiveTabId;
+    setActiveTab: (tab: ActiveTabId) => void;
+};
+export declare function ActiveTabProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useActiveTabContext(): ActiveTabContextType;
+export {};

package/dist/core/ui/Toolbar/context/ApiProvider.d.ts

@@ -1,5 +1,9 @@
+import { FlagsPaginationParams, FlagsResponse, ApiFlag, ProjectsResponse } from '../types/ldApi';
 interface ApiProviderContextValue {
-    getFlag: (flagKey: string) => Promise<any>;
+    apiReady: boolean;
+    getFlag: (flagKey: string) => Promise<ApiFlag>;
+    getProjects: () => Promise<ProjectsResponse>;
+    getFlags: (projectKey: string, params?: FlagsPaginationParams) => Promise<FlagsResponse>;
 }
 export interface ApiProviderProps {
     children: React.ReactNode;

package/dist/core/ui/Toolbar/context/AuthProvider.d.ts

@@ -4,6 +4,7 @@ type AuthProviderType = {
     authenticating: boolean;
     loading: boolean;
     setAuthenticating: Dispatch<SetStateAction<boolean>>;
+    logout: () => void;
 };
 export declare function AuthProvider({ children }: {
     children: React.ReactNode;

package/dist/core/ui/Toolbar/context/DevServerProvider.d.ts

@@ -1,15 +1,11 @@
 import type { FC, ReactNode } from 'react';
 import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
 interface DevServerContextValue {
-    state: ToolbarState & {
-        availableProjects: string[];
-        currentProjectKey: string | null;
-    };
+    state: ToolbarState;
     setOverride: (flagKey: string, value: any) => Promise<void>;
     clearOverride: (flagKey: string) => Promise<void>;
     clearAllOverrides: () => Promise<void>;
     refresh: () => Promise<void>;
-    switchProject: (projectKey: string) => Promise<void>;
 }
 export declare const useDevServerContext: () => DevServerContextValue;
 export interface DevServerProviderProps {

package/dist/core/ui/Toolbar/context/FlagsProvider.d.ts

@@ -0,0 +1,12 @@
+import { ApiFlag, FlagsResponse } from '../types/ldApi';
+type FlagsContextType = {
+    flags: ApiFlag[];
+    loading: boolean;
+    getProjectFlags: (projectKey: string) => Promise<FlagsResponse>;
+    resetFlags: () => void;
+};
+export declare const FlagsProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFlagsContext: () => FlagsContextType;
+export {};

package/dist/core/ui/Toolbar/context/IFrameProvider.d.ts

@@ -1,15 +1,17 @@
 import { RefObject } from 'react';
-export declare const IFRAME_API_MESSAGES: {
-    AUTHENTICATION: {
-        authenticated: string;
-        authenticationRequired: string;
-        error: string;
-    };
-    GET_FLAG: {
-        request: string;
-        response: string;
-        error: string;
-    };
+export declare const IFRAME_COMMANDS: {
+    LOGOUT: string;
+    GET_PROJECTS: string;
+    GET_FLAGS: string;
+    GET_FLAG: string;
+};
+export declare const getResponseTopic: (command: string) => string;
+export declare const getErrorTopic: (command: string) => string;
+export declare const IFRAME_EVENTS: {
+    AUTHENTICATED: string;
+    AUTH_REQUIRED: string;
+    AUTH_ERROR: string;
+    API_READY: string;
 };
 interface IFrameProviderProps {
     children: React.ReactNode;

package/dist/core/ui/Toolbar/context/ProjectProvider.d.ts

@@ -0,0 +1,16 @@
+import { ApiProject, ProjectsResponse } from '../types/ldApi';
+type ProjectContextType = {
+    projectKey: string;
+    setProjectKey: (projectKey: string) => void;
+    getProjects: () => Promise<ProjectsResponse>;
+    projects: ApiProject[];
+    loading: boolean;
+};
+interface ProjectProviderProps {
+    children: React.ReactNode;
+    clientSideId?: string;
+    providedProjectKey?: string;
+}
+export declare const ProjectProvider: ({ children, clientSideId, providedProjectKey }: ProjectProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function useProjectContext(): ProjectContextType;
+export {};

package/dist/core/ui/Toolbar/context/index.d.ts

@@ -1,5 +1,6 @@
 export { DevServerProvider, useDevServerContext } from './DevServerProvider';
 export { SearchProvider, useSearchContext } from './SearchProvider';
+export { ActiveTabProvider, useActiveTabContext } from './ActiveTabProvider';
 export { ToolbarUIProvider, useToolbarUIContext } from './ToolbarUIProvider';
 export { FlagSdkOverrideProvider, useFlagSdkOverrideContext, type LocalFlag, type FlagSdkOverrideContextType, } from './FlagSdkOverrideProvider';
 export { AnalyticsProvider, useAnalytics } from './AnalyticsProvider';

package/dist/core/ui/Toolbar/hooks/useToolbarState.d.ts

@@ -1,12 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ActiveTabId } from '../types';
 export interface UseToolbarStateProps {
-    defaultActiveTab: ActiveTabId;
     domId: string;
 }
 export interface UseToolbarStateReturn {
     isExpanded: boolean;
-    activeTab: ActiveTabId;
     previousTab: ActiveTabId;
     isAnimating: boolean;
     searchIsExpanded: boolean;
@@ -14,14 +12,12 @@ export interface UseToolbarStateReturn {
     hasBeenExpanded: boolean;
     reloadOnFlagChangeIsEnabled: boolean;
     isAutoCollapseEnabled: boolean;
-    optInToNewFeatures: boolean;
     toolbarRef: React.RefObject<HTMLDivElement | null>;
     handleTabChange: (tabId: string) => void;
     handleClose: () => void;
     handleSearch: (newSearchTerm: string) => void;
     handleToggleReloadOnFlagChange: () => void;
     handleToggleAutoCollapse: () => void;
-    handleToggleOptInToNewFeatures: () => void;
     handleCircleClick: () => void;
     setIsAnimating: Dispatch<SetStateAction<boolean>>;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;

package/dist/core/ui/Toolbar/types/ldApi.d.ts

@@ -0,0 +1,40 @@
+export interface ApiProject {
+    _id: string;
+    key: string;
+    name: string;
+    environments: ApiEnvironment[];
+}
+export interface ApiEnvironment {
+    _id: string;
+    key: string;
+    name: string;
+}
+export interface ApiFlag {
+    archived: boolean;
+    clientSideAvailability: {
+        usingEnvironmentId: boolean;
+        usingMobileKey: boolean;
+    };
+    customProperties: Record<string, any>;
+    description: string;
+    key: string;
+    kind: 'boolean' | 'string' | 'number' | 'object' | 'multivariate';
+    name: string;
+    variations: ApiVariation[];
+}
+export interface ApiVariation {
+    _id: string;
+    name: string;
+    value: any;
+}
+export interface FlagsResponse {
+    items: ApiFlag[];
+}
+export interface ProjectsResponse {
+    items: ApiProject[];
+}
+export interface FlagsPaginationParams {
+    limit?: number;
+    offset?: number;
+    query?: string;
+}

package/dist/core/ui/Toolbar/utils/localStorage.d.ts

@@ -3,14 +3,12 @@ export declare const TOOLBAR_STORAGE_KEYS: {
     readonly SETTINGS: "ld-toolbar-settings";
     readonly DISABLED: "ld-toolbar-disabled";
     readonly PROJECT: "ld-toolbar-project";
-    readonly OPT_IN_TO_NEW_FEATURES: "ld-toolbar-opt-in-to-new-features";
     readonly STARRED_FLAGS: "ld-toolbar-starred-flags";
 };
 export interface ToolbarSettings {
     position: ToolbarPosition;
     reloadOnFlagChange: boolean;
     autoCollapse: boolean;
-    optInToNewFeatures: boolean;
 }
 export declare const DEFAULT_SETTINGS: ToolbarSettings;
 export declare function saveToolbarPosition(position: ToolbarPosition): void;
@@ -19,7 +17,5 @@ export declare function saveToolbarAutoCollapse(autoCollapse: boolean): void;
 export declare function loadToolbarAutoCollapse(): boolean;
 export declare function saveReloadOnFlagChange(isReloadOnFlagChange: boolean): void;
 export declare function loadReloadOnFlagChange(): boolean;
-export declare function saveOptInToNewFeatures(optInToNewFeatures: boolean): void;
-export declare function loadOptInToNewFeatures(): boolean;
 export declare function loadStarredFlags(): Set<string>;
 export declare function saveStarredFlags(starredFlags: Set<string>): void;

package/dist/core/utils/analytics.d.ts

@@ -1,4 +1,5 @@
 import type { LDClient } from 'launchdarkly-js-client-sdk';
+import type { FeedbackSentiment } from '../../types/analytics';
 import { ToolbarMode } from '../ui/Toolbar/types';
 export declare const ANALYTICS_EVENT_PREFIX = "ld.toolbar";
 /**
@@ -61,12 +62,36 @@ export declare class ToolbarAnalytics {
      * Track Reload on Flag Change toggles
      */
     trackReloadOnFlagChangeToggle(enabled: boolean): void;
+    /**
+     * Track successful login
+     */
+    trackLoginSuccess(): void;
+    /**
+     * Track when user closes the login screen without logging in
+     */
+    trackLoginCancelled(): void;
+    /**
+     * Track when user logs out
+     */
+    trackLogout(): void;
+    /**
+     * Track authentication errors
+     */
+    trackAuthError(error: unknown): void;
     /**
      * Track project switching in dev server mode
      */
     trackProjectSwitch(fromProject: string, toProject: string): void;
+    /**
+     * Track API errors
+     */
+    trackApiError(error: unknown): void;
     /**
      * Track refresh button clicks in dev server mode
      */
     trackRefresh(): void;
+    /**
+     * Track user feedback
+     */
+    trackFeedback(feedback: string, sentiment: FeedbackSentiment): void;
 }

package/dist/index.cjs

@@ -552,9 +552,7 @@ async function lazyLoad(signal, url) {
         throw new Error(`Could not load LaunchDarkly developer toolbar bundle from ${url}`);
     }
 }
-var package_namespaceObject = {
-    rE: "1.5.0"
-};
+var package_namespaceObject = JSON.parse('{"rE":"2.0.0-beta.1"}');
 function useLaunchDarklyToolbar(args) {
     const { toolbarBundleUrl, enabled, ...initConfig } = args;
     const configRef = (0, external_react_namespaceObject.useRef)(null);