feat: allow auth overrides in debug menu

Backend auth will soon be enabled by default. To support local
development, contributors need a way to configure the kubeflow-userid
and kubeflow-groups request headers from the frontend UI at runtime,
without restarting the dev server.

This adds an Auth Headers section to the Debug page with User and Groups
text fields that persist to localStorage. A dev-only Axios request
interceptor reads the saved values and injects the corresponding headers
into all API requests when running in development mode (APP_ENV=development).

Changes:
- Add devAuth.ts utility with localStorage helpers and interceptor
- Add DebugAuthSection component with form, validation, and save
- Replace Debug page placeholder with the new auth section
- Register interceptor on all API instances in notebookApisImpl
- Add unit tests for all devAuth utility functions (12 tests)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Andy Stoneberg <astonebe@redhat.com>

Author: andyatmiami

workspaces/frontend/src/app/pages/Debug/Debug.tsx

@@ -1,30 +1,17 @@
 import React from 'react';
-import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import { Button } from '@patternfly/react-core/dist/esm/components/Button';
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateVariant,
-  EmptyStateFooter,
-} from '@patternfly/react-core/dist/esm/components/EmptyState';
 import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
+import { Title } from '@patternfly/react-core/dist/esm/components/Title';
+import { DebugAuthSection } from './DebugAuthSection';
 
 const Debug: React.FunctionComponent = () => (
-  <PageSection>
-    <EmptyState
-      variant={EmptyStateVariant.full}
-      titleText="Debug page (for development only)"
-      icon={CubesIcon}
-    >
-      <EmptyStateBody>
-        This represents an the empty state pattern in Patternfly 6. Hopefully it&apos;s simple
-        enough to use but flexible enough to meet a variety of needs.
-      </EmptyStateBody>
-      <EmptyStateFooter>
-        <Button variant="primary">Primary Action</Button>
-      </EmptyStateFooter>
-    </EmptyState>
-  </PageSection>
+  <>
+    <PageSection data-testid="debug-page">
+      <Title headingLevel="h1">Debug Settings</Title>
+    </PageSection>
+    <PageSection>
+      <DebugAuthSection />
+    </PageSection>
+  </>
 );
 
 export { Debug };

