fix(e2e): add waitForSidebar helper and networkidle waits for reliability

Add waitForSidebar helper function with explicit sidebar visibility wait
and networkidle state to ensure page is fully loaded before assertions.
This addresses flaky E2E tests where elements were not consistently
found due to timing issues during page transitions.

.github/workflows/e2e.yaml

@@ -0,0 +1,23 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: e2e-${{ github.repository }}
+  cancel-in-progress: false
+
+jobs:
+  e2e:
+    uses: privilegedescalation/.github/.github/workflows/plugin-e2e.yaml@hugh/add-pnpm-support-plugin-e2e
+    with:
+      node-version: '22'
+      headlamp-version: v0.40.1
+      e2e-namespace: headlamp-dev

.gitignore

@@ -5,3 +5,9 @@ dist/
 .env
 .env.local
 .eslintcache
+
+# E2E
+e2e/.auth/
+.env.e2e
+playwright-report/
+test-results/

SECURITY.md

@@ -91,7 +91,7 @@ metadata:
 subjects:
   - kind: ServiceAccount
     name: headlamp
-    namespace: <your-namespace>
+    namespace: kube-system   # adjust to your Headlamp namespace
 roleRef:
   kind: ClusterRole
   name: headlamp-tns-csi-reader
@@ -143,7 +143,7 @@ The Kubernetes API server performs the pod proxy hop, so policies should permit
 
 ### Service Account (Default)
 
-Headlamp runs with a dedicated service account (`headlamp` in the namespace where Headlamp is installed). All users share the same RBAC permissions.
+Headlamp runs with a dedicated service account (`headlamp` in `kube-system`). All users share the same RBAC permissions.
 
 **Security Considerations:**
 - All users have identical access to plugin functionality including Benchmark
@@ -223,7 +223,7 @@ All API requests are logged in Kubernetes API audit logs (if enabled). Pod proxy
   "verb": "get",
   "requestURI": "/api/v1/namespaces/kube-system/pods/<controller-pod>/proxy/metrics",
   "user": {
-    "username": "system:serviceaccount:<your-namespace>:headlamp"
+    "username": "system:serviceaccount:kube-system:headlamp"
   }
 }
 ```

docs/deployment/helm.md

@@ -9,7 +9,7 @@ helm repo add headlamp https://headlamp-k8s.github.io/headlamp/
 helm repo update
 
 helm install headlamp headlamp/headlamp \
-  --namespace <your-namespace> \
+  --namespace kube-system \
   --create-namespace \
   --set config.pluginsDir=/headlamp/plugins \
   --set pluginsManager.sources[0].name=tns-csi \
@@ -44,7 +44,7 @@ Apply:
 
 ```bash
 helm install headlamp headlamp/headlamp \
-  --namespace <your-namespace> \
+  --namespace kube-system \
   -f headlamp-values.yaml
 ```
 
@@ -55,7 +55,7 @@ apiVersion: source.toolkit.fluxcd.io/v1
 kind: HelmRepository
 metadata:
   name: headlamp
-  namespace: <your-namespace>
+  namespace: kube-system
 spec:
   interval: 12h
   url: https://headlamp-k8s.github.io/headlamp/
@@ -64,7 +64,7 @@ apiVersion: helm.toolkit.fluxcd.io/v2
 kind: HelmRelease
 metadata:
   name: headlamp
-  namespace: <your-namespace>
+  namespace: kube-system
 spec:
   interval: 1h
   chart:
@@ -74,7 +74,7 @@ spec:
       sourceRef:
         kind: HelmRepository
         name: headlamp
-        namespace: <your-namespace>
+        namespace: kube-system
   values:
     config:
       pluginsDir: /headlamp/plugins
@@ -122,7 +122,7 @@ metadata:
 subjects:
   - kind: ServiceAccount
     name: headlamp
-    namespace: <your-namespace>
+    namespace: kube-system
 roleRef:
   kind: ClusterRole
   name: headlamp-tns-csi-reader
@@ -136,7 +136,7 @@ To upgrade to a new plugin version, update the `url` in your values and apply:
 
 ```bash
 helm upgrade headlamp headlamp/headlamp \
-  --namespace <your-namespace> \
+  --namespace kube-system \
   -f headlamp-values.yaml
 ```
 

docs/getting-started/installation.md

@@ -32,7 +32,7 @@ apiVersion: helm.toolkit.fluxcd.io/v2
 kind: HelmRelease
 metadata:
   name: headlamp
-  namespace: <your-namespace>
+  namespace: kube-system
 spec:
   chart:
     spec:

docs/getting-started/quick-start.md

@@ -34,7 +34,7 @@ pluginsManager:
 Then upgrade your Headlamp release:
 
 ```bash
