fix: align frontend permission field names with backend API and add Playwright UI tests

Backend uses `value`/`matchType` but the frontend type, API layer, and components
still referenced the old `path`/`pathType` names, causing a crash when opening the
permissions tab (Cannot read properties of undefined reading 'toLowerCase').

Adds a Playwright test covering the add-and-remove permission flow against the real
backend (h2-mem), and wires it into CI as a new playwright-test job.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: coopernetes

.github/workflows/ci.yml

@@ -120,6 +120,48 @@ jobs:
             bash compose.sh -- logs git-proxy-java
           fi
 
+  playwright-test:
+    name: Playwright UI Tests
+    runs-on: ubuntu-latest
+    if: >
+      github.ref == 'refs/heads/main' ||
+      github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # ratchet:actions/checkout@v6
+
+      - uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # ratchet:actions/setup-java@v5
+        with:
+          distribution: temurin
+          java-version: 25
+          cache: gradle
+
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # ratchet:actions/setup-node@v6
+        with:
+          node-version: '24.15.0'
+          cache: npm
+          cache-dependency-path: git-proxy-java-dashboard/frontend/package-lock.json
+
+      - name: Install frontend dependencies
+        run: npm ci
+        working-directory: git-proxy-java-dashboard/frontend
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: git-proxy-java-dashboard/frontend
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        working-directory: git-proxy-java-dashboard/frontend
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # ratchet:actions/upload-artifact@v7
+        with:
+          name: playwright-report
+          path: git-proxy-java-dashboard/frontend/playwright-report/
+          retention-days: 14
+
   dependency-submission:
     name: Dependency Submission
     runs-on: ubuntu-latest

git-proxy-java-dashboard/frontend/.gitignore

@@ -30,6 +30,11 @@ vite.config.ts.timestamp-*
 # Local env overrides
 *.local
 
+# Playwright
+/test-results/
+/playwright-report/
+/tests/.auth/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

git-proxy-java-dashboard/frontend/package.json

@@ -9,7 +9,8 @@
     "lint": "eslint .",
     "format": "prettier --write src",
     "format:check": "prettier --check src",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "diff2html": "^3.4.56",
@@ -32,6 +33,7 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^8.0.1",
-    "prettier": "^3.5.3"
+    "prettier": "^3.5.3",
+    "@playwright/test": "^1.49.0"
   }
 }

git-proxy-java-dashboard/frontend/playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests',
+  use: {
+    baseURL: 'http://localhost:8080',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'GITPROXY_DATABASE_TYPE=h2-mem ../../gradlew :git-proxy-java-dashboard:run',
+    url: 'http://localhost:8080/api/health',
+    timeout: 120_000,
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'setup',
+      testMatch: /auth\.setup\.ts/,
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'tests/.auth/admin.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+})

git-proxy-java-dashboard/frontend/src/api.ts

@@ -237,7 +237,7 @@ export async function fetchUserPermissions(username: string) {
 
 export async function addUserPermission(
   username: string,
-  data: { provider: string; path: string; pathType: string; operations: string },
+  data: { provider: string; value: string; matchType: string; operations: string },
 ) {
   const res = await apiFetch(`/api/users/${encodeURIComponent(username)}/permissions`, {
     method: 'POST',

git-proxy-java-dashboard/frontend/src/components/PermissionBadges.tsx

@@ -1,16 +1,16 @@
 import type { RepoPermission } from '../types'
 
-export function PathTypeBadge({ pathType }: { pathType: RepoPermission['pathType'] }) {
+export function PathTypeBadge({ matchType }: { matchType: RepoPermission['matchType'] }) {
   const styles = {
     LITERAL: 'bg-gray-100 text-gray-600',
     GLOB: 'bg-purple-50 text-purple-700',
     REGEX: 'bg-orange-50 text-orange-700',
   }
   return (
     <span
-      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${styles[pathType]}`}
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${styles[matchType]}`}
     >
-      {pathType.toLowerCase()}
+      {matchType.toLowerCase()}
     </span>
   )
 }

git-proxy-java-dashboard/frontend/src/pages/UserDetail.tsx

@@ -626,8 +626,8 @@ function AddPermissionModal({
     try {
       await addUserPermission(username, {
         provider: provider.trim(),
-        path: path.trim(),
-        pathType,
+        value: path.trim(),
+        matchType: pathType,
         operations,
       })
       onAdded()
@@ -790,9 +790,9 @@ function PermissionsTab({ username, isAdmin }: { username: string; isAdmin: bool
                     </span>
                   </td>
                   <td className="px-4 py-3">
-                    <PathTypeBadge pathType={p.pathType} />
+                    <PathTypeBadge matchType={p.matchType} />
                   </td>
-                  <td className="px-4 py-3 font-mono text-gray-700 text-xs">{p.path}</td>
+                  <td className="px-4 py-3 font-mono text-gray-700 text-xs">{p.value}</td>
                   <td className="px-4 py-3">
                     <OperationsBadge operations={p.operations} />
                   </td>

git-proxy-java-dashboard/frontend/src/types.ts

@@ -128,8 +128,8 @@ export interface RepoPermission {
   id: string
   username: string
   provider: string
-  path: string
-  pathType: 'LITERAL' | 'GLOB' | 'REGEX'
+  value: string
+  matchType: 'LITERAL' | 'GLOB' | 'REGEX'
   operations: 'PUSH' | 'REVIEW' | 'PUSH_AND_REVIEW' | 'SELF_CERTIFY'
   source: 'CONFIG' | 'DB'
 }

git-proxy-java-dashboard/frontend/tests/auth.setup.ts

@@ -0,0 +1,17 @@
+import { test as setup } from '@playwright/test'
+import path from 'path'
+import fs from 'fs'
+
+const authFile = path.join(__dirname, '.auth/admin.json')
+
+setup('authenticate as admin', async ({ page }) => {
+  fs.mkdirSync(path.dirname(authFile), { recursive: true })
+
+  await page.goto('/login.html')
+  await page.fill('#username', 'admin')
+  await page.fill('#password', 'admin')
+  await page.click('button[type="submit"]')
+  await page.waitForURL('**/dashboard/**')
+
+  await page.context().storageState({ path: authFile })
+})

git-proxy-java-dashboard/frontend/tests/permissions.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('add and remove a permission from the user detail page', async ({ page }) => {
+  const testPath = `/playwright-test/${Date.now()}/**`
+
+  await page.goto('/dashboard/users/admin')
+
+  // Switch to the Permissions tab
+  await page.getByRole('button', { name: 'Permissions' }).click()
+  await expect(page.getByRole('button', { name: '+ Add Permission' })).toBeVisible()
+
+  // Open the modal and fill in the path; provider/matchType/operations use their defaults
+  await page.getByRole('button', { name: '+ Add Permission' }).click()
+  await expect(page.getByRole('heading', { name: 'Add Permission' })).toBeVisible()
+  await page.getByPlaceholder('/owner/repo').fill(testPath)
+  await page.getByRole('button', { name: 'Add' }).click()
+
+  // New row should appear in the table with the correct badges
+  const row = page.locator('tbody tr').filter({ hasText: testPath })
+  await expect(row).toBeVisible()
+  await expect(row.getByText('glob')).toBeVisible()
+  await expect(row.getByText('push_and_review')).toBeVisible()
+
+  // Remove the permission and verify it disappears
+  await row.getByRole('button', { name: 'Remove' }).click()
+  await expect(page.getByText(testPath)).not.toBeVisible()
+})