feat: use Unleash React SDK in Admin UI

2025-09-05 17:53:12 +02:00 · 2025-04-08 16:04:15 +02:00 · 2025-04-08 16:04:15 +02:00 · 201a8cb884
commit 201a8cb884
parent 28a69afe63
17 changed files with 212 additions and 21 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -7,6 +7,7 @@
        <meta name="baseUriPath" content="::baseUriPath::" />
        <meta name="cdnPrefix" content="::cdnPrefix::" />
        <meta name="uiFlags" content="::uiFlags::" />
+        <meta name="unleashToken" content="::unleashToken::" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="unleash" />
        <title>Unleash</title>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -69,6 +69,7 @@
    "@types/uuid": "^9.0.0",
    "@uiw/codemirror-theme-duotone": "4.23.10",
    "@uiw/react-codemirror": "4.23.10",
+    "@unleash/proxy-client-react": "^5.0.0",
    "@vitejs/plugin-react": "4.3.4",
    "cartesian": "^1.0.1",
    "chart.js": "3.9.1",
@ -118,6 +119,7 @@
    "swr": "2.3.3",
    "tss-react": "4.9.15",
    "typescript": "5.4.5",
+    "unleash-proxy-client": "^3.7.3",
    "use-query-params": "^2.2.1",
    "vanilla-jsoneditor": "^0.23.0",
    "vite": "5.4.16",
@ -158,6 +160,7 @@
  },
  "packageManager": "yarn@4.7.0",
  "dependencies": {
+    "dev": "^0.1.3",
    "json-2-csv": "^5.5.5"
  }
 }
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@ -28,8 +28,8 @@ import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHolid
 import { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg';
 import { ReactComponent as LogoOnlyWhite } from 'assets/img/logo.svg';
 import { ReactComponent as LogoOnly } from 'assets/img/logoDark.svg';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { Link } from 'react-router-dom';
+import { useFlag } from '@unleash/proxy-client-react';

 export const MobileNavigationSidebar: FC<{
    onClick: () => void;
@ -110,7 +110,7 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
    NewInUnleash,
 }) => {
    const { routes } = useRoutes();
-    const celebatoryUnleash = useUiFlag('celebrateUnleash');
+    const celebatoryUnleash = useFlag('celebrateUnleashFrontend');

    const [mode, setMode] = useNavigationMode();
    const [expanded, changeExpanded] = useExpanded<'configure' | 'admin'>();
--- a/frontend/src/component/providers/UnleashFlagProvider/UnleashFlagProvider.tsx
+++ b/frontend/src/component/providers/UnleashFlagProvider/UnleashFlagProvider.tsx
@ -0,0 +1,57 @@
+import type React from 'react';
+import { type FC, useEffect } from 'react';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import FlagProvider, { UnleashClient } from '@unleash/proxy-client-react';
+
+const UNLEASH_API = 'https://hosted.edge.getunleash.io/api/frontend';
+const DEV_TOKEN = '';
+
+let client: UnleashClient;
+let token: string;
+let started: boolean = false;
+
+export const UnleashFlagProvider: FC<{ children?: React.ReactNode }> = ({
+    children,
+}) => {
+    const getUnleashFrontendToken = (): string => {
+        const el = document.querySelector<HTMLMetaElement>(
+            'meta[name="unleashToken"]',
+        );
+
+        const content = el?.content ?? '::unleashToken::';
+        return content === '::unleashToken::' ? DEV_TOKEN : content;
+    };
+
+    // We only want to create a single client.
+    if (!client) {
+        token = getUnleashFrontendToken();
+
+        client = new UnleashClient({
+            url: UNLEASH_API,
+            clientKey: token || 'offline',
+            refreshInterval: 1,
+            appName: 'Unleash Cloud UI',
+        });
+    }
+
+    const { uiConfig } = useUiConfig();
+
+    useEffect(() => {
+        console.log('uiConfig.unleashToken', token);
+        if (uiConfig.unleashContext && token) {
+            client.updateContext(uiConfig.unleashContext);
+            if (!started) {
+                started = true;
+                client.start();
+            }
+        } else {
+            // nothing
+        }
+    }, [uiConfig.unleashContext]);
+
+    return (
+        <FlagProvider unleashClient={client} startClient={false}>
+            {children}
+        </FlagProvider>
+    );
+};
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -22,6 +22,7 @@ import { Error as LayoutError } from './component/layout/Error/Error';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useRecordUIErrorApi } from 'hooks/api/actions/useRecordUIErrorApi/useRecordUiErrorApi';
 import { HighlightProvider } from 'component/common/Highlight/HighlightProvider';
