Skip to content

ENG-3001: Add OAuth API clients list page#7747

Open
tvandort wants to merge 10 commits intomainfrom
ENG-3001-ui-list
Open

ENG-3001: Add OAuth API clients list page#7747
tvandort wants to merge 10 commits intomainfrom
ENG-3001-ui-list

Conversation

@tvandort
Copy link
Contributor

@tvandort tvandort commented Mar 24, 2026

Ticket ENG-3001

Description Of Changes

Adds navigation, RTK Query slice, API types, table component and tests,
and the /api-clients index page so users can view all OAuth clients.

Code Changes

  • Implement API slices
  • Add OAuth client list page

Steps to Confirm

  1. Go to the /api-clients or navigate to the page through Settings > API clients
  2. Confirm that the page loads. (An api client may not exist yet)
  3. call /api/v1/oauth/client
  4. refresh /api-clients and check that the new client is listed

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
    • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
    • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
    • Updates unreleased work already in Changelog, no new entry necessary
  • UX feedback:
    • All UX related changes have been reviewed by a designer
    • No UX review needed
  • Followup issues:
    • Followup issues created
    • No followup issues
  • Database migrations:
    • Ensure that your downrev is up to date with the latest revision on main
    • Ensure that your downgrade() migration is correct and works
      • If a downgrade migration is not possible for this change, please call this out in the PR description!
    • No migrations
  • Documentation:
    • Documentation complete, PR opened in fidesdocs
    • Documentation issue created in fidesdocs
    • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
    • No documentation updates required

tvandort and others added 2 commits March 24, 2026 13:16
Adds navigation, RTK Query slice, API types, table component and tests,
and the /api-clients index page so users can view all OAuth clients.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tvandort tvandort requested a review from a team as a code owner March 24, 2026 18:05
@tvandort tvandort requested review from speaker-ender and removed request for a team March 24, 2026 18:05
@vercel
Copy link
Contributor

vercel bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
fides-plus-nightly Ready Ready Preview, Comment Mar 26, 2026 9:55pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
fides-privacy-center Ignored Ignored Mar 26, 2026 9:55pm

Request Review

Copy link

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this is a clean, well-scoped addition. The RTK Query slice is consistent with existing patterns, the types are properly generated/exported, the nav wiring is correct, and the test coverage is solid for a list component. A few things to address:

Suggestion (worth fixing before merge)

  • navigator.clipboard.writeText() in ClipboardButton.tsx returns a Promise whose rejection is silently swallowed. The tooltip will show "Copied!" even when the write failed. The fix is straightforward — move setTooltipText into .then() and add a .catch().
  • The error value from useOAuthClientsList is never rendered. A failed API call looks identical to an empty list from the user's perspective.

Nice to have

  • Empty state copy references a "Create API client" button that doesn't exist in this PR yet.
  • rotateOAuthClientSecret is the only mutation without invalidatesTags, which is inconsistent and could cause stale cache issues when a detail page is added.

<div>
<List
loading={isLoading}
itemLayout="horizontal"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: surface API errors to the user

error is returned from useOAuthClientsList but never destructured or rendered in OAuthClientsList. If the API call fails, the component shows an empty list with no feedback — the user has no way to distinguish a genuine "no clients" state from a failed request.

Consider adding a simple error banner or inline message, e.g.:

const { data, total, isLoading, error, page, pageSize, setPage, setPageSize } =
  useOAuthClientsList();

if (error) {
  return <Alert type="error" message="Failed to load API clients." />;
}

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Mar 24, 2026

Greptile Summary

