diff options
| author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-12 10:45:42 +0200 |
|---|---|---|
| committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
| commit | 545b21ce3de1c50aac0d3c4f2b47b3f38e38e1d0 (patch) | |
| tree | cd5d42f33d49876cec1a13f81967754925ead62e /client/js/app | |
| parent | f53fc3d73b9b8d5bd20b4a81b83f4ac02e7826ad (diff) | |
Add copy button to Query
Diffstat (limited to 'client/js/app')
| -rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx | 41 |
1 files changed, 32 insertions, 9 deletions
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 b252886ae0c..2543b26ade1 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,5 +1,12 @@ import React from 'react'; -import { Badge, Group, JsonInput, Stack, Button } from '@mantine/core'; +import { + Badge, + Group, + JsonInput, + Stack, + Button, + CopyButton, +} from '@mantine/core'; import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider'; import { Icon } from 'app/components'; @@ -9,14 +16,30 @@ export function QueryDerived() { <Stack> <Group position="apart"> <Badge variant="filled">Query</Badge> - <Button - leftIcon={<Icon name="paste" />} - variant="outline" - size="xs" - compact - > - Paste JSON - </Button> + <Group spacing="xs"> + <CopyButton value={query}> + {({ copied, copy }) => ( + <Button + leftIcon={<Icon name={copied ? 'check' : 'copy'} />} + color={copied ? 'teal' : 'blue'} + variant="outline" + onClick={copy} + size="xs" + compact + > + Copy + </Button> + )} + </CopyButton> + <Button + leftIcon={<Icon name="paste" />} + variant="outline" + size="xs" + compact + > + Paste JSON + </Button> + </Group> </Group> <JsonInput styles={{ |