Class to functional component example 2 (#24183)

* Class to functional component example 2

* Fix tests

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;
+    defaultMessage?: string;
-    idMessage: string;
+    idMessage?: string;
 };
 
-export default class CopyText extends React.PureComponent<Props> {
+const CopyText = ({
-    public static defaultProps = {
+    value,
-        defaultMessage: 'Copy',
+    defaultMessage = 'Copy',
-        idMessage: 'integrations.copy',
+    idMessage = 'integrations.copy',
-    };
+}: Props) => {
-
+    const copyText = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    private copyText = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
         e.preventDefault();
-        copyToClipboard(this.props.value);
+        copyToClipboard(value);
-    };
+    }, [value]);
 
-    public render() {
+    if (!document.queryCommandSupported('copy')) {
-        if (!document.queryCommandSupported('copy')) {
+        return null;
-            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>
-        );
     }
-}
+
+    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);

webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap

@@ -79,9 +79,7 @@ exports[`components/integrations/InstalledCommand should call onDelete function
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
           value="testToken"
         />
       </span>
@@ -187,9 +185,7 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
           value="testToken"
         />
       </span>
@@ -265,9 +261,7 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = `
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
           value="testToken"
         />
       </span>
@@ -341,9 +335,7 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
           value="testToken"
         />
       </span>

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
+          <Memo(CopyText)
-            defaultMessage="Copy"
-            idMessage="integrations.copy"
             value="http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r"
           />
         </span>

webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap

@@ -132,9 +132,7 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot
             }
           }
         />
-        <CopyText
+        <Memo(CopyText)
-          defaultMessage="Copy"
-          idMessage="integrations.copy"
           value="xoxz1z7c3tgi9xhrfudn638q9r"
         />
       </span>

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
+      <Memo(CopyText)
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
         value="jb6oyqh95irpbx8fo9zmndkp1r"
       />
     </p>
@@ -133,9 +131,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
           }
         }
       />
-      <CopyText
+      <Memo(CopyText)
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
         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
+      <Memo(CopyText)
-        defaultMessage="Copy"
-        idMessage="integrations.copy"
         value="jb6oyqh95irpbx8fo9zmndkp1r"
       />
     </p>

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"