Fix Download Jeager button

4 files changed, 29 insertions, 14 deletions

diff --git a/client/js/app/src/app/components/index.js b/client/js/app/src/app/components/index.js
index 8b89232da47..83ac39bc932 100644
--- a/client/js/app/src/app/components/index.js
+++ b/client/js/app/src/app/components/index.js
@@ -7,4 +7,3 @@ export { Section } from 'app/components/containers/section';
 export { Link } from 'app/components/link/link';
 export { CardLink } from 'app/components/card-link/card-link';
 export { Icon } from 'app/components/icon/icon';
-export { DownloadJson } from 'app/components/download-json/download-json';
diff --git a/client/js/app/src/app/components/download-json/download-json.jsx b/client/js/app/src/app/pages/querybuilder/query-response/download-jeager.jsx
index 4b0726162a0..8c60c5b058c 100644
--- a/client/js/app/src/app/components/download-json/download-json.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-response/download-jeager.jsx
@@ -1,7 +1,9 @@
+import { Button } from '@mantine/core';
 import React from 'react';
+import { Icon } from 'app/components';
 import transform from 'app/pages/querybuilder/TransformVespaTrace';
 
-export function DownloadJson({ children, response }) {
+export function DownloadJeager({ response, ...props }) {
   const handleClick = () => {
     let content;
     try {
@@ -27,5 +29,13 @@ export function DownloadJson({ children, response }) {
     URL.revokeObjectURL(href);
   };
 
-  return <button onClick={handleClick}>{children}</button>;
+  return (
+    <Button
+      {...props}
+      leftIcon={<Icon name="download" />}
+      onClick={handleClick}
+    >
+      Jaeger Format
+    </Button>
+  );
 }
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 867301c3ed0..419d11ada7b 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
@@ -7,6 +7,7 @@ import {
   CopyButton,
   Textarea,
 } from '@mantine/core';
+import { DownloadJeager } from 'app/pages/querybuilder/query-response/download-jeager';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
 import { Icon } from 'app/components';
 
@@ -32,14 +33,12 @@ export function QueryResponse() {
               </Button>
             )}
           </CopyButton>
-          <Button
-            leftIcon={<Icon name="download" />}
+          <DownloadJeager
             variant="outline"
             size="xs"
             compact
-          >
-            Jaeger Format
-          </Button>
+            response={response}
+          />
         </Group>
       </Group>
       <Textarea
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 8e3634e268f..70ac934b291 100644
--- a/client/js/app/src/app/pages/querytracer/query-tracer.jsx
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -1,18 +1,25 @@
 import React, { useState } from 'react';
-import { Container, DownloadJson } from 'app/components';
+import { Textarea } from '@mantine/core';
+import { Container } from 'app/components';
+import { DownloadJeager } from 'app/pages/querybuilder/query-response/download-jeager';
 
 export function QueryTracer() {
   const [response, setResponse] = useState('');
 
   return (
     <Container>
-      <textarea
-        cols="70"
-        rows="25"
+      <Textarea
+        styles={{
+          root: { height: '100%' },
+          wrapper: { height: '100%' },
+          input: { height: '100%' },
+        }}
+        minRows={21}
+        autosize
         value={response}
         onChange={({ target }) => setResponse(target.value)}
-      ></textarea>
-      <DownloadJson response={response}>Download in Jeager format</DownloadJson>
+      ></Textarea>
+      <DownloadJeager fullWidth response={response} />
     </Container>
   );
 }