aws-amplify · Jshhhh · Sep 8, 2022 · Sep 8, 2022
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
@@ -980,6 +980,11 @@ export default function MyPostForm(props) {
     const queryData = async () => {
       const record = id ? await DataStore.query(Post, id) : post;
       setPostRecord(record);
+      setTextAreaFieldbbd63464(record.TextAreaFieldbbd63464);
+      setCaption(record.caption);
+      setUsername(record.username);
+      setProfile_url(record.profile_url);
+      setPost_url(record.post_url);
     };
     queryData();
   }, [id, post]);
@@ -1102,6 +1107,7 @@ export default function MyPostForm(props) {
             }}
             errorMessage={errors.TextAreaFieldbbd63464?.errorMessage}
             hasError={errors.TextAreaFieldbbd63464?.hasError}
+            defaultValue={TextAreaFieldbbd63464}
             {...getOverrideProps(overrides, \\"TextAreaFieldbbd63464\\")}
           ></TextAreaField>
         </Grid>
@@ -1122,6 +1128,7 @@ export default function MyPostForm(props) {
             }}
             errorMessage={errors.caption?.errorMessage}
             hasError={errors.caption?.hasError}
+            defaultValue={caption}
             {...getOverrideProps(overrides, \\"caption\\")}
           ></TextField>
         </Grid>
@@ -1142,6 +1149,7 @@ export default function MyPostForm(props) {
             }}
             errorMessage={errors.username?.errorMessage}
             hasError={errors.username?.hasError}
+            defaultValue={username}
             {...getOverrideProps(overrides, \\"username\\")}
           ></TextField>
         </Grid>
@@ -1162,6 +1170,7 @@ export default function MyPostForm(props) {
             }}
             errorMessage={errors.profile_url?.errorMessage}
             hasError={errors.profile_url?.hasError}
+            defaultValue={profile_url}
             {...getOverrideProps(overrides, \\"profile_url\\")}
           ></TextField>
         </Grid>
@@ -1182,6 +1191,7 @@ export default function MyPostForm(props) {
             }}
             errorMessage={errors.post_url?.errorMessage}
             hasError={errors.post_url?.hasError}
+            defaultValue={post_url}
             {...getOverrideProps(overrides, \\"post_url\\")}
           ></TextField>
         </Grid>

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
@@ -316,6 +316,14 @@ export const addFormAttributes = (component: StudioComponent | StudioComponentCh
         ),
       ),
     );
+    if (formMetadata.formActionType === 'update') {
+      attributes.push(
+        factory.createJsxAttribute(
+          factory.createIdentifier('defaultValue'),
+          factory.createJsxExpression(undefined, factory.createIdentifier(component.name)),
+        ),
+      );
+    }
     if (fieldConfig.isArray) {
       attributes.push(
         factory.createJsxAttribute(
@@ -1081,7 +1089,10 @@ export const onSubmitValidationRun = [
   ),
 ];
 
-export const buildUpdateDatastoreQuery = (dataTypeName: string) => {
+export const buildUpdateDatastoreQuery = (
+  dataTypeName: string,
+  fieldConfigs: Record<string, FieldConfigMetadata> | undefined,
+) => {
   return [
     factory.createVariableStatement(
       undefined,
@@ -1133,6 +1144,22 @@ export const buildUpdateDatastoreQuery = (dataTypeName: string) => {
                       factory.createIdentifier('record'),
                     ]),
                   ),
+                  ...(fieldConfigs
+                    ? Object.keys(fieldConfigs).map((field) =>
+                        factory.createExpressionStatement(
+                          factory.createCallExpression(
+                            factory.createIdentifier(`set${capitalizeFirstLetter(field)}`),
+                            undefined,
+                            [
+                              factory.createPropertyAccessExpression(
+                                factory.createIdentifier('record'),
+                                factory.createIdentifier(field),
+                              ),
+                            ],
+                          ),
+                        ),
+                      )
+                    : []),
                 ],
                 true,
               ),

diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
@@ -383,7 +383,12 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
         statements.push(
           buildUseStateExpression(`${lowerCaseDataTypeName}Record`, factory.createIdentifier(lowerCaseDataTypeName)),
         );
-        statements.push(addUseEffectWrapper(buildUpdateDatastoreQuery(dataTypeName), ['id', lowerCaseDataTypeName]));
+        statements.push(
+          addUseEffectWrapper(
+            buildUpdateDatastoreQuery(dataTypeName, this.componentMetadata.formMetadata?.fieldConfigs),
+            ['id', lowerCaseDataTypeName],
+          ),
+        );
       }
     }
 