-helm upgrade headlamp headlamp/headlamp -f values.yaml -n <your-namespace>
+helm upgrade headlamp headlamp/headlamp -f values.yaml -n kube-system
 ```
 
 ## Step 2: Configure RBAC
@@ -70,7 +70,7 @@ metadata:
 subjects:
   - kind: ServiceAccount
     name: headlamp
-    namespace: <your-namespace>
+    namespace: kube-system
 roleRef:
   kind: ClusterRole
   name: headlamp-tns-csi-reader
@@ -78,7 +78,7 @@ roleRef:
 EOF
 ```
 
-Adjust `name: headlamp` and `namespace: <your-namespace>` to match your Headlamp service account.
+Adjust `name: headlamp` and `namespace: kube-system` to match your Headlamp service account.
 
 ## Step 3: Verify
 

docs/troubleshooting/README.md

@@ -77,7 +77,7 @@ If a page shows a loading spinner indefinitely:
 
 1. **Check browser console** for errors (F12 → Console)
 2. **Check network tab** for failed API requests (look for 403, 404, 500)
-3. **Check Headlamp pod logs**: `kubectl logs -n <your-namespace> -l app.kubernetes.io/name=headlamp`
+3. **Check Headlamp pod logs**: `kubectl logs -n kube-system -l app.kubernetes.io/name=headlamp`
 4. **Try refreshing** — the watch connection may have been interrupted
 
 ## Common API Errors
@@ -102,7 +102,7 @@ Look for errors related to `tns-csi`, `headlamp-plugin`, or Kubernetes API paths
 **Headlamp pod logs:**
 
 ```bash
-kubectl logs -n <your-namespace> -l app.kubernetes.io/name=headlamp --tail=100
+kubectl logs -n kube-system -l app.kubernetes.io/name=headlamp --tail=100
 ```
 
 **tns-csi controller logs:**

docs/troubleshooting/benchmark.md

@@ -8,10 +8,10 @@ The Benchmark page requires permissions to create and delete Jobs and PVCs:
 
 ```bash
 kubectl auth can-i create jobs -n <benchmark-namespace> \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 
 kubectl auth can-i create persistentvolumeclaims -n <benchmark-namespace> \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 ```
 
 Apply the additional permissions if missing — see [RBAC Issues](rbac.md) or [SECURITY.md](../../SECURITY.md).

docs/troubleshooting/metrics.md

@@ -47,7 +47,7 @@ This requires `get` on `pods/proxy` in `kube-system`:
 ```bash
 kubectl auth can-i get pods/proxy \
   -n kube-system \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 ```
 
 ### 5. Network Policies

docs/troubleshooting/rbac.md

@@ -11,16 +11,16 @@ Use `kubectl auth can-i` to check specific permissions:
 ```bash
 # Check if the Headlamp service account can list StorageClasses
 kubectl auth can-i list storageclasses \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 
 # Check pod proxy access (for metrics)
 kubectl auth can-i get pods/proxy \
   -n kube-system \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 
 # Check snapshot access
 kubectl auth can-i list volumesnapshots \
-  --as=system:serviceaccount:<your-namespace>:headlamp
+  --as=system:serviceaccount:kube-system:headlamp
 ```
 
 ### Applying the Required RBAC

docs/user-guide/rbac.md

@@ -47,7 +47,7 @@ metadata:
 subjects:
   - kind: ServiceAccount
     name: headlamp          # adjust to your Headlamp service account name
-    namespace: <your-namespace>
+    namespace: kube-system  # adjust to your Headlamp namespace
 roleRef:
   kind: ClusterRole
   name: headlamp-tns-csi-reader
@@ -99,7 +99,7 @@ metadata:
 subjects:
   - kind: ServiceAccount
     name: headlamp
-    namespace: <your-namespace>
+    namespace: kube-system
 roleRef:
   kind: Role
   name: headlamp-tns-csi-benchmark

e2e/auth.setup.ts

