From 8eaf05efefd39bce82fdaf71c2d626dcc8a0feb3 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Thu, 15 Dec 2022 21:10:56 -0500
Subject: [PATCH] chore: json field now edits string but saves json in db

---
 .../forms/field-types/JSON/JSON.tsx           | 21 +++++++++++++++----
 src/fields/config/types.ts                    |  2 +-
 .../schema/fieldToWhereInputSchemaMap.ts      | 12 +++++++++++
 yarn.lock                                     | 20 ++++++++++++++++++
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/admin/components/forms/field-types/JSON/JSON.tsx b/src/admin/components/forms/field-types/JSON/JSON.tsx
index c3ddac3933..9b546515af 100644
--- a/src/admin/components/forms/field-types/JSON/JSON.tsx
+++ b/src/admin/components/forms/field-types/JSON/JSON.tsx
@@ -1,5 +1,4 @@
-
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Editor from '@monaco-editor/react';
 import useField from '../../useField';
@@ -9,6 +8,7 @@ import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
 import { json } from '../../../../../fields/validations';
 import { Props } from './types';
+import useThrottledEffect from '../../../../hooks/useThrottledEffect';
 
 import './index.scss';
 
@@ -39,6 +39,7 @@ const JSONField: React.FC<Props> = (props) => {
 
   const {
     value,
+    initialValue,
     showError,
     setValue,
     errorMessage,
@@ -48,6 +49,16 @@ const JSONField: React.FC<Props> = (props) => {
     condition,
   });
 
+  const [stringValue, setStringValue] = useState<string>();
+
+  useThrottledEffect(() => {
+    setValue(JSON.parse(stringValue));
+  }, 200, [setValue, stringValue]);
+
+  useEffect(() => {
+    setStringValue(JSON.stringify(initialValue, null, 2));
+  }, [initialValue]);
+
   const classes = [
     baseClass,
     'field-type',
@@ -76,9 +87,11 @@ const JSONField: React.FC<Props> = (props) => {
       <Editor
         height="50vh"
         defaultLanguage="json"
-        value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
-        onChange={readOnly ? () => null : (val) => setValue(val)}
+        value={stringValue}
+        onChange={readOnly ? () => null : (val) => setStringValue(val)}
         options={{
+          tabSize: 2,
+          detectIndentation: true,
           minimap: {
             enabled: false,
           },
diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts
index ed9c59f39a..16d2595a69 100644
--- a/src/fields/config/types.ts
+++ b/src/fields/config/types.ts
@@ -475,7 +475,7 @@ export type FieldWithMaxDepth =
   | RelationshipField
 
 export function fieldHasSubFields(field: Field): field is FieldWithSubFields {
-  return (field.type === 'group' || field.type === 'array' || field.type === 'row' || field.type === 'collapsible' || field.type === 'relationship');
+  return (field.type === 'group' || field.type === 'array' || field.type === 'row' || field.type === 'collapsible');
 }
 
 export function fieldIsArrayType(field: Field): field is ArrayField {
diff --git a/src/graphql/schema/fieldToWhereInputSchemaMap.ts b/src/graphql/schema/fieldToWhereInputSchemaMap.ts
index bcc29752c8..0399d01336 100644
--- a/src/graphql/schema/fieldToWhereInputSchemaMap.ts
+++ b/src/graphql/schema/fieldToWhereInputSchemaMap.ts
@@ -13,6 +13,7 @@ import {
   CheckboxField,
   CodeField, CollapsibleField, DateField,
   EmailField, fieldAffectsData, fieldHasSubFields, GroupField,
+  JSONField,
   NumberField, optionIsObject, PointField,
   RadioField, RelationshipField,
   RichTextField, RowField, SelectField,
@@ -82,6 +83,17 @@ const fieldToSchemaMap: (parentName: string) => any = (parentName: string) => ({
       ),
     };
   },
+  json: (field: JSONField) => {
+    const type = GraphQLJSON;
+    return {
+      type: withOperators(
+        field,
+        type,
+        parentName,
+        [...operators.equality, ...operators.partial],
+      ),
+    };
+  },
   code: (field: CodeField) => {
     const type = GraphQLString;
     return {
diff --git a/yarn.lock b/yarn.lock
index f99b37a89b..e37faf29c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1640,6 +1640,21 @@
   resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
   integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
 
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
+  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218"
+  integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==
+  dependencies:
+    "@monaco-editor/loader" "^1.3.2"
+    prop-types "^15.7.2"
+
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -11990,6 +12005,11 @@ start-server-and-test@^1.14.0:
     ps-tree "1.2.0"
     wait-on "6.0.0"
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"