diff --git a/jest.config.ts b/jest.config.ts index 324c0e1469262d..8886e8eb8b0f7c 100644 --- a/jest.config.ts +++ b/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?$': '/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: {}, diff --git a/package.json b/package.json index 6894424f69ae04..cb38bb244e86b2 100644 --- a/package.json +++ b/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", diff --git a/static/app/components/clipboard.tsx b/static/app/components/clipboard.tsx index fa5c437be56823..7fb0c30ca828b9 100644 --- a/static/app/components/clipboard.tsx +++ b/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>(); 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(() => { diff --git a/static/app/components/codeSnippet.tsx b/static/app/components/codeSnippet.tsx index e9511a937ef869..6a1d454f9c5aef 100644 --- a/static/app/components/codeSnippet.tsx +++ b/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 = diff --git a/static/app/views/issueDetails/actions/shareModal.tsx b/static/app/views/issueDetails/actions/shareModal.tsx index 0cda813dee8c81..bc271fea6d0d15 100644 --- a/static/app/views/issueDetails/actions/shareModal.tsx +++ b/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 (
@@ -132,7 +142,7 @@ function ShareIssueModal({ size="sm" onClick={() => { urlRef.current?.selectText(); - copy(shareUrl); + handleCopy(); }} icon={} aria-label={t('Copy to clipboard')} @@ -155,8 +165,7 @@ function ShareIssueModal({