[🕹️] API Key sub-optimal display permissions of permissions

[Flo4604]

Preliminary Checks

• [X] I have reviewed the documentation: https://unkey.com/docs

• [X] I have searched for existing issues: https://github.com/unkeyed/unkey/issues

• [X] This issue is not a question, general help request, or anything other than a bug report directly related to Unkey. Please ask questions in our Discord community: https://unkey.com/discord.

Reproduction / Replay Link (Optional)

No response

Issue Summary

Currently, the way assigned / not assigned permissions of a key are displayed is not the most optimal way I think.

For me, this is the result of a few points:

1. It's displayed as a graph => I don't really understand why but a checkbox tree would be more accessible and is also used in the Authorization -> Roles -> SomeRole -> Permissions tab which would be more consistent.
2. With a lot of permissions the graph just becomes unreadable as its too stacked vertically
3. What is the point of having the ability to drag permissions onto a key if it does nothing
4. The permission names are cut off and there is no tooltip when hovering over them showing the full name

I think the way assigned / not assigned permissions of a key are displayed is not the most optimal way

Steps to Reproduce

1. Create loads of permissions and assign some of them to roles
2. Assign a single role to the key
3. See how it looks Please see attached video

Expected behavior

I would expect this to be shown more straightforwardly, maybe just by taking the checkbox tree instead of this graph

Other information

https://github.com/user-attachments/assets/6c6de094-c0c5-4b12-9877-bc42a5caf302

Screenshots

No response

Version info

-

[linear[bot]]

ENG-1368 [🕹️] API Key sub-optimal display permissions of permissions

[harshsbhat]

Flo on the streak of creating new issues 💪🔥

[chronark]

I don't really understand why

I got carried away lol

I agree though, while it looked neat, I can totally see how this is annoying to use. We should change it.

[chronark]

/award 150 points

[oss-gg[bot]]

Awarding Flo4604: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/Flo4604

[RajuGangitla]

/assign

[oss-gg[bot]]

Assigned to @RajuGangitla! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[RajuGangitla]

@chronark can i replace this current component

to the one we are using as a tree structure

[Mackhack0705]

/assign

[oss-gg[bot]]

Assigned to @Mackhack0705! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[RajuGangitla]

Hey @Mackhack0705 I already worked on this issue and pr is under review

[Mackhack0705]

Okay @RajuGangitla , I also want to contribute to it. I only see that this issue is available. If your PR gets merged, that's okay; otherwise, I am also working.

[vivek-gorantla2005]

/award 150 points

[oss-gg[bot]]

You are not allowed to award points! Please contact an admin.

[Sashank-Singh]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.