Added feedback to CopyResponseButton when clicked

3 files changed, 26 insertions, 13 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx
index de0079a21f9..d01daa7b0d6 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx
@@ -1,24 +1,40 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import OverlayImageButton from './OverlayImageButton';
 
 import copyImage from '../../assets/img/copy.svg';
 import { ResponseContext } from '../Contexts/ResponseContext';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 export default function CopyResponseButton() {
   const { response } = useContext(ResponseContext);
+  const [show, setShow] = useState(false);
 
   const handleCopy = () => {
+    setShow(true);
     navigator.clipboard.writeText(response);
+    setTimeout(() => {
+      setShow(false);
+    }, 2000);
   };
 
   return (
-    <OverlayImageButton
-      className="intro-copy"
-      image={copyImage}
-      height="30"
-      width="30"
-      tooltip="Copy"
-      onClick={handleCopy}
-    />
+    <OverlayTrigger
+      placement="left-end"
+      show={show}
+      overlay={
+        <Tooltip id="copy-tooltip">Response copied to clipboard</Tooltip>
+      }
+    >
+      <span>
+        <OverlayImageButton
+          className="intro-copy"
+          image={copyImage}
+          height="30"
+          width="30"
+          tooltip="Copy"
+          onClick={handleCopy}
+        />
+      </span>
+    </OverlayTrigger>
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx
index 2cb9c7d6e9a..788d88fd0e6 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx
@@ -36,5 +36,3 @@ export default function OverlayImageButton({
     </OverlayTrigger>
   );
 }
-
-//
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
index 73b68b707fb..df380c62fa1 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
@@ -4,14 +4,13 @@ import pasteImage from '../../assets/img/paste.svg';
 import { QueryInputContext } from '../Contexts/QueryInputContext';
 
 export default function PasteJSONButton() {
-  const { inputs, setInputs, id, setId, levelZeroParameters, childMap } =
+  const { setInputs, setId, levelZeroParameters, childMap } =
     useContext(QueryInputContext);
   const [paste, setPaste] = useState(false);
 
   //TODO: fix that the second-level dropdowns do not get set properly when pasting a JSON query
 
   const handleClick = () => {
-    //alert('Button is non-functional');
     setPaste(true);
     window.addEventListener('paste', handlePaste);
   };