fix(a11y): add session timeout warning modal (WCAG 2.2.1) (#1557)

* feat(a11y): expose sessionTimeout in /dashboard/api/server-config

Reads spec.networking.auth.gateway.oAuthProxy.cookieExpireSeconds from
the CheCluster CR (che-operator PR #1760, +kubebuilder:default:=86400)
as the primary source. Falls back to parsing cookie_expire from the
che-gateway-config-oauth-proxy ConfigMap for clusters running older
operators where the CR field is absent. Returns -1 when neither source
is available so the frontend hook is a no-op.

- Add cookieExpireSeconds to CheClusterCustomResource networking type
  (field name is oAuthProxy per Go JSON tag in che-operator PR #1760)
- Add parseDurationToSeconds helper (parses Go time.Duration strings;
  returns -1 on empty/unmatched input so the hook disables itself)
- Add async getSessionTimeout(cheCustomResource) with CR-first + ConfigMap
  fallback strategy
- Wire into the server-config route handler
- Add selectSessionTimeout Redux selector; default unloadedState to -1

Fixes: https://issues.redhat.com/browse/CRW-10290
Assisted-by: Claude Sonnet 4.6
Signed-off-by: Oleksii Orel <oorel@redhat.com>

* feat(a11y): add useSessionTimeout hook for inactivity tracking

Tracks UI idle time via mousemove/keydown/click/touchstart events and
shows a warning modal 60 s before the OAuth session cookie expires.
Activity events are ignored while the modal is open so the countdown
is never accidentally reset by mouse movement.

- isModalOpenRef updated synchronously alongside React state to
  eliminate the render/effect timing race (stale ref race)
- onExtend uses try/finally so the idle timer restarts on network failure
- No-op when sessionTimeout <= 0 (field absent on older operators)

Fixes: https://issues.redhat.com/browse/CRW-10290
Assisted-by: Claude Sonnet 4.6
Signed-off-by: Oleksii Orel <oorel@redhat.com>

* feat(a11y): add SessionTimeoutModal and mount globally in App

PF6 small modal with amber countdown ring (red/pulsing at <= 20 s,
suppressed by prefers-reduced-motion), Extend Session and Sign Out Now
buttons. Mounted in App.tsx so it appears on every page.

- Icon uses var(--pf-t--global--icon--color--status--warning--default)
- Closing via X button or backdrop extends the session
- Space key listener active only while modal is open

Satisfies WCAG 2.2.1 Timing Adjustable (Level A).

Fixes: https://issues.redhat.com/browse/CRW-10290
Assisted-by: Claude Sonnet 4.6
Signed-off-by: Oleksii Orel <oorel@redhat.com>

---------

Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: olexii4

packages/common/src/dto/api/index.ts

@@ -136,6 +136,7 @@ export interface IServerConfig {
     runTimeout: number;
     startTimeout: number;
     axiosRequestTimeout: number;
+    sessionTimeout: number; // seconds until OAuth cookie expires; <=0 means disabled
   };
   networking?: {
     auth?: {

packages/dashboard-backend/src/devworkspaceClient/services/__tests__/serverConfigApi.spec.ts

@@ -13,7 +13,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import * as mockClient from '@kubernetes/client-node';
-import { CustomObjectsApi } from '@kubernetes/client-node';
+import { CoreV1Api, CustomObjectsApi } from '@kubernetes/client-node';
 
 import { CheClusterCustomResource, CustomResourceDefinitionList } from '@/devworkspaceClient';
 import {
@@ -23,6 +23,10 @@ import {
 
 jest.mock('@/helpers/getUserName.ts');
 
+jest.mock('@/devworkspaceClient/services/helpers/retryableExec', () => ({
+  retryableExec: jest.fn((fn: () => Promise<unknown>) => fn()),
+}));
+
 const mockRun = jest.fn();
 jest.mock('@/devworkspaceClient/services/helpers/exec', () => ({
   run: (command: string, args: string[]) => mockRun(command, args),
@@ -344,6 +348,71 @@ describe('Server Config API Service', () => {
       expect(res).toEqual('false');
     });
   });
+
+  describe('Session Timeout', () => {
+    function makeServiceWithConfigMap(configMapContent: string | null): ServerConfigApiService {
+      const { KubeConfig } = mockClient;
+      const kc = new KubeConfig();
+      kc.makeApiClient = jest.fn().mockImplementation((apiClass: unknown) => {
+        if (apiClass === CoreV1Api) {
+          if (configMapContent === null) {
+            return {
+              readNamespacedConfigMap: () => Promise.reject(new Error('not found')),
+            } as unknown as CoreV1Api;
+          }
+          return {
+            readNamespacedConfigMap: () =>
+              Promise.resolve({ data: { 'oauth-proxy.cfg': configMapContent } }),
+          } as unknown as CoreV1Api;
+        }
+        return {
+          listClusterCustomObject: () => Promise.resolve(buildCustomResourceList().body),
+        } as unknown as CustomObjectsApi;
+      });
+      return new ServerConfigApiService(kc);
+    }
+
+    // CR-based path (new operator with che-operator PR #1760)
+    test('returns cookieExpireSeconds from CR when set', async () => {
+      const cr = buildCustomResource();
+      cr.spec.networking = { auth: { gateway: { oAuthProxy: { cookieExpireSeconds: 1440 } } } };
+      expect(await serverConfigService.getSessionTimeout(cr)).toEqual(1440);
+    });
+
+    test('returns 0 when cookieExpireSeconds is 0 (session-cookie mode)', async () => {
+      const cr = buildCustomResource();
+      cr.spec.networking = { auth: { gateway: { oAuthProxy: { cookieExpireSeconds: 0 } } } };
+      expect(await serverConfigService.getSessionTimeout(cr)).toEqual(0);
+    });
+
+    // ConfigMap fallback path (old operator — CR field absent)
+    test('falls back to ConfigMap and parses "24h0m0s" to 86400', async () => {
+      const svc = makeServiceWithConfigMap('cookie_expire = "24h0m0s"');
+      const cr = buildCustomResource(); // no oAuthProxy field
+      expect(await svc.getSessionTimeout(cr)).toEqual(86400);
+    });
+
+    test('falls back to ConfigMap and parses "30m0s" to 1800', async () => {
+      const svc = makeServiceWithConfigMap('cookie_expire = "30m0s"');
+      const cr = buildCustomResource();
+      expect(await svc.getSessionTimeout(cr)).toEqual(1800);
+    });
+
+    test('returns -1 when ConfigMap read fails', async () => {
+      const svc = makeServiceWithConfigMap(null);
+      const cr = buildCustomResource();
+      expect(await svc.getSessionTimeout(cr)).toEqual(-1);
+    });
+
+    test('returns -1 when namespace is not set', async () => {
+      const savedNamespace = process.env['CHECLUSTER_CR_NAMESPACE'];
+      delete process.env['CHECLUSTER_CR_NAMESPACE'];
+      const cr = buildCustomResource();
+      const result = await serverConfigService.getSessionTimeout(cr);
+      process.env['CHECLUSTER_CR_NAMESPACE'] = savedNamespace;
+      expect(result).toEqual(-1);
+    });
+  });
 });
 
 function buildCustomResourceList(): { body: CustomResourceDefinitionList } {

packages/dashboard-backend/src/devworkspaceClient/services/serverConfigApi.ts

@@ -19,6 +19,10 @@ import path from 'path';
 import { requestTimeoutSeconds, startTimeoutSeconds } from '@/constants/server-config';
 import { createError } from '@/devworkspaceClient/services/helpers/createError';
 import { run } from '@/devworkspaceClient/services/helpers/exec';
+import {
+  CoreV1API,
+  prepareCoreV1API,
+} from '@/devworkspaceClient/services/helpers/prepareCoreV1API';
 import {
   CustomObjectAPI,
   prepareCustomObjectAPI,
@@ -34,16 +38,39 @@ import { logger } from '@/utils/logger';
 
 const CUSTOM_RESOURCE_DEFINITIONS_API_ERROR_LABEL = 'CUSTOM_RESOURCE_DEFINITIONS_API_ERROR';
 
+// Parses Go time.Duration strings: "24h0m0s", "30m0s", "1h30m".
+// Returns -1 for empty or unmatched input so the frontend hook disables itself.
+export function parseDurationToSeconds(duration: string): number {
+  const matches = [...duration.matchAll(/(\d+(?:\.\d+)?)(h|m|s)/g)];
+  if (matches.length === 0) {
+    return -1;
+  }
+  let total = 0;
+  for (const match of matches) {
+    const value = parseFloat(match[1]);
+    if (match[2] === 'h') {
+      total += value * 3600;
+    } else if (match[2] === 'm') {
+      total += value * 60;
+    } else if (match[2] === 's') {
+      total += value;
+    }
+  }
+  return Math.floor(total);
+}
+
 const GROUP = 'org.eclipse.che';
 const VERSION = 'v2';
 const PLURAL = 'checlusters';
 
 export class ServerConfigApiService implements IServerConfigApi {
   private readonly customObjectAPI: CustomObjectAPI;
+  private readonly coreV1API: CoreV1API;
   private static currentArchitecture: Architecture | undefined;
 
   constructor(kc: k8s.KubeConfig) {
     this.customObjectAPI = prepareCustomObjectAPI(kc);
+    this.coreV1API = prepareCoreV1API(kc);
 
     if (isLocalRun()) {
       ServerConfigApiService.currentArchitecture = process.env[
@@ -311,6 +338,38 @@ export class ServerConfigApiService implements IServerConfigApi {
     }
     return value.split(',').map(val => val.trim());
   }
+
+  async getSessionTimeout(cheCustomResource: CheClusterCustomResource): Promise<number> {
+    // Prefer cookieExpireSeconds from the CheCluster CR (che-operator PR #1760).
+    // The CRD carries +kubebuilder:default:=86400, so new clusters always have it populated.
+    const fromCR =
+      cheCustomResource.spec.networking?.auth?.gateway?.oAuthProxy?.cookieExpireSeconds;
+    if (fromCR !== undefined) {
+      return fromCR;
+    }
+    // Fallback: read cookie_expire from the oauth-proxy ConfigMap.
+    // Covers existing CheCluster CRs created before the operator was updated to include PR #1760,
+    // where the field is absent but the ConfigMap still holds the real enforced value.
+    const CONFIGMAP_NAME = 'che-gateway-config-oauth-proxy';
+    const namespace = this.env.NAMESPACE;
+    if (!namespace) {
+      return -1;
+    }
+    try {
+      const response = await this.coreV1API.readNamespacedConfigMap({
+        name: CONFIGMAP_NAME,
+        namespace,
+      });
+      const cfg = response.data?.['oauth-proxy.cfg'] ?? '';
+      const cookieExpireMatch = /cookie_expire\s*=\s*"([^"]+)"/.exec(cfg);
+      if (cookieExpireMatch) {
+        return parseDurationToSeconds(cookieExpireMatch[1]);
+      }
+    } catch (e) {
+      logger.warn(`Unable to read ConfigMap ${CONFIGMAP_NAME}: ${e}`);
+    }
+    return -1;
+  }
 }
 
 export function getEnvVarValue(

packages/dashboard-backend/src/devworkspaceClient/types/index.ts

@@ -136,6 +136,12 @@ export type CheClusterCustomResource = k8s.V1CustomResourceDefinition & {
     networking?: {
       auth?: {
         advancedAuthorization?: api.IAdvancedAuthorization;
+        gateway?: {
+          oAuthProxy?: {
+            // Added in che-operator PR #1760
+            cookieExpireSeconds?: number;
+          };
+        };
       };
     };
   };
@@ -413,6 +419,15 @@ export interface IServerConfigApi {
    */
   getHideEditorsById(cheCustomResource: CheClusterCustomResource): string[];
 
+  /**
+   * Returns the OAuth session timeout in seconds.
+   * Reads spec.networking.auth.gateway.oAuthProxy.cookieExpireSeconds from the CR first
+   * (che-operator PR #1760, +kubebuilder:default:=86400). Falls back to parsing cookie_expire
+   * from the che-gateway-config-oauth-proxy ConfigMap for clusters running older operators
+   * where the CR field is absent. Returns -1 when neither source is available.
+   */
+  getSessionTimeout(cheCustomResource: CheClusterCustomResource): Promise<number>;
+
   /**
    * Returns the Machine (hardware) type.
    * The value is determined by executing the `uname -m` command.

packages/dashboard-backend/src/routes/api/__tests__/serverConfig.spec.ts

@@ -52,6 +52,7 @@ describe('Server Config Route', () => {
         runTimeout: 0,
         startTimeout: 0,
         axiosRequestTimeout: 0,
+        sessionTimeout: 86400, // stub value from mock
       },
       editorsVisibility: {
         hideById: ['che-incubator/che-idea-server/next'],

packages/dashboard-backend/src/routes/api/helpers/__mocks__/getDevWorkspaceClient.ts

@@ -176,6 +176,8 @@ export const stubShowDeprecatedEditors = true;
 
 export const stubHideEditorsById: string[] = ['che-incubator/che-idea-server/next'];
 
+export const stubSessionTimeout = 86400;
+
 export const getDevWorkspaceClient = jest.fn(
   (..._args: Parameters<typeof helper>): ReturnType<typeof helper> => {
     return {
@@ -205,6 +207,7 @@ export const getDevWorkspaceClient = jest.fn(
         getAllowedSourceUrls: _cheCustomResource => stubAllowedSourceUrls,
         getShowDeprecatedEditors: _cheCustomResource => stubShowDeprecatedEditors,
         getHideEditorsById: _cheCustomResource => stubHideEditorsById,
+        getSessionTimeout: _cheCustomResource => Promise.resolve(stubSessionTimeout),
       } as IServerConfigApi,
       devworkspaceApi: {
         create: (_devworkspace, _namespace) =>

packages/dashboard-backend/src/routes/api/serverConfig.ts

@@ -52,6 +52,7 @@ export function registerServerConfigRoute(instance: FastifyInstance) {
       const axiosRequestTimeout = serverConfigApi.getAxiosRequestTimeout();
       const showDeprecated = serverConfigApi.getShowDeprecatedEditors(cheCustomResource);
       const hideById = serverConfigApi.getHideEditorsById(cheCustomResource);
+      const sessionTimeout = await serverConfigApi.getSessionTimeout(cheCustomResource);
 
       const serverConfig: api.IServerConfig = {
         containerBuild,
@@ -67,6 +68,7 @@ export function registerServerConfigRoute(instance: FastifyInstance) {
           runTimeout,
           startTimeout,
           axiosRequestTimeout,
+          sessionTimeout,
         },
         devfileRegistry: {
           disableInternalRegistry,

packages/dashboard-frontend/src/App.tsx

@@ -19,6 +19,7 @@ import { HashRouter } from 'react-router-dom';
 import AppAlertGroup from '@/components/AppAlertGroup';
 import Fallback from '@/components/Fallback';
 import Head from '@/components/Head';
+import SessionTimeoutModal from '@/components/SessionTimeoutModal';
 import { ThemeProvider } from '@/contexts/ThemeContext';
 import { UIThemeProvider } from '@/contexts/UITheme';
 import Layout from '@/Layout';
@@ -31,6 +32,7 @@ function AppComponent(props: { history: History }): React.ReactElement {
         <HashRouter>
           <Head />
           <AppAlertGroup />
+          <SessionTimeoutModal />
           <Layout history={props.history}>
             <Suspense fallback={Fallback}>
               <AppRoutes />