From 6b76886b40485850ee476e6156dea386c4eec8ba Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 22 Jul 2024 12:16:04 +0200
Subject: [PATCH] Truncate the clientId (#28406) (#31398)

* Truncate the clientId

fixes: #28284

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

* fxed tests

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

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
(cherry picked from commit 73e22b32c9b6c77c79d1e011efdf9902e63a295b)
---
 .../support/pages/admin-ui/ListingPage.ts     |  2 +-
 .../admin-ui/src/clients/ClientsSection.tsx   | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
index 5d05ebde4a5b..e14d08c27fe7 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
@@ -229,7 +229,7 @@ export default class ListingPage extends CommonElements {
   }
 
   goToItemDetails(itemName: string) {
-    cy.get(this.#itemsRows).contains(itemName).click();
+    cy.get(this.#itemsRows).contains(itemName).click({ force: true });
 
     return this;
   }
diff --git a/js/apps/admin-ui/src/clients/ClientsSection.tsx b/js/apps/admin-ui/src/clients/ClientsSection.tsx
index 180aaacccd0a..1f888d5ee1c3 100644
--- a/js/apps/admin-ui/src/clients/ClientsSection.tsx
+++ b/js/apps/admin-ui/src/clients/ClientsSection.tsx
@@ -45,17 +45,19 @@ const ClientDetailLink = (client: ClientRepresentation) => {
   const { t } = useTranslation();
   const { realm } = useRealm();
   return (
-    <Link
-      key={client.id}
-      to={toClient({ realm, clientId: client.id!, tab: "settings" })}
-    >
-      {client.clientId}
-      {!client.enabled && (
-        <Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
-          {t("disabled")}
-        </Badge>
-      )}
-    </Link>
+    <TableText wrapModifier="truncate">
+      <Link
+        key={client.id}
+        to={toClient({ realm, clientId: client.id!, tab: "settings" })}
+      >
+        {client.clientId}
+        {!client.enabled && (
+          <Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
+            {t("disabled")}
+          </Badge>
+        )}
+      </Link>
+    </TableText>
   );
 };