[MM-58518] Migrate tooltips of "components/copy_text.tsx" to WithTooltip (#27413)

2024-07-29 08:49:57 +00:00
--- a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/copy_icon_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/copy_icon_spec.js
@@ -51,21 +51,12 @@ describe('Incoming webhook', () => {
        cy.findByText('Setup Successful').should('be.visible');

        // * You should see a "copy" icon to the right of the URL in the "Setup Successful" screen
-        copyIconIsVisible('.backstage-form__confirmation');
+        cy.findByTestId('copyText').should('be.visible');

        // # Click "Done" in the "Setup Successful" screen
        cy.findByText('Done').should('be.visible').click();

        // # You should see a "copy" icon to the right of the webhook's URL
-        copyIconIsVisible('.item-details__url');
+        cy.findByTestId('copyText').should('be.visible');
    });
 });
-
-function copyIconIsVisible(element) {
-    cy.get(element).within(() => {
-        cy.get('.fa.fa-copy').
-            should('be.visible').
-            trigger('mouseover').
-            should('have.attr', 'aria-describedby', 'copy');
-    });
-}
--- a/e2e-tests/cypress/tests/integration/channels/integrations/integrations_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/integrations/integrations_spec.js
@@ -248,8 +248,7 @@ describe('Integrations page', () => {
        cy.findByText('Token').should('exist').and('be.visible');

        // * Verify copy icon is shown
-        cy.get('.fa.fa-copy').should('exist').and('be.visible').
-            trigger('mouseover').and('have.attr', 'aria-describedby', 'copy');
+        cy.findByTestId('copyText').should('be.visible');

        // # Hit done to move from confirm screen
        cy.findByText('Done').should('exist').and('be.visible').click();
@@ -265,8 +264,7 @@ describe('Integrations page', () => {
            // # For each custom slash command was created
            cy.wrap(el).within(() => {
                // Verify copy icon for token is present
-                cy.get('.fa.fa-copy').should('exist').and('be.visible').
-                    trigger('mouseover').and('have.attr', 'aria-describedby', 'copy');
+                cy.findByTestId('copyText').should('be.visible');
            });
        });
    });
--- a/webapp/channels/src/components/copy_text.tsx
+++ b/webapp/channels/src/components/copy_text.tsx
@@ -1,25 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

+import type {ReactNode} from 'react';
 import React, {useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';

-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';

-import Constants from 'utils/constants';
 import {copyToClipboard} from 'utils/utils';

 type Props = {
    value: string;
-    defaultMessage?: string;
-    idMessage?: string;
+    tooltip?: ReactNode;
 };

 const CopyText = ({
    value,
-    defaultMessage = 'Copy',
-    idMessage = 'integrations.copy',
+    tooltip,
 }: Props) => {
    const copyText = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        e.preventDefault();
@@ -30,20 +27,18 @@ const CopyText = ({
        return null;
    }

-    const tooltip = (
-        <Tooltip id='copy'>
-            <FormattedMessage
-                id={idMessage}
-                defaultMessage={defaultMessage}
-            />
-        </Tooltip>
-    );
-
    return (
-        <OverlayTrigger
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+        <WithTooltip
+            id='copyTextTooltip'
            placement='top'
-            overlay={tooltip}
+            title={
+                tooltip || (
+                    <FormattedMessage
+                        id='copyTextTooltip.copy'
+                        defaultMessage='Copy'
+                    />
+                )
+            }
        >
            <a
                href='#'
@@ -51,7 +46,7 @@ const CopyText = ({
                className='fa fa-copy ml-2'
                onClick={copyText}
            />
-        </OverlayTrigger>
+        </WithTooltip>
    );
 };

--- a/webapp/channels/src/components/integrations/confirm_integration/snapshots/confirm_integration.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/confirm_integration/snapshots/confirm_integration.test.tsx.snap
@@ -210,8 +210,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
        }
      />
      <Memo(CopyText)
-        defaultMessage="Copy Client Id"
-        idMessage="integrations.copy_client_id"
+        tooltip={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Copy Client Id"
+            id="integrations.copy_client_id"
+          />
+        }
        value="r5tpgt4iepf45jt768jz84djic"
      />
      <br />
@@ -225,8 +229,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
        }
      />
      <Memo(CopyText)
-        defaultMessage="Copy Client Secret"
-        idMessage="integrations.copy_client_secret"
+        tooltip={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Copy Client Secret"
+            id="integrations.copy_client_secret"
+          />
+        }
        value="<==secret==>"
      />
    </p>
--- a/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
+++ b/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
@@ -209,8 +209,12 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                    values={{id: oauthAppToken}}
                />
                <CopyText
-                    idMessage='integrations.copy_client_id'
-                    defaultMessage='Copy Client Id'
+                    tooltip={
+                        <FormattedMessage
+                            id='integrations.copy_client_id'
+                            defaultMessage='Copy Client Id'
+                        />
+                    }
                    value={oauthAppToken}
                />
                <br/>
@@ -220,8 +224,12 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                    values={{secret: oauthAppSecret}}
                />
                <CopyText
-                    idMessage='integrations.copy_client_secret'
-                    defaultMessage='Copy Client Secret'
+                    tooltip={
+                        <FormattedMessage
+                            id='integrations.copy_client_secret'
+                            defaultMessage='Copy Client Secret'
+                        />
+                    }
                    value={oauthAppSecret}
                />
            </p>,
@@ -302,8 +310,12 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                        values={{username}}
                    />
                    <CopyText
-                        idMessage='integrations.copy_username'
-                        defaultMessage='Copy Username'
+                        tooltip={
+                            <FormattedMessage
+                                id='integrations.copy_username'
+                                defaultMessage='Copy Username'
+                            />
+                        }
                        value={username || ''}
                    />
                    <br/>
--- a/webapp/channels/src/components/integrations/installed_oauth_app/snapshots/installed_oauth_app.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/installed_oauth_app/snapshots/installed_oauth_app.test.tsx.snap
@@ -112,8 +112,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
          }
        />
        <Memo(CopyText)
-          defaultMessage="Copy Client Id"
-          idMessage="integrations.copy_client_id"
+          tooltip={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy Client Id"
+              id="integrations.copy_client_id"
+            />
+          }
          value="facxd9wpzpbpfp8pad78xj75pr"
        />
      </span>
@@ -340,8 +344,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
          }
        />
        <Memo(CopyText)
