Style query-response

3 files changed, 58 insertions, 26 deletions

diff --git a/client/js/app/src/app/components/icon/icon.jsx b/client/js/app/src/app/components/icon/icon.jsx
index f792e7e4302..5a5a5e0dd55 100644
--- a/client/js/app/src/app/components/icon/icon.jsx
+++ b/client/js/app/src/app/components/icon/icon.jsx
@@ -6,6 +6,7 @@ import {
   faArrowsToDot,
   faChartGantt,
   faCircleMinus,
+  faCopy,
   faDownload,
   faPaste,
   faPlus,
@@ -19,7 +20,8 @@ library.add(
   faCircleMinus,
   faPlus,
   faPaste,
-  faDownload
+  faDownload,
+  faCopy
 );
 
 export function Icon({ name, type = 'solid', color, ...rest }) {
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
index 23ec2f23805..1f200d93e36 100644
--- 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
@@ -9,24 +9,14 @@ export function QueryDerived() {
     <Stack>
       <Group position="apart">
         <Badge variant="filled">Query</Badge>
-        <Group spacing="xs">
-          <Button
-            leftIcon={<Icon name="paste" />}
-            variant="outline"
-            size="xs"
-            compact
-          >
-            Paste JSON
-          </Button>
-          <Button
-            leftIcon={<Icon name="download" />}
-            variant="outline"
-            size="xs"
-            compact
-          >
-            Jeager Format
-          </Button>
-        </Group>
+        <Button
+          leftIcon={<Icon name="paste" />}
+          variant="outline"
+          size="xs"
+          compact
+        >
+          Paste JSON
+        </Button>
       </Group>
       <JsonInput
         styles={{
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
index ccdb9930a64..4f076dd5ec4 100644
--- 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
@@ -1,15 +1,55 @@
 import React from 'react';
+import {
+  Badge,
+  Button,
+  Group,
+  JsonInput,
+  Stack,
+  CopyButton,
+} from '@mantine/core';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
-import CopyResponseButton from 'app/pages/querybuilder/query-response/CopyResponseButton';
-import { DownloadJson } from 'app/components';
+import { Icon } 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>
-    </>
+    <Stack>
+      <Group position="apart">
+        <Badge variant="filled">Query reponse</Badge>
+        <Group spacing="xs">
+          <CopyButton value={response}>
+            {({ copied, copy }) => (
+              <Button
+                leftIcon={<Icon name="copy" />}
+                color={copied ? 'teal' : 'blue'}
+                variant="outline"
+                onClick={copy}
+                size="xs"
+                compact
+              >
+                {copied ? 'Copied' : 'Copy'}
+              </Button>
+            )}
+          </CopyButton>
+          <Button
+            leftIcon={<Icon name="download" />}
+            variant="outline"
+            size="xs"
+            compact
+          >
+            Jeager Format
+          </Button>
+        </Group>
+      </Group>
+      <JsonInput
+        styles={{
+          root: { height: '100%' },
+          wrapper: { height: '100%' },
+          input: { height: '100%' },
+        }}
+        value={response}
+        minRows={21}
+      />
+    </Stack>
   );
 }