From 08e4215c23ee0de0877ec902082049138141ee0f Mon Sep 17 00:00:00 2001
From: Angel Mendez <amendez1988@gmail.com>
Date: Wed, 7 Aug 2024 02:24:17 -0600
Subject: [PATCH] [MM-59909] Migrate tooltips of
 'components/user_group_popover/group_member_list/group_member_list.tsx' to
 WithTooltip (#27809)

---
 .../user_group_popover.test.tsx.snap          | 145 ++++++------------
 .../group_member_list.test.tsx.snap           | 145 ++++++------------
 .../group_member_list/group_member_list.tsx   |   9 +-
 3 files changed, 95 insertions(+), 204 deletions(-)

diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index 8f8bf429afd..94230cd8bb2 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -1060,22 +1060,16 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       <div
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
-                                        <SimpleTooltip
-                                          content="Send message"
+                                        <WithTooltip
                                           id="name-id0"
+                                          placement="top"
+                                          title="Send message"
                                         >
                                           <OverlayTrigger
                                             defaultOverlayShown={false}
-                                            delayShow={100}
-                                            overlay={
-                                              <Tooltip
-                                                className="hidden-xs"
-                                                id="name-id0"
-                                                placement="top"
-                                              >
-                                                Send message
-                                              </Tooltip>
-                                            }
+                                            delay={400}
+                                            disabled={false}
+                                            overlay={<Unknown />}
                                             placement="top"
                                             trigger={
                                               Array [
@@ -1086,11 +1080,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <OverlayTrigger
                                               defaultOverlayShown={false}
-                                              delayShow={100}
+                                              delay={400}
                                               overlay={
                                                 <OverlayWrapper
-                                                  className="hidden-xs"
-                                                  id="name-id0"
                                                   intl={
                                                     Object {
                                                       "$t": [Function],
@@ -1130,10 +1122,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       "wrapRichTextChunksInFragment": undefined,
                                                     }
                                                   }
-                                                  placement="top"
-                                                >
-                                                  Send message
-                                                </OverlayWrapper>
+                                                />
                                               }
                                               placement="top"
                                               trigger={
@@ -1168,7 +1157,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               </DMButton>
                                             </OverlayTrigger>
                                           </OverlayTrigger>
-                                        </SimpleTooltip>
+                                        </WithTooltip>
                                       </div>
                                     </DMContainer>
                                   </div>
@@ -1279,22 +1268,16 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       <div
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
-                                        <SimpleTooltip
-                                          content="Send message"
+                                        <WithTooltip
                                           id="name-id1"
+                                          placement="top"
+                                          title="Send message"
                                         >
                                           <OverlayTrigger
                                             defaultOverlayShown={false}
-                                            delayShow={100}
-                                            overlay={
-                                              <Tooltip
-                                                className="hidden-xs"
-                                                id="name-id1"
-                                                placement="top"
-                                              >
-                                                Send message
-                                              </Tooltip>
-                                            }
+                                            delay={400}
+                                            disabled={false}
+                                            overlay={<Unknown />}
                                             placement="top"
                                             trigger={
                                               Array [
@@ -1305,11 +1288,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <OverlayTrigger
                                               defaultOverlayShown={false}
-                                              delayShow={100}
+                                              delay={400}
                                               overlay={
                                                 <OverlayWrapper
-                                                  className="hidden-xs"
-                                                  id="name-id1"
                                                   intl={
                                                     Object {
                                                       "$t": [Function],
@@ -1349,10 +1330,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       "wrapRichTextChunksInFragment": undefined,
                                                     }
                                                   }
-                                                  placement="top"
-                                                >
-                                                  Send message
-                                                </OverlayWrapper>
+                                                />
                                               }
                                               placement="top"
                                               trigger={
@@ -1387,7 +1365,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               </DMButton>
                                             </OverlayTrigger>
                                           </OverlayTrigger>
-                                        </SimpleTooltip>
+                                        </WithTooltip>
                                       </div>
                                     </DMContainer>
                                   </div>
@@ -1498,22 +1476,16 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       <div
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
-                                        <SimpleTooltip
-                                          content="Send message"
+                                        <WithTooltip
                                           id="name-id10"
+                                          placement="top"
+                                          title="Send message"
                                         >
                                           <OverlayTrigger
                                             defaultOverlayShown={false}
-                                            delayShow={100}
-                                            overlay={
-                                              <Tooltip
-                                                className="hidden-xs"
-                                                id="name-id10"
-                                                placement="top"
-                                              >
-                                                Send message
-                                              </Tooltip>
-                                            }
+                                            delay={400}
+                                            disabled={false}
+                                            overlay={<Unknown />}
                                             placement="top"
                                             trigger={
                                               Array [
@@ -1524,11 +1496,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <OverlayTrigger
                                               defaultOverlayShown={false}
-                                              delayShow={100}
+                                              delay={400}
                                               overlay={
                                                 <OverlayWrapper
-                                                  className="hidden-xs"
-                                                  id="name-id10"
                                                   intl={
                                                     Object {
                                                       "$t": [Function],
@@ -1568,10 +1538,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       "wrapRichTextChunksInFragment": undefined,
                                                     }
                                                   }
-                                                  placement="top"
-                                                >
-                                                  Send message
-                                                </OverlayWrapper>
+                                                />
                                               }
                                               placement="top"
                                               trigger={
@@ -1606,7 +1573,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               </DMButton>
                                             </OverlayTrigger>
                                           </OverlayTrigger>
-                                        </SimpleTooltip>
+                                        </WithTooltip>
                                       </div>
                                     </DMContainer>
                                   </div>
@@ -1717,22 +1684,16 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       <div
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
-                                        <SimpleTooltip
-                                          content="Send message"
+                                        <WithTooltip
                                           id="name-id11"
+                                          placement="top"
+                                          title="Send message"
                                         >
                                           <OverlayTrigger
                                             defaultOverlayShown={false}
-                                            delayShow={100}
-                                            overlay={
-                                              <Tooltip
-                                                className="hidden-xs"
-                                                id="name-id11"
-                                                placement="top"
-                                              >
-                                                Send message
-                                              </Tooltip>
-                                            }
+                                            delay={400}
+                                            disabled={false}
+                                            overlay={<Unknown />}
                                             placement="top"
                                             trigger={
                                               Array [
@@ -1743,11 +1704,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <OverlayTrigger
                                               defaultOverlayShown={false}
-                                              delayShow={100}
+                                              delay={400}
                                               overlay={
                                                 <OverlayWrapper
-                                                  className="hidden-xs"
-                                                  id="name-id11"
                                                   intl={
                                                     Object {
                                                       "$t": [Function],
@@ -1787,10 +1746,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       "wrapRichTextChunksInFragment": undefined,
                                                     }
                                                   }
-                                                  placement="top"
-                                                >
-                                                  Send message
-                                                </OverlayWrapper>
+                                                />
                                               }
                                               placement="top"
                                               trigger={
@@ -1825,7 +1781,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               </DMButton>
                                             </OverlayTrigger>
                                           </OverlayTrigger>
-                                        </SimpleTooltip>
+                                        </WithTooltip>
                                       </div>
                                     </DMContainer>
                                   </div>
@@ -1936,22 +1892,16 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       <div
                                         className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                                       >
-                                        <SimpleTooltip
-                                          content="Send message"
+                                        <WithTooltip
                                           id="name-id12"
+                                          placement="top"
+                                          title="Send message"
                                         >
                                           <OverlayTrigger
                                             defaultOverlayShown={false}
-                                            delayShow={100}
-                                            overlay={
-                                              <Tooltip
-                                                className="hidden-xs"
-                                                id="name-id12"
-                                                placement="top"
-                                              >
-                                                Send message
-                                              </Tooltip>
-                                            }
+                                            delay={400}
+                                            disabled={false}
+                                            overlay={<Unknown />}
                                             placement="top"
                                             trigger={
                                               Array [
@@ -1962,11 +1912,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <OverlayTrigger
                                               defaultOverlayShown={false}
-                                              delayShow={100}
+                                              delay={400}
                                               overlay={
                                                 <OverlayWrapper
-                                                  className="hidden-xs"
-                                                  id="name-id12"
                                                   intl={
                                                     Object {
                                                       "$t": [Function],
@@ -2006,10 +1954,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       "wrapRichTextChunksInFragment": undefined,
                                                     }
                                                   }
-                                                  placement="top"
-                                                >
-                                                  Send message
-                                                </OverlayWrapper>
+                                                />
                                               }
                                               placement="top"
                                               trigger={
@@ -2044,7 +1989,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               </DMButton>
                                             </OverlayTrigger>
                                           </OverlayTrigger>
-                                        </SimpleTooltip>
+                                        </WithTooltip>
                                       </div>
                                     </DMContainer>
                                   </div>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
index 9275baf8f0f..5dd04e33035 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
@@ -445,22 +445,16 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               <div
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
-                                <SimpleTooltip
-                                  content="Send message"
+                                <WithTooltip
                                   id="name-id0"
+                                  placement="top"
+                                  title="Send message"
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={100}
-                                    overlay={
-                                      <Tooltip
-                                        className="hidden-xs"
-                                        id="name-id0"
-                                        placement="top"
-                                      >
-                                        Send message
-                                      </Tooltip>
-                                    }
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
                                     placement="top"
                                     trigger={
                                       Array [
@@ -471,11 +465,9 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={100}
+                                      delay={400}
                                       overlay={
                                         <OverlayWrapper
-                                          className="hidden-xs"
-                                          id="name-id0"
                                           intl={
                                             Object {
                                               "$t": [Function],
@@ -515,10 +507,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "wrapRichTextChunksInFragment": undefined,
                                             }
                                           }
-                                          placement="top"
-                                        >
-                                          Send message
-                                        </OverlayWrapper>
+                                        />
                                       }
                                       placement="top"
                                       trigger={
@@ -553,7 +542,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       </DMButton>
                                     </OverlayTrigger>
                                   </OverlayTrigger>
-                                </SimpleTooltip>
+                                </WithTooltip>
                               </div>
                             </DMContainer>
                           </div>
@@ -664,22 +653,16 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               <div
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
-                                <SimpleTooltip
-                                  content="Send message"
+                                <WithTooltip
                                   id="name-id1"
+                                  placement="top"
+                                  title="Send message"
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={100}
-                                    overlay={
-                                      <Tooltip
-                                        className="hidden-xs"
-                                        id="name-id1"
-                                        placement="top"
-                                      >
-                                        Send message
-                                      </Tooltip>
-                                    }
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
                                     placement="top"
                                     trigger={
                                       Array [
@@ -690,11 +673,9 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={100}
+                                      delay={400}
                                       overlay={
                                         <OverlayWrapper
-                                          className="hidden-xs"
-                                          id="name-id1"
                                           intl={
                                             Object {
                                               "$t": [Function],
@@ -734,10 +715,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "wrapRichTextChunksInFragment": undefined,
                                             }
                                           }
-                                          placement="top"
-                                        >
-                                          Send message
-                                        </OverlayWrapper>
+                                        />
                                       }
                                       placement="top"
                                       trigger={
@@ -772,7 +750,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       </DMButton>
                                     </OverlayTrigger>
                                   </OverlayTrigger>
-                                </SimpleTooltip>
+                                </WithTooltip>
                               </div>
                             </DMContainer>
                           </div>
@@ -883,22 +861,16 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               <div
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
-                                <SimpleTooltip
-                                  content="Send message"
+                                <WithTooltip
                                   id="name-id2"
+                                  placement="top"
+                                  title="Send message"
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={100}
-                                    overlay={
-                                      <Tooltip
-                                        className="hidden-xs"
-                                        id="name-id2"
-                                        placement="top"
-                                      >
-                                        Send message
-                                      </Tooltip>
-                                    }
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
                                     placement="top"
                                     trigger={
                                       Array [
@@ -909,11 +881,9 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={100}
+                                      delay={400}
                                       overlay={
                                         <OverlayWrapper
-                                          className="hidden-xs"
-                                          id="name-id2"
                                           intl={
                                             Object {
                                               "$t": [Function],
@@ -953,10 +923,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "wrapRichTextChunksInFragment": undefined,
                                             }
                                           }
-                                          placement="top"
-                                        >
-                                          Send message
-                                        </OverlayWrapper>
+                                        />
                                       }
                                       placement="top"
                                       trigger={
@@ -991,7 +958,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       </DMButton>
                                     </OverlayTrigger>
                                   </OverlayTrigger>
-                                </SimpleTooltip>
+                                </WithTooltip>
                               </div>
                             </DMContainer>
                           </div>
@@ -1102,22 +1069,16 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               <div
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
-                                <SimpleTooltip
-                                  content="Send message"
+                                <WithTooltip
                                   id="name-id3"
+                                  placement="top"
+                                  title="Send message"
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={100}
-                                    overlay={
-                                      <Tooltip
-                                        className="hidden-xs"
-                                        id="name-id3"
-                                        placement="top"
-                                      >
-                                        Send message
-                                      </Tooltip>
-                                    }
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
                                     placement="top"
                                     trigger={
                                       Array [
@@ -1128,11 +1089,9 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={100}
+                                      delay={400}
                                       overlay={
                                         <OverlayWrapper
-                                          className="hidden-xs"
-                                          id="name-id3"
                                           intl={
                                             Object {
                                               "$t": [Function],
@@ -1172,10 +1131,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "wrapRichTextChunksInFragment": undefined,
                                             }
                                           }
-                                          placement="top"
-                                        >
-                                          Send message
-                                        </OverlayWrapper>
+                                        />
                                       }
                                       placement="top"
                                       trigger={
@@ -1210,7 +1166,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       </DMButton>
                                     </OverlayTrigger>
                                   </OverlayTrigger>
-                                </SimpleTooltip>
+                                </WithTooltip>
                               </div>
                             </DMContainer>
                           </div>
@@ -1321,22 +1277,16 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               <div
                                 className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
                               >
-                                <SimpleTooltip
-                                  content="Send message"
+                                <WithTooltip
                                   id="name-id4"
+                                  placement="top"
+                                  title="Send message"
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={100}
-                                    overlay={
-                                      <Tooltip
-                                        className="hidden-xs"
-                                        id="name-id4"
-                                        placement="top"
-                                      >
-                                        Send message
-                                      </Tooltip>
-                                    }
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
                                     placement="top"
                                     trigger={
                                       Array [
@@ -1347,11 +1297,9 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={100}
+                                      delay={400}
                                       overlay={
                                         <OverlayWrapper
-                                          className="hidden-xs"
-                                          id="name-id4"
                                           intl={
                                             Object {
                                               "$t": [Function],
@@ -1391,10 +1339,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "wrapRichTextChunksInFragment": undefined,
                                             }
                                           }
-                                          placement="top"
-                                        >
-                                          Send message
-                                        </OverlayWrapper>
+                                        />
                                       }
                                       placement="top"
                                       trigger={
@@ -1429,7 +1374,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       </DMButton>
                                     </OverlayTrigger>
                                   </OverlayTrigger>
-                                </SimpleTooltip>
+                                </WithTooltip>
                               </div>
                             </DMContainer>
                           </div>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
index c4e2cd58166..3f394173688 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
@@ -19,8 +19,8 @@ import NoResultsIndicator from 'components/no_results_indicator';
 import {NoResultsVariant} from 'components/no_results_indicator/types';
 import ProfilePopover from 'components/profile_popover';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
-import SimpleTooltip from 'components/widgets/simple_tooltip';
 import Avatar from 'components/widgets/users/avatar';
+import WithTooltip from 'components/with_tooltip';
 
 import * as Utils from 'utils/utils';
 
@@ -183,9 +183,10 @@ const GroupMemberList = (props: Props) => {
                         </UserButton>
                     </ProfilePopover>
                     <DMContainer className='group-member-list_dm-button'>
-                        <SimpleTooltip
+                        <WithTooltip
                             id={`name-${user.id}`}
-                            content={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})}
+                            title={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})}
+                            placement='top'
                         >
                             <DMButton
                                 className='btn btn-icon btn-xs'
@@ -198,7 +199,7 @@ const GroupMemberList = (props: Props) => {
                                     className='icon icon-send'
                                 />
                             </DMButton>
-                        </SimpleTooltip>
+                        </WithTooltip>
                     </DMContainer>
                 </UserListItem>
             );