Skip to content

feat: rbac keys - Merge after RBAC Permissions#3319

Closed
ogzhanolguncu wants to merge 48 commits intomainfrom
rbac-keys
Closed

feat: rbac keys - Merge after RBAC Permissions#3319
ogzhanolguncu wants to merge 48 commits intomainfrom
rbac-keys

Conversation

@ogzhanolguncu
Copy link
Contributor

@ogzhanolguncu ogzhanolguncu commented Jun 12, 2025

What does this PR do?

This PR allows you to change RBAC config of key in keys list and keys details pages.

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

  • [] Bug fix (non-breaking change which fixes an issue)
  • [] Chore (refactoring code, technical debt, workflow improvements)
  • [] Enhancement (small improvements)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How should this be tested?

  • Add new roles and permissions to key
  • Add permissions via role to key
  • See if Granted Access is rendering correct, deduplicated slugs
  • Try to update existing roles and permissions
  • Try to break UI

Checklist

Required

  • Filled out the "How to test" section in this PR
  • Read Contributing Guide
  • Self-reviewed my own code
  • Commented on my code in hard-to-understand areas
  • Ran pnpm build
  • Ran pnpm fmt
  • Checked for warnings, there are none
  • Removed all console.logs
  • Merged the latest changes from main onto my branch with git pull origin main
  • My changes don't cause any responsiveness issues

Appreciated

  • If a UI change was made: Added a screen recording or screenshots to this PR
  • Updated the Unkey Docs if changes were necessary

Summary by CodeRabbit

  • New Features

    • Introduced advanced role and permission management interfaces with searchable, filterable, and paginated tables for both roles and permissions.
    • Added dialogs for creating and editing roles and permissions with validation and persistent form state.
    • Enabled bulk selection and deletion of roles and permissions with confirmation dialogs and animated UI feedback.
    • Integrated AI-powered natural language search for roles and permissions, converting queries into structured filters.
    • Added detailed audit logging and contextual toasts for create, update, and delete actions.
  • Improvements

    • Enhanced navigation components for roles and permissions to use dynamic dialogs for creation and editing.
    • Refined UI with new skeleton loaders, animated counters, and improved empty states.
    • Streamlined client-side data fetching, filtering, and selection logic for better performance and user experience.
  • Bug Fixes

    • Improved error handling and user feedback for failed operations, including actionable support links in error toasts.
  • Removals

    • Removed legacy server-side pages and components for roles and permissions, consolidating logic into new client-side interfaces.
    • Deleted old RBAC dialog components and related UI from the API dashboard.
  • Documentation

    • Updated schema definitions and type exports for filters, queries, and form validation to support new features and UI components.

@changeset-bot
Copy link

changeset-bot bot commented Jun 12, 2025

⚠️ No Changeset found

Latest commit: c64fa89

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Jun 12, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
dashboard ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 12, 2025 1:56pm
engineering ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 12, 2025 1:56pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 12, 2025

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This change refactors the dashboard’s authorization roles and permissions management by removing legacy RBAC UI components and server-rendered pages, and introducing a new client-side architecture. It adds comprehensive, modular React components, hooks, and schemas for managing roles, permissions, and key assignments, along with new TRPC procedures for querying, upserting, and deleting these entities, plus LLM-powered search and filtering.

Changes

File(s) / Path(s) Change Summary
.../dashboard/app/(app)/authorization/permissions/[permissionId]/
.../dashboard/app/(app)/authorization/roles/[roleId]/

