Remove Show query button

3 files changed, 15 insertions, 48 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx
deleted file mode 100644
index f1f1fb0c4b1..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ShowQueryButton.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-import { useQueryBuilderContext } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
-
-export default function ShowQueryButton() {
-  const [showQuery, setShowQuery] = useState(false);
-  const query = useQueryBuilderContext((ctx) => ctx.query.input);
-
-  return (
-    <>
-      <button
-        className="showJSON"
-        onClick={() => setShowQuery((prev) => !prev)}
-      >
-        Show query JSON
-      </button>
-      {showQuery && (
-        <textarea
-          className="responsebox"
-          readOnly
-          cols="70"
-          rows="15"
-          value={query}
-        ></textarea>
-      )}
-    </>
-  );
-}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx
deleted file mode 100644
index 22a945a12c0..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useQueryBuilderContext } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
-
-export default function ResponseBox() {
-  const response = useQueryBuilderContext((ctx) => ctx.http.response);
-
-  return (
-    <textarea
-      id="responsetext"
-      className="responsebox"
-      readOnly
-      cols="70"
-      rows="25"
-      value={response}
-    />
-  );
-}
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 69d5cb08d40..c0da870823e 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -1,16 +1,27 @@
 import React from 'react';
 import QueryInput from './Components/Text/QueryInput';
 import SendQuery from './Components/Text/SendQuery';
-import ResponseBox from './Components/Text/ResponseBox';
-import ShowQueryButton from './Components/Buttons/ShowQueryButton';
 import PasteJSONButton from './Components/Buttons/PasteJSONButton';
 import CopyResponseButton from './Components/Buttons/CopyResponseButton';
 import DownloadJSONButton from './Components/Buttons/DownloadJSONButton';
-import { QueryBuilderProvider } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
+import {
+  QueryBuilderProvider,
+  useQueryBuilderContext,
+} from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
 
 import '../../styles/agency.css';
 import '../../styles/vespa.css';
 
+function QueryBox() {
+  const query = useQueryBuilderContext((ctx) => ctx.query.input);
+  return <textarea readOnly cols="70" rows="15" value={query}></textarea>;
+}
+
+function ResponseBox() {
+  const response = useQueryBuilderContext((ctx) => ctx.http.response);
+  return <textarea readOnly cols="70" rows="25" value={response} />;
+}
+
 export function QueryBuilder() {
   return (
     <header>
@@ -27,7 +38,7 @@ export function QueryBuilder() {
           </div>
           <br />
           <PasteJSONButton />
-          <ShowQueryButton />
+          <QueryBox />
           <p className="response">Response</p>
           <ResponseBox />
           <CopyResponseButton />