CONSOLE-4734: Multi-group impersonation Combined (#15612)

* docs: clarify comment for multi-group impersonation feature flag

* Add groups to the redux store and actions

* CONSOLE-4784: WebSocket Subprotocol Parsing for multi-group impersonation

Support multiple Impersonate-Group subprotocols on WebSocket connections.
Maintains backward compatibility for single-group impersonation.

* CONSOLE-4788: Backend Request Headers Updates for multi-group impersonation

Handle X-Console-Impersonate-Groups header by splitting comma-separated
groups into multiple Impersonate-Group headers for Kubernetes API.

* CONSOLE-4785: GraphQL Context Updates for multi-group impersonation

Update GraphQL context to support array-valued headers for multi-group
impersonation. Change headers type from map[string]string to map[string]interface{}
to support both single string values and []string arrays.

* CONSOLE-4789: UI Actions for multi-group impersonation fetch utilities

Update fetch utilities to handle multi-group impersonation:
- Support array-valued Impersonate-Group headers
- Convert array to X-Console-Impersonate-Groups for fetch() API compatibility
- Add UserWithGroups kind support in header generation

* CONSOLE-4787: Redux Actions & States Updates for multi-group impersonation

Add multi-group support to Redux actions:
- Update startImpersonate to accept groups parameter
- Encode multiple groups as WebSocket subprotocols in UserWithGroups mode
- Pass groups to beginImpersonate action
- Expose store and UIActions for testing (temporary)

* CONSOLE-4782: Group Impersonation Modal

Add modal component for multi-group user impersonation:
- TypeScript React component with group selection
- Multi-select group input with search/filter
- Chip display for selected groups
- Form validation for username
- Internationalization support

* CONSOLE-4782: UI Integration for multi-group impersonation

Integrate multi-group impersonation into the UI:
- Update impersonation banner to display multiple groups
- Add modal trigger in masthead toolbar
- Update user component to show impersonated user
- Add feature flag checks in app component
- Add masthead menu items for start/stop impersonation
- Add enabled parameter to usePackageManifestCheck hook

* fix: fix logonoff's review comment

* fix: fix the suggestions from Kevin regarding the frontend UI changes in the multi-group impersonation modal.

* nit: formatting change

* fix: fix the review comment regarding the frontend changes provided by logonoff
Co-authored-by: logonoff <[email protected]>

* feat: integrate dynamic group fetching in ImpersonateUserModal

* test: Add IMPERSONATE flag to featureReducer tests

* fix: revert the debug work

* fix: fix logonoff's review comment

* i18n: run translation

* refactor: use useCallBack to prevent unnecessary rerendering

* feat: add error alert for group loading failure in ImpersonateUserModal

* feat: enhance accessibility in ImpersonateUserModal with ARIA labels and descriptions

* fix: remove outdated comment

* refactor: simplify impersonation group handling with backward compatibility

Consolidate ImpersonateGroup and ImpersonateGroups fields into a single
ImpersonateGroup []string field with custom UnmarshalJSON method that
supports both string (single group) and array (multiple groups) formats
for backward compatibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* CONSOLE-4782: Remove IMPERSONATE feature flag

Multi-group impersonation is now always enabled. Removed the feature flag
and all associated conditional checks to simplify the codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* fix: refresh the page after stop impersonation

* fix: address the review comments from @TheRealJon

* test: add comprehensive unit tests for ImpersonateUserModal

Add 21 unit tests covering:
- Modal rendering in open/closed states
- Username input handling (typing, prefilled, readonly, edge cases)
- Groups multi-select field functionality
- Form validation (empty username, disabled submit button)
- Loading and error states
- Form submission with trimming and modal closing
- Modal lifecycle and reset behavior
- Expandable groups feature (>5 selected groups)
  * Display all groups when ≤5 selected
  * Hide groups beyond 5 and show "+N" button
  * Expand to show all groups when "+N" clicked
  * Auto-collapse when count reduces to ≤5

All tests use data-test attributes for stable selectors and properly
handle PatternFly v6 modal portal rendering.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* test: add integration tests for ImpersonateUserModal with Redux

Add 10 integration tests covering complete workflows with Redux state:
- Redux action dispatching (startImpersonate with user only)
- Redux action dispatching (startImpersonate with user and groups)
- Complete group selection workflow
  * Select single group
  * Select multiple groups
  * Deselect groups
- Search and filter groups functionality
- Error handling workflow with Redux
- Modal lifecycle with state management
- Readonly mode behavior

Integration tests use Provider wrapper with mock Redux store to verify
complete user flows from UI interaction through to Redux action dispatch.
All tests properly handle async operations and PatternFly v6 components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* refactor: update navigation handling in MastheadToolbar and ImpersonateUserModal

* refactor: remove unnecessary React imports from impersonate user modal tests

* test: add smoke tests for Multi-Group Impersonation functionality

Introduce a comprehensive suite of smoke tests for the impersonation feature, ensuring critical paths are validated. The tests cover:
- Modal opening and user impersonation
- Banner persistence across navigation
- Stopping impersonation
- Validation of username input and group selection

These tests are designed to quickly identify major breaking changes and ensure the core functionality remains intact. Expected run time is approximately 2-3 minutes.

* test: add E2E Cypress tests for Multi-Group Impersonation with RBAC

Introduce a comprehensive suite of end-to-end tests for the Multi-Group Impersonation feature, focusing on role-based access control (RBAC). The tests cover:
- Setup of Kubernetes resources (namespaces, users, groups, role bindings)
- Verification of access control when impersonating users across different groups
- Cleanup of resources post-testing

These tests ensure that the impersonation functionality adheres to expected RBAC permissions and provides a robust validation of user access across multiple namespaces.

* nit: the word "more" is mistreated as noun in the i18n

* fix: apply CodeRabbit's suggestion

* feat: enhance impersonation handling and feature refresh - the feature didn't work on firefox, but this fix it, and on both chrome and firefox it works.

* fix: apply the review comment from coderabbit

* i18n: run i18n to fix the failing CI

* i18n: running on a different laptop

* refactor: extract impersonation feature refresh logic into a custom hook

* fix: Implement normalizeConsoleHeaders utility to ensure compatibility with fetch API.

* test: fix the flaky guided tour issue

* test: thanks to @yapei suggestion, I added more guidedTour.close to the test to reduce the flake

* test: thanks to @yapei's suggestion, put guidedTour.close after the impersonation button is clicked: since after staritng the impersonation, the modal might show up and blocking the test

* test: remove the cypress test per discussion with @yapei

---------

Co-authored-by: logonoff <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

frontend/packages/console-app/src/actions/hooks/useGroupActions.ts

@@ -1,13 +1,14 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Action } from '@console/dynamic-plugin-sdk';
+import { Action, getImpersonate } from '@console/dynamic-plugin-sdk';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import * as UIActions from '@console/internal/actions/ui';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { GroupModel } from '@console/internal/models';
 import { GroupKind } from '@console/internal/module/k8s';
