Add paste modal

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