From e517be13abb693c137e5538b5672b5784bb4535d Mon Sep 17 00:00:00 2001
From: mahmoudadel54 <mahmoodmadel@gmail.com>
Date: Wed, 15 Jan 2025 16:48:35 +0200
Subject: [PATCH] #10753: Improve the way group names are visualized in user
 settings by showing tooltip for selected items

---
 web/client/components/manager/users/UserGroups.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/client/components/manager/users/UserGroups.jsx b/web/client/components/manager/users/UserGroups.jsx
index 81b0dd347b..58d1d960b5 100644
--- a/web/client/components/manager/users/UserGroups.jsx
+++ b/web/client/components/manager/users/UserGroups.jsx
@@ -16,10 +16,7 @@ import Select from 'react-select';
 import Message from '../../I18N/Message';
 import { findIndex } from 'lodash';
 import SecurityUtils from '../../../utils/SecurityUtils';
-
-// const ConfirmModal = require('./modals/ConfirmModal');
-// const GroupManager = require('./GroupManager');
-
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 class UserCard extends React.Component {
     static propTypes = {
         // props
@@ -55,7 +52,13 @@ class UserCard extends React.Component {
             clearableValue: group.groupName !== SecurityUtils.USER_GROUP_ALL
         }));
     };
-
+    customValueRenderer = (option) => {
+        return ( <OverlayTrigger
+            placement="top"
+            overlay={<Tooltip id={`tooltip-${option.value}`}>{option.label}</Tooltip>}
+        ><div className="Select-value-label" data-tip={option.label}> {option.label}</div>
+        </OverlayTrigger>);
+    };
     renderGroupsSelector = () => {
         return (<Select key="groupSelector"
             clearable={false}
@@ -66,6 +69,7 @@ class UserCard extends React.Component {
             options={this.getOptions()}
             onChange={this.onChange}
             style={{marginTop: "10px"}}
+            valueRenderer={this.customValueRenderer}
         />);
     };