+import { RootState } from '@console/internal/redux';
 import AddGroupUsersModal from '../../components/modals/add-group-users-modal';
 
 /**
@@ -18,14 +19,25 @@ export const useGroupActions = (obj: GroupKind): Action[] => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const launchOverlay = useOverlay();
+  const impersonate = useSelector((state: RootState) => getImpersonate(state));
 
   const startImpersonate = useCallback(
     (kind: string, name: string) => dispatch(UIActions.startImpersonate(kind, name)),
     [dispatch],
   );
 
+  const stopImpersonate = useCallback(() => dispatch(UIActions.stopImpersonate()), [dispatch]);
+
   const factory = useMemo(
     () => ({
+      stopImpersonate: (): Action => ({
+        id: 'stop-impersonate',
+        label: t('public~Stop impersonating'),
+        cta: () => {
+          stopImpersonate();
+          navigate(window.SERVER_FLAGS.basePath);
+        },
+      }),
       impersonate: (): Action => ({
         id: 'impersonate-group',
         label: t('public~Impersonate Group {{name}}', obj.metadata),
@@ -42,8 +54,12 @@ export const useGroupActions = (obj: GroupKind): Action[] => {
         accessReview: asAccessReview(GroupModel, obj, 'patch'),
       }),
     }),
-    [navigate, obj, startImpersonate, t, launchOverlay],
+    [navigate, obj, startImpersonate, stopImpersonate, t, launchOverlay],
   );
 
-  return useMemo<Action[]>(() => [factory.impersonate(), factory.addUsers()], [factory]);
+  return useMemo<Action[]>(() => {
+    // Determine which impersonation action to show based on impersonation state
+    const impersonationAction = impersonate ? factory.stopImpersonate() : factory.impersonate();
+    return [impersonationAction, factory.addUsers()];
+  }, [impersonate, factory]);
 };

frontend/packages/console-dynamic-plugin-sdk/src/app/core/actions/core.ts

@@ -16,8 +16,12 @@ export enum ActionType {
 export const setUser = (userInfo: UserInfo) => action(ActionType.SetUser, { userInfo });
 export const setUserResource = (userResource: UserKind) =>
   action(ActionType.SetUserResource, { userResource });
-export const beginImpersonate = (kind: string, name: string, subprotocols: string[]) =>
-  action(ActionType.BeginImpersonate, { kind, name, subprotocols });
+export const beginImpersonate = (
+  kind: string,
+  name: string,
+  subprotocols: string[],
+  groups?: string[],
+) => action(ActionType.BeginImpersonate, { kind, name, subprotocols, groups });
 export const endImpersonate = () => action(ActionType.EndImpersonate);
 export const setAdmissionWebhookWarning = (id: string, warning: AdmissionWebhookWarning) =>
   action(ActionType.SetAdmissionWebhookWarning, { id, warning });

frontend/packages/console-dynamic-plugin-sdk/src/app/core/reducers/core.ts

@@ -27,6 +27,7 @@ export const coreReducer = (
           kind: action.payload.kind,
           name: action.payload.name,
           subprotocols: action.payload.subprotocols,
+          groups: action.payload.groups,
         },
       };
     case ActionType.EndImpersonate: {

frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts

@@ -13,6 +13,7 @@ export type ImpersonateKind = {
   kind: string;
   name: string;
   subprotocols: string[];
+  groups?: string[];
 };
 
 export type CoreState = {

frontend/packages/console-dynamic-plugin-sdk/src/utils/fetch/console-fetch-utils.ts

@@ -2,7 +2,7 @@ import { getImpersonate } from '../../app/core/reducers';
 import storeHandler from '../../app/storeHandler';
 
 type ConsoleRequestHeaders = {
-  'Impersonate-Group'?: string;
+  'Impersonate-Group'?: string | string[];
   'Impersonate-User'?: string;
   'X-CSRFToken'?: string;
 };
@@ -35,14 +35,54 @@ export const getConsoleRequestHeaders = (): ConsoleRequestHeaders => {
   };
 
   // Set impersonation headers
-  const { kind, name } = getImpersonate(state) || {};
-  if ((kind === 'User' || kind === 'Group') && name) {
-    // Even if we are impersonating a group, we still need to set Impersonate-User to something or k8s will complain
-    headers['Impersonate-User'] = name;
-    if (kind === 'Group') {
+  const impersonateData = getImpersonate(state);
+  if (impersonateData) {
+    const { kind, name, groups } = impersonateData;
+
+    if (kind === 'User' && name) {
+      // Simple user impersonation
+      headers['Impersonate-User'] = name;
+    } else if (kind === 'Group' && name) {
+      // Single group impersonation (backward compatibility)
+      // Even if we are impersonating a group, we still need to set Impersonate-User to something or k8s will complain
+      headers['Impersonate-User'] = name;
       headers['Impersonate-Group'] = name;
+    } else if (kind === 'UserWithGroups' && name && groups && groups.length > 0) {
+      // User with multiple groups impersonation
+      headers['Impersonate-User'] = name;
+      // Note: This creates an array of values for the same header key
+      headers['Impersonate-Group'] = groups;
     }
   }
 
   return headers;
 };
+
+/**
+ * Normalizes console headers to be compatible with fetch API's HeadersInit.
+ * Converts array values (like Impersonate-Group) to a format that fetch() accepts.
+ * @param headers - Headers object that may contain array values
+ * @returns Normalized headers object with only string values
+ */
+export const normalizeConsoleHeaders = (
+  headers: Record<string, string | string[] | undefined>,
+): Record<string, string> => {
+  const normalized: Record<string, string> = {};
+
+  Object.entries(headers || {}).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      // For multiple Impersonate-Group headers, we need special handling
+      // because fetch() API combines them into a single comma-separated header
+      // which doesn't work for Kubernetes impersonation
+      if (key === 'Impersonate-Group') {
+        // Send as a special header that the backend will split
+        normalized['X-Console-Impersonate-Groups'] = value.join(',');
+      }
+      // Skip other array values as they're not supported by fetch HeadersInit
+    } else if (value) {
+      normalized[key] = value;
+    }
+  });
+
+  return normalized;
+};