This PR introduces the /api-clients index page, allowing users to view all OAuth clients through Settings > API Clients. It adds an RTK Query slice with full CRUD + secret-rotation endpoints, a paginated list component, navigation entries, generated API types, and a comprehensive test suite. All concerns raised in the previous review round (URL-synced pagination via useAntPagination, hoisted permission check, Flex wrapper, and clipboard promise handling) have been addressed.\n\nKey changes:\n- New page pages/api-clients/index.tsx — thin Next.js shell wrapping OAuthClientsList\n- OAuthClientsList.tsx — uses useAntPagination for URL-synced pagination, evaluates canUpdate once at the parent and passes it as a prop\n- oauth-clients.slice.ts — RTK Query endpoints for list, get, create, update, delete, and rotate; the \"oauth/client\" URL prefix is a magic string repeated six times that should be extracted to a named constant\n- ClipboardButton.tsx — now uses navigator.clipboard.writeText with proper .then(onFulfilled, onRejected) error handling\n- OAuthClientsList.test.tsxnavigator.clipboard.writeText mock should return a resolved Promise (mockResolvedValue(undefined)) to avoid confusing TypeErrors if a future test clicks the copy button\n- fidesui/index.ts — exports Transfer/TransferProps, which are not consumed anywhere in this PR

Confidence Score: 4/5

PR is safe to merge; all prior blocking concerns have been resolved and remaining items are low-risk style suggestions.

Prior review concerns (pagination URL sync, per-item permission hook, div wrapper, unhandled clipboard promise) are all addressed. The two remaining P2 suggestions — extracting the repeated URL constant and fixing the clipboard mock return type — are non-blocking. The unrelated Transfer export in fidesui is minor. Core functionality is clean, well-tested, and follows project patterns.

No files require special attention; oauth-clients.slice.ts and OAuthClientsList.test.tsx have minor style improvements worth addressing before follow-up PRs build on top of them.

Important Files Changed

Filename Overview
clients/admin-ui/src/features/oauth/OAuthClientsList.tsx New list component for OAuth clients; properly uses useAntPagination, hoists canUpdate permission check to parent, and uses Flex wrappers throughout — all previous review concerns addressed.
clients/admin-ui/src/features/oauth/oauth-clients.slice.ts RTK Query slice for OAuth client CRUD + secret rotation; the oauth/client URL prefix is repeated six times as a magic string and should be extracted to a constant.
clients/admin-ui/src/features/oauth/OAuthClientsList.test.tsx Comprehensive unit tests for the list component; clipboard mock uses jest.fn() instead of jest.fn().mockResolvedValue(undefined), which would cause confusing TypeError failures if any future test clicks the clipboard button.
clients/admin-ui/src/features/common/ClipboardButton.tsx Replaced Chakra clipboard hook with navigator.clipboard.writeText; both success and failure cases are now properly handled via .then(onFulfilled, onRejected).
clients/admin-ui/src/pages/api-clients/index.tsx Thin Next.js page component; correctly composes FixedLayout, PageHeader, and OAuthClientsList.
clients/fidesui/src/index.ts Adds Transfer and TransferProps exports; these appear unrelated to OAuth client list functionality in this PR.
clients/admin-ui/src/features/common/nav/nav-config.tsx Adds 'API clients' nav entry (visible, CLIENT_READ-gated) and a hidden 'API client detail' placeholder entry for future detail page routing.
clients/admin-ui/src/features/common/nav/routes.ts Adds API_CLIENTS_ROUTE and API_CLIENT_DETAIL_ROUTE constants alongside existing route definitions.
clients/admin-ui/src/types/api/models/ClientResponse.ts New generated type model matching the backend ClientResponse schema; correctly omits client_secret.
clients/admin-ui/src/types/api/models/ClientSecretRotateResponse.ts New type model for secret rotation response; includes client_id and client_secret (shown exactly once per the comment).
clients/admin-ui/src/types/api/models/Page_ClientResponse_.ts Generated pagination wrapper type for ClientResponse; mirrors the fastapi-pagination Page schema.
clients/admin-ui/src/features/common/api.slice.ts Registers "OAuth Client" as a cache tag type so RTK Query can invalidate/provide it across the app.
clients/admin-ui/src/types/api/index.ts Exports three new type models (ClientResponse, ClientSecretRotateResponse, Page_ClientResponse_) in alphabetical order.
changelog/7747-oauth-clients-list-page.yaml Changelog entry for PR #7747; correctly categorised as 'Added'.

Reviews (2): Last reviewed commit: "Mock useAntPagination in OAuthClientsLis..." | Re-trigger Greptile

@tvandort
Copy link
Contributor Author

@greptile rereview

… error

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant