From 3ee3cf8b16e89c6a4ef24534aad2cc2c947e2fff Mon Sep 17 00:00:00 2001
From: Iukou Siarhei <45054016+BlazarQSO@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:48:05 +0300
Subject: [PATCH] EPMRPP-98422 || There is not tooltip for the Admin label on
 the Organization Users page (#4146)

---
 .../organizationUsersListTable.jsx               | 16 ++++++++++++----
 .../organizationUsersListTable.scss              |  5 ++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.jsx b/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.jsx
index 1d8533c640..77df638b41 100644
--- a/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.jsx
+++ b/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.jsx
@@ -20,7 +20,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AbsRelTime } from 'components/main/absRelTime';
-import { MeatballMenuIcon, Popover } from '@reportportal/ui-kit';
+import { MeatballMenuIcon, Popover, Tooltip } from '@reportportal/ui-kit';
 import { urlOrganizationAndProjectSelector } from 'controllers/pages';
 import { SORTING_ASC, withSortingURL } from 'controllers/sorting';
 import { DEFAULT_SORT_COLUMN } from 'controllers/members/constants';
@@ -79,9 +79,17 @@ const OrgTeamListTableWrapped = ({
                 <div className={cx('member-name-column')}>
                   <div className={cx('full-name')}>{fullName}</div>
                   {instanceRole === ADMINISTRATOR && (
-                    <div className={cx('admin-badge')}>
-                      <FormattedMessage id={'UserBlock.adminBadge'} defaultMessage={'admin'} />
-                    </div>
+                    <Tooltip
+                      key={`${id}-tooltip`}
+                      content={formatMessage(messages.adminAccessInfo)}
+                      placement="top"
+                      width={248}
+                      wrapperClassName={cx('tooltip')}
+                    >
+                      <div className={cx('admin-badge')}>
+                        <FormattedMessage id={'UserBlock.adminBadge'} defaultMessage={'admin'} />
+                      </div>
+                    </Tooltip>
                   )}
                 </div>
               ),
diff --git a/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.scss b/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.scss
index b3d523bd01..65657b5a51 100644
--- a/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.scss
+++ b/app/src/pages/organization/organizationUsersPage/organizationUsersListTable/organizationUsersListTable.scss
@@ -45,7 +45,10 @@
   font-family: $FONT-ROBOTO-BOLD;
   font-size: 11px;
   line-height: 16px;
-  margin-right: 16px;
+}
+
+.tooltip {
+  width: fit-content;
 }
 
 .member-name-column {