diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-12 11:24:17 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
commit | 108c59ec4ac18af1ff412ade9aabe1e376b44aee (patch) | |
tree | 995655dae04514c974d40ca7082f2a8a20052e72 /client | |
parent | 545b21ce3de1c50aac0d3c4f2b47b3f38e38e1d0 (diff) |
Add paste modal
Diffstat (limited to 'client')
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-derived/paste-modal.jsx | 48 | ||||
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-derived/query-derived.jsx | 10 |
2 files changed, 50 insertions, 8 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/query-derived/paste-modal.jsx b/client/js/app/src/app/pages/querybuilder/query-derived/paste-modal.jsx new file mode 100644 index 00000000000..9b68bd23e1c --- /dev/null +++ b/client/js/app/src/app/pages/querybuilder/query-derived/paste-modal.jsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { Modal, Button, JsonInput, Stack } from '@mantine/core'; +import { Icon } from 'app/components'; + +export function PasteModal() { + const [opened, setOpened] = useState(false); + return ( + <> + <Modal + opened={opened} + onClose={() => setOpened(false)} + title="Vespa Query" + overlayColor="white" + shadow="1px 3px 10px 2px rgb(0 0 0 / 20%)" + padding="xl" + size="xl" + centered + > + <Stack> + <JsonInput + placeholder="Your Vespa query JSON" + validationError="Invalid JSON or Vespa invalid query" + minRows={34} + formatOnBlur + autosize + /> + <Button + leftIcon={<Icon name="paste" />} + onClick={() => { + console.log('paste and close'); + }} + > + Paste + </Button> + </Stack> + </Modal> + <Button + onClick={() => setOpened(true)} + leftIcon={<Icon name="paste" />} + variant="outline" + size="xs" + compact + > + Paste JSON + </Button> + </> + ); +} 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 2543b26ade1..8739b4b32c3 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,6 +9,7 @@ import { } from '@mantine/core'; import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider'; import { Icon } from 'app/components'; +import { PasteModal } from 'app/pages/querybuilder/query-derived/paste-modal'; export function QueryDerived() { const query = useQueryBuilderContext((ctx) => ctx.query.input); @@ -31,14 +32,7 @@ export function QueryDerived() { </Button> )} </CopyButton> - <Button - leftIcon={<Icon name="paste" />} - variant="outline" - size="xs" - compact - > - Paste JSON - </Button> + <PasteModal /> </Group> </Group> <JsonInput |