feat(admin-panel): badge connected services as device or OAuth client

[vbudhram]

Because

• The admin panel Connected Services list labeled every row without a device ID as an OAuth client.
• A standalone web session has no client ID. The list gave it the wrong label.

This pull request

• Adds a serviceKind helper in ConnectedServices/index.tsx. The helper returns the badge label and the badge color.
• Labels a row with a device ID "Device", a row with a client ID "OAuth client", and every other row "Web session".
• Adds tests in index.test.tsx for the three labels and for a row that has both IDs.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-14578

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: ConnectedServices/index.tsx, the serviceKind helper.
• Suggested review order: read the helper first, then the tests in index.test.tsx.
• Risky or complex parts: none. The change only affects the badge text and color.

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

• Unit tests for fxa-admin-panel ConnectedServices: 8 passed, 0 failed.
• npx nx lint fxa-admin-panel: exit 0. tsc --noEmit: clean.
• Functional tests were not run.

[Copilot]

🟡 Changes recommended

Standalone web sessions are incorrectly labeled as OAuth clients.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds visual service-type badges to the admin panel’s Connected Services cards.

Changes:

• Labels services as devices or OAuth clients with color-coded badges.
• Adds tests for both labels.

File summaries

File	Description
ConnectedServices/index.tsx	Renders service-type badges.
ConnectedServices/index.test.tsx	Tests device and OAuth labels.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Copilot review overview

🟢 Approval recommended

The classification logic matches the service data model and all branches are covered by focused tests.

Review effort: Balanced
Findings: None

Resolved since last review (1)

• Standalone web sessions are also returned here, so !deviceId does not imply an OAuth client. The…