Reorganize components name and folders

10 files changed, 50 insertions, 42 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx
index b85ab82ab25..1c37a0729a8 100644
--- a/client/js/app/src/app/pages/querybuilder/index.jsx
+++ b/client/js/app/src/app/pages/querybuilder/index.jsx
@@ -1,40 +1,15 @@
 import React from 'react';
-import QueryInput from './Components/Text/QueryInput';
-import SendQuery from './Components/Text/SendQuery';
-import PasteJSONButton from './Components/Buttons/PasteJSONButton';
-import CopyResponseButton from './Components/Buttons/CopyResponseButton';
-import DownloadJSONButton from './Components/Buttons/DownloadJSONButton';
-import {
-  QueryBuilderProvider,
-  useQueryBuilderContext,
-} from 'app/pages/querybuilder/context/query-builder-provider';
-
-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} />
-      <CopyResponseButton />
-      <DownloadJSONButton response={response}>
-        Download in Jeager format
-      </DownloadJSONButton>
-    </>
-  );
-}
+import { QueryBuilderProvider } from 'app/pages/querybuilder/context/query-builder-provider';
+import { QueryFilters } from 'app/pages/querybuilder/query-filters/query-filters';
+import { QueryDerived } from 'app/pages/querybuilder/query-derived/query-derived';
+import { QueryResponse } from 'app/pages/querybuilder/query-response/query-response';
 
 export function QueryBuilder() {
   return (
     <QueryBuilderProvider>
-      <SendQuery />
-      <QueryInput />
-      <PasteJSONButton />
-      <QueryBox />
-      <ResponseBox />
+      <QueryFilters />
+      <QueryDerived />
+      <QueryResponse />
     </QueryBuilderProvider>
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx b/client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx
new file mode 100644
index 00000000000..00e34a15761
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
+
+export function QueryDerived() {
+  const query = useQueryBuilderContext((ctx) => ctx.query.input);
+  return <textarea readOnly cols="70" rows="15" value={query}></textarea>;
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/PasteJSONButton.jsx
index 0ab4b3d5eb7..15ebe88e2fb 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/PasteJSONButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/PasteJSONButton.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import pasteImage from '../../assets/img/paste.svg';
-import ImageButton from './ImageButton';
+import pasteImage from 'app/pages/querybuilder/assets/img/paste.svg';
+import ImageButton from 'app/pages/querybuilder/Components/Buttons/ImageButton';
 import {
   ACTION,
   dispatch,
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx
index 6ed30632d4f..7c8ee61409f 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/QueryInput.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import SimpleDropDownForm from 'app/pages/querybuilder/Components/Text/SimpleDropDownForm';
+import SimpleDropDownForm from 'app/pages/querybuilder/query-filters/SimpleDropDownForm';
 import {
   ACTION,
   dispatch,
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/SendQuery.jsx
index afdb0b5e386..dcd1411eccc 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/SendQuery.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import SimpleDropDownForm from './SimpleDropDownForm';
+import SimpleDropDownForm from 'app/pages/querybuilder/query-filters/SimpleDropDownForm';
 import {
   ACTION,
   dispatch,
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/SimpleDropDownForm.jsx
index 99342a5ae81..99342a5ae81 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/SimpleDropDownForm.jsx
diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
new file mode 100644
index 00000000000..725c4e4366b
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import SendQuery from 'app/pages/querybuilder/query-filters/SendQuery';
+import QueryInput from 'app/pages/querybuilder/query-filters/QueryInput';
+import PasteJSONButton from 'app/pages/querybuilder/query-filters/PasteJSONButton';
+
+export function QueryFilters() {
+  return (
+    <>
+      <SendQuery />
+      <QueryInput />
+      <PasteJSONButton />
+    </>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx b/client/js/app/src/app/pages/querybuilder/query-response/CopyResponseButton.jsx
index 959ff6f8c21..10520266b86 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-response/CopyResponseButton.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import ImageButton from './ImageButton';
+import ImageButton from 'app/pages/querybuilder/Components/Buttons/ImageButton';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
 import copyImage from 'app/pages/querybuilder/assets/img/copy.svg';
 
diff --git a/client/js/app/src/app/pages/querybuilder/query-response/query-response.jsx b/client/js/app/src/app/pages/querybuilder/query-response/query-response.jsx
new file mode 100644
index 00000000000..ccdb9930a64
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/query-response/query-response.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
+import CopyResponseButton from 'app/pages/querybuilder/query-response/CopyResponseButton';
+import { DownloadJson } from 'app/components';
+
+export function QueryResponse() {
+  const response = useQueryBuilderContext((ctx) => ctx.http.response);
+  return (
+    <>
+      <textarea readOnly cols="70" rows="25" value={response} />
+      <CopyResponseButton />
+      <DownloadJson response={response}>Download in Jeager format</DownloadJson>
+    </>
+  );
+}
diff --git a/client/js/app/src/app/pages/querytracer/query-tracer.jsx b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
index c3212c70c8a..8e3634e268f 100644
--- a/client/js/app/src/app/pages/querytracer/query-tracer.jsx
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import DownloadJSONButton from '../querybuilder/Components/Buttons/DownloadJSONButton';
-import { Container } from 'app/components';
+import { Container, DownloadJson } from 'app/components';
 
 export function QueryTracer() {
   const [response, setResponse] = useState('');
@@ -13,9 +12,7 @@ export function QueryTracer() {
         value={response}
         onChange={({ target }) => setResponse(target.value)}
       ></textarea>
-      <DownloadJSONButton response={response}>
-        Download in Jeager format
-      </DownloadJSONButton>
+      <DownloadJson response={response}>Download in Jeager format</DownloadJson>
     </Container>
   );
 }