diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-11 21:50:59 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
commit | 9dfcc90b8d6c3746accb3e4346810e453d3a0985 (patch) | |
tree | 5f7ff4e154e87ae6bdee48e33e2dfdeca6e356d1 | |
parent | a09dcd0273fcb4ec93332ebd849cb0f513b7ba3d (diff) |
Style query-derived
-rw-r--r-- | client/js/app/src/app/components/icon/icon.jsx | 11 | ||||
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx | 39 |
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> + ); } |