Feat/typescript playwright e2e 4246

[omorros]

🔗 Related Issue

Closes #4246

---

📝 Summary

What does this PR do and why?

Adds a TypeScript Playwright E2E suite and CI workflow for the new React admin UI (client/), per #4246. Covers smoke tests (app loads, unauth redirect, static assets) and auth
flows (login success / 401 / 500, loading state, forgot-password, pre-authed session). Backend is stubbed via page.route() — no Python gateway required at test time.

---

🏷️ Type of Change

• Bug fix
• Feature / Enhancement
• Documentation
• Refactor
• Chore (deps, CI, tooling)
• Other (describe below)

---

🧪 Verification

Client-only changes; ran the client's npm scripts instead of the repo-level make targets.

Check	Command	Status
Lint suite	make lint	✅ (npm run lint, npm run format:check)
Unit tests	make test	✅ Vitest 1/1 + Playwright 13/13 (13.4s)
Coverage ≥ 80%	make coverage	n/a — no Python changes

---

✅ Checklist

• Code formatted (make black isort pre-commit)
• Tests added/updated for changes
• Documentation updated (if applicable)
• No secrets or credentials committed

---

📓 Notes (optional)

Screenshots, design decisions, or additional context.

• Targets epic/ui-rewrite (not main) — client/ only exists on that epic.
• Dev server: npm run dev:e2e → vite --base=/ --port 5173 --strictPort, spawned by Playwright's webServer.
• 401-on-login quirk: the API client treats any 401 (including /auth/login) as a session-expiry and does window.location.replace('/app/login'), wiping React state; the 401
  test asserts the observable outcome (stuck on /app/login, no token) with an inline comment so any future fix will force the test to be updated.
• CI (client-e2e.yml) is path-filtered to client/**, caches browsers by lockfile hash, and uploads the HTML report + traces on failure.
• Out of scope: CRUD/workflow tests requiring a live backend, visual regression, perf budgets, security attack-vector suites — follow-ups.

[gcgoncalves]

Thanks, @omorros! Great contribution, we've been discussing adding the tests for the new UI in TS both to keep the isolated from the HTMX ones and to have them ready early on, so that we could write tests as we added features. I'm moving the base of the PR from main to the branch holding the new UI.

[gcgoncalves]

🍭

[marekdano]

@omorros - thanks for your contribution!

Just having a few comments:

• The Client E2E (Playwright) tests have failed https://github.com/IBM/mcp-context-forge/actions/runs/24522603636.
  I think checkout part is missing

 # -----------------------------------------------------------
      # 0️⃣  Checkout
      # -----------------------------------------------------------
      - name: ⬇️  Checkout source
        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
        with:
          persist-credentials: false
          fetch-depth: 1

Can you please compare your file Client E2E (Playwright) with Lint & Test Client one at https://github.com/IBM/mcp-context-forge/actions/runs/24522602327/workflow?pr=4255?

• It'll be worth investigating and running e2e tests for the new React UI against the real API endpoints instead of mocking them in the e2e tests.

[omorros]

Hey @marekdano, thanks for the review.

Quick clarification: the checkout step is already in the workflow (lines 48 to 52). The actual cause of the failure was an unpinned actions/cache@v4. Every other workflow in the repo pins it by SHA, and IBM's allowlist enforces that. Fixed in 038fe4b.

On running e2e against the real API, makes sense as a follow-up. This PR was scoped to mocked-backend smoke so it stays fast and doesn't overlap with Playwright CI Smoke. Happy to expand scope here if you'd rather not split it.

[marekdano]

Quick clarification: the checkout step is already in the workflow (lines 48 to 52). The actual cause of the failure was an unpinned actions/cache@v4. Every other workflow in the repo pins it by SHA, and IBM's allowlist enforces that. Fixed in 038fe4b.

The change still does not help to execute the smoke test successfully. https://github.com/IBM/mcp-context-forge/actions/workflows/client-e2e.yml

On running e2e against the real API, makes sense as a follow-up. This PR was scoped to mocked-backend smoke so it stays fast and doesn't overlap with Playwright CI Smoke. Happy to expand scope here if you'd rather not split it.

Yes, keep the smoke test with the mock data now.

If we get the smoke test running successfully in CI for this PR, we can merge it.