Style query-derived

2 files changed, 48 insertions, 2 deletions

diff --git a/client/js/app/src/app/components/icon/icon.jsx b/client/js/app/src/app/components/icon/icon.jsx
index 12e5489eb2c..f792e7e4302 100644
--- a/client/js/app/src/app/components/icon/icon.jsx
+++ b/client/js/app/src/app/components/icon/icon.jsx
@@ -6,12 +6,21 @@ import {
   faArrowsToDot,
   faChartGantt,
   faCircleMinus,
+  faDownload,
+  faPaste,
   faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 
 // TODO: use dynamic import
 
-library.add(faArrowsToDot, faChartGantt, faCircleMinus, faPlus);
+library.add(
+  faArrowsToDot,
+  faChartGantt,
+  faCircleMinus,
+  faPlus,
+  faPaste,
+  faDownload
+);
 
 export function Icon({ name, type = 'solid', color, ...rest }) {
   const icon = `fa-${type} fa-${name}`;
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 00e34a15761..23ec2f23805 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
@@ -1,7 +1,44 @@
 import React from 'react';
+import { Badge, Group, JsonInput, Stack, Button } from '@mantine/core';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
+import { Icon } from 'app/components';
 
 export function QueryDerived() {
   const query = useQueryBuilderContext((ctx) => ctx.query.input);
-  return <textarea readOnly cols="70" rows="15" value={query}></textarea>;
+  return (
+    <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>
+      </Group>
+      <JsonInput
+        styles={{
+          root: { height: '100%' },
+          wrapper: { height: '100%' },
+          input: { height: '100%' },
+        }}
+        value={query}
+        validationError="Invalid json"
+        minRows={21}
+        formatOnBlur
+      />
+    </Stack>
+  );
 }