diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-11 22:06:02 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
commit | 3eb4e679cf4f0e44c7255f3790a6396351ade1cc (patch) | |
tree | f71f841c4bb64836705c934ebdb1a77e9c4e9472 /client/js/app/src | |
parent | 9dfcc90b8d6c3746accb3e4346810e453d3a0985 (diff) |
Style query-response
Diffstat (limited to 'client/js/app/src')
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> ); } |