Skip to content

Disable custom role delete button when role is assigned

What does this MR do and why?

On the Settings -> Roles and Permissions page, each custom row has a delete button:

Screenshot-14

This MR does the following:

  1. Add a Member count column that shows the number of users assigned to each role.
  2. Right justify the member count and action columns.
  3. Disable the trash can icon and show a tooltip on hover if the role has assigned users.

There is also a new version of the page that's currently under development. The changes have been applied to it as well.

Old version of page:

Before After
ksnip_20240320-160322 Screenshot-20

New version of page:

Before After
ksnip_20240320-160635 ksnip_20240320-160712

Note that backend has already disabled the ability to delete a role if it's already been assigned to a user, and will return an error. This MR updates the frontend so that the user can't attempt the delete in the first place.

How to set up and validate locally

  1. Go to a top-level group, Settings -> Roles and Permissions.
  2. Click the Add new role button, fill out the form, and create the new role.
  3. Verify that the trash can icon for the newly-created role is enabled and no tooltip shows when it's hovered.
  4. Go to Manage -> Members. Click the Invite members button.
  5. Use the modal to invite any member, selecting the newly-created role for them. This assigns a person to the role.
  6. Go back to Settings -> Roles and Permissions.
  7. Verify that the trash icon next to the role is now disabled, the member count is 1, and that hovering over the icon shows a tooltip.

To test the new version of the page, apply this patch:

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();

Then verify that the member count column is shown, the count is 1 for the role that was assigned, and that the triple dot menu shows the delete item as disabled and shows a tooltip on hover.

Related to #393237 (closed)

Edited by Daniel Tian

Merge request reports