Change the default role mapping filter to clients (#29405)

Client roles are more common that realm roles, so we should start the
user off looking at a more useful set of options.

Signed-off-by: James Hewitt <james.hewitt@uk.ibm.com>

js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts

@@ -342,8 +342,14 @@ describe("Client Scopes test", () => {
 
     it("Assign and unassign role", () => {
       const role = "admin";
+      const roleType = "roles";
       listingPage.searchItem(scopeName, false).goToItemDetails(scopeName);
-      scopeTab.goToScopeTab().assignRole().selectRow(role).assign();
+      scopeTab
+        .goToScopeTab()
+        .assignRole()
+        .changeRoleTypeFilter(roleType)
+        .selectRow(role)
+        .assign();
       masthead.checkNotificationMessage("Role mapping updated");
       scopeTab.checkRoles([role]);
       scopeTab.hideInheritedRoles().selectRow(role).unAssign();
@@ -446,6 +452,7 @@ describe("Client Scopes test", () => {
       const predefinedMapper = "Allowed Web Origins";
       const scopeTab = new RoleMappingTab("client-scope");
       const role = "admin";
+      const roleType = "roles";
 
       listingPage.goToCreateItem();
       createClientScopePage.fillClientScopeData(scopeName).save();
@@ -475,7 +482,12 @@ describe("Client Scopes test", () => {
       cy.checkA11y();
       cy.findByTestId("cancel").click();
 
-      scopeTab.goToScopeTab().assignRole().selectRow(role).assign();
+      scopeTab
+        .goToScopeTab()
+        .assignRole()
+        .changeRoleTypeFilter(roleType)
+        .selectRow(role)
+        .assign();
       cy.checkA11y();
     });
   });

js/apps/admin-ui/cypress/e2e/clients_test.spec.ts

@@ -932,6 +932,7 @@ describe("Clients test", () => {
     const serviceAccountTab = new RoleMappingTab("user");
     const serviceAccountName = "service-account-client";
     const createRealmRoleName = `create-realm-${uuid()}`;
+    const createRealmRoleType = `roles`;
 
     before(async () => {
       await adminClient.inRealm(realmName, () =>
@@ -1008,6 +1009,7 @@ describe("Clients test", () => {
       serviceAccountTab
         .goToServiceAccountTab()
         .assignRole(false)
+        .changeRoleTypeFilter(createRealmRoleType)
         .selectRow(createRealmRoleName, true)
         .assign();
       commonPage.masthead().checkNotificationMessage("Role mapping updated");
@@ -1029,6 +1031,7 @@ describe("Clients test", () => {
       commonPage.sidebar().waitForPageLoad();
 
       serviceAccountTab
+        .changeRoleTypeFilter("roles")
         .selectRow("offline_access", true)
         .selectRow(createRealmRoleName, true)
         .assign();

js/apps/admin-ui/cypress/e2e/group_test.spec.ts

@@ -466,8 +466,10 @@ describe("Group test", () => {
 
     it("Assign roles from empty state", () => {
       roleMappingTab.assignRole();
-      groupDetailPage.createRoleMapping();
-      roleMappingTab.assign();
+      roleMappingTab
+        .changeRoleTypeFilter("roles")
+        .selectRow("default-roles-")
+        .assign();
     });
 
     it("Show and search roles", () => {

js/apps/admin-ui/cypress/e2e/realm_user_registration.spec.ts

@@ -36,9 +36,10 @@ describe("Realm settings - User registration tab", () => {
 
   it("Add admin role", () => {
     const role = "admin";
+    const roleType = "roles";
     userRegistration.addRole();
     sidebarPage.waitForPageLoad();
-    userRegistration.selectRow(role).assign();
+    userRegistration.changeRoleTypeFilter(roleType).selectRow(role).assign();
     masthead.checkNotificationMessage("Associated roles have been added");
     listingPage.searchItem(role, false).itemExist(role);
 

js/apps/admin-ui/cypress/e2e/users_test.spec.ts

@@ -490,6 +490,7 @@ describe("User creation", () => {
   describe("Accessibility tests for users", () => {
     const a11yUser = "a11y-user";
     const role = "admin";
+    const roleType = "roles";
     const roleMappingTab = new RoleMappingTab("");
 
     beforeEach(() => {
@@ -552,7 +553,7 @@ describe("User creation", () => {
       roleMappingTab.goToRoleMappingTab();
       cy.findByTestId("assignRole").click();
       cy.checkA11y();
-      roleMappingTab.selectRow(role).assign();
+      roleMappingTab.changeRoleTypeFilter(roleType).selectRow(role).assign();
     });
 
     it("Check a11y violations on user groups tab", () => {

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

@@ -13,6 +13,7 @@ export default class RoleMappingTab {
   #assignedRolesTable = "assigned-roles";
   #namesColumn = 'td[data-label="Name"]:visible';
   #roleMappingTab = "role-mapping-tab";
+  #filterTypeDropdown = "filter-type-dropdown";
 
   constructor(type: string) {
     this.#type = type;
@@ -60,6 +61,16 @@ export default class RoleMappingTab {
     return this;
   }
 
+  changeRoleTypeFilter(filter: string) {
+    // Invert the filter because the testid of the DropdownItem is the current filter
+    const option = filter == "roles" ? "clients" : "roles";
+
+    cy.findByTestId(this.#filterTypeDropdown).click();
+    cy.findByTestId(option).click();
+
+    return this;
+  }
+
   selectRow(name: string, modal = false) {
     cy.get(modal ? ".pf-v5-c-modal-box " : "" + this.#namesColumn)
       .contains(name)

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts

@@ -151,10 +151,6 @@ export default class GroupDetailPage extends GroupPage {
     return this;
   }
 
-  createRoleMapping() {
-    listingPage.clickItemCheckbox("default-roles-");
-  }
-
   checkDefaultRole() {
     listingPage.itemExist("default-roles");
   }

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

@@ -5,7 +5,7 @@ export default class AssociatedRolesPage {
   #addAssociatedRolesModalButton = "assign";
   #compositeRoleBadge = "composite-role-badge";
   #filterTypeDropdown = "filter-type-dropdown";
-  #filterTypeDropdownItem = "roles";
+  #filterTypeDropdownItem = "clients";
   #usersPage = "users-page";
   #removeRolesButton = "unAssignRole";
   #addRoleTable = '[aria-label="Roles"] td[data-label="Name"]';
@@ -15,6 +15,10 @@ export default class AssociatedRolesPage {
 
     cy.findByTestId(this.#addRolesDropdownItem).click();
 
+    cy.findByTestId(this.#filterTypeDropdown).click();
+
+    cy.findByTestId(this.#filterTypeDropdownItem).click();
+
     cy.get(this.#addRoleTable)
       .contains(roleName)
       .parent()
@@ -36,7 +40,7 @@ export default class AssociatedRolesPage {
   addAssociatedRoleFromSearchBar(roleName: string, isClientRole?: boolean) {
     cy.findByTestId(this.#addRoleToolbarButton).click({ force: true });
 
-    if (isClientRole) {
+    if (!isClientRole) {
       cy.findByTestId(this.#filterTypeDropdown).click();
       cy.findByTestId(this.#filterTypeDropdownItem).click();
     }
@@ -59,10 +63,6 @@ export default class AssociatedRolesPage {
   addAssociatedClientRole(roleName: string) {
     cy.findByTestId(this.#addRoleToolbarButton).click();
 
-    cy.findByTestId(this.#filterTypeDropdown).click();
-
-    cy.findByTestId(this.#filterTypeDropdownItem).click();
-
     cy.findByTestId(".pf-v5-c-spinner__tail-ball").should("not.exist");
 
     cy.get(this.#addRoleTable)

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserRegistration.ts

@@ -5,6 +5,7 @@ export default class UserRegistration {
   #addDefaultGroupBtn = "no-default-groups-empty-action";
   #namesColumn = 'tbody td[data-label="Name"]:visible';
   #addBtn = "assign";
+  #filterTypeDropdown = "filter-type-dropdown";
 
   goToTab() {
     cy.findByTestId(this.#userRegistrationTab).click({ force: true });
@@ -26,6 +27,16 @@ export default class UserRegistration {
     return this;
   }
 
+  changeRoleTypeFilter(filter: string) {
+    // Invert the filter because the testid is the current selection
+    const option = filter == "roles" ? "clients" : "roles";
+
+    cy.findByTestId(this.#filterTypeDropdown).click();
+    cy.findByTestId(option).click();
+
+    return this;
+  }
+
   selectRow(name: string) {
     cy.get(this.#namesColumn)
       .contains(name)

js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx

@@ -50,9 +50,7 @@ export const AddRoleMappingModal = ({
 
   const [searchToggle, setSearchToggle] = useState(false);
 
-  const [filterType, setFilterType] = useState<FilterType>(
-    canViewRealmRoles ? "roles" : "clients",
-  );
+  const [filterType, setFilterType] = useState<FilterType>("clients");
   const [selectedRows, setSelectedRows] = useState<Row[]>([]);
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);