From 5a349873f77d7d5fa74f1e7e7d0f99efa3550669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Mon, 14 Aug 2023 14:20:47 +0200
Subject: [PATCH] Class to functional component example 2 (#24183)

* Class to functional component example 2

* Fix tests
---
 webapp/channels/src/components/copy_text.tsx  | 81 +++++++++----------
 .../installed_command.test.tsx.snap           | 16 +---
 .../installed_incoming_webhook.test.tsx.snap  |  4 +-
 .../installed_outgoing_webhook.test.tsx.snap  |  4 +-
 .../confirm_integration.test.tsx.snap         | 16 ++--
 .../installed_oauth_app.test.tsx.snap         |  6 +-
 6 files changed, 54 insertions(+), 73 deletions(-)

diff --git a/webapp/channels/src/components/copy_text.tsx b/webapp/channels/src/components/copy_text.tsx
index e4a975ea90..1db5bb392b 100644
--- a/webapp/channels/src/components/copy_text.tsx
+++ b/webapp/channels/src/components/copy_text.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import OverlayTrigger from 'components/overlay_trigger';
@@ -12,48 +12,47 @@ import {copyToClipboard} from 'utils/utils';
 
 type Props = {
     value: string;
-    defaultMessage: string;
-    idMessage: string;
+    defaultMessage?: string;
+    idMessage?: string;
 };
 
-export default class CopyText extends React.PureComponent<Props> {
-    public static defaultProps = {
-        defaultMessage: 'Copy',
-        idMessage: 'integrations.copy',
-    };
-
-    private copyText = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
+const CopyText = ({
+    value,
+    defaultMessage = 'Copy',
+    idMessage = 'integrations.copy',
+}: Props) => {
+    const copyText = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         e.preventDefault();
-        copyToClipboard(this.props.value);
-    };
+        copyToClipboard(value);
+    }, [value]);
 
-    public render() {
-        if (!document.queryCommandSupported('copy')) {
-            return null;
-        }
-
-        const tooltip = (
-            <Tooltip id='copy'>
-                <FormattedMessage
-                    id={this.props.idMessage}
-                    defaultMessage={this.props.defaultMessage}
-                />
-            </Tooltip>
-        );
-
-        return (
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
-                placement='top'
-                overlay={tooltip}
-            >
-                <a
-                    href='#'
-                    data-testid='copyText'
-                    className='fa fa-copy ml-2'
-                    onClick={this.copyText}
-                />
-            </OverlayTrigger>
-        );
+    if (!document.queryCommandSupported('copy')) {
+        return null;
     }
-}
+
+    const tooltip = (
+        <Tooltip id='copy'>
+            <FormattedMessage
+                id={idMessage}
+                defaultMessage={defaultMessage}
+            />
+        </Tooltip>
+    );
+
+    return (
+        <OverlayTrigger
+            delayShow={Constants.OVERLAY_TIME_DELAY}
+            placement='top'
+            overlay={tooltip}
+        >
+            <a
+                href='#'
+                data-testid='copyText'
+                className='fa fa-copy ml-2'
+                onClick={copyText}
+            />
+        </OverlayTrigger>
+    );
+};
+
+export default React.memo(CopyText);
diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap
index 5aa16329cb..ba4d35cc70 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap
@@ -79,9 +79,7 @@ exports[`components/integrations/InstalledCommand should call onDelete function
             }
           }
         />
-        <CopyText
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
+        <Memo(CopyText)
           value="testToken"
         />
       </span>
@@ -187,9 +185,7 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct
             }
           }
         />
-        <CopyText
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
+        <Memo(CopyText)
           value="testToken"
         />
       </span>
@@ -265,9 +261,7 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = `
             }
           }
         />
-        <CopyText
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
+        <Memo(CopyText)
           value="testToken"
         />
       </span>
@@ -341,9 +335,7 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut
             }
           }
         />
-        <CopyText
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
+        <Memo(CopyText)
           value="testToken"
         />
       </span>
diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap
index bfe686d05c..6084434e7e 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap
@@ -63,9 +63,7 @@ exports[`components/integrations/InstalledIncomingWebhook should match snapshot
           }
         />
         <span>
-          <CopyText
-            defaultMessage="Copy"
-            idMessage="integrations.copy"
+          <Memo(CopyText)
             value="http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r"
           />
         </span>
diff --git a/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap
index fca0a9e4a6..9b4dc63ea7 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap
@@ -132,9 +132,7 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot
             }
           }
         />
-        <CopyText
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
+        <Memo(CopyText)
           value="xoxz1z7c3tgi9xhrfudn638q9r"
         />
       </span>
diff --git 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
index 551911427b..7812a3dc62 100644
--- 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
@@ -55,9 +55,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, comma
           }
         }
       />
-      <CopyText
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
+      <Memo(CopyText)
         value="jb6oyqh95irpbx8fo9zmndkp1r"
       />
     </p>
@@ -133,9 +131,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
           }
         }
       />
-      <CopyText
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
+      <Memo(CopyText)
         value="http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic"
       />
     </p>
@@ -213,7 +209,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
           }
         }
       />
-      <CopyText
+      <Memo(CopyText)
         defaultMessage="Copy Client Id"
         idMessage="integrations.copy_client_id"
         value="r5tpgt4iepf45jt768jz84djic"
@@ -228,7 +224,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
           }
         }
       />
-      <CopyText
+      <Memo(CopyText)
         defaultMessage="Copy Client Secret"
         idMessage="integrations.copy_client_secret"
         value="<==secret==>"
@@ -329,9 +325,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
           }
         }
       />
-      <CopyText
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
+      <Memo(CopyText)
         value="jb6oyqh95irpbx8fo9zmndkp1r"
       />
     </p>
diff --git 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
index bb09396f23..ca84f3e824 100644
--- 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
@@ -111,7 +111,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
           defaultMessage="Copy Client Id"
           idMessage="integrations.copy_client_id"
           value="facxd9wpzpbpfp8pad78xj75pr"
@@ -339,7 +339,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
           defaultMessage="Copy Client Id"
           idMessage="integrations.copy_client_id"
           value="facxd9wpzpbpfp8pad78xj75pr"
@@ -514,7 +514,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
           defaultMessage="Copy Client Id"
           idMessage="integrations.copy_client_id"
           value="facxd9wpzpbpfp8pad78xj75pr"