diff --git a/packages/codegen-ui-react/lib/utils/forms/array-field-component.ts b/packages/codegen-ui-react/lib/utils/forms/array-field-component.ts
@@ -782,7 +782,6 @@ export const generateArrayFieldComponent = () => {
 };
 /*
   <ArrayField
-    label="Breeds"
     onChange = { async(items) => {
       setModelFields({ ...modelFields, breeds: items });
       setCurrentBreedsValue('');
@@ -802,7 +801,6 @@ export const renderArrayFieldComponent = (fieldName: string, label: string, inpu
       factory.createIdentifier('ArrayField'),
       undefined,
       factory.createJsxAttributes([
-        factory.createJsxAttribute(factory.createIdentifier('label'), factory.createStringLiteral(label)),
         factory.createJsxAttribute(
           factory.createIdentifier('onChange'),
           factory.createJsxExpression(

diff --git a/packages/codegen-ui/lib/types/form/form-metadata.ts b/packages/codegen-ui/lib/types/form/form-metadata.ts
@@ -16,6 +16,11 @@
 import { DataFieldDataType } from '../data';
 import { FieldValidationConfiguration } from './form-validation';
 
+/**
+ * Form Action type definition
+ */
+export type StudioFormActionType = 'create' | 'update';
+
 export type FieldConfigMetadata = {
   // ex. name field has a string validation type where the rule is char length > 5
   validationRules: FieldValidationConfiguration[];
@@ -27,6 +32,7 @@ export type FieldConfigMetadata = {
 
 export type FormMetadata = {
   id?: string;
+  formActionType: StudioFormActionType;
   name: string;
   fieldConfigs: Record<string, FieldConfigMetadata>;
 };
diff --git a/packages/codegen-ui/lib/types/form/index.ts b/packages/codegen-ui/lib/types/form/index.ts
@@ -21,7 +21,7 @@ import { FormDefinition, ModelFieldsConfigs, FieldTypeMapKeys, ButtonConfig } fr
 import { StudioFieldInputConfig, StudioFormValueMappings } from './input-config';
 import { StudioFieldPosition } from './position';
 import { StudioFormCTA } from './form-cta';
-import { FormMetadata, FieldConfigMetadata } from './form-metadata';
+import { FormMetadata, FieldConfigMetadata, StudioFormActionType } from './form-metadata';
 
 export type StudioDataSourceType = 'DataStore' | 'Custom';
 
@@ -33,10 +33,6 @@ export type StudioFormDataType = {
 
   dataTypeName: string;
 };
-/**
- * Form Action type definition
- */
-type StudioFormActionType = 'create' | 'update';
 
 /**
  * This is the base type for all StudioForms

diff --git a/packages/codegen-ui/lib/utils/form-component-metadata.ts b/packages/codegen-ui/lib/utils/form-component-metadata.ts
@@ -37,6 +37,7 @@ export const mapFormMetadata = (form: StudioForm, formDefinition: FormDefinition
   return {
     id: form.id,
     name: form.name,
+    formActionType: form.formActionType,
     fieldConfigs: inputElementEntries.reduce<Record<string, FieldConfigMetadata>>((configs, [name, config]) => {
       const updatedConfigs = configs;
       const metadata: FieldConfigMetadata = {