From efbb70f3c8b233833c67410235a98c71a42f89b6 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:48:22 +0100
Subject: [PATCH] [MM-60169] Migrate tooltips of
 "components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx"
 to WithTooltip (#27968)

---
 .../permissions_scheme_summary.test.tsx.snap  | 31 +++----------------
 .../permissions_scheme_summary.tsx            | 19 +++---------
 2 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
index 57e78b48a0..a32bfd45e8 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
@@ -262,33 +262,10 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
     >
       Team 8
     </span>
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={400}
-      overlay={
-        <Tooltip
-          className="team-scheme-extra-teams-overlay"
-          id="id-extra-teams-overlay"
-        >
-          <span
-            className="team"
-          >
-            Team 9
-          </span>
-          <span
-            className="team"
-          >
-            Team 10
-          </span>
-        </Tooltip>
-      }
+    <WithTooltip
+      id="id-extra-teams-overlay"
       placement="bottom"
-      trigger={
-        Array [
-          "hover",
-          "focus",
-        ]
-      }
+      title="Team 9, Team 10"
     >
       <span
         className="team"
@@ -304,7 +281,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
           }
         />
       </span>
-    </OverlayTrigger>
+    </WithTooltip>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
index c2da47c5a2..72b28781f5 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.tsx
@@ -12,11 +12,9 @@ import type {Team} from '@mattermost/types/teams';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import ConfirmModal from 'components/confirm_modal';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
-import Constants from 'utils/constants';
 import * as Utils from 'utils/utils';
 
 const MAX_TEAMS_PER_SCHEME_SUMMARY = 8;
@@ -148,17 +146,10 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
         let extraTeams = null;
         if (teams.length > MAX_TEAMS_PER_SCHEME_SUMMARY) {
             extraTeams = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
+                    id={scheme.id + '-extra-teams-overlay'}
+                    title={this.props?.teams?.slice(MAX_TEAMS_PER_SCHEME_SUMMARY).map((team) => team.display_name).join(', ') ?? ''}
                     placement='bottom'
-                    overlay={
-                        <Tooltip
-                            className='team-scheme-extra-teams-overlay'
-                            id={scheme.id + '-extra-teams-overlay'}
-                        >
-                            {teams.slice(MAX_TEAMS_PER_SCHEME_SUMMARY)}
-                        </Tooltip>
-                    }
                 >
                     <span
                         className='team'
@@ -170,7 +161,7 @@ export default class PermissionsSchemeSummary extends React.PureComponent<Props
                             values={{number: teams.length - MAX_TEAMS_PER_SCHEME_SUMMARY}}
                         />
                     </span>
-                </OverlayTrigger>
+                </WithTooltip>
             );
             teams = teams.slice(0, MAX_TEAMS_PER_SCHEME_SUMMARY);
         }