From fd0104427d260484ca3e27561b79d092a18398d6 Mon Sep 17 00:00:00 2001
From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com>
Date: Tue, 21 Jan 2025 19:21:55 +0200
Subject: [PATCH] #10753: Improve the way group names are visualized in user
 settings by showing tooltip for selected items (#10757)

* #10753: Improve the way group names are visualized in user settings by showing tooltip for selected items

* #10753: add helpful comment for valueRenderer prop in Select of react-select

* #10753: Improve the way group names are visualized in user settings by showing tooltip for selected items (resolve review comments)
- remove unused comment for import + edit a typo mistake in a comment in UserGroups.jsx
---
 .../components/manager/users/UserGroups.jsx      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/client/components/manager/users/UserGroups.jsx b/web/client/components/manager/users/UserGroups.jsx
index 81b0dd347b..5f1b899219 100644
--- a/web/client/components/manager/users/UserGroups.jsx
+++ b/web/client/components/manager/users/UserGroups.jsx
@@ -10,16 +10,12 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 
-// const Message = require('../I18N/Message').default;
 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 +51,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 +68,8 @@ class UserCard extends React.Component {
             options={this.getOptions()}
             onChange={this.onChange}
             style={{marginTop: "10px"}}
+            // * NOTE: valueRenderer: is responsible for custom rendering for shown selected values in react-select version 1.3.0
+            valueRenderer={this.customValueRenderer}
         />);
     };