workspaces/frontend/src/app/pages/Debug/DebugAuthSection.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { useNotification } from 'mod-arch-core';
+import { Alert, AlertVariant } from '@patternfly/react-core/dist/esm/components/Alert';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
+import { Card, CardBody, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
+import { Content } from '@patternfly/react-core/dist/esm/components/Content';
+import { Form, ActionGroup } from '@patternfly/react-core/dist/esm/components/Form';
+import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText';
+import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
+import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
+import { getDevAuthUser, getDevAuthGroups, setDevAuth } from '~/shared/utilities/devAuth';
+
+export const DebugAuthSection: React.FC = () => {
+  const notification = useNotification();
+
+  const [user, setUser] = useState(() => getDevAuthUser());
+  const [groups, setGroups] = useState(() => getDevAuthGroups());
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSave = () => {
+    const trimmedUser = user.trim();
+    const trimmedGroups = groups.trim();
+
+    if (!trimmedUser && !trimmedGroups) {
+      setError('At least one of User or Groups must be provided.');
+      return;
+    }
+
+    setError(null);
+    setDevAuth(trimmedUser, trimmedGroups);
+    notification.success('Auth headers saved.');
+  };
+
+  return (
+    <Card data-testid="debug-auth-section">
+      <CardTitle>Auth Headers</CardTitle>
+      <CardBody>
+        <Content component="p">
+          Configure the <code>kubeflow-userid</code> and <code>kubeflow-groups</code> headers sent
+          with API requests during local development.
+        </Content>
+        {error && (
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title={error}
+            data-testid="debug-auth-error"
+          />
+        )}
+        <Form>
+          <ThemeAwareFormGroupWrapper label="User" fieldId="debug-auth-user">
+            <TextInput
+              id="debug-auth-user"
+              data-testid="debug-auth-user-input"
+              value={user}
+              onChange={(_event, value) => {
+                setUser(value);
+                setError(null);
+              }}
+              aria-label="User ID"
+            />
+          </ThemeAwareFormGroupWrapper>
+          <ThemeAwareFormGroupWrapper
+            label="Groups"
+            fieldId="debug-auth-groups"
+            helperTextNode={<HelperText>Comma-separated list of group IDs.</HelperText>}
+          >
+            <TextInput
+              id="debug-auth-groups"
+              data-testid="debug-auth-groups-input"
+              value={groups}
+              onChange={(_event, value) => {
+                setGroups(value);
+                setError(null);
+              }}
+              aria-label="Groups"
+            />
+          </ThemeAwareFormGroupWrapper>
+          <ActionGroup>
+            <Button variant="primary" onClick={handleSave} data-testid="debug-auth-save-button">
+              Save
+            </Button>
+          </ActionGroup>
+        </Form>
+      </CardBody>
+    </Card>
+  );
+};

workspaces/frontend/src/shared/api/notebookApi.ts

@@ -6,6 +6,8 @@ import { Storageclasses } from '~/generated/Storageclasses';
 import { Workspacekinds } from '~/generated/Workspacekinds';
 import { Workspaces } from '~/generated/Workspaces';
 import { ApiInstance } from '~/shared/api/types';
+import { DEV_MODE } from '~/shared/utilities/const';
+import { registerDevAuthInterceptor } from '~/shared/utilities/devAuth';
 
 export interface NotebookApis {
   healthCheck: ApiInstance<typeof Healthcheck>;
@@ -20,13 +22,19 @@ export interface NotebookApis {
 export const notebookApisImpl = (path: string): NotebookApis => {
   const commonConfig = { baseURL: path };
 
-  return {
-    healthCheck: new Healthcheck(commonConfig),
-    namespaces: new Namespaces(commonConfig),
-    workspaces: new Workspaces(commonConfig),
-    workspaceKinds: new Workspacekinds(commonConfig),
-    secrets: new Secrets(commonConfig),
-    pvc: new Persistentvolumeclaims(commonConfig),
-    storageClasses: new Storageclasses(commonConfig),
-  };
+  const healthCheck = new Healthcheck(commonConfig);
+  const namespaces = new Namespaces(commonConfig);
+  const workspaces = new Workspaces(commonConfig);
+  const workspaceKinds = new Workspacekinds(commonConfig);
+  const secrets = new Secrets(commonConfig);
+  const pvc = new Persistentvolumeclaims(commonConfig);
+  const storageClasses = new Storageclasses(commonConfig);
+
+  if (DEV_MODE) {
+    [healthCheck, namespaces, workspaces, workspaceKinds, secrets, pvc, storageClasses].forEach(
+      (api) => registerDevAuthInterceptor(api.instance),
+    );
+  }
+
+  return { healthCheck, namespaces, workspaces, workspaceKinds, secrets, pvc, storageClasses };
 };

workspaces/frontend/src/shared/utilities/__tests__/devAuth.spec.ts

@@ -0,0 +1,127 @@
+import axios from 'axios';
+import {
+  getDevAuthUser,
+  getDevAuthGroups,
+  setDevAuth,
+  registerDevAuthInterceptor,
+} from '~/shared/utilities/devAuth';
+
+describe('devAuth', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  describe('getDevAuthUser', () => {
+    it('should return "admin" when localStorage is empty', () => {
+      expect(getDevAuthUser()).toBe('admin');
+    });
+
+    it('should return the stored value', () => {
+      localStorage.setItem('kubeflow-dev-auth-user', 'test-user');
+      expect(getDevAuthUser()).toBe('test-user');
+    });
+
+    it('should return empty string when stored as empty', () => {
+      localStorage.setItem('kubeflow-dev-auth-user', '');
+      expect(getDevAuthUser()).toBe('');
+    });
+  });
+
+  describe('getDevAuthGroups', () => {
+    it('should return empty string when localStorage is empty', () => {
+      expect(getDevAuthGroups()).toBe('');
+    });
+
+    it('should return the stored value', () => {
+      localStorage.setItem('kubeflow-dev-auth-groups', 'group-a,group-b');
+      expect(getDevAuthGroups()).toBe('group-a,group-b');
+    });
+  });
+
+  describe('setDevAuth', () => {
+    it('should persist both values to localStorage', () => {
+      setDevAuth('my-user', 'grp1,grp2');
+      expect(localStorage.getItem('kubeflow-dev-auth-user')).toBe('my-user');
+      expect(localStorage.getItem('kubeflow-dev-auth-groups')).toBe('grp1,grp2');
+    });
+
+    it('should handle empty strings', () => {
+      setDevAuth('', '');
+      expect(localStorage.getItem('kubeflow-dev-auth-user')).toBe('');
+      expect(localStorage.getItem('kubeflow-dev-auth-groups')).toBe('');
+    });
+  });
+
+  describe('registerDevAuthInterceptor', () => {
+    // Access the interceptor handler directly via the internal handlers array.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getInterceptorFn = (instance: ReturnType<typeof axios.create>): ((config: any) => any) =>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (instance.interceptors.request as any).handlers[0].fulfilled;
+
+    it('should set kubeflow-userid header when user is non-empty', () => {
+      setDevAuth('dev-user', '');
+      const instance = axios.create();
+      registerDevAuthInterceptor(instance);
+
+      const config = getInterceptorFn(instance)({
+        headers: new axios.AxiosHeaders(),
+      });
+
+      expect(config.headers['kubeflow-userid']).toBe('dev-user');
+      expect(config.headers['kubeflow-groups']).toBeUndefined();
+    });
+
+    it('should set kubeflow-groups header when groups is non-empty', () => {
+      setDevAuth('', 'editors,viewers');
+      const instance = axios.create();
+      registerDevAuthInterceptor(instance);
+
+      const config = getInterceptorFn(instance)({
+        headers: new axios.AxiosHeaders(),
+      });
+
+      expect(config.headers['kubeflow-userid']).toBeUndefined();
+      expect(config.headers['kubeflow-groups']).toBe('editors,viewers');
+    });
+
+    it('should set both headers when both are non-empty', () => {
+      setDevAuth('dev-user', 'editors,viewers');
+      const instance = axios.create();
+      registerDevAuthInterceptor(instance);
+
+      const config = getInterceptorFn(instance)({
+        headers: new axios.AxiosHeaders(),
+      });
+
+      expect(config.headers['kubeflow-userid']).toBe('dev-user');
+      expect(config.headers['kubeflow-groups']).toBe('editors,viewers');
+    });
+
+    it('should not set headers when values are empty or whitespace', () => {
+      setDevAuth('  ', '  ');
+      const instance = axios.create();
+      registerDevAuthInterceptor(instance);
+
+      const config = getInterceptorFn(instance)({
+        headers: new axios.AxiosHeaders(),
+      });
+
+      expect(config.headers['kubeflow-userid']).toBeUndefined();
+      expect(config.headers['kubeflow-groups']).toBeUndefined();
+    });
+
+    it('should trim whitespace from values', () => {
+      setDevAuth('  padded-user  ', '  grp1 , grp2  ');
+      const instance = axios.create();
+      registerDevAuthInterceptor(instance);
+
+      const config = getInterceptorFn(instance)({
+        headers: new axios.AxiosHeaders(),
+      });
+
+      expect(config.headers['kubeflow-userid']).toBe('padded-user');
+      expect(config.headers['kubeflow-groups']).toBe('grp1 , grp2');
+    });
+  });
+});

workspaces/frontend/src/shared/utilities/devAuth.ts

@@ -0,0 +1,50 @@
+import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+
+const DEV_AUTH_USER_KEY = 'kubeflow-dev-auth-user';
+const DEV_AUTH_GROUPS_KEY = 'kubeflow-dev-auth-groups';
+
+const USERID_HEADER = 'kubeflow-userid';
+const GROUPS_HEADER = 'kubeflow-groups';
+
+const DEFAULT_USER = 'admin';
+
+export const getDevAuthUser = (): string => {
+  try {
+    return localStorage.getItem(DEV_AUTH_USER_KEY) ?? DEFAULT_USER;
+  } catch {
+    return DEFAULT_USER;
+  }
+};
+
+export const getDevAuthGroups = (): string => {
+  try {
+    return localStorage.getItem(DEV_AUTH_GROUPS_KEY) ?? '';
+  } catch {
+    return '';
+  }
+};
+
+export const setDevAuth = (user: string, groups: string): void => {
+  try {
+    localStorage.setItem(DEV_AUTH_USER_KEY, user);
+    localStorage.setItem(DEV_AUTH_GROUPS_KEY, groups);
+  } catch {
+    // localStorage may be unavailable
+  }
+};
+
+export const registerDevAuthInterceptor = (axiosInstance: AxiosInstance): void => {
+  axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+    const user = getDevAuthUser().trim();
+    const groups = getDevAuthGroups().trim();
+
+    if (user) {
+      config.headers.set(USERID_HEADER, user);
+    }
+    if (groups) {
+      config.headers.set(GROUPS_HEADER, groups);
+    }
+
+    return config;
+  });
+};