feat: use Unleash React SDK in Admin UI

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>

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"
   }
 }

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'>();

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>
+    );
+};

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
+                                    <UnleashFlagProvider>
-                                        FallbackComponent={LayoutError}
+                                        <ErrorBoundary
-                                        onError={sendErrorToApi}
+                                            FallbackComponent={LayoutError}
-                                    >
+                                            onError={sendErrorToApi}
-                                        <FeedbackProvider>
+                                        >
-                                            <FeedbackCESProvider>
+                                            <FeedbackProvider>
-                                                <StickyProvider>
+                                                <FeedbackCESProvider>
-                                                    <HighlightProvider>
+                                                    <StickyProvider>
-                                                        <InstanceStatus>
+                                                        <HighlightProvider>
-                                                            <ScrollTop />
+                                                            <InstanceStatus>
-                                                            <App />
+                                                                <ScrollTop />
-                                                        </InstanceStatus>
+                                                                <App />
-                                                    </HighlightProvider>
+                                                            </InstanceStatus>
-                                                </StickyProvider>
+                                                        </HighlightProvider>
-                                            </FeedbackCESProvider>
+                                                    </StickyProvider>
-                                        </FeedbackProvider>
+                                                </FeedbackCESProvider>
-                                    </ErrorBoundary>
+                                            </FeedbackProvider>
+                                        </ErrorBoundary>
+                                    </UnleashFlagProvider>
                                 </PlausibleProvider>
                             </AnnouncerProvider>
                         </ThemeProvider>

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 {

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"

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,

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,
     };
 }
 

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

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: {

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(

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 {

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;
 }

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>(

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,
+    );
 }

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`,