From d353167f9ccfc2e40d6eeb057087cafd86c0fd52 Mon Sep 17 00:00:00 2001
From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:06:39 +0300
Subject: [PATCH] [MM-59343] Migrate tooltips of
 "components/select_team/components/select_team_item.tsx" to WithTooltip
 (#27584)

---
 .../select_team_item.test.tsx.snap            | 174 +-----------------
 .../components/select_team_item.tsx           |  19 +-
 2 files changed, 9 insertions(+), 184 deletions(-)

diff --git a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
index fae7b8a418..33375116af 100644
--- a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
+++ b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap
@@ -112,181 +112,15 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
 <div
   className="signup-team-dir"
 >
-  <OverlayTrigger
-    container={
-      SelectTeamItem {
-        "context": Object {},
-        "handleTeamClick": [Function],
-        "props": Object {
-          "canJoinPrivateTeams": false,
-          "canJoinPublicTeams": true,
-          "intl": Object {
-            "formatMessage": [MockFunction] {
-              "calls": Array [
-                Array [
-                  Object {
-                    "defaultMessage": "Join Team Icon",
-                    "id": "select_team.join.icon",
-                  },
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": undefined,
-                },
-              ],
-            },
-          },
-          "loading": false,
-          "onTeamClick": [MockFunction],
-          "team": Object {
-            "allow_open_invite": true,
-            "description": "description",
-            "display_name": "team_display_name",
-          },
-        },
-        "refs": Object {},
-        "renderDescriptionTooltip": [Function],
-        "setState": [Function],
-        "state": null,
-        "updater": Updater {
-          "_callbacks": Array [],
-          "_renderer": ReactShallowRenderer {
-            "_context": Object {},
-            "_didScheduleRenderPhaseUpdate": false,
-            "_dispatcher": Object {
-              "readContext": [Function],
-              "useCallback": [Function],
-              "useContext": [Function],
-              "useDebugValue": [Function],
-              "useDeferredValue": [Function],
-              "useEffect": [Function],
-              "useId": [Function],
-              "useImperativeHandle": [Function],
-              "useInsertionEffect": [Function],
-              "useLayoutEffect": [Function],
-              "useMemo": [Function],
-              "useReducer": [Function],
-              "useRef": [Function],
-              "useResponder": [Function],
-              "useState": [Function],
-              "useSyncExternalStore": [Function],
-              "useTransition": [Function],
-            },
-            "_element": <SelectTeamItem
-              canJoinPrivateTeams={false}
-              canJoinPublicTeams={true}
-              intl={
-                Object {
-                  "formatMessage": [MockFunction] {
-                    "calls": Array [
-                      Array [
-                        Object {
-                          "defaultMessage": "Join Team Icon",
-                          "id": "select_team.join.icon",
-                        },
-                      ],
-                    ],
-                    "results": Array [
-                      Object {
-                        "type": "return",
-                        "value": undefined,
-                      },
-                    ],
-                  },
-                }
-              }
-              loading={false}
-              onTeamClick={[MockFunction]}
-              team={
-                Object {
-                  "allow_open_invite": true,
-                  "description": "description",
-                  "display_name": "team_display_name",
-                }
-              }
-            />,
-            "_firstWorkInProgressHook": null,
-            "_forcedUpdate": false,
-            "_idCounter": 0,
-            "_instance": [Circular],
-            "_isReRender": false,
-            "_newState": null,
-            "_numberOfReRenders": 0,
-            "_renderPhaseUpdates": null,
-            "_rendered": <div
-              className="signup-team-dir"
-            >
-              <OverlayTrigger
-                container={[Circular]}
-                defaultOverlayShown={false}
-                delayShow={1000}
-                overlay={
-                  <Tooltip
-                    id="team-description__tooltip"
-                  >
-                    description
-                  </Tooltip>
-                }
-                placement="top"
-                rootClose={true}
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <TeamInfoIcon
-                  className="icon icon--info"
-                />
-              </OverlayTrigger>
-              <a
-                className=""
-                href="#"
-                id="team_display_name"
-                onClick={[Function]}
-              >
-                <span
-                  className="signup-team-dir__name"
-                >
-                  team_display_name
-                </span>
-                <span
-                  className="fa fa-angle-right right signup-team__icon"
-                />
-              </a>
-            </div>,
-            "_rendering": false,
-            "_updater": [Circular],
-            "_workInProgressHook": null,
-          },
-        },
-      }
-    }
-    defaultOverlayShown={false}
-    delayShow={1000}
-    overlay={
-      <Tooltip
-        id="team-description__tooltip"
-      >
-        description
-      </Tooltip>
-    }
+  <WithTooltip
+    id="team-description__tooltip"
     placement="top"
-    rootClose={true}
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
-    }
+    title="description"
   >
     <TeamInfoIcon
       className="icon icon--info"
     />
-  </OverlayTrigger>
+  </WithTooltip>
   <a
     className=""
     href="#"
diff --git a/webapp/channels/src/components/select_team/components/select_team_item.tsx b/webapp/channels/src/components/select_team/components/select_team_item.tsx
index 8d3d006faa..eddb828699 100644
--- a/webapp/channels/src/components/select_team/components/select_team_item.tsx
+++ b/webapp/channels/src/components/select_team/components/select_team_item.tsx
@@ -7,9 +7,8 @@ import {injectIntl, type WrappedComponentProps} from 'react-intl';
 
 import type {Team} from '@mattermost/types/teams';
 
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import TeamInfoIcon from 'components/widgets/icons/team_info_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import * as Utils from 'utils/utils';
 
@@ -33,22 +32,14 @@ export class SelectTeamItem extends React.PureComponent<Props> {
             return null;
         }
 
-        const descriptionTooltip = (
-            <Tooltip id='team-description__tooltip'>
-                {team.description}
-            </Tooltip>
-        );
-
         return (
-            <OverlayTrigger
-                delayShow={1000}
+            <WithTooltip
+                id='team-description__tooltip'
+                title={team.description}
                 placement='top'
-                overlay={descriptionTooltip}
-                rootClose={true}
-                container={this}
             >
                 <TeamInfoIcon className='icon icon--info'/>
-            </OverlayTrigger>
+            </WithTooltip>
         );
     };