Add copy button to Query
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,6 +16,21 @@ export function QueryDerived() {
<Stack>
<Group position="apart">
<Badge variant="filled">Query</Badge>
+ <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"
@@ -18,6 +40,7 @@ export function QueryDerived() {
Paste JSON
</Button>
</Group>
+ </Group>
<JsonInput
styles={{
root: { height: '100%' },