-          defaultMessage="Copy Client Id"
-          idMessage="integrations.copy_client_id"
+          tooltip={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy Client Id"
+              id="integrations.copy_client_id"
+            />
+          }
          value="facxd9wpzpbpfp8pad78xj75pr"
        />
      </span>
@@ -515,8 +523,12 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
          }
        />
        <Memo(CopyText)
-          defaultMessage="Copy Client Id"
-          idMessage="integrations.copy_client_id"
+          tooltip={
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Copy Client Id"
+              id="integrations.copy_client_id"
+            />
+          }
          value="facxd9wpzpbpfp8pad78xj75pr"
        />
      </span>
--- a/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
+++ b/webapp/channels/src/components/integrations/installed_oauth_app/installed_oauth_app.tsx
@@ -214,8 +214,12 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
                        }}
                    />
                    <CopyText
-                        idMessage='integrations.copy_client_secret'
-                        defaultMessage='Copy Client Secret'
+                        tooltip={
+                            <FormattedMessage
+                                id='integrations.copy_client_secret'
+                                defaultMessage='Copy Client Secret'
+                            />
+                        }
                        value={this.state.clientSecret}
                    />
                </span>
@@ -309,8 +313,12 @@ export default class InstalledOAuthApp extends React.PureComponent<InstalledOAut
                                }}
                            />
                            <CopyText
-                                idMessage='integrations.copy_client_id'
-                                defaultMessage='Copy Client Id'
+                                tooltip={
+                                    <FormattedMessage
+                                        id='integrations.copy_client_id'
+                                        defaultMessage='Copy Client Id'
+                                    />
+                                }
                                value={oauthApp.id}
                            />
                        </span>
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3333,6 +3333,7 @@
  "copied.message": "Copied",
  "copy.code.message": "Copy code",
  "copy.text.message": "Copy text",
+  "copyTextTooltip.copy": "Copy",
  "create_category_modal.create": "Create",
  "create_category_modal.createCategory": "Create New Category",
  "create_comment.addComment": "Reply to this thread...",
@@ -3908,6 +3909,9 @@
  "integrations.add": "Add",
  "integrations.command.description": "Slash commands send events to external integrations",
  "integrations.command.title": "Slash Commands",
+  "integrations.copy_client_id": "Copy Client Id",
+  "integrations.copy_client_secret": "Copy Client Secret",
+  "integrations.copy_username": "Copy Username",
  "integrations.delete.confirm.button": "Yes, delete it",
  "integrations.delete.confirm.title": "Delete Integration",
  "integrations.done": "Done",