feat: root keys table - Merge after #3331#3332
Conversation
|
|
Warning Rate limit exceeded@ogzhanolguncu has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 22 minutes and 11 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis change introduces a complete "Root Keys" feature to the dashboard settings, including frontend React components for list display, filtering, navigation, and skeleton loaders, as well as backend TRPC API endpoints and schema validation for querying root keys with categorized permissions and pagination. All logic is modularized and strongly typed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RootKeysPage
participant RootKeysList
participant useRootKeysListQuery
participant TRPC API (queryRootKeys)
participant Database
User->>RootKeysPage: Navigates to Root Keys page
RootKeysPage->>RootKeysList: Render table UI
RootKeysList->>useRootKeysListQuery: Request root keys data (with filters, cursor)
useRootKeysListQuery->>TRPC API (queryRootKeys): Fetch paginated root keys
TRPC API (queryRootKeys)->>Database: Query root keys, permissions, apply filters
Database-->>TRPC API (queryRootKeys): Return root keys and permissions
TRPC API (queryRootKeys)-->>useRootKeysListQuery: Return data (with permission summary, critical flag)
useRootKeysListQuery-->>RootKeysList: Provide root keys data, loading state
RootKeysList-->>User: Display table rows, skeletons, and navigation actions
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
ogzhanolguncu
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
ogzhanolguncu
requested review from
chronark,
mcstepp and
perkinsjr
as code owners
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (14)
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/assigned-items-cell.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/critical-perm-warning.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/last-updated.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/skeletons.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/hooks/use-root-keys-list-query.ts(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/query-logs.schema.ts(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/root-keys-list.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/components/table/utils/get-row-class.ts(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/filters.schema.ts(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/hooks/use-filters.ts(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/navigation.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys-v2/page.tsx(1 hunks)apps/dashboard/lib/trpc/routers/index.ts(2 hunks)apps/dashboard/lib/trpc/routers/settings/root-keys/query.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
apps/dashboard/app/(app)/settings/root-keys-v2/hooks/use-filters.ts (1)
Learnt from: ogzhanolguncu
PR: unkeyed/unkey#3401
File: apps/dashboard/app/(app)/logs/filters.query-params.ts:10-0
Timestamp: 2025-06-24T13:29:10.129Z
Learning: The `buildQueryParams` function in `apps/dashboard/app/(app)/logs/filters.query-params.ts` calls `useFilters()` hook inside it, but this is valid because the function is only called from within other React hooks, maintaining the Rules of Hooks compliance.
🔇 Additional comments (23)
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/utils/get-row-class.ts (1)
15-24: Well-structured styling configuration.The
STATUS_STYLESconstant provides a clean separation of styling concerns with appropriate Tailwind classes for different states.apps/dashboard/lib/trpc/routers/index.ts (2)
88-88: LGTM! Proper import addition.The import follows the established pattern and correctly imports the query function from the appropriate module.
125-129: LGTM! Router structure follows established patterns.The nested router structure for
settings.rootKeys.queryis consistent with other endpoints in the codebase and provides a clean API surface.apps/dashboard/app/(app)/settings/root-keys-v2/page.tsx (2)
5-23: Clean component structure and proper client-side rendering.The component structure is well-organized with appropriate use of "use client" directive and clean JSX layout.
9-12: ```shell
#!/bin/bashList all .tsx files under the settings directory
fd -t f -e tsx apps/dashboard/app/(app)/settings
Search those files for Next.js client hook useParams
rg -n 'useParams' -g '*.tsx' apps/dashboard/app/(app)/settings
Search for data fetching patterns (trpc.useQuery) in settings pages
rg -n 'trpc.useQuery' -g '.tsx' apps/dashboard/app/(app)/settings
</details> <details> <summary>apps/dashboard/app/(app)/settings/root-keys-v2/components/table/hooks/use-root-keys-list-query.ts (3)</summary> `15-40`: **Robust filter validation and query parameter construction.** The query parameter construction includes proper validation of operators against field configuration and handles edge cases appropriately. --- `42-53`: **Well-configured infinite query with appropriate options.** The TRPC infinite query is properly configured with pagination, infinite stale time, and disabled refetch options suitable for this use case. --- `55-72`: **Efficient state management with Map data structure.** The use of Map for storing root keys provides efficient lookups and the effect properly consolidates data from all fetched pages. </details> <details> <summary>apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/critical-perm-warning.tsx (3)</summary> `10-18`: **Clean conditional rendering pattern.** The early return pattern for non-critical permissions is clean and avoids unnecessary DOM elements while maintaining consistent layout with the fixed-width div. --- `20-38`: **Well-implemented interactive indicator with informative tooltip.** The combination of `InfoTooltip` with conditional styling provides good user experience with clear visual feedback and helpful explanatory content. --- `24-27`: **Clear and actionable tooltip content.** The tooltip message effectively communicates the significance of critical permissions to users. </details> <details> <summary>apps/dashboard/app/(app)/settings/root-keys-v2/components/table/query-logs.schema.ts (1)</summary> `1-26`: **Well-structured schema implementation.** The schema definition is clean and follows Zod best practices. The dynamic construction of filter fields using `reduce` is appropriate, and the type inference provides good TypeScript integration. </details> <details> <summary>apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/assigned-items-cell.tsx (1)</summary> `4-45`: **Clean component implementation with good separation of concerns.** The component properly handles both empty and populated states with appropriate styling. The conditional class name logic is well-organized and readable. </details> <details> <summary>apps/dashboard/app/(app)/settings/root-keys-v2/components/table/root-keys-list.tsx (1)</summary> `161-161`: ```shell #!/bin/bash # Show the RootKeyResponse zod schema to verify available properties rg -n -C5 "const RootKeyResponse" apps/dashboard/lib/trpc/routers/settings/root-keys/query.tsapps/dashboard/app/(app)/settings/root-keys-v2/hooks/use-filters.ts (3)
13-15: LGTM! Clean mapping of filter fields to parsers.The use of
Object.fromEntrieswith type assertion is appropriate here for constructing the query params configuration.
22-45: Well-structured filter computation with proper validation.Good use of
useMemoto avoid unnecessary recomputations. The validation ensures only valid filters with string values and operators are included.
47-91: Robust filter update implementation with comprehensive validation.Excellent error handling with clear messages for invalid fields, operators, and value types. The approach of initializing all fields to null ensures clean state updates.
apps/dashboard/lib/trpc/routers/settings/root-keys/query.ts (3)
7-37: Well-defined response schemas with appropriate pagination limit.The Zod schemas provide good type safety and the pagination limit of 50 is reasonable for performance.
58-90: Efficient parallel queries with smart pagination check.Good use of
Promise.allfor concurrent execution and the LIMIT+1 technique for checking if more results exist.
97-124: Clean data transformation with proper null handling.Good use of
filter(Boolean)to ensure only valid permissions are processed. The response structure properly matches the defined schema.apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/skeletons.tsx (1)
1-66: Well-structured skeleton components with consistent styling.Clean implementation of skeleton loaders that match the actual table columns. Good use of the animate-pulse class for loading indication.
apps/dashboard/app/(app)/settings/root-keys-v2/filters.schema.ts (2)
41-43: Excellent defensive programming with runtime validation.Good practice to validate the configuration at runtime to catch potential issues early.
18-37: Well-structured filter configuration with clear field definitions.The configuration is comprehensive and the comments help clarify the purpose of each field. The consistent operator set across fields maintains a good user experience.
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/utils/get-row-class.ts
Show resolved
Hide resolved
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/utils/get-row-class.ts
Show resolved
Hide resolved
...dashboard/app/(app)/settings/root-keys-v2/components/table/hooks/use-root-keys-list-query.ts
Show resolved
Hide resolved
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/last-updated.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/settings/root-keys-v2/components/table/root-keys-list.tsx
Show resolved
Hide resolved
* feat: add trpc and filters schema for root keys * refactor: get rid of extra round trip and simplify query * feat: add root keys table * feat: add filters * fix: nitpick * fix: coderabbit issues * fix: typos and coderabbit issues --------- Co-authored-by: James P <james@unkey.dev>
2 participants
What does this PR do?
This PR is continuation of #3331. This PR adds table view for root keys using tRPC defined in the previous PR.
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
/settings/root-keys-v2check this page and compare it against/settings/root-keys.Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit