From 5ce2fe144a3de7c888960fac2e7f9902f37ff344 Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Fri, 27 Sep 2024 16:03:19 -0300
Subject: [PATCH 1/6] build: remove react-clipboard.js and replace by using
 react-copy-to-clipboard package

---
 .../ExpandedStoryHistoryLocation.jsx          | 36 +++++++----------
 .../components/story/StoryCopyIdClipboard.jsx | 13 ++----
 package.json                                  |  2 +-
 .../expanded_story_history_location_spec.js   |  6 +--
 yarn.lock                                     | 40 ++++++++++---------
 5 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx
index 7b305deb7..93a82a7c1 100644
--- a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx
+++ b/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,21 @@ 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')}
-      >
-        <img
-          src="/clippy.svg"
-          alt={I18n.t('story.events.copy_url')}
-          className="clipboard-icon"
-        />
-      </Clipboard>
+      <CopyToClipboard text={I18n.t('story.events.copy_url')}>
+        <a href={storyUrl(story)} className="btn btn-default btn-clipboard">
+          <img
+            src="/clippy.svg"
+            alt={I18n.t('story.events.copy_url')}
+            className="clipboard-icon"
+          />
+        </a>
+      </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={I18n.t('story.events.copy_id')}>
+        <p className="btn btn-default btn-clipboard-id btn-clipboard">
+          ID {`#${story.id.toString()}`}
+        </p>
+      </CopyToClipboard>
 
       {hasHistory(story) && (
         <button
diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
index 7a0178176..02325bb0a 100644
--- a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
+++ b/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>
+  <CopyToClipboard text={I18n.t('story.events.copy_id')}>
+    <p>#{id}</p>
+  </CopyToClipboard>
 );
 
 export default StoryCopyIdClipboard;
diff --git a/package.json b/package.json
index 8c6a866ec..620d57409 100644
--- a/package.json
+++ b/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",
diff --git a/spec/javascripts/components/story/expanded_story/expanded_story_history_location_spec.js b/spec/javascripts/components/story/expanded_story/expanded_story_history_location_spec.js
index bdbf22bcf..123b17d6d 100644
--- a/spec/javascripts/components/story/expanded_story/expanded_story_history_location_spec.js
+++ b/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();
     });
diff --git a/yarn.lock b/yarn.lock
index 35c79a07d..dda0256ab 100644
--- a/yarn.lock
+++ b/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"
+
 react-datepicker@1.0.0:
   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"

From e2d7afec7230512cd1681f70d661cb5644c7033c Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Tue, 8 Oct 2024 09:04:56 -0300
Subject: [PATCH 2/6] chore: follow talysson request changes clipboard texts

---
 .../ExpandedStoryHistoryLocation.jsx             | 16 +++++++---------
 .../components/story/StoryCopyIdClipboard.jsx    |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx
index 93a82a7c1..f634877f2 100644
--- a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx
+++ b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryHistoryLocation.jsx
@@ -17,17 +17,15 @@ const ExpandedStoryHistoryLocation = ({ story, onClone, showHistory }) => (
     />
 
     <span className="input-group-btn">
-      <CopyToClipboard text={I18n.t('story.events.copy_url')}>
-        <a href={storyUrl(story)} className="btn btn-default btn-clipboard">
-          <img
-            src="/clippy.svg"
-            alt={I18n.t('story.events.copy_url')}
-            className="clipboard-icon"
-          />
-        </a>
+      <CopyToClipboard text={storyUrl(story)}>
+        <img
+          src="/clippy.svg"
+          alt={I18n.t('story.events.copy_url')}
+          className="clipboard-icon"
+        />
       </CopyToClipboard>
 
-      <CopyToClipboard text={I18n.t('story.events.copy_id')}>
+      <CopyToClipboard text={`#${story.id}`}>
         <p className="btn btn-default btn-clipboard-id btn-clipboard">
           ID {`#${story.id.toString()}`}
         </p>
diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
index 02325bb0a..e5f704afd 100644
--- a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
+++ b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const StoryCopyIdClipboard = ({ id }) => (
-  <CopyToClipboard text={I18n.t('story.events.copy_id')}>
+  <CopyToClipboard text={id}>
     <p>#{id}</p>
   </CopyToClipboard>
 );

From b3682976eb5fc1dd6722577ddb26eb716658ae58 Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Tue, 8 Oct 2024 09:21:31 -0300
Subject: [PATCH 3/6] test: remove repeat test to check copy clibpoard id

---
 .../components/story/story_copy_id_clipboard_spec.jsx        | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
index a4b43c790..927777360 100644
--- a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
+++ b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
@@ -29,9 +29,4 @@ describe('<StoryCopyIdClipboard />', function () {
       component.container.querySelector('data-clipboard-textt')
     ).toBeDefined();
   });
-
-  it('should render copy id title', function () {
-    render(<StoryCopyIdClipboard id={70} />);
-    expect(fn).toHaveBeenCalledWith('story.events.copy_id');
-  });
 });

From 4124feab34de92aefe7f2106afd6934e9597dd40 Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Tue, 8 Oct 2024 09:22:56 -0300
Subject: [PATCH 4/6] refactor: remove unused mock config

---
 .../components/story/story_copy_id_clipboard_spec.jsx  | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
index 927777360..3e1430548 100644
--- a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
+++ b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
@@ -7,16 +7,6 @@ vi.mock('react-clipboard.js', () => ({
 }));
 
 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();

From dda527592a840ab3772c4ba8fc3c8210cdd7ae60 Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Tue, 8 Oct 2024 09:52:29 -0300
Subject: [PATCH 5/6] chore: add text #id to StoryCopyClipboard component

---
 .../javascripts/components/story/StoryCopyIdClipboard.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
index e5f704afd..cae97d805 100644
--- a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
+++ b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const StoryCopyIdClipboard = ({ id }) => (
-  <CopyToClipboard text={id}>
+  <CopyToClipboard text={`#${id}`}>
     <p>#{id}</p>
   </CopyToClipboard>
 );

From 07bb6618aa3149a34d1baa4087ea894aae783fa3 Mon Sep 17 00:00:00 2001
From: William Spada <williamrspada02@gmail.com>
Date: Fri, 25 Oct 2024 09:33:49 -0300
Subject: [PATCH 6/6] test: add test to check clipboard value when clicks
 StoryCopyIdClipboard

---
 .../components/story/StoryCopyIdClipboard.jsx    |  4 ++--
 .../story/story_copy_id_clipboard_spec.jsx       | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
index cae97d805..e8401b0cb 100644
--- a/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
+++ b/app/assets/javascripts/components/story/StoryCopyIdClipboard.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-const StoryCopyIdClipboard = ({ id }) => (
-  <CopyToClipboard text={`#${id}`}>
+const StoryCopyIdClipboard = ({ id, onCopy }) => (
+  <CopyToClipboard text={`#${id}`} onCopy={onCopy}>
     <p>#{id}</p>
   </CopyToClipboard>
 );
diff --git a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
index 3e1430548..974f29297 100644
--- a/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
+++ b/spec/javascripts/components/story/story_copy_id_clipboard_spec.jsx
@@ -1,6 +1,6 @@
 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>,
@@ -19,4 +19,18 @@ describe('<StoryCopyIdClipboard />', function () {
       component.container.querySelector('data-clipboard-textt')
     ).toBeDefined();
   });
+
+  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);
+  });
 });