fix: Enhance API Key Detail Page: Change Permissions Visualization to Tree Format #2238
Conversation
RajuGangitla
requested review from
perkinsjr,
chronark and
mcstepp
as code owners
|
|
|
📝 Walkthrough📝 WalkthroughWalkthroughThe pull request introduces significant updates to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@RajuGangitla is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for following the naming conventions for pull request titles! 🙏 |
github-actions
bot
added
🕹️ 750 points
Bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (14)
apps/workflows/app/layout.tsx (2)
4-8: Improved font configuration, consider addingpreload.The changes to the
Interfont configuration are good improvements:
display: 'swap'is a recommended setting that improves perceived loading performance by showing a fallback font until the custom font is loaded.adjustFontFallback: falsegives you more control over the font fallback behavior.These changes can enhance the rendering of text on the page, contributing to an improved user experience.
Consider adding the
preloadoption to further optimize font loading:const inter = Inter({ subsets: ["latin"], display: 'swap', - adjustFontFallback: false + adjustFontFallback: false, + preload: true });This will preload the font files, potentially reducing the time it takes for the custom font to appear.
Permissions Tree Structure Not Found
No implementations of the permissions tree structure were detected in the identified files. Please ensure that the main objective of changing the permissions visualization to a tree format has been fully addressed.
🔗 Analysis chain
Line range hint
1-30: Note on PR objectives alignmentWhile the font configuration improvements in this file are beneficial for the overall user experience, they don't directly address the main objective of this PR, which is to change the permissions visualization from a chart format to a tree structure.
To ensure we're not missing any relevant changes, let's verify if there are other files that implement the tree structure for permissions:
This will help us locate the files where the core changes for the permissions visualization are implemented.
To accurately locate the relevant files, we'll adjust our search patterns:
To verify the implementation of the permissions tree structure in the identified files, please run the following scripts:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for files that might contain the new tree structure implementation rg -i -t tsx -t ts "permission.*tree" --files-with-matches # Search for files that might contain changes related to API key permissions rg -i -t tsx -t ts "api.*key.*permission" --files-with-matchesLength of output: 181
Script:
#!/bin/bash # Search for files that might contain the new tree structure implementation rg 'permission.*tree' --glob '*.tsx' --glob '*.ts' --files-with-matches # Search for files that might contain changes related to API key permissions rg 'api.*key.*permission' --glob '*.tsx' --glob '*.ts' --files-with-matchesLength of output: 312
Script:
#!/bin/bash # Search for tree structure implementation in the identified files # Define the list of files to search FILES=( "apps/dashboard/app/(app)/settings/root-keys/new/client.tsx" "apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx" "apps/api/src/routes/v1_keys_updateKey.ts" ) # Define the search patterns related to tree structures PATTERNS=( "permissionsTree" "treeView" "TreeComponent" "renderTree" "recursive" ) # Iterate over each file and search for the patterns for FILE in "${FILES[@]}"; do for PATTERN in "${PATTERNS[@]}"; do rg "$PATTERN" "$FILE" --context 2 done doneLength of output: 2113
apps/engineering/app/layout.tsx (1)
9-10: Consider the trade-offs of the new font configurationThe changes to the
Interfont configuration aim to optimize font loading and rendering:
display: 'swap'improves perceived performance by showing content quickly with a fallback font.adjustFontFallback: falsegives more control over font fallback behavior.While these changes can enhance initial content display speed, they come with potential trade-offs:
- The font swap might be noticeable to users, potentially affecting the user experience.
- Disabling
adjustFontFallbackcould increase layout shift, impacting Cumulative Layout Shift (CLS) metrics.Consider the following recommendations:
- Monitor CLS metrics after this change to ensure they remain within acceptable limits.
- If CLS increases significantly, consider using
font-display: optionalinstead ofswapto prioritize layout stability.- Implement a font loading strategy using
next/font'spreloadoption to further optimize font loading.- Use
fontWeightandfontStyleoptions to load only the necessary font variants, reducing the overall font file size.Example implementation:
const inter = Inter({ subsets: ["latin"], display: 'swap', adjustFontFallback: false, preload: true, weight: ['400', '700'], style: ['normal', 'italic'], });These suggestions aim to balance performance improvements with user experience and web vitals metrics.
apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx (2)
59-61: LGTM! Consider using TypeScript's Pick utility type for props.The export of the
RecursivePermissioncomponent and the updated props align well with the PR objectives of improving consistency and enhancing the permissions visualization. This change allows for better reusability across the application.To improve type safety and readability, consider using TypeScript's
Pickutility type for the props:export const RecursivePermission: React.FC< Pick<NestedPermission, 'id' | 'name' | 'permissions' | 'checked' | 'description'> & { k: string; roleId: string; openAll: boolean } > = ({ k, openAll, id, name, permissions, roleId, checked, description }) => { // ... component implementation };This approach ensures that only the necessary props from
NestedPermissionare included, making the component's interface more explicit and maintainable.
Line range hint
1-124: Great implementation of the tree structure for permissions visualization.The changes successfully address the main objectives of the PR by implementing a tree structure for permissions visualization. This new structure should provide a clearer and more accessible view of permissions, especially when dealing with numerous permissions.
Consider adding a brief comment at the top of the file explaining the purpose of the
TreeandRecursivePermissioncomponents. This would enhance the maintainability of the code and help other developers understand the components' roles quickly.Example:
/** * This file contains components for rendering a tree structure of permissions. * Tree: The main component that renders the entire permissions tree. * RecursivePermission: A reusable component that recursively renders nested permissions. */apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx (1)
74-74: Clean up unnecessary CSS selectorThe CSS selector
[&[data-state=open]>svg]:rotate-90in theCollapsibleTriggerclassName may be unnecessary if you handle the rotation elsewhere. Simplifying it can improve readability.Apply this diff:
-<CollapsibleTrigger className="flex items-center gap-1 transition-all [&[data-state=open]>svg]:rotate-90 "> +<CollapsibleTrigger className="flex items-center gap-1 transition-all">apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx (6)
14-14: Consider removing 'Role' if it's unusedThe imported 'Role' from "@/lib/db" at line 14 does not appear to be used in the code. Removing unnecessary imports can help keep the codebase clean.
Apply this diff to remove the unused import:
-import { and, db, eq, isNull, Role, schema } from "@/lib/db"; +import { and, db, eq, isNull, schema } from "@/lib/db";
28-29: Use 'import type' for type-only importsThe imports at lines 28-29 are only used as types. Using
import typeensures they are removed during transpilation, avoiding unnecessary module loading.Apply this diff to use
import type:-import RolePermissionsTree from "./permission-list"; +import type RolePermissionsTree from "./permission-list"; -import { NestedPermissions } from "@/app/(app)/authorization/roles/[roleId]/tree"; +import type { NestedPermissions } from "@/app/(app)/authorization/roles/[roleId]/tree";🧰 Tools
🪛 Biome
[error] 28-29: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
163-163: Possible typo: Rename 'roleTee' to 'roleTree'The variable
roleTeeat line 163 may be a typo. Renaming it toroleTreeimproves readability and aligns with its purpose of representing a tree structure.Apply this diff to correct the variable name:
-const roleTee = key.workspace.roles.map((role) => { +const roleTree = key.workspace.roles.map((role) => {Remember to update all occurrences of
roleTeetoroleTreethroughout the file.
170-176: Avoid reusing variable name 'p' in nested scopes to prevent confusionAt line 170,
pis declared asconst p = parts[i];, and within the.some()callback at line 176,pis reused as the parameter(p). While JavaScript allows variable shadowing, using different variable names enhances clarity.Consider renaming the parameter in the
.some()callback:-checked: role.permissions.some((p) => p.permissionId === permission.id), +checked: role.permissions.some((perm) => perm.permissionId === permission.id),
185-185: Use 'const' instead of 'let' for variables not reassignedThe variable
dataat line 185 is never reassigned after its initial declaration. Usingconstis preferred for variables that remain constant.Apply this diff to use
const:-let data = { +const data = {🧰 Tools
🪛 Biome
[error] 185-185: This let declares a variable that is only assigned once.
'data' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
352-352: Consider removing commented-out codeThe commented-out code at line 352 seems to be obsolete. Removing it can help maintain a clean and focused codebase.
Apply this diff to remove the commented code:
-{/* <Chart ... /> */}packages/api/src/openapi.d.ts (2)
Line range hint
1176-1208: Deprecation notice forratelimitproperties inupdateKeyThe
ratelimitproperty within theupdateKeyrequest has deprecated fieldstype,refillRate, andrefillInterval. Ensure that any existing implementations are updated to accommodate these changes and that deprecated fields are no longer used.Consider updating documentation to reflect these deprecations and guide users towards the new properties.
1438-1459: Add missingfailurecount ingetVerificationsresponseThe
verificationsobject includes counts forsuccess,rateLimited, andusageExceeded, but it's missing afailurecount to represent other types of failures. Including this could provide more comprehensive analytics.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx (6 hunks)
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx (1 hunks)
- apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx (1 hunks)
- apps/dashboard/app/layout.tsx (1 hunks)
- apps/engineering/app/layout.tsx (1 hunks)
- apps/planetfall/app/layout.tsx (1 hunks)
- apps/workflows/app/layout.tsx (1 hunks)
- packages/api/src/openapi.d.ts (34 hunks)
🧰 Additional context used
🪛 Biome
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
[error] 28-29: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 185-185: This let declares a variable that is only assigned once.
'data' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
🔇 Additional comments (8)
apps/planetfall/app/layout.tsx (1)
5-9: LGTM! Consider monitoring layout shifts.The changes to the
Interfont configuration look good and can potentially improve font loading behavior:
display: 'swap'can prevent "flash of invisible text" (FOIT) and improve perceived loading performance.adjustFontFallback: falsegives more control over font rendering.However, disabling
adjustFontFallbackmight lead to more noticeable layout shifts. Please monitor the impact of this change on the user experience. You can use the following script to check for other instances whereadjustFontFallbackis used in the project:This will help ensure consistency across the project and identify any potential areas where layout shifts might occur.
✅ Verification successful
Configuration Verified!
The
adjustFontFallback: falsesetting is consistently applied across all relevant layout files, ensuring uniform font rendering behavior throughout the project.
- Consistency: All identified
layout.tsxfiles haveadjustFontFallbackset tofalse, indicating a deliberate and uniform configuration.Please continue to monitor the application's user experience to ensure that this setting does not introduce any unexpected layout shifts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for other instances of adjustFontFallback in the project # Search for adjustFontFallback in TypeScript and JavaScript files rg --type-add 'web:*.{ts,tsx,js,jsx}' -t web 'adjustFontFallback'Length of output: 300
apps/dashboard/app/layout.tsx (1)
18-19: Approved: Font configuration changes improve performance, but monitor user experience.The additions of
display: 'swap'andadjustFontFallback: falseto theInterfont configuration are good optimizations:
display: 'swap'improves perceived performance by showing text immediately with a fallback font.adjustFontFallback: falsehelps reduce layout shifts when the custom font loads.These changes align with the overall goal of enhancing user experience. However, they may introduce a more noticeable font swap effect.
To ensure these changes don't negatively impact user experience, consider monitoring the following:
- Initial page load time
- Cumulative Layout Shift (CLS) metrics
- User feedback regarding any noticeable font changes during page load
You can use the following script to check for any other font configurations in the project that might need similar optimizations:
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx (1)
85-85: VerifyCopyButtonprop usageEnsure that the
CopyButtoncomponent accepts avalueprop and handlesrole.namecorrectly. If the prop name differs or additional configuration is required, please adjust accordingly.packages/api/src/openapi.d.ts (5)
9-10: Improved clarity inXORandOneOftype definitionsAdding parentheses around the conditional expressions in the
XORandOneOftype definitions ensures correct operator precedence and enhances readability.
521-521: Updatedcodeproperty inV1KeysVerifyKeyResponsereflects all key statusesThe
codeproperty now includes all possible key statuses, including"VALID", providing a comprehensive representation of key verification results.
547-551: EnhancedPermissionQuerytype definition for better clarityReformatting the
PermissionQuerytype definition using theOneOfhelper type improves readability and maintains consistency across type definitions.
Line range hint
2536-2745: Verify the handling of deprecated properties in migration endpointsThe migration endpoints (
v1.migrations.createKeysandv1.migrations.enqueueKeys) include deprecated properties likerefillRateandrefillIntervalin theirratelimitconfigurations. Ensure that these endpoints are updated to use the new properties and handle deprecations appropriately.Run the following script to identify deprecated properties in migration-related code:
596-610: Ensure all usages ofV1KeysVerifyKeyRequestaccommodate the newratelimitsstructureThe
ratelimitsproperty inV1KeysVerifyKeyRequesthas been updated from an object to an array of objects, allowing for multiple ratelimit configurations. Please verify that all consumers ofV1KeysVerifyKeyRequesthave been updated accordingly to prevent potential runtime errors.Run the following script to locate usages of
V1KeysVerifyKeyRequestand check forratelimitsusage:
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx
Outdated
Show resolved
Hide resolved
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx
Outdated
Show resolved
Hide resolved
|
please sign the CLA and address the comments above |
|
i addressed the comments above and signed the cla |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx (3)
6-6: LGTM! New imports enhance permission visualization.The addition of
NestedPermissionstype andPermissionTreecomponent aligns well with the PR objective of improving permission visualization. This change should lead to a more intuitive and hierarchical representation of permissions.Consider using a more descriptive name for the imported component, such as
PermissionTreeComponent, to avoid potential naming conflicts and improve code readability.Also applies to: 27-27
160-190: LGTM! Effective transformation of permissions to hierarchical structure.The
roleTeecreation logic successfully transforms the flat permission structure into a nested one, which is crucial for the new tree-based visualization. This aligns well with the PR objective of improving permission representation.Consider extracting the nested permission creation logic into a separate function for improved readability and maintainability. For example:
function createNestedPermissions(permissions: Permission[], rolePermissions: RolePermission[]): NestedPermissions { const nested: NestedPermissions = {}; for (const permission of permissions) { let n = nested; const parts = permission.name.split("."); for (let i = 0; i < parts.length; i++) { const p = parts[i]; if (!(p in n)) { n[p] = { id: permission.id, name: permission.name, description: permission.description, checked: rolePermissions.some((rp) => rp.permissionId === permission.id), part: p, permissions: {}, path: parts.slice(0, i).join("."), }; } n = n[p].permissions; } } return nested; } // Usage const roleTee = key.workspace.roles.map((role) => ({ id: role.id, name: role.name, description: role.description, keyId: key.id, active: key.roles.some((keyRole) => keyRole.roleId === role.id), nestedPermissions: createNestedPermissions(key.workspace.permissions, role.permissions), }));This refactoring would improve code organization and make the
roleTeecreation more modular and easier to understand.
Line range hint
345-358: LGTM! Successful implementation of tree-based permission visualization.The replacement of the
Chartcomponent withPermissionTreedirectly addresses the PR objective of changing the permissions visualization to a tree format. This should provide a more intuitive and hierarchical representation of permissions.Consider removing the commented-out
Chartcomponent code if it's no longer needed. If you're keeping it temporarily for reference or easy rollback, add a TODO comment explaining why it's still there and when it can be removed. For example:// TODO: Remove this commented code once the new PermissionTree component is fully tested and approved // <Chart // apiId={props.params.apiId} // key={JSON.stringify(key)} // data={key} // roles={key.workspace.roles.map((r) => ({ // ...r, // active: key.roles.some((keyRole) => keyRole.roleId === r.id), // }))} // permissions={key.workspace.permissions.map((p) => ({ // ...p, // active: transientPermissionIds.has(p.id), // }))} // />This will help maintain clean code and provide context for other developers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx (6 hunks)
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx (1 hunks)
- apps/dashboard/app/layout.tsx (1 hunks)
- apps/engineering/app/layout.tsx (1 hunks)
- apps/planetfall/app/layout.tsx (1 hunks)
- apps/workflows/app/layout.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/app/layout.tsx
- apps/engineering/app/layout.tsx
- apps/planetfall/app/layout.tsx
- apps/workflows/app/layout.tsx
🧰 Additional context used
🔇 Additional comments (5)
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx (4)
1-36: LGTM: Imports and type definitions are well-structuredThe imports and type definitions in this section are clear, appropriate, and well-organized. They provide a solid foundation for the component's implementation.
46-57: LGTM: Card header and expand/collapse functionalityThe card header is well-structured, and the expand/collapse functionality for all roles is implemented correctly. The use of the Switch component for this purpose is appropriate and user-friendly.
94-113: LGTM: Nested permissions renderingThe implementation of nested permissions rendering using the RecursivePermission component is correct and well-structured. All necessary props are passed appropriately, ensuring proper functionality of the nested permissions display.
1-113: Overall implementation aligns well with PR objectivesThe PermissionTree component successfully addresses the main objectives of the PR:
- It replaces the previous chart format with a tree structure, improving clarity and accessibility of the permissions visualization.
- The collapsible structure allows for better management of numerous permissions, addressing the issue of cluttered views.
- The implementation is consistent with other areas of the application, using familiar UI components.
The component is well-structured, follows React best practices, and provides a user-friendly interface for managing API key permissions. The suggested optimizations, if implemented, will further improve the component's performance and readability.
Great job on implementing this enhancement!
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx (1)
Line range hint
1-424: Overall, excellent implementation of tree-based permission visualization.The changes in this file successfully address the main objective of the PR by enhancing the API Key Detail Page with a tree-based permissions visualization. The implementation of
PermissionTreeand the creation of a nested permissions structure (roleTee) should significantly improve the clarity and accessibility of the permissions display.Key improvements:
- Introduction of a hierarchical permission structure
- Replacement of the chart visualization with a tree-based component
- Maintained functionality for fetching and processing API key data
These changes align well with the goal of providing a more straightforward and consistent user experience, especially when dealing with numerous permissions.
To further enhance the implementation:
- Consider the suggested refactorings for improved code organization and readability.
- Clean up commented-out code or add explanatory TODO comments if temporary.
- Ensure thorough testing of the new
PermissionTreecomponent to validate its functionality across various permission scenarios.Great job on improving the user experience and addressing the issues raised in #2195!
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/permission-list.tsx
Show resolved
Hide resolved
|
@chronark do i need to change anything else |
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
Outdated
Show resolved
Hide resolved
Head branch was pushed to by a user without write access
|
@chronark can you please check now |
|
/assign |
|
The /assign command can only be used on issues, not on pull requests. |
|
finally wait is over its merging |
|
Awarding RajuGangitla: 750 points 🕹️ Well done! Check out your new contribution on oss.gg/RajuGangitla |
… Tree Format (unkeyed#2238) * fix:changed the permission view * fixed issue comments * [autofix.ci] apply automated fixes * removed font --------- Co-authored-by: Andreas Thomas <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
* fix: Missing plan check and ip whitelist parsing * fix: adjust tests for ipwhitelist * fix: Rename error code Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: ipwhitelist via features vs enterprise plan * fix: invert condition * chore: add cache log * fix: ensure workspace is loaded (#2470) * chore: more logging and retries (#2475) * Update 7_create_a_template.md (#2471) * increase override limit * Update create-new-override.tsx * fix: Enhance API Key Detail Page: Change Permissions Visualization to Tree Format (#2238) * fix:changed the permission view * fixed issue comments * [autofix.ci] apply automated fixes * removed font --------- Co-authored-by: Andreas Thomas <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix: show shallow permissions followed by nested in alphabetical order (#2273) * fix: show shallow permissions followed by nested in alphabetical order * fix: correct the sorting of nested permissions top level keys * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * Add Template to Markdown (#2362) Co-authored-by: Andreas Thomas <[email protected]> * fix: retry on any error with disabled cache --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: chronark <[email protected]> Co-authored-by: Chirag Arora <[email protected]> Co-authored-by: RajuGangitla <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Anne Deepa Prasanna <[email protected]> Co-authored-by: djnovin <[email protected]>
In this one, i changed the way of showing permissions in api key detail page previously we are using chart i changed it to tree structure
Fixes #2195
screen-capture.23.mp4
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
PermissionTreecomponent for enhanced visualization of roles and permissions.APIKeyDetailPagecomponent for improved API key management.RecursivePermissioncomponent for improved usability in permission management.