Redesign roles and permissions table
What does this MR do and why?
On the Admin
-> Settings
-> Roles and Permissions
page, a list of custom roles is shown:
Old |
---|
This MR redesigns it with the following changes:
- Default roles are now shown in addition to custom roles:
Old | New |
---|---|
- The empty state component was removed because there will always be default roles, so the table can never be empty:
Empty state component |
---|
- Custom roles will now have a
Custom role
badge to the right of the role name:
- The
ID
,Base role
, andCustom permissions columns
were removed; they will now be viewable in the new Role Details page that was introduced in an earlier MR. TheMember count
column was renamed toDirect users assigned
:
Old | New |
---|---|
- The role name is now a clickable link that goes to the Role Details page:
- The sub-header text was changed from
You can create a custom role by adding specific permissions to a base role.
toManage which actions users can take with roles and permissions.
Old | New |
---|---|
- The role count was changed from
{count} Custom roles
toRoles: {count} Custom {count} default
. The shield icon was also removed:
Old | New |
---|---|
- The
New role
button was moved to the right of the role counts rather than to the right of the header:
Old | New |
---|---|
- The
Actions
disclosure dropdown for the role now shows the role ID/access level as an item that will copy the ID to clipboard when clicked. For standard roles, it will only show the role ID and role details items. For custom roles, it will additionally showEdit role
andDelete role
:
Old | Default role | Custom role |
---|---|---|
- Previously on page load, it shows an initial loading spinner that goes away only after the table data is loaded. This has been changed to show an initial loading spinner until the table is ready, then shows the table as loading as it's loading data. This will speed up how quickly the user sees the table because they no longer have to wait for the table data to load first:
Before | After |
---|---|
Peek_2024-09-03_23-38 | Peek_2024-09-03_23-41 |
- Previously, if there was an error, only the error alert was shown on the page. Now, the page itself shows with the error alert at the top:
Old | New |
---|---|
How to set up and validate locally
For self-managed, follow this video with audio commentary:
The query to modify to cause an error is ee/app/assets/javascripts/roles_and_permissions/graphql/instance_member_roles.query.graphql
.
For SaaS, first run these bash commands:
export GITLAB_SIMULATE_SAAS=1
gdk restart
Then follow this video with audio commentary:
The query to modify to cause an error is ee/app/assets/javascripts/roles_and_permissions/graphql/group_member_roles.query.graphql
.
Related to #468353 (closed)
Edited by Daniel Tian