From a032f91f150d35649ebfb70c7463d26d9faf2fa0 Mon Sep 17 00:00:00 2001 From: Justin Shih Date: Wed, 7 Sep 2022 17:01:20 -0700 Subject: [PATCH] fix: add default values for update form --- ...studio-ui-codegen-react-forms.test.ts.snap | 10 +++++++ .../lib/forms/form-renderer-helper.ts | 29 ++++++++++++++++++- .../lib/forms/react-form-renderer.ts | 7 ++++- .../lib/utils/forms/array-field-component.ts | 2 -- .../lib/types/form/form-metadata.ts | 6 ++++ packages/codegen-ui/lib/types/form/index.ts | 6 +--- .../lib/utils/form-component-metadata.ts | 1 + 7 files changed, 52 insertions(+), 9 deletions(-) diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap index c8a1f93b1..234a562e6 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap +++ b/packages/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\\")} > @@ -1122,6 +1128,7 @@ export default function MyPostForm(props) { }} errorMessage={errors.caption?.errorMessage} hasError={errors.caption?.hasError} + defaultValue={caption} {...getOverrideProps(overrides, \\"caption\\")} > @@ -1142,6 +1149,7 @@ export default function MyPostForm(props) { }} errorMessage={errors.username?.errorMessage} hasError={errors.username?.hasError} + defaultValue={username} {...getOverrideProps(overrides, \\"username\\")} > @@ -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\\")} > @@ -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\\")} > diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts index 02dd82c03..444d687c2 100644 --- 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 | 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 index 796c8bfbf..5c96eccfe 100644 --- 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 index defe73128..fa83fbbcd 100644 --- 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 = () => { }; /* { 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 index 2c2885ae8..fa17b031a 100644 --- 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; }; diff --git a/packages/codegen-ui/lib/types/form/index.ts b/packages/codegen-ui/lib/types/form/index.ts index c66cf4cc3..da85c60fc 100644 --- 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 index 5a775c54a..9284933f0 100644 --- 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>((configs, [name, config]) => { const updatedConfigs = configs; const metadata: FieldConfigMetadata = {