1 files changed, 47 insertions, 7 deletions
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>
   );
 }