Remove react-clipboard.js and replace by using react-copy-to-clipboard package

app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Clipboard from 'react-clipboard.js';
 import { storyUrl } from '../StoryUrl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import {
   editingStoryPropTypesShape,
   hasHistory,
@@ -17,27 +17,19 @@ const ExpandedStoryHistoryLocation = ({ story, onClone, showHistory }) => (
     />
 
     <span className="input-group-btn">
-      <Clipboard
-        data-clipboard-text={storyUrl(story)}
-        component="button"
-        className="btn btn-default btn-clipboard"
-        button-title={I18n.t('story.events.copy_url')}
-      >
+      <CopyToClipboard text={storyUrl(story)}>
         <img
           src="/clippy.svg"
           alt={I18n.t('story.events.copy_url')}
           className="clipboard-icon"
         />
-      </Clipboard>
+      </CopyToClipboard>
 
-      <Clipboard
-        data-clipboard-text={`#${story.id.toString()}`}
-        component="button"
-        className="btn btn-default btn-clipboard-id btn-clipboard"
-        button-title={I18n.t('story.events.copy_id')}
-      >
-        ID
-      </Clipboard>
+      <CopyToClipboard text={`#${story.id}`}>
+        <p className="btn btn-default btn-clipboard-id btn-clipboard">
+          ID {`#${story.id.toString()}`}
+        </p>
+      </CopyToClipboard>
 
       {hasHistory(story) && (
         <button

app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import Clipboard from 'react-clipboard.js';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-const StoryCopyIdClipboard = ({ id }) => (
-  <Clipboard
-    data-clipboard-text={`#${id}`}
-    component="button"
-    className="story-id"
-    title={I18n.t('story.events.copy_id')}
-  >
-    #{id}
-  </Clipboard>
+const StoryCopyIdClipboard = ({ id, onCopy }) => (
+  <CopyToClipboard text={`#${id}`} onCopy={onCopy}>
+    <p>#{id}</p>
+  </CopyToClipboard>
 );
 
 export default StoryCopyIdClipboard;

package.json

@@ -55,8 +55,8 @@
     "raf": "^3.4.1",
     "react": "^16.12.0",
     "react-beautiful-dnd": "^12.0.0",
-    "react-clipboard.js": "^2.0.16",
     "react-color": "^2.17.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "1.0.0",
     "react-dom": "^16.12.0",
     "react-dropzone": "^10.2.1",

spec/javascripts/components/story/expanded_story/expanded_story_history_location_spec.js

@@ -66,10 +66,8 @@ describe('<ExpandedStoryHistoryLocation />', () => {
         story: storyFactory({ id: 42, _editing: storyFactory() }),
       };
 
-      const { container } = renderComponent(props);
-      const copyIdButton = container.querySelector(
-        `[data-clipboard-text="#42"]`
-      );
+      const { getByText, debug } = renderComponent(props);
+      const copyIdButton = getByText('ID #42');
 
       expect(copyIdButton).toBeInTheDocument();
     });

spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx

@@ -1,22 +1,12 @@
 import React from 'react';
 import StoryCopyIdClipboard from 'components/story/StoryCopyIdClipboard';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 vi.mock('react-clipboard.js', () => ({
   default: ({ children, ...props }) => <button {...props}>{children}</button>,
 }));
 
 describe('<StoryCopyIdClipboard />', function () {
-  let fn;
-
-  beforeEach(function () {
-    fn = vi.spyOn(I18n, 't');
-  });
-
-  afterEach(function () {
-    fn.mockRestore();
-  });
-
   it('should render story id text', function () {
     const component = render(<StoryCopyIdClipboard id={70} />);
     expect(component.getByText('#70')).toBeInTheDocument();
@@ -30,8 +20,17 @@ describe('<StoryCopyIdClipboard />', function () {
     ).toBeDefined();
   });
 
-  it('should render copy id title', function () {
-    render(<StoryCopyIdClipboard id={70} />);
-    expect(fn).toHaveBeenCalledWith('story.events.copy_id');
+  it('should copy correct id', async () => {
+    const onCopy = vi.fn();
+
+    const { container } = render(
+      <StoryCopyIdClipboard id={70} onCopy={onCopy} />
+    );
+
+    const paragraph = container.querySelector('p');
+
+    fireEvent.click(paragraph);
+
+    expect(onCopy).toHaveBeenCalledWith('#70', false);
   });
 });

yarn.lock

@@ -2071,13 +2071,6 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/clipboard@^2.0.1":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/clipboard/-/clipboard-2.0.7.tgz#db578ceec578947be2d603b003667ebdd5f274e1"
-  integrity sha512-VwVFUHlneOsWfv/GaaY7Kwk4XasDqkAlyFQtsHxnOw0yyBYWTrlEXtmb9RtC+VFBCdtuOeIXECmELNd5RrKp/g==
-  dependencies:
-    clipboard "*"
-
 "@types/cookie@^0.6.0":
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
@@ -3251,7 +3244,7 @@ cli-width@^4.1.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
   integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
 
-clipboard@*, clipboard@^2.0.0, clipboard@^2.0.4:
+clipboard@^2.0.4:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
   integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
@@ -3407,6 +3400,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.21.0, core-js-compat@^3.22.1:
   version "3.23.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.2.tgz#5cbf8a9c8812d665392845b85ae91b5bcc7b615c"
@@ -7666,7 +7666,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7763,15 +7763,6 @@ react-beautiful-dnd@^12.0.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-clipboard.js@^2.0.16:
-  version "2.0.16"
-  resolved "https://registry.yarnpkg.com/react-clipboard.js/-/react-clipboard.js-2.0.16.tgz#45a60684dd6a36ff97e40c53069a27e97a4b6c9c"
-  integrity sha512-COwmnbrRbl8y4f/SjtonnJTeBRD03YzsHBL5on8iL/uyjERsMkKC7djtfmns7iRAbzadn/84MdpaqaQ3ITP47g==
-  dependencies:
-    "@types/clipboard" "^2.0.1"
-    clipboard "^2.0.0"
-    prop-types "^15.5.0"
-
 react-color@^2.17.3:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
@@ -7785,6 +7776,14 @@ react-color@^2.17.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-copy-to-clipboard@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
+  integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+    prop-types "^15.8.1"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-1.0.0.tgz#982f9a75c445bda0c86c7067faab509dad7a6253"
@@ -9064,6 +9063,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 tough-cookie@^4.1.4:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"