From c9c8fe731703ea0d041ca090487592b66f703d98 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 3 Jan 2023 11:32:36 -0500
Subject: [PATCH] Added tooltip and styling to group name (#4044)

---
 .../src/groups/components/GroupTree.tsx       | 25 +++++++++++++------
 .../src/groups/components/group-tree.css      |  6 +++++
 2 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 apps/admin-ui/src/groups/components/group-tree.css

diff --git a/apps/admin-ui/src/groups/components/GroupTree.tsx b/apps/admin-ui/src/groups/components/GroupTree.tsx
index 772c2b484c..5209074ddf 100644
--- a/apps/admin-ui/src/groups/components/GroupTree.tsx
+++ b/apps/admin-ui/src/groups/components/GroupTree.tsx
@@ -9,6 +9,7 @@ import {
   DropdownSeparator,
   InputGroup,
   KebabToggle,
+  Tooltip,
   TreeView,
   TreeViewDataItem,
 } from "@patternfly/react-core";
@@ -26,6 +27,8 @@ import { fetchAdminUI } from "../../context/auth/admin-ui-endpoint";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { joinPath } from "../../utils/joinPath";
 
+import "./group-tree.css";
+
 type GroupTreeContextMenuProps = {
   group: GroupRepresentation;
   refresh: () => void;
@@ -128,13 +131,14 @@ export const GroupTree = ({ refresh: viewRefresh }: GroupTreeProps) => {
     return {
       id: group.id,
       name: (
-        <Link
-          key={group.id}
-          to={`/${realm}/groups/${joinPath(...groups.map((g) => g.id!))}`}
-          onClick={() => setSubGroups(groups)}
-        >
-          {group.name}
-        </Link>
+        <Tooltip content={group.name}>
+          <Link
+            to={`/${realm}/groups/${joinPath(...groups.map((g) => g.id!))}`}
+            onClick={() => setSubGroups(groups)}
+          >
+            {group.name}
+          </Link>
+        </Tooltip>
       ),
       children:
         group.subGroups && group.subGroups.length > 0
@@ -191,7 +195,12 @@ export const GroupTree = ({ refresh: viewRefresh }: GroupTreeProps) => {
       }
     >
       {data.length > 0 && (
-        <TreeView data={data} allExpanded={search.length > 0} hasGuides />
+        <TreeView
+          data={data}
+          allExpanded={search.length > 0}
+          hasGuides
+          className="keycloak_groups_treeview"
+        />
       )}
     </PaginatingTableToolbar>
   ) : (
diff --git a/apps/admin-ui/src/groups/components/group-tree.css b/apps/admin-ui/src/groups/components/group-tree.css
new file mode 100644
index 0000000000..ed22a53e02
--- /dev/null
+++ b/apps/admin-ui/src/groups/components/group-tree.css
@@ -0,0 +1,6 @@
+.keycloak_groups_treeview .pf-c-tree-view__node {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
\ No newline at end of file