.../dashboard/app/(app)/authorization/permissions/empty.tsx
.../dashboard/app/(app)/authorization/roles/empty.tsx
.../dashboard/app/(app)/authorization/layout.tsx
Deleted legacy server-side pages and components for permissions and roles management, including navigation, deletion, settings, and tree views.
.../dashboard/app/(app)/authorization/permissions/components/
.../dashboard/app/(app)/authorization/roles/components/
Added new modular React components for permissions and roles management: tables, controls, filters, search, upsert dialogs, selection controls, assigned items, skeletons, and action popovers.
.../dashboard/app/(app)/authorization/permissions/components/table/hooks/use-permissions-list-query.ts
.../dashboard/app/(app)/authorization/roles/components/table/hooks/use-roles-list-query.ts
Added hooks for paginated, filtered querying of permissions and roles.
.../dashboard/app/(app)/authorization/permissions/components/table/query-logs.schema.ts
.../dashboard/app/(app)/authorization/roles/components/table/query-logs.schema.ts
Added Zod schemas for permissions and roles table query payloads.
.../dashboard/app/(app)/authorization/permissions/filters.schema.ts
.../dashboard/app/(app)/authorization/roles/filters.schema.ts
Added schemas and types for permissions and roles filters, fields, and operators.
.../dashboard/app/(app)/authorization/permissions/hooks/use-filters.ts
.../dashboard/app/(app)/authorization/roles/hooks/use-filters.ts
Added hooks to manage filters via URL query parameters.
.../dashboard/app/(app)/authorization/permissions/page.tsx
.../dashboard/app/(app)/authorization/roles/page.tsx
Refactored to client-side components with no server-side data fetching; render new controls and lists.
.../dashboard/app/(app)/authorization/permissions/navigation.tsx
.../dashboard/app/(app)/authorization/roles/navigation.tsx
Refactored navigation components to remove inline modals and counts; use dynamically imported upsert dialogs.
.../dashboard/app/(app)/authorization/permissions/components/table/components/actions/components/
.../dashboard/app/(app)/authorization/roles/components/table/components/actions/components/
Added modular action components for editing, deleting, and info display for permissions and roles.
.../dashboard/app/(app)/authorization/permissions/components/upsert-permission/
.../dashboard/app/(app)/authorization/roles/components/upsert-role/
Added upsert dialogs, validation schemas, and field components for creating/editing permissions and roles, including assignment of keys and permissions.
.../dashboard/app/(app)/authorization/permissions/components/controls/
.../dashboard/app/(app)/authorization/roles/components/controls/
Added search and filter controls, including LLM-based search for both permissions and roles.
.../dashboard/app/(app)/authorization/permissions/components/control-cloud/index.tsx
.../dashboard/app/(app)/authorization/roles/components/control-cloud/index.tsx
Added cloud-based control components for managing filters.
.../dashboard/app/(app)/authorization/permissions/components/table/utils/get-row-class.ts
.../dashboard/app/(app)/authorization/roles/components/table/utils/get-row-class.ts
Added utilities for row styling based on selection state.
.../dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx
.../dashboard/app/(app)/apis/[apiId]/api-id-navbar.tsx
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/*
Removed old RBAC dialog and permission assignment components.
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/* Added new RBAC dialog for key management, with supporting hooks and field components for assigning roles and permissions.
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/hooks/use-edit-rbac.ts Added hook for updating key RBAC settings with mutation and toast handling.
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/keys-table-action.popover.constants.tsx
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/keys-table-action.popover.tsx
Enhanced action popover with RBAC management and prefetch logic.
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx Updated to use new KeysTableActions component for action column.
.../dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx Exported AnimatedCounter component.
.../dashboard/components/selected-item-list.tsx Added generic SelectedItemsList component for displaying selected items with removal.
.../dashboard/components/virtual-table/index.tsx Added conditional row borders to skeleton loading rows.
.../dashboard/lib/trpc/routers/authorization/permissions/* Added TRPC procedures for querying, upserting, deleting, and LLM search of permissions, with schemas and utilities for filters and structured search.
.../dashboard/lib/trpc/routers/authorization/roles/* Added TRPC procedures for querying, upserting, deleting roles, LLM search, keys and permissions assignment, and related schemas/utilities.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant UI
  participant TRPC
  participant DB
  participant LLM

  User->>UI: Open Permissions or Roles Page
  UI->>TRPC: queryPermissions/queryRoles (with filters, pagination)
  TRPC->>DB: Fetch permissions/roles, apply filters, join associations
  DB-->>TRPC: Return paginated results
  TRPC-->>UI: Return permissions/roles data
  UI-->>User: Render virtualized table with controls

  User->>UI: Search or filter (via LLM or controls)
  UI->>TRPC: permissionsLlmSearch/rolesLlmSearch (with query)
  TRPC->>LLM: getStructuredSearchFromLLM(query)
  LLM-->>TRPC: Return structured filters
  TRPC-->>UI: Return filter objects
  UI->>TRPC: queryPermissions/queryRoles (with new filters)
  TRPC->>DB: Fetch filtered data
  DB-->>TRPC: Return results
  TRPC-->>UI: Return data
  UI-->>User: Update table

  User->>UI: Edit/Create/Delete Permission/Role
  UI->>TRPC: upsertPermission/upsertRole/deletePermissionWithRelations/deleteRoleWithRelations
  TRPC->>DB: Insert/Update/Delete records, handle relations, log audit
  DB-->>TRPC: Confirm operation
  TRPC-->>UI: Return success/error
  UI-->>User: Show toast, update UI
Loading

Possibly related PRs

  • feat: rbac roles  #3297: Introduces new RBAC roles components and hooks, including selection controls and role management dialogs, overlapping with this PR’s refactor of RBAC UI components and hooks for roles and permissions management.

Suggested labels

Feature, Dashboard, 🕹️ oss.gg, :joystick: 750 points

Suggested reviewers

  • perkinsjr
  • chronark
  • mcstepp
  • MichaelUnkey
✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 12, 2025

Thank you for following the naming conventions for pull request titles! 🙏

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