[MM-58518] Migrate tooltips of "components/copy_text.tsx" to WithTool…

…tip (mattermost#27413)
devinbinnie · Jul 29, 2024 · 6ddf796 · 6ddf796
1 parent 705679e
commit 6ddf796
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 55 deletions.
diff --git 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');
-    });
-}
diff --git 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');
             });
         });
     });

diff --git 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,28 +27,26 @@ 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='#'
                 data-testid='copyText'
                 className='fa fa-copy ml-2'
                 onClick={copyText}
             />
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };
 

diff --git a/...mponents/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap b/...mponents/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>

diff --git 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/>

diff --git a/...mponents/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap b/...mponents/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>

diff --git 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>

diff --git 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",