Role Permissions Settings Block for React

Edit GROUPS and PERMS first: each permission has an id, the group it sits in and the label people read. Then edit the roles (OWNER, ADMIN, EDITOR, VIEWER, CONTRACTOR and the START list): a role has a name, a member count, whether it is a system role or locked, and the ids of the permissions it holds. The counts, the mixed boxes, the compare sentence and the marks are all worked out from those lists, so nothing else needs editing. In your app the roles come from your API.

Pick another role under Compare with. A plus beside a permission means the chosen role has it and the other doesn't; a minus means only the other role has it. Both are drawn as a small box with the sign, with the words beside it from the small breakpoint up, and read aloud as a sentence ("Admin has it, Editor doesn't."). Folded groups say how many of their permissions differ, and one sentence above the list gives the totals. A role is never compared with itself: open the role you were comparing with and the select reads No other role.

System roles are read-only on purpose: they show a mark for each permission instead of a box. Duplicate to edit makes a custom copy (Copy of Admin, then Copy of Admin 2), opens it with focus in its name field and lets you tick permissions one by one or a whole group at a time. Owner is locked: it always holds every permission and is never copied. Custom roles can be renamed (a name must be there, at most 24 characters, and unique) and deleted, and in this demo they have no members, so deleting one asks for nothing more.

Everything. Ticking, renaming, copying and deleting only change the roles in the page, and the status line says nothing is saved. To make it real, send each change from setPerm, flipGroup, typeName, add and remove to your server and replace the list with its answer. Keep the rules there too: only an owner changes billing, the owner role can't be edited, and a role that still has members can't be deleted.

Tab runs through the New role button, each role in the rail, then the detail: its actions, the name field on a custom role, Compare with and each group's box and fold button. The chosen role is marked aria-current, the fold buttons carry aria-expanded and aria-controls, and every box is named for its permission or group. A read-only permission reads as "Delete projects: not allowed". Choosing a role on a phone moves focus to the detail's heading, and Back moves it to the role you came from.

The window keeps its height and shows one pane at a time: the rail first, then the detail after you choose a role, with a Back button above it. The compare words under each permission give way to the plus and minus signs alone, and the sentence above the list says what they mean.