[MM-59907] Migrate tooltips of 'components/threading/global_threads/t…

…hread_list/thread_list.tsx' to WithTooltip (mattermost#27851)
asmahdi08 · Aug 8, 2024 · b1960f9 · b1960f9
1 parent 6316606
commit b1960f9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/...c/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap b/...c/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap
@@ -46,9 +46,10 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1
       <div
         className="right-anchor"
       >
-        <SimpleTooltip
-          content="Mark all as read"
+        <WithTooltip
           id="threadListMarkRead"
+          placement="top"
+          title="Mark all as read"
         >
           <Memo(Button)
             className="Button___large Button___icon"
@@ -64,7 +65,7 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1
               />
             </span>
           </Memo(Button)>
-        </SimpleTooltip>
+        </WithTooltip>
       </div>
     }
   />

diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.test.tsx b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.test.tsx
@@ -119,7 +119,7 @@ describe('components/threading/global_threads/thread_list', () => {
             <ThreadList {...props}/>,
         );
 
-        wrapper.find(Header).shallow().find({content: 'Mark all as read'}).find(Button).simulate('click');
+        wrapper.find(Header).shallow().find(Button).find({id: 'threads-list__mark-all-as-read'}).simulate('click');
         expect(openModal).toHaveBeenCalledTimes(1);
     });
 

diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.tsx
@@ -22,7 +22,7 @@ import NoResultsIndicator from 'components/no_results_indicator';
 import CRTListTutorialTip from 'components/tours/crt_tour/crt_list_tutorial_tip';
 import CRTUnreadTutorialTip from 'components/tours/crt_tour/crt_unread_tutorial_tip';
 import Header from 'components/widgets/header';
-import SimpleTooltip from 'components/widgets/simple_tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import {A11yClassNames, Constants, CrtTutorialSteps, ModalIdentifiers, Preferences} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
@@ -231,12 +231,13 @@ const ThreadList = ({
                 )}
                 right={(
                     <div className='right-anchor'>
-                        <SimpleTooltip
+                        <WithTooltip
                             id='threadListMarkRead'
-                            content={formatMessage({
+                            title={formatMessage({
                                 id: 'threading.threadList.markRead',
                                 defaultMessage: 'Mark all as read',
                             })}
+                            placement={'top'}
                         >
                             <Button
                                 id={'threads-list__mark-all-as-read'}
@@ -248,7 +249,7 @@ const ThreadList = ({
                                     <PlaylistCheckIcon size={18}/>
                                 </span>
                             </Button>
-                        </SimpleTooltip>
+                        </WithTooltip>
                     </div>
                 )}
             />