+import { UnleashFlagProvider } from 'component/providers/UnleashFlagProvider/UnleashFlagProvider';

 window.global ||= window;

@ -50,23 +51,25 @@ const ApplicationRoot = () => {
                        <ThemeProvider>
                            <AnnouncerProvider>
                                <PlausibleProvider>
-                                    <ErrorBoundary
-                                        FallbackComponent={LayoutError}
-                                        onError={sendErrorToApi}
-                                    >
-                                        <FeedbackProvider>
-                                            <FeedbackCESProvider>
-                                                <StickyProvider>
-                                                    <HighlightProvider>
-                                                        <InstanceStatus>
-                                                            <ScrollTop />
-                                                            <App />
-                                                        </InstanceStatus>
-                                                    </HighlightProvider>
-                                                </StickyProvider>
-                                            </FeedbackCESProvider>
-                                        </FeedbackProvider>
-                                    </ErrorBoundary>
+                                    <UnleashFlagProvider>
+                                        <ErrorBoundary
+                                            FallbackComponent={LayoutError}
+                                            onError={sendErrorToApi}
+                                        >
+                                            <FeedbackProvider>
+                                                <FeedbackCESProvider>
+                                                    <StickyProvider>
+                                                        <HighlightProvider>
+                                                            <InstanceStatus>
+                                                                <ScrollTop />
+                                                                <App />
+                                                            </InstanceStatus>
+                                                        </HighlightProvider>
+                                                    </StickyProvider>
+                                                </FeedbackCESProvider>
+                                            </FeedbackProvider>
+                                        </ErrorBoundary>
+                                    </UnleashFlagProvider>
                                </PlausibleProvider>
                            </AnnouncerProvider>
                        </ThemeProvider>
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import type { Variant } from 'utils/variants';
 import type { ResourceLimitsSchema } from '../openapi';
+import {} from '@unleash/proxy-client-react/dist/FlagContext';
+import type { IMutableContext } from 'unleash-proxy-client';

 export interface IUiConfig {
    authenticationType?: string;
@ -34,6 +36,8 @@ export interface IUiConfig {
    oidcConfiguredThroughEnv?: boolean;
    samlConfiguredThroughEnv?: boolean;
    maxSessionsCount?: number;
+    unleashToken?: string;
+    unleashContext?: IMutableContext;
 }

 export interface IProclamationToast {
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -3371,6 +3371,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@unleash/proxy-client-react@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@unleash/proxy-client-react@npm:5.0.0"
+  peerDependencies:
+    unleash-proxy-client: ^3.7.3
+  checksum: 10c0/cf8d227a2db06c5ca09be4be45885306b71733540ace3980ff3794bfaa22c6b38a15446e46ca8880478c018d8ecd0f14e14cb203a6c3ba9b901853db0a9890ba
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:4.3.4":
  version: 4.3.4
  resolution: "@vitejs/plugin-react@npm:4.3.4"
@ -3842,6 +3851,15 @@ __metadata:
  languageName: node
  linkType: hard

+"bindings@npm:^1.3.1":
+  version: 1.5.0
+  resolution: "bindings@npm:1.5.0"
+  dependencies:
+    file-uri-to-path: "npm:1.0.0"
+  checksum: 10c0/3dab2491b4bb24124252a91e656803eac24292473e56554e35bbfe3cc1875332cfa77600c3bac7564049dc95075bf6fcc63a4609920ff2d64d0fe405fcf0d4ba
+  languageName: node
+  linkType: hard
+
 "blob-util@npm:^2.0.2":
  version: 2.0.2
  resolution: "blob-util@npm:2.0.2"
@ -4777,6 +4795,17 @@ __metadata:
  languageName: node
  linkType: hard

+"dev@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "dev@npm:0.1.3"
+  dependencies:
+    inotify: "npm:>= 0.1.6"
+  bin:
+    node-dev: ./node-dev.sh
+  checksum: 10c0/125fb02ab0e693b6f4863edf0304b5e6a37303e66a71795a8d14a96501764620910a4419280c1110fb7d896191ddd707647ea1145b28b6649abb607162a033bc
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
  version: 29.6.3
  resolution: "diff-sequences@npm:29.6.3"
@ -5523,6 +5552,13 @@ __metadata:
  languageName: node
  linkType: hard

+"file-uri-to-path@npm:1.0.0":
+  version: 1.0.0
+  resolution: "file-uri-to-path@npm:1.0.0"
+  checksum: 10c0/3b545e3a341d322d368e880e1c204ef55f1d45cdea65f7efc6c6ce9e0c4d22d802d5629320eb779d006fe59624ac17b0e848d83cc5af7cd101f206cb704f5519
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^7.1.1":
  version: 7.1.1
  resolution: "fill-range@npm:7.1.1"
@ -6141,6 +6177,18 @@ __metadata:
  languageName: node
  linkType: hard

+"inotify@npm:>= 0.1.6":
+  version: 1.4.6
+  resolution: "inotify@npm:1.4.6"
+  dependencies:
+    bindings: "npm:^1.3.1"
+    nan: "npm:^2.12.1"
+    node-gyp: "npm:latest"
+  checksum: 10c0/8415dbb54cd3ab8232951cdf1d91b1f0ca3c5925617a47d985e650ff3a038efb265acfff0f4f826db1ef1f2f484f516e3e7874d47d059015957818149d9d932e
+  conditions: os=linux
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.0.7":
  version: 1.0.7
  resolution: "internal-slot@npm:1.0.7"
@ -7629,6 +7677,15 @@ __metadata:
  languageName: node
  linkType: hard

+"nan@npm:^2.12.1":
+  version: 2.22.2
+  resolution: "nan@npm:2.22.2"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10c0/971f963b8120631880fa47a389c71b00cadc1c1b00ef8f147782a3f4387d4fc8195d0695911272d57438c11562fb27b24c4ae5f8c05d5e4eeb4478ba51bb73c5
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
  version: 3.3.8
  resolution: "nanoid@npm:3.3.8"
@ -9609,6 +9666,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tiny-emitter@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "tiny-emitter@npm:2.1.0"
+  checksum: 10c0/459c0bd6e636e80909898220eb390e1cba2b15c430b7b06cec6ac29d87acd29ef618b9b32532283af749f5d37af3534d0e3bde29fdf6bcefbf122784333c953d
+  languageName: node
+  linkType: hard
+
 "tinybench@npm:^2.9.0":
  version: 2.9.0
  resolution: "tinybench@npm:2.9.0"
@ -10123,6 +10187,7 @@ __metadata:
    "@types/uuid": "npm:^9.0.0"
    "@uiw/codemirror-theme-duotone": "npm:4.23.10"
    "@uiw/react-codemirror": "npm:4.23.10"
+    "@unleash/proxy-client-react": "npm:^5.0.0"
    "@vitejs/plugin-react": "npm:4.3.4"
    cartesian: "npm:^1.0.1"
    chart.js: "npm:3.9.1"
@ -10139,6 +10204,7 @@ __metadata:
    debounce: "npm:2.2.0"
    deep-diff: "npm:1.0.2"
    dequal: "npm:2.0.3"
+    dev: "npm:^0.1.3"
    fast-json-patch: "npm:3.1.1"
    http-proxy-middleware: "npm:2.0.7"
    immer: "npm:9.0.21"
@ -10173,6 +10239,7 @@ __metadata:
    swr: "npm:2.3.3"
    tss-react: "npm:4.9.15"
    typescript: "npm:5.4.5"
+    unleash-proxy-client: "npm:^3.7.3"
    use-query-params: "npm:^2.2.1"
    vanilla-jsoneditor: "npm:^0.23.0"
    vite: "npm:5.4.16"
@ -10184,6 +10251,16 @@ __metadata:
  languageName: unknown
  linkType: soft

+"unleash-proxy-client@npm:^3.7.3":
+  version: 3.7.3
+  resolution: "unleash-proxy-client@npm:3.7.3"
+  dependencies:
+    tiny-emitter: "npm:^2.1.0"
+    uuid: "npm:^9.0.1"
+  checksum: 10c0/3a061d4e3587325046fea0133fe405fef143dbcfdd6ed20c54200b46a22bf49acdccb6dcc0b250400a9ace2350b0065f856731a5712598d27c1e9266a141f559
+  languageName: node
+  linkType: hard
+
 "untildify@npm:^4.0.0":
  version: 4.0.0
  resolution: "untildify@npm:4.0.0"
@ -10298,6 +10375,15 @@ __metadata:
  languageName: node
  linkType: hard

+"uuid@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "uuid@npm:9.0.1"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 10c0/1607dd32ac7fc22f2d8f77051e6a64845c9bce5cd3dd8aa0070c074ec73e666a1f63c7b4e0f4bf2bc8b9d59dc85a15e17807446d9d2b17c8485fbc2147b27f9b
+  languageName: node
+  linkType: hard
+
 "uvu@npm:^0.5.0":
  version: 0.5.6
  resolution: "uvu@npm:0.5.6"
--- a/src/lib/snapshots/create-config.test.ts.snap
+++ b/src/lib/snapshots/create-config.test.ts.snap
@ -68,7 +68,6 @@ exports[`should create default config 1`] = `
    "_events": {},
    "_eventsCount": 0,
    "_maxListeners": undefined,
-    Symbol(shapeMode): false,
    Symbol(kCapture): false,
  },
  "feedbackUriPath": undefined,
@ -158,6 +157,7 @@ exports[`should create default config 1`] = `
  "ui": {
    "environment": "Open Source",
  },
+  "unleashFrontendToken": undefined,
  "userInactivityThresholdInDays": 180,
  "versionCheck": {
    "enable": true,
--- a/src/lib/create-config.ts
+++ b/src/lib/create-config.ts
@ -751,6 +751,9 @@ export function createConfig(options: IUnleashOptions): IUnleashConfig {

    const openAIAPIKey = process.env.OPENAI_API_KEY;

+    const unleashFrontendToken =
+        options.unleashFrontendToken || process.env.UNLEASH_FRONTEND_TOKEN;
+
    const defaultDaysToBeConsideredInactive = 180;
    const userInactivityThresholdInDays =
        options.userInactivityThresholdInDays ??
@ -801,6 +804,7 @@ export function createConfig(options: IUnleashOptions): IUnleashConfig {
        openAIAPIKey,
        userInactivityThresholdInDays,
        buildDate: process.env.BUILD_DATE,
+        unleashFrontendToken,
    };
 }

--- a/src/lib/middleware/response-time-metrics.test.ts
+++ b/src/lib/middleware/response-time-metrics.test.ts
@ -31,6 +31,7 @@ const flagResolver = {
    isEnabled: jest.fn(),
    getAll: jest.fn(),
    getVariant: jest.fn(),
+    getStaticContext: jest.fn(),
 };

 // Make sure it's always cleaned up
--- a/src/lib/openapi/spec/ui-config-schema.ts
+++ b/src/lib/openapi/spec/ui-config-schema.ts
@ -191,6 +191,11 @@ export const uiConfigSchema = {
            description: 'The maximum number of sessions that a user has.',
            example: 10,
        },
+        unleashContext: {
+            type: 'object',
+            description:
+                'The context object used to configure the Unleash instance.',
+        },
    },
    components: {
        schemas: {
--- a/src/lib/routes/admin-api/config.ts
+++ b/src/lib/routes/admin-api/config.ts
@ -174,6 +174,12 @@ class ConfigController extends Controller {
            ...expFlags,
        };

+        const unleashContext = {
+            ...this.flagResolver.getStaticContext(), //clientId etc.
+            email: req.user.email,
+            userId: req.user.id,
+        };
+
        const response: UiConfigSchema = {
            ...this.config.ui,
            flags,
@ -192,6 +198,7 @@ class ConfigController extends Controller {
            maintenanceMode,
            feedbackUriPath: this.config.feedbackUriPath,
            maxSessionsCount,
+            unleashContext: unleashContext,
        };

        this.openApiService.respondWithValidation(
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@ -352,6 +352,7 @@ export interface IFlagResolver {
    getAll: (context?: IFlagContext) => IFlags;
    isEnabled: (expName: IFlagKey, context?: IFlagContext) => boolean;
    getVariant: (expName: IFlagKey, context?: IFlagContext) => Variant;
+    getStaticContext: () => IFlagContext;
 }

 export interface IExternalFlagResolver {
--- a/src/lib/types/option.ts
+++ b/src/lib/types/option.ts
@ -4,6 +4,7 @@ import type { LogLevel, LogProvider } from '../logger';
 import type { ILegacyApiTokenCreate } from './models/api-token';
 import type {
    IExperimentalOptions,
+    IFlagContext,
    IFlagResolver,
    IFlags,
 } from './experimental';
@ -165,6 +166,7 @@ export interface IUnleashOptions {
        >
    >;
    userInactivityThresholdInDays?: number;
+    unleashFrontendToken?: string;
 }

 export interface IEmailOption {
@ -198,6 +200,8 @@ export interface IUIConfig {
        title: string;
    }[];
    flags?: IFlags;
+    unleashToken?: string;
+    unleashContext?: IFlagContext;
 }

 export interface ICspDomainOptions {
@ -287,4 +291,5 @@ export interface IUnleashConfig {
    openAIAPIKey?: string;
    userInactivityThresholdInDays: number;
    buildDate?: string;
+    unleashFrontendToken?: string;
 }
--- a/src/lib/util/flag-resolver.ts
+++ b/src/lib/util/flag-resolver.ts
@ -61,6 +61,10 @@ export default class FlagResolver implements IFlagResolver {
        }
        return this.externalResolver.getVariant(expName, context);
    }
+
+    getStaticContext(): IFlagContext {
+        return {};
+    }
 }

 export const getVariantValue = <T = string>(
--- a/src/lib/util/load-index-html.ts
+++ b/src/lib/util/load-index-html.ts
@ -10,6 +10,7 @@ export async function loadIndexHTML(
 ): Promise<string> {
    const { cdnPrefix, baseUriPath = '' } = config.server;
    const uiFlags = encodeURI(JSON.stringify(config.ui.flags || '{}'));
+    const unleashToken = config.unleashFrontendToken;

    let indexHTML: string;
    if (cdnPrefix) {
@ -23,5 +24,11 @@ export async function loadIndexHTML(
            .toString();
    }

-    return rewriteHTML(indexHTML, baseUriPath, cdnPrefix, uiFlags);
+    return rewriteHTML(
+        indexHTML,
+        baseUriPath,
+        cdnPrefix,
+        uiFlags,
+        unleashToken,
+    );
 }
--- a/src/lib/util/rewriteHTML.ts
+++ b/src/lib/util/rewriteHTML.ts
@ -3,6 +3,7 @@ export const rewriteHTML = (
    rewriteValue: string,
    cdnPrefix?: string,
    uiFlags?: string,
+    unleashToken?: string,
 ): string => {
    let result = input;
    result = result.replace(/::baseUriPath::/gi, rewriteValue);
@ -13,6 +14,8 @@ export const rewriteHTML = (

    result = result.replace(/::uiFlags::/gi, uiFlags || '{}');

+    result = result.replace(/::unleashToken::/gi, unleashToken || '');
+
    result = result.replace(
        /\/static/gi,
        `${cdnPrefix || rewriteValue}/static`,