Make sure response is readonly

2 files changed, 10 insertions, 10 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 8739b4b32c3..4810f265a4d 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
@@ -2,10 +2,10 @@ import React from 'react';
 import {
   Badge,
   Group,
-  JsonInput,
   Stack,
   Button,
   CopyButton,
+  Textarea,
 } from '@mantine/core';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
 import { Icon } from 'app/components';
@@ -13,6 +13,7 @@ import { PasteModal } from 'app/pages/querybuilder/query-derived/paste-modal';
 
 export function QueryDerived() {
   const query = useQueryBuilderContext((ctx) => ctx.query.input);
+
   return (
     <Stack>
       <Group position="apart">
@@ -35,17 +36,15 @@ export function QueryDerived() {
           <PasteModal />
         </Group>
       </Group>
-      <JsonInput
+      <Textarea
         styles={{
           root: { height: '100%' },
           wrapper: { height: '100%' },
           input: { height: '100%' },
         }}
         value={query}
-        validationError="Invalid json"
-        variant={'unstyled'}
+        variant="unstyled"
         minRows={21}
-        formatOnBlur
         autosize
       />
     </Stack>
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 6f101cc511b..867301c3ed0 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
@@ -3,19 +3,20 @@ import {
   Badge,
   Button,
   Group,
-  JsonInput,
   Stack,
   CopyButton,
+  Textarea,
 } from '@mantine/core';
 import { useQueryBuilderContext } from 'app/pages/querybuilder/context/query-builder-provider';
 import { Icon } from 'app/components';
 
 export function QueryResponse() {
   const response = useQueryBuilderContext((ctx) => ctx.http.response);
+
   return (
     <Stack>
       <Group position="apart">
-        <Badge variant="filled">Query reponse</Badge>
+        <Badge variant="filled">Query response</Badge>
         <Group spacing="xs">
           <CopyButton value={response}>
             {({ copied, copy }) => (
@@ -41,14 +42,14 @@ export function QueryResponse() {
           </Button>
         </Group>
       </Group>
-      <JsonInput
+      <Textarea
         styles={{
           root: { height: '100%' },
           wrapper: { height: '100%' },
           input: { height: '100%' },
         }}
-        value={response}
-        variant={'unstyled'}
+        value={response ?? ''}
+        variant="unstyled"
         minRows={21}
         autosize
       />