Redesign create custom role permissions list

What does this MR do and why?

On the Settings -> Roles and Permissions page, there's a form for creating new roles:

There is a list of permissions in the form. This MR changes the design of the permissions list.

Before	After

How to set up and validate locally

1. Go to any top-level group, then go to Settings -> Roles and Permissions.
2. Click the New role button on the upper right.
3. Verify that the permissions uses the new design as in the above screenshot.
4. Do not fill out the form or select any permissions. Click on the Create role button at the bottom of the form.
5. Verify that the permission names turn red.
6. Select at least 1 permission, then click on Create role again. Verify that the permission names turn back to black.
7. Select Admin vulnerability and verify that Read vulnerability is checked alongside it.
8. Unselect Read vulnerability and verify that Admin vulnerability is unchecked alongside it.

Related to #438838 (closed)

changed milestone to %16.11

added Category:Permissions GitLab Ultimate design-weight1 devopsgovern documentation featureenhancement groupauthorization sectionsec typefeature workflowin dev labels

assigned to @dftian

added frontend label

	4 Warnings
	65b16530: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	a80af2fe: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

testid selectors

The following changed lines in this MR contain testid selectors:

ee/app/assets/javascripts/roles_and_permissions/components/permissions_selector.vue

-        :data-testid="permission.value"
+        data-testid="permissions-selected-message"

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@andrei.zubov (UTC+2, 12 hours ahead of author)	@sdejonge (UTC+10, 20 hours ahead of author)
test for spec/features/*	@hmuralidhar (UTC+10, 20 hours ahead of author)	Maintainer review is optional for test for spec/features/*

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added 1 commit

• d867c2cc - Add tests

Compare with previous version

added 448 commits

• d867c2cc...2f8072fd - 446 commits from branch 438838-refactor-custom-role-permissions
• 7db41025 - Redesign create custom role permissions list
• 26b5dd5c - Add tests

Compare with previous version

changed the description

marked this merge request as ready

added 1 commit

• 35be1883 - Use table busy instead of skeleton loader

Compare with previous version

added 1 commit

• 1ae8ba8e - Use table busy instead of skeleton loader

Compare with previous version

added 1 commit

• ce815088 - Use table busy instead of skeleton loader

Compare with previous version

added 1 commit

• 5bedd224 - Use table busy instead of skeleton loader

Compare with previous version

added 1 commit

• 2041d1e1 - Fix label text

Compare with previous version

@ipelaez1 Would you be able to do the UX review for this one? Several things to note:

1. In the design, the table header does not have a top border and has a background color, but the table's default look has a top border and no background color. I opted for the table default:

Design	Implementation

2. In the design, the label text is Custom Permissions, but elsewhere we lowercase the second word (i.e. Base role instead of Base Role, so in the implementation I made it Custom permissions.

3. I changed the description text to Learn more about available custom permissions., but a link wasn't provided, so I linked it to https://docs.gitlab.com/ee/user/custom_roles/abilities.html.

4. In the design, the selection text is 1 of 18 permissions added, but we're selecting items instead of creating new ones, so I changed it to 1 of 18 permission selected.

5. The permission name is not allowed to line wrap, whereas the description is. Otherwise it's a bit difficult to read the permission name:

With line wrap	Without

6. For the loading state, I changed it from a skeleton loader to showing the table as busy with loading icon:

Before	After

7. For the error state, the design is still TBD, so I made the text red like how it was previously:

8. In the screenshots, the checkbox column has the header Checkbox. I didn't notice it until after I already took all the screenshots, so rather than re-take all the screenshots, here's one of what it looks like now: