fix: arrayfield items prop fallback to empty array when record is null

aws-amplify · Oct 11, 2022 · 98159c6 · 98159c6
1 parent cafc15d
commit 98159c6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 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
@@ -2353,7 +2353,7 @@ export default function NestedJson(props) {
     const cleanValues = { ...initialValues, ...initialData };
     setFirstName(cleanValues.firstName);
     setLastName(cleanValues[\\"last-Name\\"]);
-    setLastName1(cleanValues.lastName);
+    setLastName1(cleanValues.lastName ?? []);
     setCurrentLastName1Value(undefined);
     setBio(cleanValues.bio);
     setErrors({});
@@ -4664,7 +4664,7 @@ export default function InputGalleryUpdateForm(props) {
     setAttend(cleanValues.attend);
     setMaybeSlide(cleanValues.maybeSlide);
     setMaybeCheck(cleanValues.maybeCheck);
-    setArrayTypeField(cleanValues.arrayTypeField);
+    setArrayTypeField(cleanValues.arrayTypeField ?? []);
     setCurrentArrayTypeFieldValue(undefined);
     setTimestamp(cleanValues.timestamp);
     setIppy(cleanValues.ippy);

diff --git a/packages/codegen-ui-react/lib/forms/form-state.ts b/packages/codegen-ui-react/lib/forms/form-state.ts
@@ -209,26 +209,34 @@ export const getUseStateHooks = (fieldConfigs: Record<string, FieldConfigMetadat
  * };
  */
 export const resetStateFunction = (fieldConfigs: Record<string, FieldConfigMetadata>, recordName?: string) => {
-  const cleanValues = recordName ? 'cleanValues' : 'initialValues';
+  const recordOrInitialValues = recordName ? 'cleanValues' : 'initialValues';
 
   const stateNames = new Set<string>();
   const expressions = Object.entries(fieldConfigs).reduce<Statement[]>(
     (acc, [name, { isArray, sanitizedFieldName, componentType, dataType }]) => {
       const stateName = name.split('.')[0];
       const renderedName = sanitizedFieldName || stateName;
       if (!stateNames.has(stateName)) {
+        const accessExpression = isValidVariableName(stateName)
+          ? factory.createPropertyAccessExpression(
+              factory.createIdentifier(recordOrInitialValues),
+              factory.createIdentifier(stateName),
+            )
+          : factory.createElementAccessExpression(
+              factory.createIdentifier(recordOrInitialValues),
+              factory.createStringLiteral(stateName),
+            );
+
         acc.push(
           setStateExpression(
             renderedName,
-            isValidVariableName(stateName)
-              ? factory.createPropertyAccessExpression(
-                  factory.createIdentifier(cleanValues),
-                  factory.createIdentifier(stateName),
+            isArray && recordOrInitialValues === 'cleanValues'
+              ? factory.createBinaryExpression(
+                  accessExpression,
+                  factory.createToken(SyntaxKind.QuestionQuestionToken),
+                  factory.createArrayLiteralExpression([], false),
                 )
-              : factory.createElementAccessExpression(
-                  factory.createIdentifier(cleanValues),
-                  factory.createStringLiteral(stateName),
-                ),
+              : accessExpression,
           ),
         );
         if (isArray) {

diff --git a/packages/codegen-ui-react/lib/imports/import-collection.ts b/packages/codegen-ui-react/lib/imports/import-collection.ts
@@ -92,7 +92,7 @@ export class ImportCollection {
             undefined,
             factory.createImportClause(
               false,
-              // use module name as defualt import name
+              // use module name as default import name
               [...imports].indexOf('default') >= 0 ? factory.createIdentifier(path.basename(moduleName)) : undefined,
               factory.createNamedImports(
                 namedImports.map((item) => {