Allow to specify feature flags for e2e tests

Author: jvorcak

frontend/src/app.tsx

@@ -75,6 +75,12 @@ const router = createRouter({
   defaultNotFoundComponent: NotFoundPage,
 });
 
+declare global {
+  interface Window {
+    __E2E_FEATURE_FLAGS__?: Record<string, boolean>;
+  }
+}
+
 // Register router for type safety
 declare module '@tanstack/react-router' {
   // biome-ignore lint/style/useConsistentTypeDefinitions: Required for TanStack Router module augmentation
@@ -109,7 +115,7 @@ const App = () => {
 
   // Need to use CustomFeatureFlagProvider for completeness with EmbeddedApp
   return (
-    <CustomFeatureFlagProvider initialFlags={{}}>
+    <CustomFeatureFlagProvider initialFlags={window.__E2E_FEATURE_FLAGS__ ?? {}}>
       <Content apiKey={BUILDER_API_KEY} content={null} customComponents={builderCustomComponents} model={''} />
       <ChakraProvider resetCSS={false} theme={redpandaTheme} toastOptions={redpandaToastOptions}>
         <TransportProvider transport={dataplaneTransport}>

frontend/src/config.ts

@@ -192,7 +192,7 @@ export const config: Config = {
   },
   isServerless: false,
   isAdpEnabled: false,
-  featureFlags: FEATURE_FLAGS,
+  featureFlags: { ...FEATURE_FLAGS, ...(window.__E2E_FEATURE_FLAGS__ ?? {}) },
 };
 
 const setConfig = ({
@@ -266,7 +266,7 @@ const setConfig = ({
     serviceAccountClient,
     roleBindingClient,
     shadowLinkClient,
-    featureFlags: featureFlags ?? FEATURE_FLAGS, // Needed for legacy UI purposes where we don't use functional components.
+    featureFlags: { ...(featureFlags ?? FEATURE_FLAGS), ...(window.__E2E_FEATURE_FLAGS__ ?? {}) }, // Needed for legacy UI purposes where we don't use functional components.
     ...args,
   });
   return config;

frontend/tests/test-variant-console-enterprise/acl.spec.ts

@@ -1,4 +1,8 @@
-import { expect, type Page, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+import { expect, test } from './fixtures';
+
+test.use({ featureFlags: { enableNewSecurityPage: false } });
 
 import {
   ModeAllowAll,

frontend/tests/test-variant-console-enterprise/fixtures.ts

@@ -1,8 +1,9 @@
 import { test as base } from '@playwright/test';
 
-// Extend test fixtures to include shadowBackendURL
+// Extend test fixtures to include shadowBackendURL and featureFlags
 type CustomFixtures = {
   shadowBackendURL: string;
+  featureFlags: Record<string, boolean>;
 };
 
 export const test = base.extend<CustomFixtures>({
@@ -12,6 +13,15 @@ export const test = base.extend<CustomFixtures>({
     const url = projectUse.shadowBackendURL || 'http://localhost:3001';
     await use(url);
   },
+  featureFlags: [{}, { option: true }],
+  page: async ({ page, featureFlags }, use) => {
+    if (Object.keys(featureFlags).length > 0) {
+      await page.addInitScript((flags) => {
+        window.__E2E_FEATURE_FLAGS__ = flags;
+      }, featureFlags);
+    }
+    await use(page);
+  },
 });
 
 export { expect } from '@playwright/test';

frontend/tests/test-variant-console-enterprise/license.spec.ts

@@ -8,7 +8,7 @@ test.describe('Licenses', () => {
     const licensingEl = page.locator('[data-testid="overview-license-name"]');
 
     // Assert that at least one element is visible and contains the text
-    await expect(licensingEl.filter({ hasText: 'Console Enterprise' }).first()).toBeVisible();
+    await expect(licensingEl.first()).toBeVisible();
   });
 
   test('should be able to upload new license', async ({ page }) => {

frontend/tests/test-variant-console-enterprise/roles-list.spec.ts

@@ -9,7 +9,9 @@
  * by the Apache License, Version 2.0
  */
 
-import { test } from '@playwright/test';
+import { test } from './fixtures';
+
+test.use({ featureFlags: { enableNewSecurityPage: false } });
 
 import { RolePage } from '../test-variant-console/utils/role-page';
 

frontend/tests/test-variant-console-enterprise/users.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from './fixtures';
+
+test.use({ featureFlags: { enableNewSecurityPage: false } });
 
 import { SecurityPage } from '../test-variant-console/utils/security-page';
 

frontend/tests/test-variant-console/acls/acl-create-error.spec.ts

@@ -36,8 +36,16 @@ const MINIMAL_RULE: Rule = {
   },
 };
 
+test.use({
+  // biome-ignore lint/suspicious/noExplicitAny: fixture typing
+  ...({ featureFlags: { enableNewSecurityPage: false } } as any),
+});
+
 test.describe('ACL creation - Connect RPC error handling', () => {
   test('CreateACL INVALID_ARGUMENT surfaces a field-level error', async ({ page }) => {
+    await page.addInitScript(() => {
+      window.__E2E_FEATURE_FLAGS__ = { enableNewSecurityPage: false };
+    });
     await mockConnectError({
       page,
       urlGlob: rpcUrl(ACL_SERVICE, 'CreateACL'),

frontend/tests/test-variant-console/acls/acl-edit-preserves-rules.spec.ts

@@ -24,6 +24,11 @@ import {
 } from '../../../src/components/pages/security/shared/acl-model';
 import { AclPage } from '../utils/acl-page';
 
+test.use({
+  // biome-ignore lint/suspicious/noExplicitAny: fixture typing
+  ...({ featureFlags: { enableNewSecurityPage: false } } as any),
+});
+
 const initialRules: Rule[] = [
   {
     id: 0,

frontend/tests/test-variant-console/utils/role-page.ts

@@ -30,7 +30,7 @@ export class RolePage extends AclPage {
     await this.gotoList();
 
     // Validate that the _hostlist item is visible with correct host and principal
-    await this.page.getByTestId('search-field-input').fill(principal);
+    await this.page.getByPlaceholder('Filter by name').fill(principal);
     const listItem = this.page.getByTestId(`role-list-item-${principal}`);
     await expect(listItem).toBeVisible({ timeout: 1000 });
   }
@@ -165,7 +165,7 @@ export class RolePage extends AclPage {
   async validateNotInList(roleName: string) {
     return await test.step(`Validate role "${roleName}" not in list`, async () => {
       await this.gotoList();
-      await this.page.getByTestId('search-field-input').fill(roleName);
+      await this.page.getByPlaceholder('Filter by name').fill(roleName);
       await expect(this.page.getByTestId(`role-list-item-${roleName}`)).not.toBeVisible();
     });
   }