Plugin E2E: OpenFeature support (#2408)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: sunker

packages/plugin-e2e/src/fixtures/bootData.ts

@@ -0,0 +1,38 @@
+import { PlaywrightTestArgs, TestFixture } from '@playwright/test';
+
+interface BootData {
+  version: string | undefined;
+  namespace: string | undefined;
+}
+
+type BootDataFixture = TestFixture<BootData, PlaywrightTestArgs>;
+
+/**
+ * Internal fixture that fetches boot data from Grafana.
+ * This fixture is not exposed in the test API - it's only used by other fixtures
+ * to consolidate boot data fetching to avoid creating multiple temporary pages.
+ */
+export const bootData: BootDataFixture = async ({ context }, use) => {
+  // creates a temporary page to avoid circular dependencies between fixtures
+  const tempPage = await context.newPage();
+  try {
+    await tempPage.goto('/');
+    const bootDataSettings = await tempPage.evaluate(() => {
+      return {
+        version: window.grafanaBootData.settings.buildInfo.version,
+        namespace: window.grafanaBootData.settings.namespace,
+      };
+    });
+
+    await use({
+      version: bootDataSettings.version,
+      namespace: bootDataSettings.namespace,
+    });
+  } catch (error) {
+    console.error('@grafana/plugin-e2e: Failed to fetch boot data', error);
+    // provide undefined values if fetch fails (fixtures will apply their own defaults)
+    await use({ version: undefined, namespace: undefined });
+  } finally {
+    await tempPage.close();
+  }
+};

packages/plugin-e2e/src/fixtures/getOpenFeatureFlag.ts

@@ -0,0 +1,48 @@
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../types';
+
+type GetBooleanOpenFeatureFlagFixture = TestFixture<(flagKey: string) => Promise<boolean>, PlaywrightArgs>;
+
+export const getBooleanOpenFeatureFlag: GetBooleanOpenFeatureFlagFixture = async (
+  { page, selectors, namespace },
+  use
+) => {
+  await use(async (flagKey: string) => {
+    try {
+      const url = selectors.apis.OpenFeature.ofrepSinglePath(namespace, flagKey);
+
+      // make the request from within the page context to use the same authentication
+      const result = await page.evaluate(async (flagUrl) => {
+        const response = await fetch(flagUrl);
+
+        if (!response.ok) {
+          return {
+            error: true,
+            status: response.status,
+            statusText: response.statusText,
+          };
+        }
+
+        const body = await response.json();
+        return { error: false, value: body.value };
+      }, url);
+
+      if (result.error) {
+        throw new Error(`Failed to fetch OpenFeature flag "${flagKey}": ${result.status} ${result.statusText}`);
+      }
+
+      const value = result.value;
+
+      if (typeof value !== 'boolean') {
+        throw new Error(
+          `Expected boolean value for flag "${flagKey}", but got ${typeof value}. Use a different getter for non-boolean flags.`
+        );
+      }
+
+      return value;
+    } catch (error) {
+      console.error(`@grafana/plugin-e2e: Failed to get OpenFeature flag "${flagKey}"`, error);
+      throw error;
+    }
+  });
+};

packages/plugin-e2e/src/fixtures/grafanaVersion.ts

@@ -1,13 +1,12 @@
-import { PlaywrightTestArgs, TestFixture } from '@playwright/test';
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../types';
 
-type GrafanaVersion = TestFixture<string, PlaywrightTestArgs>;
+type GrafanaVersion = TestFixture<string, PlaywrightArgs>;
 
-export const grafanaVersion: GrafanaVersion = async ({ page }, use) => {
-  let grafanaVersion = process.env.GRAFANA_VERSION ?? '';
-  if (!grafanaVersion) {
-    await page.goto('/');
-    grafanaVersion = await page.evaluate('window.grafanaBootData.settings.buildInfo.version');
-  }
+export const grafanaVersion: GrafanaVersion = async ({ bootData }, use) => {
+  // plugins may override version in CI via env var
+  const version = process.env.GRAFANA_VERSION || bootData.version || '';
 
-  await use(grafanaVersion.replace(/\-.*/, ''));
+  // strip version suffix (e.g., "11.0.0-pre" -> "11.0.0")
+  await use(version.replace(/\-.*/, ''));
 };

packages/plugin-e2e/src/fixtures/isFeatureToggleEnabled.ts

@@ -3,14 +3,18 @@ import { PlaywrightArgs } from '../types';
 
 type FeatureToggleFixture = TestFixture<<T = object>(featureToggle: keyof T) => Promise<boolean>, PlaywrightArgs>;
 
-export const isFeatureToggleEnabled: FeatureToggleFixture = async ({ page }, use) => {
+export const isLegacyFeatureToggleEnabled: FeatureToggleFixture = async ({ page }, use) => {
   await use(async <T = object>(featureToggle: keyof T) => {
     const featureToggles: T = await page.evaluate('window.grafanaBootData.settings.featureToggles');
     return Boolean(featureToggles[featureToggle]);
   });
 };
 
-export const isFeatureEnabled = async (page: Page, featureToggle: string) => {
+export const isFeatureToggleEnabled: FeatureToggleFixture = isLegacyFeatureToggleEnabled;
+
+export const isLegacyFeatureEnabled = async (page: Page, featureToggle: string) => {
   const featureToggles: Record<string, string> = await page.evaluate('window.grafanaBootData.settings.featureToggles');
   return Boolean(featureToggles[featureToggle]);
 };
+
+export const isFeatureEnabled = isLegacyFeatureEnabled;

packages/plugin-e2e/src/fixtures/namespace.ts

@@ -0,0 +1,9 @@
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../types';
+
+type Namespace = TestFixture<string, PlaywrightArgs>;
+
+export const namespace: Namespace = async ({ bootData }, use) => {
+  // default to 'default' if namespace is not available
+  await use(bootData.namespace || 'default');
+};

packages/plugin-e2e/src/fixtures/openFeature.ts

@@ -0,0 +1,164 @@
+import { Page, Route } from '@playwright/test';
+
+import { FeatureFlagValue, PlaywrightArgs } from '../types';
+
+/**
+ * Represents a single flag in the OFREP response
+ */
+interface OFREPFlag {
+  key: string;
+  value: FeatureFlagValue;
+  reason: string;
+  variant: string;
+}
+
+/**
+ * Represents the OFREP bulk evaluation response body
+ */
+interface OFREPBulkResponse {
+  flags: OFREPFlag[];
+}
+
+/**
+ * Delays execution for the specified number of milliseconds
+ */
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Handles the OFREP bulk evaluation endpoint by merging flags into the response
+ */
+async function handleBulkEvaluationRoute(
+  route: Route,
+  flags: Record<string, FeatureFlagValue>,
+  latency: number
+): Promise<void> {
+  let response: Awaited<ReturnType<Route['fetch']>> | undefined;
+
+  try {
+    response = await route.fetch();
+
+    if (!response.ok()) {
+      await route.fulfill({ response });
+      return;
+    }
+
+    const body: OFREPBulkResponse = await response.json();
+
+    // override existing flags with provided values
+    for (const flag of body.flags) {
+      if (flag.key in flags) {
+        flag.value = flags[flag.key];
+        flag.reason = 'STATIC';
+        flag.variant = 'playwright-override';
+      }
+    }
+
+    // add any flags not present in the original response
+    for (const [key, value] of Object.entries(flags)) {
+      const exists = body.flags.some((f) => f.key === key);
+      if (!exists) {
+        body.flags.push({
+          key,
+          value,
+          reason: 'STATIC',
+          variant: 'playwright-override',
+        });
+      }
+    }
+
+    // Apply artificial latency if specified
+    if (latency > 0) {
+      await delay(latency);
+    }
+
+    await route.fulfill({
+      response,
+      body: JSON.stringify(body),
+      headers: { 'content-type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('@grafana/plugin-e2e: Failed to intercept OFREP bulk evaluation', error);
+    // fulfill with original response if available, otherwise return error response
+    if (response) {
+      await route.fulfill({ response });
+    } else {
+      await route.fulfill({
+        status: 500,
+        body: JSON.stringify({ error: 'Failed to intercept OFREP request' }),
+        headers: { 'content-type': 'application/json' },
+      });
+    }
+  }
+}
+
+/**
+ * Handles the OFREP single flag evaluation endpoint by returning the override if defined
+ */
+async function handleSingleFlagRoute(
+  route: Route,
+  flags: Record<string, FeatureFlagValue>,
+  latency: number
+): Promise<void> {
+  try {
+    const url = new URL(route.request().url());
+    const flagKey = url.pathname.split('/').pop();
+
+    if (flagKey && flagKey in flags) {
+      // apply artificial latency if specified
+      if (latency > 0) {
+        await delay(latency);
+      }
+
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          key: flagKey,
+          value: flags[flagKey],
+          reason: 'STATIC',
+          variant: 'playwright-override',
+        }),
+        headers: { 'content-type': 'application/json' },
+      });
+      return;
+    }
+
+    // fetch the original response if we don't have an override
+    const response = await route.fetch();
+    await route.fulfill({ response });
+  } catch (error) {
+    console.error('@grafana/plugin-e2e: Failed to intercept OFREP single flag evaluation', error);
+    // return error response since we can't continue after route.fetch()
+    await route.fulfill({
+      status: 500,
+      body: JSON.stringify({ error: 'Failed to intercept OFREP request' }),
+      headers: { 'content-type': 'application/json' },
+    });
+  }
+}
+
+/**
+ * Sets up route interception for OpenFeature OFREP endpoints
+ */
+export async function setupOpenFeatureRoutes(
+  page: Page,
+  openFeature: Record<string, FeatureFlagValue>,
+  latency: number,
+  selectors: PlaywrightArgs['selectors']
+): Promise<void> {
+  console.log('@grafana/plugin-e2e: setting up OpenFeature OFREP interception', {
+    openFeature,
+    latency,
+  });
+
+  // intercept bulk evaluation endpoint
+  await page.route(selectors.apis.OpenFeature.ofrepBulkPattern, async (route) => {
+    await handleBulkEvaluationRoute(route, openFeature, latency);
+  });
+
+  // intercept single flag evaluation endpoint
+  await page.route(selectors.apis.OpenFeature.ofrepSinglePattern, async (route) => {
+    await handleSingleFlagRoute(route, openFeature, latency);
+  });
+}

packages/plugin-e2e/src/fixtures/page.ts

@@ -1,30 +1,51 @@
 import { Page, TestFixture } from '@playwright/test';
+import { gte } from 'semver';
 
 import { PlaywrightArgs } from '../types';
+import { setupOpenFeatureRoutes } from './openFeature';
 import { overrideGrafanaBootData } from './scripts/overrideGrafanaBootData';
 
 type PageFixture = TestFixture<Page, PlaywrightArgs>;
 
 /**
  * This fixture ensures the feature toggles defined in the Playwright config are being used in Grafana frontend.
- * If Grafana version >= 10.1.0, feature toggles are read from to the 'grafana.featureToggles' key in the browser's localStorage.
- * Otherwise, feature toggles are added directly to the window.grafanaBootData.settings.featureToggles object.
+ *
+ * Feature toggles are applied in two ways:
+ * 1. Legacy: Added directly to the window.grafanaBootData.settings.featureToggles object via init script
+ * 2. OpenFeature: Intercepted and merged into OFREP API responses (Grafana 12.1.0+)
+ *
+ * The `featureToggles` option uses the legacy approach only.
+ * The `openFeature` option uses OFREP API interception and requires Grafana >= 12.1.0.
  *
  * page.addInitScript adds a script which would be evaluated in one of the following scenarios:
  * - Whenever the page is navigated.
  * - Whenever the child frame is attached or navigated. In this case, the script is evaluated in the context of the
  *   newly attached frame.
  * The script is evaluated after the document was created but before any of its scripts were run.
  */
-export const page: PageFixture = async ({ page, featureToggles, userPreferences }, use) => {
-  if (Object.keys(featureToggles).length > 0 || Object.keys(userPreferences).length > 0) {
+export const page: PageFixture = async (
+  { page, featureToggles, openFeature, userPreferences, grafanaVersion, selectors },
+  use
+) => {
+  const hasFeatureToggles = Object.keys(featureToggles).length > 0;
+  const hasOpenFeature = Object.keys(openFeature.flags).length > 0;
+  const hasUserPreferences = Object.keys(userPreferences).length > 0;
+
+  // set up legacy feature toggle overrides via init script
+  if (hasFeatureToggles || hasUserPreferences) {
     try {
       await page.addInitScript(overrideGrafanaBootData, { featureToggles, userPreferences });
     } catch (error) {
       console.error('Failed to set feature toggles', error);
     }
   }
 
+  // set up OpenFeature OFREP route interception BEFORE navigation
+  // only runs if openFeature flags are provided and Grafana version >= 12.1.0
+  if (hasOpenFeature && gte(grafanaVersion, '12.1.0')) {
+    await setupOpenFeatureRoutes(page, openFeature.flags, openFeature.latency ?? 0, selectors);
+  }
+
   await page.goto('/');
   await use(page);
 };