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>
2024-06-26 14:13:41 +08:00
--- a/webapp/channels/src/components/actions_menu/snapshots/actions_menu.test.tsx.snap
+++ b/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
-    className="hidden-xs"
-    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>
-    }
+  <WithTooltip
+    id="center_post_id_1_tooltip"
    placement="top"
-    rootClose={true}
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Message actions"
+        id="post_info.tooltip.actions"
+      />
    }
  >
    <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
-    className="hidden-xs"
-    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>
-    }
+  <WithTooltip
+    id="center_post_id_1_tooltip"
    placement="top"
-    rootClose={true}
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Message actions"
+        id="post_info.tooltip.actions"
+      />
    }
  >
    <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
-    className="hidden-xs"
-    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>
-    }
+  <WithTooltip
+    id="center_post_id_1_tooltip"
    placement="top"
-    rootClose={true}
-    trigger={
-      Array [
-        "hover",
-        "focus",
-      ]
+    title={
+      <Memo(MemoizedFormattedMessage)
+        defaultMessage="Message actions"
+        id="post_info.tooltip.actions"
+      />
    }
  >
    <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"
--- a/webapp/channels/src/components/actions_menu/actions_menu.tsx
+++ b/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
-                    className='hidden-xs'
-                    delayShow={500}
+                <WithTooltip
+                    id={`${this.props.location}_${this.props.post.id}_tooltip`}
+                    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 >
        );
    }
 }