Add new page for create custom roles

What does this MR do and why?

Currently on the Roles and Permissions page, when the Add new role button is clicked, the new role form is shown directly on the page. Because the form is complex, to match the behavior of other complex forms in the app, the new role form has been moved to its own page. The layout of the form has also been updated to match requirements in the issue.

Before	After
Peek_2024-03-19_15-25	Peek_2024-03-19_15-26

How to set up and validate locally

Apply this patch to use the new Roles and Permissions page:

Patch

Index: ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js b/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js
--- a/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js	(revision b075421643ab545cfee6ed1c20d3a71f309bb6a8)
+++ b/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js	(date 1710884444267)
@@ -1,3 +1,4 @@
-import { initRolesAndPermissions } from 'ee/roles_and_permissions';
+import { initRolesAndPermissions, initCustomRolesApp } from 'ee/roles_and_permissions';
 
-initRolesAndPermissions();
+initCustomRolesApp();
+// initRolesAndPermissions();
Index: ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
--- a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js	(revision b075421643ab545cfee6ed1c20d3a71f309bb6a8)
+++ b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js	(date 1710884444283)
@@ -1,3 +1,4 @@
-import { initRolesAndPermissions } from 'ee/roles_and_permissions';
+import { initRolesAndPermissions, initCustomRolesApp } from 'ee/roles_and_permissions';
 
-initRolesAndPermissions();
+initCustomRolesApp();
+// initRolesAndPermissions();

1. Go to a top-level group. Go to Settings -> Roles and Permissions.
2. Click on the Add new role button.
3. Verify that you are navigated to a separate page for create new role.
4. Fill out all the form fields and click on Create role.
5. Verify that you are navigated back to the Roles and Permissions page and the new role is created.
6. Click on Add new role again. Click on the Cancel button at the bottom of the page.
7. Verify that you are navigated back to the Roles and Permissions page.
8. Repeat the above steps, but for Admin Area -> Settings -> Roles and Permissions.

Related to #393238 (closed)