@@ -0,0 +1,69 @@
+import { test as setup, expect, Page } from '@playwright/test';
+
+const AUTH_STATE_PATH = 'e2e/.auth/state.json';
+
+async function authenticateWithOIDC(page: Page, username: string, password: string): Promise<void> {
+  await page.goto('/');
+  await page.waitForURL('**/login');
+
+  const popupPromise = page.waitForEvent('popup');
+  await page.getByRole('button', { name: /sign in/i }).click();
+  const popup = await popupPromise;
+
+  await popup.waitForLoadState('domcontentloaded');
+  await popup.waitForLoadState('networkidle');
+
+  const usernameField = popup.getByRole('textbox', { name: /email or username/i });
+  await usernameField.waitFor({ state: 'visible', timeout: 15_000 });
+  await usernameField.fill(username);
+  await popup.getByRole('button', { name: /log in/i }).click();
+
+  await popup.waitForLoadState('networkidle');
+  const passwordField = popup.getByRole('textbox', { name: /password/i });
+  await passwordField.waitFor({ state: 'visible', timeout: 15_000 });
+  await passwordField.fill(password);
+  await popup.getByRole('button', { name: /continue|log in/i }).click();
+
+  await popup.waitForEvent('close', { timeout: 15_000 });
+
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+async function authenticateWithToken(page: Page, token: string): Promise<void> {
+  await page.goto('/');
+  await page.waitForURL(/\/(login|token)$/);
+
+  if (page.url().includes('/login')) {
+    const useTokenBtn = page.getByRole('button', { name: /use a token/i });
+    await useTokenBtn.waitFor({ state: 'visible', timeout: 15_000 });
+    await useTokenBtn.click();
+    await page.waitForURL('**/token');
+  }
+
+  await page.getByRole('textbox', { name: /id token/i }).fill(token);
+  await page.getByRole('button', { name: /authenticate/i }).click();
+
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+setup('authenticate with Headlamp', async ({ page }) => {
+  const username = process.env.AUTHENTIK_USERNAME;
+  const password = process.env.AUTHENTIK_PASSWORD;
+  const token = process.env.HEADLAMP_TOKEN;
+
+  if (username && password) {
+    await authenticateWithOIDC(page, username, password);
+  } else if (token) {
+    await authenticateWithToken(page, token);
+  } else {
+    throw new Error(
+      'Set AUTHENTIK_USERNAME + AUTHENTIK_PASSWORD for OIDC auth, or HEADLAMP_TOKEN for token auth'
+    );
+  }
+
+  await page.context().storageState({ path: AUTH_STATE_PATH });
+});

e2e/tns-csi.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+async function waitForSidebar(page: import('@playwright/test').Page) {
+  const sidebar = page.getByRole('navigation', { name: 'Navigation' });
+  await expect(sidebar).toBeVisible({ timeout: 15_000 });
+  await page.waitForLoadState('networkidle');
+  return sidebar;
+}
+
+test.describe('TNS CSI plugin smoke tests', () => {
+  test('sidebar contains TNS CSI entry', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = await waitForSidebar(page);
+    await expect(sidebar.getByRole('button', { name: /tns.csi/i })).toBeVisible();
+  });
+
+  test('TNS CSI sidebar entry navigates to TNS CSI view', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = await waitForSidebar(page);
+
+    const entry = sidebar.getByRole('button', { name: /tns.csi/i });
+    await expect(entry).toBeVisible();
+    await entry.click();
+
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL(/tns-csi/);
+    await expect(page.getByRole('heading', { name: /tns.csi.*overview/i })).toBeVisible();
+  });
+
+  test('TNS CSI page renders content', async ({ page }) => {
+    await page.goto('/c/main/tns-csi');
+    await waitForSidebar(page);
+
+    await expect(page.getByRole('heading', { name: /tns.csi.*overview/i })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    const hasTable = await page.locator('table').first().isVisible().catch(() => false);
+    const hasContent = await page.locator('[class*="Mui"]').first().isVisible().catch(() => false);
+    expect(hasTable || hasContent).toBe(true);
+  });
+
+  test('plugin settings page shows TNS CSI plugin entry', async ({ page }) => {
+    await page.goto('/settings/plugins');
+    await page.waitForLoadState('networkidle');
+
+    const pluginEntry = page.locator('text=/tns.csi/i').first();
+    await expect(pluginEntry).toBeVisible({ timeout: 30_000 });
+  });
+});

package.json

@@ -23,7 +23,9 @@
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "e2e": "playwright test",
+    "e2e:headed": "playwright test --headed"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -46,12 +48,12 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^5.3.0",
     "typescript": "~5.6.2",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@playwright/test": "^1.58.2"
   },
   "overrides": {
     "tar": "^7.5.11",
     "undici": "^7.24.3",
-    "vite": ">=6.4.2",
+    "vite": ">=6.4.2"
-    "elliptic": ">=6.6.1"
   }
 }

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: 'list',
+  use: {
+    baseURL: process.env.HEADLAMP_URL || (() => { throw new Error('HEADLAMP_URL is required — run scripts/deploy-e2e-headlamp.sh first'); })(),
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    { name: 'setup', testMatch: /auth\.setup\.ts/, timeout: 60_000 },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/state.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});

scripts/deploy-e2e-headlamp.sh

