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/dual-approval.yaml

@@ -16,3 +16,5 @@ jobs:
   dual-approval:
     uses: privilegedescalation/.github/.github/workflows/dual-approval-check.yaml@main
     secrets: inherit
+    with:
+      pr_number: ${{ github.event.pull_request.number }}

.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/

.markdownlint-cli2.jsonc

@@ -0,0 +1,53 @@
+{
+  "config": {
+    // Line length — not enforced for docs with code examples
+    "MD013": false,
+    // First line heading — files use YAML frontmatter, not headings
+    "MD041": false,
+    // Emphasis as heading — common pattern for Option 1/2/3 sections
+    "MD036": false,
+    // No duplicate heading — changelog files repeat section names intentionally
+    "MD024": false,
+    // Fenced code language — not always applicable for diagram blocks
+    "MD040": false,
+    // Table column style — table alignment is visual, not semantic
+    "MD060": false,
+    // Ordered list item prefix — number resets are intentional in documents
+    "MD029": false,
+    // No inline HTML — each elements are valid in valid Markdown
+    "MD033": false,
+    // List marker space — spacing after list markers varies by editor
+    "MD030": false,
+    // Blanks around headings — not always needed in compact docs
+    "MD022": false,
+    // Blanks around lists — not always needed in compact docs
+    "MD032": false,
+    // Blanks around fences — not always needed between adjacent blocks
+    "MD031": false,
+    // Multiple blanks — editor artifacts, not semantic
+    "MD012": false,
+    // Single title — files may have multiple H1 sections
+    "MD025": false,
+    // Trailing spaces — editor artifacts
+    "MD009": false,
+    // Bare URLs — URL shortening not always needed
+    "MD034": false,
+    // Single trailing newline — editor artifacts
+    "MD047": false,
+    // Trailing punctuation — heading punctuation is intentional
+    "MD026": false,
+    // Space in emphasis — double-asterisk bold spacing varies by renderer
+    "MD037": false,
+    // No hard tabs — some generated docs use tabs for indentation
+    "MD010": false,
+    // Code block style — generated docs may use inconsistent styles
+    "MD046": false,
+    // Comment style — generated docs have no comments
+    "MD048": false,
+    // Commands show output — shell examples intentionally show only commands
+    "MD014": false
+  },
+  "ignores": [
+    "docs/api-reference/generated/**"
+  ]
+}

.markdownlintignore

@@ -0,0 +1 @@
+docs/api-reference/generated/**

SECURITY.md

@@ -187,7 +187,7 @@ Report security vulnerabilities via:
 
 The project uses:
 - **npm audit**: Runs automatically during `npm install`
-- **GitHub Dependabot**: Monitors dependencies and creates PRs for updates
+- **Renovate**: Automated dependency updates via Mend Renovate (org-wide configured)
 
 Headlamp itself (`@kinvolk/headlamp-plugin`) is a peer dependency. Security updates to Headlamp should be applied by upgrading your Headlamp installation.
 

artifacthub-pkg.yml

@@ -13,7 +13,7 @@ license: Apache-2.0
 category: storage
 
 homeURL: https://github.com/privilegedescalation/headlamp-tns-csi-plugin
-appVersion: "0.17.3"
+appVersion: "0.17.4"
 
 keywords:
   - headlamp
@@ -64,6 +64,6 @@ changes:
 
 annotations:
   headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-tns-csi-plugin/releases/download/v1.0.0/tns-csi-1.0.0.tar.gz"
-  headlamp/plugin/archive-checksum: sha256:TBD-set-by-release-workflow
+  headlamp/plugin/archive-checksum: sha256:e38846ceb17a79438f8aecc50f22920b0efa7456f3ebb3e628d89856af83ad01
   headlamp/plugin/version-compat: ">=0.20.0"
   headlamp/plugin/distro-compat: "in-cluster,web,app"

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

@@ -12,6 +12,7 @@
   "homepage": "https://github.com/privilegedescalation/headlamp-tns-csi-plugin#readme",
   "author": "privilegedescalation",
   "license": "Apache-2.0",
+  "packageManager": "pnpm@10.32.1",
   "scripts": {
     "start": "headlamp-plugin start",
     "build": "headlamp-plugin build",
@@ -22,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",
@@ -45,10 +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"
+    "undici": "^7.24.3",
+    "vite": ">=6.4.2"
   }
 }

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."