feat(ui): Switch from copy-text-to-clipboard to navigator (#45438)

Author: scttcper

jest.config.ts

@@ -203,7 +203,7 @@ if (
  * node_modules, but some packages which use ES6 syntax only NEED to be
  * transformed.
  */
-const ESM_NODE_MODULES = ['copy-text-to-clipboard'];
+const ESM_NODE_MODULES = [];
 
 const config: Config.InitialOptions = {
   verbose: false,
@@ -247,7 +247,11 @@ const config: Config.InitialOptions = {
     '^.+\\.tsx?$': ['babel-jest', babelConfig as any],
     '^.+\\.pegjs?$': '<rootDir>/tests/js/jest-pegjs-transform.js',
   },
-  transformIgnorePatterns: [`/node_modules/(?!${ESM_NODE_MODULES.join('|')})`],
+  transformIgnorePatterns: [
+    ESM_NODE_MODULES.length
+      ? `/node_modules/(?!${ESM_NODE_MODULES.join('|')})`
+      : '/node_modules/',
+  ],
 
   moduleFileExtensions: ['js', 'ts', 'jsx', 'tsx'],
   globals: {},

package.json

@@ -90,7 +90,6 @@
     "classnames": "2.3.1",
     "color": "^4.2.3",
     "compression-webpack-plugin": "10.0.0",
-    "copy-text-to-clipboard": "3.0.1",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.28.0",
     "cronstrue": "^2.23.0",

static/app/components/clipboard.tsx

@@ -1,6 +1,5 @@
 import {cloneElement, isValidElement, useCallback, useEffect, useState} from 'react';
 import {findDOMNode} from 'react-dom';
-import copy from 'copy-text-to-clipboard';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {t} from 'sentry/locale';
@@ -57,21 +56,20 @@ function Clipboard({
   const [element, setElement] = useState<ReturnType<typeof findDOMNode>>();
 
   const handleClick = useCallback(() => {
-    const copyWasSuccessful = copy(value);
-
-    if (!copyWasSuccessful) {
-      if (!hideMessages) {
-        addErrorMessage(errorMessage);
-      }
-      onError?.();
-      return;
-    }
-
-    if (!hideMessages) {
-      addSuccessMessage(successMessage);
-    }
-
-    onSuccess?.();
+    navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        onSuccess?.();
+        if (!hideMessages) {
+          addSuccessMessage(successMessage);
+        }
+      })
+      .catch(() => {
+        onError?.();
+        if (!hideMessages) {
+          addErrorMessage(errorMessage);
+        }
+      });
   }, [value, onError, onSuccess, errorMessage, successMessage, hideMessages]);
 
   useEffect(() => {

static/app/components/codeSnippet.tsx

@@ -5,7 +5,6 @@ import 'prismjs/components/prism-bash.min';
 
 import {useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
-import copy from 'copy-text-to-clipboard';
 
 import {Button} from 'sentry/components/button';
 import {IconCopy} from 'sentry/icons';
@@ -41,13 +40,15 @@ export function CodeSnippet({
   const [tooltipState, setTooltipState] = useState<'copy' | 'copied' | 'error'>('copy');
 
   const handleCopy = () => {
-    const copied = copy(children);
+    navigator.clipboard
+      .writeText(children)
+      .then(() => {
+        setTooltipState('copied');
+      })
+      .catch(() => {
+        setTooltipState('error');
+      });
     onCopy?.(children);
-    if (copied) {
-      setTooltipState('copied');
-    } else {
-      setTooltipState('error');
-    }
   };
 
   const tooltipTitle =

static/app/views/issueDetails/actions/shareModal.tsx

@@ -1,9 +1,8 @@
 import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
-import copy from 'copy-text-to-clipboard';
 
 import {bulkUpdate} from 'sentry/actionCreators/group';
-import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {ModalRenderProps} from 'sentry/actionCreators/modal';
 import AutoSelectText from 'sentry/components/autoSelectText';
 import {Button} from 'sentry/components/button';
@@ -94,6 +93,17 @@ function ShareIssueModal({
 
   const shareUrl = group?.shareId ? getShareUrl() : null;
 
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(shareUrl!)
+      .then(() => {
+        addSuccessMessage(t('Copied to clipboard'));
+      })
+      .catch(() => {
+        addErrorMessage(t('Error copying to clipboard'));
+      });
+  };
+
   return (
     <Fragment>
       <Header closeButton>
@@ -132,7 +142,7 @@ function ShareIssueModal({
                 size="sm"
                 onClick={() => {
                   urlRef.current?.selectText();
-                  copy(shareUrl);
+                  handleCopy();
                 }}
                 icon={<IconCopy />}
                 aria-label={t('Copy to clipboard')}
@@ -155,8 +165,7 @@ function ShareIssueModal({
           <Button
             priority="primary"
             onClick={() => {
-              urlRef.current?.selectText();
-              copy(shareUrl);
+              handleCopy();
               closeModal();
             }}
           >

static/app/views/settings/organizationRelay/modals/form.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import copy from 'copy-text-to-clipboard';
 
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import Textarea from 'sentry/components/forms/controls/textarea';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
 import FieldHelp from 'sentry/components/forms/fieldGroup/fieldHelp';
@@ -48,7 +48,16 @@ const Form = ({
     }
   };
 
-  const onCopy = (value: string) => () => copy(value);
+  const onCopy = (value: string) => () => {
+    navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        addSuccessMessage(t('Copied to clipboard'));
+      })
+      .catch(() => {
+        addErrorMessage(t('Error copying to clipboard'));
+      });
+  };
 
   return (
     <form onSubmit={handleSubmit} id="relay-form">

yarn.lock

@@ -4448,11 +4448,6 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.12.0"
 
-[email protected]:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
-  integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
-
 copy-webpack-plugin@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"