@@ -0,0 +1,167 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+DIST_DIR="$REPO_ROOT/dist"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+HEADLAMP_VERSION="${HEADLAMP_VERSION:-latest}"
+
+if [ ! -d "$DIST_DIR" ]; then
+  echo "ERROR: dist/ not found. Run 'pnpm build' first." >&2
+  exit 1
+fi
+
+echo "Checking RBAC permissions in namespace '${E2E_NAMESPACE}'..."
+if ! kubectl auth can-i delete configmaps -n "$E2E_NAMESPACE" --quiet 2>/dev/null; then
+  echo "ERROR: Missing RBAC — cannot delete configmaps in namespace '${E2E_NAMESPACE}'." >&2
+  exit 1
+fi
+
+echo "=== E2E Headlamp Deployment ==="
+echo "  Image:     ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}"
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+echo ""
+echo "Creating ConfigMap with plugin files..."
+
+kubectl delete configmap headlamp-tns-csi-plugin   -n "$E2E_NAMESPACE" --ignore-not-found
+
+kubectl create configmap headlamp-tns-csi-plugin   -n "$E2E_NAMESPACE"   --from-file="$DIST_DIR"   --from-file=package.json="$REPO_ROOT/package.json"
+
+echo ""
+echo "Removing any existing E2E deployment (clean-start)..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+
+echo ""
+echo "Deploying Headlamp E2E instance..."
+
+kubectl apply -f - <<EOF
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: headlamp
+      app.kubernetes.io/instance: ${E2E_RELEASE}
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: headlamp
+        app.kubernetes.io/instance: ${E2E_RELEASE}
+    spec:
+      serviceAccountName: ${E2E_RELEASE}
+      automountServiceAccountToken: true
+      securityContext: {}
+      containers:
+        - name: headlamp
+          image: ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}
+          imagePullPolicy: IfNotPresent
+          securityContext:
+            runAsNonRoot: true
+            privileged: false
+            runAsUser: 100
+            runAsGroup: 101
+          args:
+            - "-in-cluster"
+            - "-in-cluster-context-name=main"
+            - "-plugins-dir=/headlamp/plugins"
+          ports:
+            - name: http
+              containerPort: 4466
+              protocol: TCP
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 5
+            failureThreshold: 6
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 10
+            periodSeconds: 10
+          volumeMounts:
+            - name: tns-csi-plugin
+              mountPath: /headlamp/plugins/headlamp-tns-csi
+              readOnly: true
+      volumes:
+        - name: tns-csi-plugin
+          configMap:
+            name: headlamp-tns-csi-plugin
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  type: ClusterIP
+  selector:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+  ports:
+    - name: http
+      port: 80
+      targetPort: http
+      protocol: TCP
+EOF
+
+echo "Waiting for rollout..."
+kubectl rollout status "deployment/${E2E_RELEASE}"   -n "$E2E_NAMESPACE" --timeout=120s
+
+SVC_URL="http://${E2E_RELEASE}.${E2E_NAMESPACE}.svc.cluster.local"
+
+echo ""
+echo "Waiting for ${SVC_URL} to be reachable..."
+ATTEMPTS=0
+MAX_ATTEMPTS=24
+until curl -sf --max-time 5 "${SVC_URL}" -o /dev/null 2>/dev/null; do
+  ATTEMPTS=$((ATTEMPTS + 1))
+  if [ "$ATTEMPTS" -ge "$MAX_ATTEMPTS" ]; then
+    echo "ERROR: ${SVC_URL} not reachable after $((MAX_ATTEMPTS * 5))s" >&2
+    exit 1
+  fi
+  echo "  [${ATTEMPTS}/${MAX_ATTEMPTS}] not yet reachable, retrying in 5s..."
+  sleep 5
+done
+echo ""
+echo "E2E Headlamp is ready at: ${SVC_URL}"
+
+echo ""
+echo "Creating service account token for E2E auth..."
+kubectl create serviceaccount headlamp-e2e-test   -n "$E2E_NAMESPACE" --dry-run=client -o yaml | kubectl apply -f -
+
+TOKEN=$(kubectl create token headlamp-e2e-test -n "$E2E_NAMESPACE" --duration=1h 2>/dev/null || echo "")
+if [ -n "$TOKEN" ]; then
+  echo "HEADLAMP_URL=${SVC_URL}" > "$REPO_ROOT/.env.e2e"
+  echo "HEADLAMP_TOKEN=${TOKEN}" >> "$REPO_ROOT/.env.e2e"
+  echo "Wrote .env.e2e with HEADLAMP_URL and HEADLAMP_TOKEN"
+else
+  echo "  WARNING: Could not generate token."
+fi
+
+echo ""
+echo "E2E deployment complete."

scripts/teardown-e2e-headlamp.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+
+echo "=== E2E Headlamp Teardown ==="
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+echo "Removing Headlamp Deployment, Service, and ServiceAccount..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up ConfigMap..."
+kubectl delete configmap headlamp-tns-csi-plugin -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up test service account..."
+kubectl delete serviceaccount headlamp-e2e-test -n "$E2E_NAMESPACE" --ignore-not-found
+
+if [ -f "$REPO_ROOT/.env.e2e" ]; then
+  rm "$REPO_ROOT/.env.e2e"
+  echo "Removed .env.e2e"
+fi
+
+echo ""
+echo "E2E teardown complete."