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

coopernetes · claude · coopernetes · commit 3e387c209f57 · 2026-05-12T17:58:05.000-04:00
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').

Also fixes validation step expand panel in push detail view: error/blocked message
was never shown in the expanded section (only s.content was rendered, not
s.errorMessage/s.blockedMessage).

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 &lt;noreply@anthropic.com&gt;
diff --git a/.github/workflows/ci.yml b/.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
diff --git a/git-proxy-java-dashboard/frontend/.gitignore b/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
diff --git a/git-proxy-java-dashboard/frontend/package-lock.json b/git-proxy-java-dashboard/frontend/package-lock.json
diff --git a/git-proxy-java-dashboard/frontend/package.json b/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"
   }
 }
diff --git a/git-proxy-java-dashboard/frontend/playwright.config.ts b/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'],
+    },
+  ],
+})
diff --git a/git-proxy-java-dashboard/frontend/src/api.ts b/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',
diff --git a/git-proxy-java-dashboard/frontend/src/components/PermissionBadges.tsx b/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>
   )
 }
diff --git a/git-proxy-java-dashboard/frontend/src/pages/PushDetail.tsx b/git-proxy-java-dashboard/frontend/src/pages/PushDetail.tsx
@@ -804,15 +804,18 @@ export function PushDetail({ currentUser }: PushDetailProps) {
                         <span className="text-gray-500 text-xs truncate flex-1">
                           {s.errorMessage ?? s.blockedMessage ?? (isSkipped ? 'skipped' : '')}
                         </span>
-                        {(isFailed || isSkipped) && s.content && (
-                          <span className="text-xs text-gray-400 shrink-0">
-                            {isOpen ? '▲ hide' : '▼ details'}
-                          </span>
-                        )}
+                        {(isFailed || isSkipped) &&
+                          (s.content || s.errorMessage || s.blockedMessage) && (
+                            <span className="text-xs text-gray-400 shrink-0">
+                              {isOpen ? '▲ hide' : '▼ details'}
+                            </span>
+                          )}
                       </div>
-                      {isOpen && s.content && (
+                      {isOpen && (s.content || s.errorMessage || s.blockedMessage) && (
                         <pre className="mt-2 ml-6 text-xs bg-gray-50 border border-gray-200 rounded p-3 whitespace-pre-wrap font-mono text-gray-800 overflow-x-auto">
-                          {stripAnsi(s.content)}
+                          {[s.errorMessage ?? s.blockedMessage, s.content]
+                            .filter(Boolean)
+                            .join('\n\n')}
                         </pre>
                       )}
                     </div>
diff --git a/git-proxy-java-dashboard/frontend/src/pages/UserDetail.tsx b/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>
diff --git a/git-proxy-java-dashboard/frontend/src/types.ts b/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'
 }
diff --git a/git-proxy-java-dashboard/frontend/tests/auth.setup.ts b/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 })
+})
diff --git a/git-proxy-java-dashboard/frontend/tests/permissions.spec.ts b/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()
+})

Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,16 @@`
`1`	`1`	`import type { RepoPermission } from '../types'`
`2`	`2`
`3`		`-export function PathTypeBadge({ pathType }: { pathType: RepoPermission['pathType'] }) {`
	`3`	`+export function PathTypeBadge({ matchType }: { matchType: RepoPermission['matchType'] }) {`
`4`	`4`	`const styles = {`
`5`	`5`	`LITERAL: 'bg-gray-100 text-gray-600',`
`6`	`6`	`GLOB: 'bg-purple-50 text-purple-700',`
`7`	`7`	`REGEX: 'bg-orange-50 text-orange-700',`
`8`	`8`	`}`
`9`	`9`	`return (`
`10`	`10`	`<span`
`11`		- className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${styles[pathType]}`}
	`11`	+ className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${styles[matchType]}`}
`12`	`12`	`>`
`13`		`- {pathType.toLowerCase()}`
	`13`	`+ {matchType.toLowerCase()}`
`14`	`14`	`</span>`
`15`	`15`	`)`
`16`	`16`	`}`