added table truncate on role description (#34289)

fixes: #32992

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

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

@@ -74,7 +74,7 @@ export default class RoleMappingTab {
   selectRow(name: string, modal = false) {
     cy.get(modal ? ".pf-v5-c-modal-box " : "" + this.#namesColumn)
       .contains(name)
-      .parent()
+      .parents("tr")
       .within(() => {
         cy.get("input").click();
       });

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

@@ -21,7 +21,7 @@ export default class AssociatedRolesPage {
 
     cy.get(this.#addRoleTable)
       .contains(roleName)
-      .parent()
+      .parents("tr")
       .within(() => {
         cy.get("input").click();
       });
@@ -49,7 +49,7 @@ export default class AssociatedRolesPage {
 
     cy.get(this.#addRoleTable)
       .contains(roleName)
-      .parent()
+      .parents("tr")
       .within(() => {
         cy.get("input").click();
       });
@@ -67,7 +67,7 @@ export default class AssociatedRolesPage {
 
     cy.get(this.#addRoleTable)
       .contains(roleName)
-      .parent()
+      .parents("tr")
       .within(() => {
         cy.get("input").click();
       });

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

@@ -40,7 +40,7 @@ export default class UserRegistration {
   selectRow(name: string) {
     cy.get(this.#namesColumn)
       .contains(name)
-      .parent()
+      .parents("tr")
       .within(() => {
         cy.get("input").click();
       });

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

@@ -1,3 +1,8 @@
+import RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
+import {
+  KeycloakDataTable,
+  ListEmptyState,
+} from "@keycloak/keycloak-ui-shared";
 import {
   Button,
   Dropdown,
@@ -9,14 +14,13 @@ import {
   ToolbarItem,
 } from "@patternfly/react-core";
 import { FilterIcon } from "@patternfly/react-icons";
+import { cellWidth, TableText } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import { useAccess } from "../../context/access/Access";
 import { translationFormatter } from "../../utils/translationFormatter";
 import useLocaleSort from "../../utils/useLocaleSort";
-import { ListEmptyState } from "@keycloak/keycloak-ui-shared";
-import { KeycloakDataTable } from "@keycloak/keycloak-ui-shared";
 import { ResourcesKey, Row, ServiceRole } from "./RoleMapping";
 import { getAvailableRoles } from "./queries";
 import { getAvailableClientRoles } from "./resource";
@@ -33,6 +37,15 @@ type AddRoleMappingModalProps = {
 
 type FilterType = "roles" | "clients";
 
+const RoleDescription = ({ role }: { role: RoleRepresentation }) => {
+  const { t } = useTranslation();
+  return (
+    <TableText wrapModifier="truncate">
+      {translationFormatter(t)(role.description) as string}
+    </TableText>
+  );
+};
+
 export const AddRoleMappingModal = ({
   id,
   name,
@@ -184,11 +197,12 @@ export const AddRoleMappingModal = ({
           {
             name: "name",
             cellRenderer: ServiceRole,
+            transforms: [cellWidth(20)],
           },
           {
             name: "role.description",
             displayKey: "description",
-            cellFormatters: [translationFormatter(t)],
+            cellRenderer: RoleDescription,
           },
         ]}
         emptyState={