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:

1. Default roles are now shown in addition to custom roles:

Old	New

2. The empty state component was removed because there will always be default roles, so the table can never be empty:

Empty state component

3. Custom roles will now have a Custom role badge to the right of the role name:

4. The ID, Base role, and Custom permissions columns were removed; they will now be viewable in the new Role Details page that was introduced in an earlier MR. The Member count column was renamed to Direct users assigned:

Old	New

5. The role name is now a clickable link that goes to the Role Details page:

6. The sub-header text was changed from You can create a custom role by adding specific permissions to a base role. to Manage which actions users can take with roles and permissions.

Old	New

7. The role count was changed from {count} Custom roles to Roles: {count} Custom {count} default. The shield icon was also removed:

Old	New

8. The New role button was moved to the right of the role counts rather than to the right of the header:

Old	New

9. 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 show Edit role and Delete role:

Old	Default role	Custom role

10. 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

11. 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:

2024-09-05_11-30-29

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:

2024-09-05_11-37-16

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)