From 1bb829875665fef828687023a8f8d64ce3d0d20a Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:44:13 +0300
Subject: [PATCH] [MM-59904] Migrate tooltips of
 'components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx'
 to WithTooltip (#27852)

---
 .../team_warning_banner.test.tsx.snap         | 72 +++++++------------
 .../team_warning_banner.tsx                   | 20 +++---
 2 files changed, 37 insertions(+), 55 deletions(-)

diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
index 3e4708cc2b..4b968298f3 100644
--- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
@@ -459,9 +459,10 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             mentionName="user-0"
           />,
           " and ",
-          <SimpleTooltip
-            content="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
+          <WithTooltip
             id="usernames-overflow"
+            placement="top"
+            title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
           >
             <span
               className="add-others-link"
@@ -476,7 +477,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                 }
               />
             </span>
-          </SimpleTooltip>,
+          </WithTooltip>,
           " are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.",
         ]
       }
@@ -560,23 +561,17 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               />
             </Connect(Component)>
              and 
-            <SimpleTooltip
-              content="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
+            <WithTooltip
               id="usernames-overflow"
               key=".2"
+              placement="top"
+              title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
             >
               <OverlayTrigger
                 defaultOverlayShown={false}
-                delayShow={100}
-                overlay={
-                  <Tooltip
-                    className="hidden-xs"
-                    id="usernames-overflow"
-                    placement="top"
-                  >
-                    @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10
-                  </Tooltip>
-                }
+                delay={400}
+                disabled={false}
+                overlay={<Unknown />}
                 placement="top"
                 trigger={
                   Array [
@@ -587,11 +582,9 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               >
                 <OverlayTrigger
                   defaultOverlayShown={false}
-                  delayShow={100}
+                  delay={400}
                   overlay={
                     <OverlayWrapper
-                      className="hidden-xs"
-                      id="usernames-overflow"
                       intl={
                         Object {
                           "$t": [Function],
@@ -631,10 +624,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                           "wrapRichTextChunksInFragment": undefined,
                         }
                       }
-                      placement="top"
-                    >
-                      @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10
-                    </OverlayWrapper>
+                    />
                   }
                   placement="top"
                   trigger={
@@ -668,7 +658,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                   </span>
                 </OverlayTrigger>
               </OverlayTrigger>
-            </SimpleTooltip>
+            </WithTooltip>
              are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.
           </div>
         </div>
@@ -786,9 +776,10 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             mentionName="user-0"
           />,
           " and ",
-          <SimpleTooltip
-            content="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
+          <WithTooltip
             id="usernames-overflow"
+            placement="top"
+            title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
           >
             <span
               className="add-others-link"
@@ -803,7 +794,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                 }
               />
             </span>
-          </SimpleTooltip>,
+          </WithTooltip>,
           " to this channel once they are members of the ",
           <strong>
             Team Name Display
@@ -890,23 +881,17 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               />
             </Connect(Component)>
              and 
-            <SimpleTooltip
-              content="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
+            <WithTooltip
               id="usernames-overflow"
               key=".3"
+              placement="top"
+              title="@user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10"
             >
               <OverlayTrigger
                 defaultOverlayShown={false}
-                delayShow={100}
-                overlay={
-                  <Tooltip
-                    className="hidden-xs"
-                    id="usernames-overflow"
-                    placement="top"
-                  >
-                    @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10
-                  </Tooltip>
-                }
+                delay={400}
+                disabled={false}
+                overlay={<Unknown />}
                 placement="top"
                 trigger={
                   Array [
@@ -917,11 +902,9 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               >
                 <OverlayTrigger
                   defaultOverlayShown={false}
-                  delayShow={100}
+                  delay={400}
                   overlay={
                     <OverlayWrapper
-                      className="hidden-xs"
-                      id="usernames-overflow"
                       intl={
                         Object {
                           "$t": [Function],
@@ -961,10 +944,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                           "wrapRichTextChunksInFragment": undefined,
                         }
                       }
-                      placement="top"
-                    >
-                      @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10
-                    </OverlayWrapper>
+                    />
                   }
                   placement="top"
                   trigger={
@@ -998,7 +978,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
                   </span>
                 </OverlayTrigger>
               </OverlayTrigger>
-            </SimpleTooltip>
+            </WithTooltip>
              to this channel once they are members of the 
             <strong
               key=".5"
diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx
index 8e619644f1..205e0560c3 100644
--- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx
@@ -13,7 +13,7 @@ import {getTeam} from 'mattermost-redux/selectors/entities/teams';
 import AlertBanner from 'components/alert_banner';
 import AtMention from 'components/at_mention';
 import type {Value} from 'components/multiselect/multiselect';
-import SimpleTooltip from 'components/widgets/simple_tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 type UserProfileValue = Value & UserProfile;
 
@@ -62,9 +62,10 @@ const TeamWarningBanner = (props: Props) => {
                             />
                         ),
                         others: (
-                            <SimpleTooltip
-                                id={'usernames-overflow'}
-                                content={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
+                            <WithTooltip
+                                id='usernames-overflow'
+                                title={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
+                                placement='top'
                             >
                                 <span
                                     className='add-others-link'
@@ -77,7 +78,7 @@ const TeamWarningBanner = (props: Props) => {
                                         }}
                                     />
                                 </span>
-                            </SimpleTooltip>
+                            </WithTooltip>
                         ),
                     },
                 )
@@ -132,9 +133,10 @@ const TeamWarningBanner = (props: Props) => {
                         />
                     ),
                     others: (
-                        <SimpleTooltip
-                            id={'usernames-overflow'}
-                            content={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
+                        <WithTooltip
+                            id='usernames-overflow'
+                            title={commaSeparatedUsernames.replace(`@${firstName}, `, '')}
+                            placement='top'
                         >
                             <span
                                 className='add-others-link'
@@ -147,7 +149,7 @@ const TeamWarningBanner = (props: Props) => {
                                     }}
                                 />
                             </span>
-                        </SimpleTooltip>
+                        </WithTooltip>
                     ),
                     team: (<strong>{team?.display_name}</strong>),
                 },