Enhanced associated roles (#30968)

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/AssociatedRolesPage.ts

@@ -1,6 +1,4 @@
 export default class AssociatedRolesPage {
-  #actionDropdown = "action-dropdown";
-  #addRolesDropdownItem = "add-roles";
   #addRoleToolbarButton = "assignRole";
   #addAssociatedRolesModalButton = "assign";
   #compositeRoleBadge = "composite-role-badge";
@@ -9,11 +7,13 @@ export default class AssociatedRolesPage {
   #usersPage = "users-page";
   #removeRolesButton = "unAssignRole";
   #addRoleTable = '[aria-label="Roles"] td';
+  #associatedRolesTab = "associatedRolesTab";
+  #assignRole = "no-roles-in-this-realm-empty-action";
 
   addAssociatedRealmRole(roleName: string) {
-    cy.findByTestId(this.#actionDropdown).last().click();
+    cy.findByTestId(this.#associatedRolesTab).should("exist").click();
 
-    cy.findByTestId(this.#addRolesDropdownItem).click();
+    cy.findByTestId(this.#assignRole).click();
 
     cy.findByTestId(this.#filterTypeDropdown).click();
 

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -845,7 +845,6 @@ helpFileUpload=Upload a JSON file
 addProvider_one=Add {{provider}} provider
 clientPoliciesPolicies=Client Policies Policies
 editUSernameHelp=If enabled, the username is editable, otherwise it is read-only.
-removeAllAssociatedRoles=Remove all associated roles
 flowCreatedSuccess=Flow created
 fineGrainOpenIdConnectConfiguration=Fine grain OpenID Connect configuration
 flow.reset\ credentials=Reset credentials flow
@@ -2732,7 +2731,6 @@ firstName=First name
 emptySecondaryAction=Configure a new mapper
 defaultGroupAdded_one=New group added to the default groups
 unexpectedError=An unexpected error occurred\: '{{error}}'
-removeAllAssociatedRolesConfirmDialog=This action will remove the associated roles of {{name}}. Users who have permission to {{name}} will no longer have access to these roles.
 noRolesInstructions=You haven't assigned any roles to this user. Assign a role to get started.
 authorizationEncryptedResponseEncHelp=JWA Algorithm used for content encryption in encrypting the authorization response when the response mode is jwt. This option is needed if you want encrypted authorization response. If left empty, the authorization response is just signed, but not encrypted.
 permissionName=The name of this permission.

js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx

@@ -15,7 +15,7 @@ import {
   useWatch,
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useLocation, useMatch, useNavigate } from "react-router-dom";
+import { useMatch, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
 import { toClient } from "../clients/routes/Client";
 import {
@@ -66,10 +66,7 @@ export default function RealmRoleTabs() {
   const navigate = useNavigate();
 
   const { id, clientId } = useParams<ClientRoleParams>();
-  const { pathname } = useLocation();
-
   const { realm: realmName, realmRepresentation: realm } = useRealm();
-
   const [key, setKey] = useState(0);
   const [attributes, setAttributes] = useState<KeyValueType[] | undefined>();
 
@@ -217,76 +214,6 @@ export default function RealmRoleTabs() {
     },
   });
 
-  const dropdownItems = pathname.includes("associated-roles")
-    ? [
-        <DropdownItem
-          key="delete-all-associated"
-          component="button"
-          onClick={() => toggleDeleteAllAssociatedRolesDialog()}
-        >
-          {t("removeAllAssociatedRoles")}
-        </DropdownItem>,
-        <DropdownItem
-          key="delete-role"
-          component="button"
-          onClick={() => {
-            toggleDeleteDialog();
-          }}
-        >
-          {t("deleteRole")}
-        </DropdownItem>,
-      ]
-    : [
-        <DropdownItem
-          key="toggle-modal"
-          data-testid="add-roles"
-          component="button"
-          onClick={() => toggleModal()}
-        >
-          {t("addAssociatedRolesText")}
-        </DropdownItem>,
-        <DropdownItem
-          key="delete-role"
-          component="button"
-          onClick={() => toggleDeleteDialog()}
-        >
-          {t("deleteRole")}
-        </DropdownItem>,
-      ];
-
-  const [
-    toggleDeleteAllAssociatedRolesDialog,
-    DeleteAllAssociatedRolesConfirm,
-  ] = useConfirmDialog({
-    titleKey: t("removeAllAssociatedRoles") + "?",
-    messageKey: t("removeAllAssociatedRolesConfirmDialog", {
-      name: roleName || t("createRole"),
-    }),
-    continueButtonLabel: "delete",
-    continueButtonVariant: ButtonVariant.danger,
-    onConfirm: async () => {
-      try {
-        const additionalRoles = await adminClient.roles.getCompositeRoles({
-          id,
-        });
-        await adminClient.roles.delCompositeRoles({ id }, additionalRoles);
-        addAlert(
-          t("compositeRoleOff"),
-          AlertVariant.success,
-          t("compositesRemovedAlertDescription"),
-        );
-        navigate(toTab("details"));
-        refresh();
-      } catch (error) {
-        addError("roleDeleteError", error);
-      }
-    },
-  });
-
-  const toggleModal = () => {
-    setOpen(!open);
-  };
-
   const addComposites = async (composites: RoleRepresentation[]) => {
     try {
       await adminClient.roles.createComposite(
@@ -311,7 +238,6 @@ export default function RealmRoleTabs() {
   return (
     <>
       <DeleteConfirm />
-      <DeleteAllAssociatedRolesConfirm />
       {open && (
         <AddRoleMappingModal
           id={id}
@@ -331,7 +257,17 @@ export default function RealmRoleTabs() {
           },
         ]}
         actionsDropdownId="roles-actions-dropdown"
-        dropdownItems={dropdownItems}
+        dropdownItems={[
+          <DropdownItem
+            key="delete-role"
+            component="button"
+            onClick={() => {
+              toggleDeleteDialog();
+            }}
+          >
+            {t("deleteRole")}
+          </DropdownItem>,
+        ]}
         divider={false}
       />
       <PageSection variant="light" className="pf-v5-u-p-0">
@@ -353,21 +289,19 @@ export default function RealmRoleTabs() {
                 editMode
               />
             </Tab>
-            {composites && (
+            <Tab
-              <Tab
+              data-testid="associatedRolesTab"
-                data-testid="associatedRolesTab"
+              title={<TabTitleText>{t("associatedRolesText")}</TabTitleText>}
-                title={<TabTitleText>{t("associatedRolesText")}</TabTitleText>}
+              {...associatedRolesTab}
-                {...associatedRolesTab}
+            >
-              >
+              <RoleMapping
-                <RoleMapping
+                name={roleName!}
-                  name={roleName!}
+                id={id}
-                  id={id}
+                type="roles"
-                  type="roles"
+                isManager
-                  isManager
+                save={(rows) => addComposites(rows.map((r) => r.role))}
-                  save={(rows) => addComposites(rows.map((r) => r.role))}
+              />
-                />
+            </Tab>
-              </Tab>
-            )}
             {!isDefaultRole(roleName) && (
               <Tab
                 data-testid="attributesTab"