fix: fields with json type display 'null' (#1051)

Co-authored-by: Joe Buono <joebuono@amazon.com>
aws-amplify · Jul 27, 2023 · 0045ee8 · 0045ee8
1 parent 694d214
commit 0045ee8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -5141,12 +5141,13 @@ export default function MyPostForm(props) {
     setProfile_url(cleanValues.profile_url);
     setPost_url(cleanValues.post_url);
     setMetadata(
-      typeof cleanValues.metadata === \\"string\\"
+      typeof cleanValues.metadata === \\"string\\" || cleanValues.metadata === null
         ? cleanValues.metadata
         : JSON.stringify(cleanValues.metadata)
     );
     setNonModelField(
-      typeof cleanValues.nonModelField === \\"string\\"
+      typeof cleanValues.nonModelField === \\"string\\" ||
+        cleanValues.nonModelField === null
         ? cleanValues.nonModelField
         : JSON.stringify(cleanValues.nonModelField)
     );
@@ -30490,12 +30491,13 @@ export default function MyPostForm(props) {
     setProfile_url(cleanValues.profile_url);
     setPost_url(cleanValues.post_url);
     setMetadata(
-      typeof cleanValues.metadata === \\"string\\"
+      typeof cleanValues.metadata === \\"string\\" || cleanValues.metadata === null
         ? cleanValues.metadata
         : JSON.stringify(cleanValues.metadata)
     );
     setNonModelField(
-      typeof cleanValues.nonModelField === \\"string\\"
+      typeof cleanValues.nonModelField === \\"string\\" ||
+        cleanValues.nonModelField === null
         ? cleanValues.nonModelField
         : JSON.stringify(cleanValues.nonModelField)
     );
@@ -35858,7 +35860,8 @@ export default function InputGalleryUpdateForm(props) {
     setJsonArray(cleanValues.jsonArray ?? []);
     setCurrentJsonArrayValue(\\"\\");
     setJsonField(
-      typeof cleanValues.jsonField === \\"string\\"
+      typeof cleanValues.jsonField === \\"string\\" ||
+        cleanValues.jsonField === null
         ? cleanValues.jsonField
         : JSON.stringify(cleanValues.jsonField)
     );

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
@@ -438,19 +438,29 @@ export const resetStateFunction = (fieldConfigs: Record<string, FieldConfigMetad
 
 /**
  * Datastore allows JSON strings and normal JSON so check for a string
- * before stringifying or else the string will return with escaped quotes
+ * before stringifying or else the string will return with escaped quotes.
+ * Also do not stringify null.
  *
  * Example output:
- * typeof cleanValues.metadata === 'string' ? cleanValues.metadata : JSON.stringify(cleanValues.metadata)
+ * typeof cleanValues.metadata === 'string' || cleanValues.metadata === null ?
+ * cleanValues.metadata : JSON.stringify(cleanValues.metadata)
  */
 const stringifyAWSJSONFieldValue = (
   value: PropertyAccessExpression | ElementAccessExpression,
 ): ConditionalExpression => {
   return factory.createConditionalExpression(
     factory.createBinaryExpression(
-      factory.createTypeOfExpression(value),
-      factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
-      factory.createStringLiteral('string'),
+      factory.createBinaryExpression(
+        factory.createTypeOfExpression(value),
+        factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
+        factory.createStringLiteral('string'),
+      ),
+      factory.createToken(SyntaxKind.BarBarToken),
+      factory.createBinaryExpression(
+        value,
+        factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
+        factory.createNull(),
+      ),
     ),
     factory.createToken(SyntaxKind.QuestionToken),
     value,