Copy response button now copies the response to clipboard

7 files changed, 60 insertions, 27 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
new file mode 100644
index 00000000000..65665d4419a
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx
@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import OverlayImageButton from './OverlayImageButton';
+
+import copyImage from '../../assets/img/copy.svg';
+import { ResponseContext } from '../Contexts/ResponseContext';
+
+export default function CopyResponseButton() {
+  const { response } = useContext(ResponseContext);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(response);
+  };
+
+  return (
+    <OverlayImageButton
+      className="intro-copy"
+      image={copyImage}
+      height="30"
+      width="30"
+      tooltip="Copy"
+      onClick={handleCopy}
+    >
+      Copy
+    </OverlayImageButton>
+  );
+}
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 6c0a7d11c92..8260e0442db 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
@@ -8,6 +8,8 @@ export default function PasteJSONButton() {
     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 = (e) => {
     //alert('Button is non-functional');
     setPaste(true);
@@ -25,7 +27,7 @@ export default function PasteJSONButton() {
   const convertPastedJSON = (pastedData) => {
     try {
       var json = JSON.parse(pastedData);
-      const newInputs = buildFromJSON(json, id + 1);
+      const newInputs = buildFromJSON(json, 3);
       setInputs(newInputs);
     } catch (error) {
       console.log(error);
@@ -63,9 +65,10 @@ export default function PasteJSONButton() {
         newInput['hasChildren'] = false;
         newInput['children'] = [];
       }
-      setId(id + 1);
+      id += 1;
       newInputs.push(newInput);
     }
+    setId(id);
     return newInputs;
   };
 
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index d9a3417752c..00294037bc1 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -2,7 +2,12 @@ import { QueryInputContext } from '../Contexts/QueryInputContext';
 import React, { useCallback, useContext, useState } from 'react';
 import SimpleDropDownForm from './SimpleDropDownForm';
 
-export default function QueryDropdownForm({ choices, id, child = false }) {
+export default function QueryDropdownForm({
+  choices,
+  id,
+  child = false,
+  initial,
+}) {
   const {
     inputs,
     setInputs,
@@ -62,6 +67,7 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
       onChange={updateType}
       choices={choices}
       value={choice}
+      initial={initial}
     ></SimpleDropDownForm>
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index 698df5fcd92..65e32945c55 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -37,7 +37,11 @@ export default function QueryInput() {
   const inputList = inputs.map((value) => {
     return (
       <div key={value.id + value.typeof} id={value.id} className="queryinput">
-        <QueryDropdownForm choices={levelZeroParameters} id={value.id} />
+        <QueryDropdownForm
+          choices={levelZeroParameters}
+          id={value.id}
+          initial={value.type}
+        />
         {value.hasChildren ? (
           <>
             <AddPropertyButton id={value.id} />
@@ -49,6 +53,7 @@ export default function QueryInput() {
             size="30"
             onChange={updateInput}
             placeholder={setPlaceholder(value.id)}
+            initial={value.input}
           />
         )}
         <OverlayTrigger
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
index 0440d6ef1ba..d10935bf4c9 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
@@ -94,10 +94,12 @@ export default function QueryInputChild({ id }) {
   const inputList = childArray.map((child) => {
     return (
       <div key={child.id} id={child.id}>
+        {child.id == '4.1' && console.log(child.type)}
         <QueryDropdownForm
           choices={childMap[currentTypes]}
           id={child.id}
           child={true}
+          inital={child.type}
         />
         {child.hasChildren ? (
           <>
@@ -109,6 +111,7 @@ export default function QueryInputChild({ id }) {
             size="30"
             onChange={updateInput}
             placeholder={setPlaceHolder(child.id)}
+            inital={child.input}
           />
         )}
         <OverlayTrigger
@@ -150,6 +153,7 @@ function Child({ child, type, onChange, placeholder, removeRow }) {
           choices={childMap[type]}
           id={child.id}
           child={true}
+          initial={child.type}
         />
         {child.hasChildren ? (
           <>
@@ -161,6 +165,7 @@ function Child({ child, type, onChange, placeholder, removeRow }) {
             size="30"
             onChange={onChange}
             placeholder={placeholder(child.id)}
+            initial={child.input}
           />
         )}
         <OverlayTrigger
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
index 01288cea44f..40a40e7758b 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -7,6 +7,7 @@ export default function SimpleDropDownForm({
   className = 'input',
   onChange,
   value,
+  initial,
 }) {
   const { selectedItems } = useContext(QueryInputContext);
 
@@ -30,7 +31,12 @@ export default function SimpleDropDownForm({
 
   return (
     <form id={id}>
-      <select className={className} id={id} value={value} onChange={onChange}>
+      <select
+        className={className}
+        id={id}
+        defaultValue={initial}
+        onChange={onChange}
+      >
         {options}
       </select>
     </form>
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 472ec1efe49..ebe8b759fa4 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -1,25 +1,18 @@
-import React, { useContext } from 'react';
-import SimpleButton from './Components/Buttons/SimpleButton';
+import React from 'react';
 import QueryInput from './Components/Text/QueryInput';
 import TextBox from './Components/Text/TextBox';
-import ImageButton from './Components/Buttons/ImageButton';
-import OverlayImageButton from './Components/Buttons/OverlayImageButton';
 import AddQueryInput from './Components/Buttons/AddQueryInputButton';
 import { QueryInputProvider } from './Components/Contexts/QueryInputContext';
 import SendQuery from './Components/Text/SendQuery';
-import {
-  ResponseContext,
-  ResponseProvider,
-} from './Components/Contexts/ResponseContext';
+import { ResponseProvider } from './Components/Contexts/ResponseContext';
 import ResponseBox from './Components/Text/ResponseBox';
 
-import copyImage from './assets/img/copy.svg';
-
 import '../../styles/agency.css';
 import '../../styles/vespa.css';
 import ShowQueryButton from './Components/Buttons/ShowQueryButton';
 import { QueryProvider } from './Components/Contexts/QueryContext';
 import PasteJSONButton from './Components/Buttons/PasteJSONButton';
+import CopyResponseButton from './Components/Buttons/CopyResponseButton';
 
 //import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css
 
@@ -49,19 +42,8 @@ export function QueryBuilder() {
             </QueryProvider>
             <TextBox className="response">Response</TextBox>
             <ResponseBox />
+            <CopyResponseButton />
           </ResponseProvider>
-          <OverlayImageButton
-            className="intro-copy"
-            image={copyImage}
-            height="30"
-            width="30"
-            tooltip="Copy"
-            onClick={() => {
-              alert('Button is non-functional');
-            }}
-          >
-            Copy
-          </OverlayImageButton>
           <br />
           <br />
         </div>