frontend/packages/console-dynamic-plugin-sdk/src/utils/fetch/console-fetch.ts

@@ -4,7 +4,7 @@ import { setAdmissionWebhookWarning } from '../../app/core/actions';
 import storeHandler from '../../app/storeHandler';
 import { ConsoleFetchText, ConsoleFetchJSON, ConsoleFetch } from '../../extensions/console-types';
 import { TimeoutError } from '../error/http-error';
-import { getConsoleRequestHeaders } from './console-fetch-utils';
+import { getConsoleRequestHeaders, normalizeConsoleHeaders } from './console-fetch-utils';
 
 /**
  * A custom wrapper around `fetch` that adds console-specific headers and allows for retries and timeouts.
@@ -50,9 +50,13 @@ const consoleFetchCommon = async (
   options: RequestInit = {},
   timeout?: number,
 ): Promise<Response | string> => {
-  const headers = getConsoleRequestHeaders();
-  // Pass headers last to let callers to override Accept.
-  const allOptions = _.defaultsDeep({ method }, options, { headers });
+  const consoleHeaders = getConsoleRequestHeaders();
+  const normalizedConsoleHeaders = normalizeConsoleHeaders(consoleHeaders);
+
+  // Merge headers properly - console headers first, then let options override
+  const mergedHeaders = { ...normalizedConsoleHeaders, ...options.headers };
+  const allOptions = _.defaultsDeep({ method, headers: mergedHeaders }, options);
+
   const response = await consoleFetch(url, allOptions, timeout);
   const dataPromise = parseData(response);
   const warning = response.headers.get('Warning');

frontend/packages/console-dynamic-plugin-sdk/src/utils/fetch/index.ts

@@ -1,2 +1,2 @@
 export { consoleFetch, consoleFetchJSON, consoleFetchText } from './console-fetch';
-export { getConsoleRequestHeaders } from './console-fetch-utils';
+export { getConsoleRequestHeaders, normalizeConsoleHeaders } from './console-fetch-utils';

frontend/packages/operator-lifecycle-manager-v1/src/hooks/useCatalogItems.ts

@@ -1,7 +1,10 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions/catalog';
 import { consoleFetch } from '@console/dynamic-plugin-sdk/src/lib-core';
-import { getConsoleRequestHeaders } from '@console/dynamic-plugin-sdk/src/utils/fetch';
+import {
+  getConsoleRequestHeaders,
+  normalizeConsoleHeaders,
+} from '@console/dynamic-plugin-sdk/src/utils/fetch';
 import { ONE_SECOND } from '@console/shared/src/constants/time';
 import { usePoll } from '@console/shared/src/hooks/usePoll';
 import { OLMCatalogItem } from '../types';
@@ -22,8 +25,9 @@ const useCatalogItems: UseCatalogItems = () => {
 
   const headers = useMemo(() => {
     const consoleHeaders = getConsoleRequestHeaders();
+    const normalizedHeaders = normalizeConsoleHeaders(consoleHeaders);
     return {
-      ...consoleHeaders,
+      ...normalizedHeaders,
       'If-Modified-Since': lastModified,
       'Cache-Control': 'max-age=300',
     };

frontend/public/actions/ui.ts

@@ -188,7 +188,21 @@ export const setActiveNamespace = (namespace: string = '') => {
   return action(ActionType.SetActiveNamespace, { namespace });
 };
 
-export const startImpersonate = (kind: string, name: string) => async (dispatch, getState) => {
+/**
+ * Encodes a string for use in Kubernetes impersonation subprotocols.
+ * Subprotocols are comma-separated, so commas aren't allowed. Also "="
+ * and "/" aren't allowed, so we base64 encode and replace illegal chars.
+ */
+const encodeImpersonationValue = (value: string, textEncoder: TextEncoder): string => {
+  return Base64.encode(String.fromCharCode.apply(String, textEncoder.encode(value)))
+    .replace(/=/g, '_')
+    .replace(/\//g, '-');
+};
+
+export const startImpersonate = (kind: string, name: string, groups?: string[]) => async (
+  dispatch,
+  getState,
+) => {
   const textEncoder = new TextEncoder();
 
   const imp = getImpersonate(getState());
@@ -198,25 +212,38 @@ export const startImpersonate = (kind: string, name: string) => async (dispatch,
     return;
   }
 
-  /**
-   * Subprotocols are comma-separated, so commas aren't allowed. Also "="
-   * and "/" aren't allowed, so base64 but replace illegal chars.
-   */
-  const encodedName = Base64.encode(String.fromCharCode.apply(String, textEncoder.encode(name)))
-    .replace(/=/g, '_')
-    .replace(/\//g, '-');
+  const encodedName = encodeImpersonationValue(name, textEncoder);
 
   let subprotocols;
   if (kind === 'User') {
     subprotocols = [`Impersonate-User.${encodedName}`];
-  }
-  if (kind === 'Group') {
+  } else if (kind === 'Group') {
     subprotocols = [`Impersonate-Group.${encodedName}`];
+  } else if (kind === 'UserWithGroups' && groups && groups.length > 0) {
+    // User with multiple groups impersonation
+    // Encode user subprotocol
+    subprotocols = [`Impersonate-User.${encodedName}`];
+    // Encode each group as a separate subprotocol
+    groups.forEach((group) => {
+      const encodedGroup = encodeImpersonationValue(group, textEncoder);
+      subprotocols.push(`Impersonate-Group.${encodedGroup}`);
+    });
   }
 
-  dispatch(beginImpersonate(kind, name, subprotocols));
+  dispatch(beginImpersonate(kind, name, subprotocols, groups));
+
+  // Close WebSocket to trigger reconnection with new impersonation headers
+  // Wait for the close to complete before proceeding
   subsClient.close(false, true);
-  dispatch(clearSSARFlags());
+
+  // Don't clear/refresh flags here - the App component's useLayoutEffect will handle it
+  // This ensures flags refresh happens in sync with React's render cycle
+};
+
+// Action to refresh features after impersonation change
+// Don't clear flags - just re-detect them. Old values remain until new ones are fetched.
+// This prevents components from seeing PENDING state and showing loading spinners.
+export const refreshFeaturesAfterImpersonation = () => (dispatch) => {
   dispatch(detectFeatures());
 };
 export const stopImpersonate = () => (dispatch) => {

frontend/public/co-fetch.ts

@@ -1,16 +1,33 @@
 import * as _ from 'lodash';
 import { HttpError, RetryError } from '@console/dynamic-plugin-sdk/src/utils/error/http-error';
 import { authSvc } from './module/auth';
-import { getCSRFToken } from '@console/dynamic-plugin-sdk/src/utils/fetch/console-fetch-utils';
+import { getConsoleRequestHeaders } from '@console/dynamic-plugin-sdk/src/utils/fetch/console-fetch-utils';
 
 export const applyConsoleHeaders = (url, options) => {
-  const token = getCSRFToken();
-  if (options.headers) {
-    options.headers['X-CSRFToken'] = token;
-  } else {
-    options.headers = { 'X-CSRFToken': token };
+  const consoleHeaders = getConsoleRequestHeaders();
+
+  if (!options.headers) {
+    options.headers = {};
   }
 
+  // Apply console headers, handling array values for multiple headers
+  Object.entries(consoleHeaders || {}).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      // For multiple Impersonate-Group headers, we need special handling
+      // because fetch() API combines them into a single comma-separated header
+      // which doesn't work for Kubernetes impersonation
+      if (key === 'Impersonate-Group') {
+        // Send as a special header that the backend will split
+        options.headers['X-Console-Impersonate-Groups'] = value.join(',');
+      } else {
+        // For other array headers, store as array
+        options.headers[key] = value;
+      }
+    } else if (value) {
+      options.headers[key] = value;
+    }
+  });
+
   // X-CSRFToken is used only for non-GET requests targeting bridge
   if (options.method === 'GET' || url.indexOf('://') >= 0) {
     delete options.headers['X-CSRFToken'];