MM-58411 Migrate tooltips of 'components/actions_menu/actions_menu' to WithTooltip (#27238)

* Added  console log for draft PR

* Replaced  tooltip  component with changes

* Updated snapshot  for  tests

* Updated  title  to use FormattedMessage

* Remove defineMessages

* Fix style

* Removed unused tooltip

---------

Co-authored-by: ezekiel <ezekiel@itsmart.my>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap

@@ -7,30 +7,14 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace disabled
   onToggle={[Function]}
   open={true}
 >
-  <OverlayTrigger
+  <WithTooltip
-    className="hidden-xs"
+    id="center_post_id_1_tooltip"
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        bsClass="tooltip"
-        className="hidden-xs"
-        id="actions-menu-icon-tooltip"
-        placement="right"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Message actions"
-          id="post_info.tooltip.actions"
-        />
-      </Tooltip>
-    }
     placement="top"
-    rootClose={true}
+    title={
-    trigger={
+      <Memo(MemoizedFormattedMessage)
-      Array [
+        defaultMessage="Message actions"
-        "hover",
+        id="post_info.tooltip.actions"
-        "focus",
+      />
-      ]
     }
   >
     <button
@@ -45,7 +29,7 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace disabled
         className="icon icon-apps"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Post extra options"
     id="center_actions_dropdown_post_id_1"
@@ -74,30 +58,14 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace enabled a
   onToggle={[Function]}
   open={true}
 >
-  <OverlayTrigger
+  <WithTooltip
-    className="hidden-xs"
+    id="center_post_id_1_tooltip"
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        bsClass="tooltip"
-        className="hidden-xs"
-        id="actions-menu-icon-tooltip"
-        placement="right"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Message actions"
-          id="post_info.tooltip.actions"
-        />
-      </Tooltip>
-    }
     placement="top"
-    rootClose={true}
+    title={
-    trigger={
+      <Memo(MemoizedFormattedMessage)
-      Array [
+        defaultMessage="Message actions"
-        "hover",
+        id="post_info.tooltip.actions"
-        "focus",
+      />
-      ]
     }
   >
     <button
@@ -112,7 +80,7 @@ exports[`components/actions_menu/ActionsMenu has actions - marketplace enabled a
         className="icon icon-apps"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Post extra options"
     id="center_actions_dropdown_post_id_1"
@@ -160,30 +128,14 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
   onToggle={[Function]}
   open={true}
 >
-  <OverlayTrigger
+  <WithTooltip
-    className="hidden-xs"
+    id="center_post_id_1_tooltip"
-    defaultOverlayShown={false}
-    delayShow={500}
-    overlay={
-      <Tooltip
-        bsClass="tooltip"
-        className="hidden-xs"
-        id="actions-menu-icon-tooltip"
-        placement="right"
-      >
-        <Memo(MemoizedFormattedMessage)
-          defaultMessage="Message actions"
-          id="post_info.tooltip.actions"
-        />
-      </Tooltip>
-    }
     placement="top"
-    rootClose={true}
+    title={
-    trigger={
+      <Memo(MemoizedFormattedMessage)
-      Array [
+        defaultMessage="Message actions"
-        "hover",
+        id="post_info.tooltip.actions"
-        "focus",
+      />
-      ]
     }
   >
     <button
@@ -198,7 +150,7 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
         className="icon icon-apps"
       />
     </button>
-  </OverlayTrigger>
+  </WithTooltip>
   <Menu
     ariaLabel="Post extra options"
     id="center_actions_dropdown_post_id_1"

webapp/channels/src/components/actions_menu/actions_menu.tsx

@@ -3,9 +3,8 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import {Tooltip} from 'react-bootstrap';
-import {FormattedMessage, injectIntl} from 'react-intl';
 import type {IntlShape} from 'react-intl';
+import {FormattedMessage, injectIntl} from 'react-intl';
 
 import type {AppBinding} from '@mattermost/types/apps';
 import type {Post} from '@mattermost/types/posts';
@@ -15,21 +14,21 @@ import Permissions from 'mattermost-redux/constants/permissions';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-import OverlayTrigger from 'components/overlay_trigger';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
-import MarketplaceModal from 'components/plugin_marketplace/marketplace_modal';
 import type {OpenedFromType} from 'components/plugin_marketplace/marketplace_modal';
+import MarketplaceModal from 'components/plugin_marketplace/marketplace_modal';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
+import WithTooltip from 'components/with_tooltip';
 
 import Pluggable from 'plugins/pluggable';
 import {createCallContext} from 'utils/apps';
-import {Locations, Constants, ModalIdentifiers} from 'utils/constants';
+import {Constants, Locations, ModalIdentifiers} from 'utils/constants';
 import * as PostUtils from 'utils/post_utils';
 import * as Utils from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
-import type {HandleBindingClick, PostEphemeralCallResponseForPost, OpenAppsModal} from 'types/apps';
+import type {HandleBindingClick, OpenAppsModal, PostEphemeralCallResponseForPost} from 'types/apps';
 import type {PluginComponent} from 'types/store/plugins';
 
 import './actions_menu.scss';
@@ -112,18 +111,6 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
         this.buttonRef = React.createRef<HTMLButtonElement>();
     }
 
-    tooltip = (
-        <Tooltip
-            id='actions-menu-icon-tooltip'
-            className='hidden-xs'
-        >
-            <FormattedMessage
-                id='post_info.tooltip.actions'
-                defaultMessage='Message actions'
-            />
-        </Tooltip>
-    );
-
     componentDidUpdate(prevProps: Props) {
         if (this.props.isMenuOpen && !prevProps.isMenuOpen) {
             this.fetchBindings();
@@ -131,7 +118,7 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
     }
 
     static getDerivedStateFromProps(props: Props) {
-        const state: Partial<State> = { };
+        const state: Partial<State> = {};
         if (props.appBindings) {
             state.appBindings = props.appBindings;
         }
@@ -387,12 +374,15 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                 open={this.props.isMenuOpen}
                 onToggle={this.handleDropdownOpened}
             >
-                <OverlayTrigger
+                <WithTooltip
-                    className='hidden-xs'
+                    id={`${this.props.location}_${this.props.post.id}_tooltip`}
-                    delayShow={500}
+                    title={
+                        <FormattedMessage
+                            id='post_info.tooltip.actions'
+                            defaultMessage='Message actions'
+                        />
+                    }
                     placement='top'
-                    overlay={this.tooltip}
-                    rootClose={true}
                 >
                     <button
                         key='more-actions-button'
@@ -407,7 +397,7 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                     >
                         <i className={'icon icon-apps'}/>
                     </button>
-                </OverlayTrigger>
+                </WithTooltip>
                 <Menu
                     id={`${this.props.location}_actions_dropdown_${this.props.post.id}`}
                     openLeft={true}
@@ -417,7 +407,7 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                 >
                     {menuItems}
                 </Menu>
-            </MenuWrapper>
+            </MenuWrapper >
         );
     }
 }