shadcn.io is not affiliated with official shadcn/ui
Role Change Notification Block for React
A role change from Viewer to Editor with who made it and when, the change as a You can now and a You can no longer cell with plus and minus marks and words, two tabs of facts and abilities at one height, and a local acknowledgement with Undo.
Installation
Overview
Tell people exactly what a new role changes, with this role change notification for React with Base UI. It is Grantwick, an access manager, in a framed panel with a plus mark on each corner: "Viewer to Editor" with an Avatar of the admin who changed it and the time, then two hairline cells, "You can now" and "You can no longer", each item with a plus or a minus and its words. Under them two Tabs: "What changed" (a Data List of role, who, when, seat, workspace and reason) and "Editor abilities" (all eight abilities, the three new ones marked with the word New), kept at one height. "Got it" and "This is a mistake" answer in the page: the foot turns into a sentence of what happened with a permanent Undo in the same place. Lines come from Guides. For access managers, workspaces and any product where a role decides what you can do.
FAQ
How do I use my own roles and permissions?
Edit FROM, TO, WHO, WORKSPACE and CHANGED_AT for the change, GAINED and LOST for the two cells, and ABILITIES (an id, the text and whether it is fresh with the new role) for the full list. The cells, the tabs and the sentence use them, and AS_OF is the page's fixed now, used for the time of your answer.
Why plus and minus, and is colour used?
A change in permissions is a gain and a loss, so each cell has a heading with a plus or a minus mark and its words ("You can now", "You can no longer") and every item repeats the mark. There is no green or red, so it reads the same in every theme and in monochrome.
What do the buttons do, and what stays local?
"Got it" marks the notice as seen and "This is a mistake" marks it wrong, each in this page only: the foot says what happened ("Marked as seen at 09:30 UTC in this demo") and an Undo in the same place restores the question. Nothing is sent to an admin, nothing changes a real permission and there is no mail link. In your app post the answer from reply and keep the Undo.
Do the tabs change the height?
No. Both panels are kept in the markup under an unseen copy of each, so the tab area is as tall as the taller one and the foot does not move when you change tabs. Arrow keys move between the two tab triggers on every base.
Related
- Pro
Role Permissions Settings
Team and rolesA roles window with a rail of five roles and a detail of grouped permissions: mixed-state group boxes, a Compare with select that marks each permission with a plus or a minus, read-only system roles and Duplicate to edit.
- Pro
Team Roles Dialog
Share and inviteA members page with its roles dialog shown open: seven members with a select-all that shows all, none or a dash, a role select with a line about each role, a Can and Cannot list that changes with it, and a guard that refuses to leave the workspace without an Owner.
- Pro
Two pending workspace invitations with who invited you, the role as a glyph and a word and the time, each answered in place without moving: Accept leaves a receipt with Undo and Switch workspace, Decline asks first, and the count follows.
- Pro
A narrow card for one issue that moved: the key and title, Before and After cells with a glyph and a word each and an arrow between them, who moved it and when, a three-line history, and a Watching switch whose sentence says what you will and will not hear.
- Pro
Permissions Account
Shared accessA read-only matrix of what each role may do: permissions in four folding groups against four roles with counts, your own role framed and marked You, and a Request button on what it lacks.
- Pro
An admin console's audit log as a sortable table of twelve events with an action filter, rows that open to their IP address, session and before and after values, and a real CSV download of exactly the rows showing.