From 6c6cbb77801b3aaa6dc7147860f8b2a090b4e369 Mon Sep 17 00:00:00 2001 From: charles shin Date: Fri, 28 Apr 2023 05:44:31 -0700 Subject: [PATCH 1/2] fix: update form with storage field should render with existing files --- ...studio-ui-codegen-react-forms.test.ts.snap | 148 +++++++++--------- .../utils/forms/storage-field-component.ts | 67 +++++--- 2 files changed, 120 insertions(+), 95 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 17e9c485..fcb88e9b 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 @@ -25161,41 +25161,43 @@ export default function UpdateProductForm(props) { isRequired={false} isReadOnly={false} > - ({ key }))} - onUploadSuccess={({ key }) => { - setImgKeys((prev) => { - let value = [...prev, key]; - if (onChange) { - const modelFields = { - name, - imgKeys: value, - }; - const result = onChange(modelFields); - value = result?.imgKeys ?? value; - } - return value; - }); - }} - onFileRemove={({ key }) => { - setImgKeys((prev) => { - let value = prev.filter((f) => f !== key); - if (onChange) { - const modelFields = { - name, - imgKeys: value, - }; - const result = onChange(modelFields); - value = result?.imgKeys ?? value; - } - return value; - }); - }} - accessLevel={\\"private\\"} - acceptedFileTypes={[\\".doc\\", \\".pdf\\"]} - isResumable={false} - showThumbnails={true} - > + {productRecord && ( + ({ key }))} + onUploadSuccess={({ key }) => { + setImgKeys((prev) => { + let value = [...prev, key]; + if (onChange) { + const modelFields = { + name, + imgKeys: value, + }; + const result = onChange(modelFields); + value = result?.imgKeys ?? value; + } + return value; + }); + }} + onFileRemove={({ key }) => { + setImgKeys((prev) => { + let value = prev.filter((f) => f !== key); + if (onChange) { + const modelFields = { + name, + imgKeys: value, + }; + const result = onChange(modelFields); + value = result?.imgKeys ?? value; + } + return value; + }); + }} + accessLevel={\\"private\\"} + acceptedFileTypes={[\\".doc\\", \\".pdf\\"]} + isResumable={false} + showThumbnails={true} + > + )} - { - setSingleImgKey((prev) => { - let value = key; - if (onChange) { - const modelFields = { - name, - singleImgKey: value, - }; - const result = onChange(modelFields); - value = result?.singleImgKey ?? value; - } - return value; - }); - }} - onFileRemove={({ key }) => { - setSingleImgKey((prev) => { - let value = initialValues?.singleImgKey; - if (onChange) { - const modelFields = { - name, - singleImgKey: value, - }; - const result = onChange(modelFields); - value = result?.singleImgKey ?? value; - } - return value; - }); - }} - accessLevel={\\"protected\\"} - acceptedFileTypes={[\\".txt\\", \\".pdf\\"]} - isResumable={true} - showThumbnails={false} - maxFileCount={1} - maxSize={1024} - > + {productRecord && ( + { + setSingleImgKey((prev) => { + let value = key; + if (onChange) { + const modelFields = { + name, + singleImgKey: value, + }; + const result = onChange(modelFields); + value = result?.singleImgKey ?? value; + } + return value; + }); + }} + onFileRemove={({ key }) => { + setSingleImgKey((prev) => { + let value = initialValues?.singleImgKey; + if (onChange) { + const modelFields = { + name, + singleImgKey: value, + }; + const result = onChange(modelFields); + value = result?.singleImgKey ?? value; + } + return value; + }); + }} + accessLevel={\\"protected\\"} + acceptedFileTypes={[\\".txt\\", \\".pdf\\"]} + isResumable={true} + showThumbnails={false} + maxFileCount={1} + maxSize={1024} + > + )} (['label', 'isRequired', 'isReadOnly']); +const fieldKeys = new Set([ + 'label', + 'isRequired', + 'isReadOnly', + 'descriptiveText', +]); const storageManagerKeys = new Set([ 'accessLevel', @@ -54,8 +60,11 @@ export const renderStorageFieldComponent = ( fieldConfigs: Record, labelDecorator?: LabelDecorator, isRequired?: boolean, -): JsxElement => { +) => { const { name: componentName } = component; + const dataTypeName = componentMetadata.formMetadata?.dataType.dataTypeName || ''; + const lowerCaseDataTypeName = lowerCaseFirst(dataTypeName); + const lowerCaseDataTypeNameRecord = `${lowerCaseDataTypeName}Record`; const storageManagerComponentName = factory.createIdentifier('StorageManager'); const storageManagerAttributes: JsxAttribute[] = []; const fieldAttributes: JsxAttribute[] = []; @@ -78,7 +87,10 @@ export const renderStorageFieldComponent = ( undefined, factory.createCallExpression( factory.createPropertyAccessExpression( - factory.createIdentifier(componentName), + factory.createPropertyAccessExpression( + factory.createIdentifier(lowerCaseDataTypeNameRecord), + factory.createIdentifier(componentName), + ), factory.createIdentifier('map'), ), undefined, @@ -118,25 +130,22 @@ export const renderStorageFieldComponent = ( ) : factory.createJsxExpression( undefined, - factory.createConditionalExpression( - factory.createIdentifier(componentName), - factory.createToken(SyntaxKind.QuestionToken), - factory.createArrayLiteralExpression( - [ - factory.createObjectLiteralExpression( - [ - factory.createPropertyAssignment( - factory.createIdentifier('key'), + factory.createArrayLiteralExpression( + [ + factory.createObjectLiteralExpression( + [ + factory.createPropertyAssignment( + factory.createIdentifier('key'), + factory.createPropertyAccessExpression( + factory.createIdentifier(lowerCaseDataTypeNameRecord), factory.createIdentifier(componentName), ), - ], - false, - ), - ], - false, - ), - factory.createToken(SyntaxKind.ColonToken), - factory.createIdentifier('undefined'), + ), + ], + false, + ), + ], + false, ), ); @@ -147,6 +156,7 @@ export const renderStorageFieldComponent = ( storageManagerAttributes.push(buildStorageManagerOnChangeStatement(component, fieldConfigs, 'onUploadSuccess')); storageManagerAttributes.push(buildStorageManagerOnChangeStatement(component, fieldConfigs, 'onFileRemove')); + fieldAttributes.push( factory.createJsxAttribute( factory.createIdentifier('errorMessage'), @@ -215,10 +225,21 @@ export const renderStorageFieldComponent = ( factory.createJsxClosingElement(storageManagerComponentName), ); - return renderFieldWrapper(fieldAttributes, storageManager); + const wrappedStorageManagerBlock = factory.createJsxExpression( + undefined, + factory.createBinaryExpression( + factory.createIdentifier(lowerCaseDataTypeNameRecord), + factory.createToken(SyntaxKind.AmpersandAmpersandToken), + factory.createParenthesizedExpression(storageManager), + ), + ); + return renderFieldWrapper( + fieldAttributes, + componentMetadata.formMetadata?.formActionType === 'update' ? wrappedStorageManagerBlock : storageManager, + ); }; -export const renderFieldWrapper = (attributes: JsxAttributeLike[], storageManagerComponent: JsxElement): JsxElement => { +export const renderFieldWrapper = (attributes: JsxAttributeLike[], storageManagerComponent: JsxChild): JsxElement => { const storageManagerComponentName = factory.createIdentifier('Field'); return factory.createJsxElement( From 99f17521c1610b8b155411151eeed8c13375fefc Mon Sep 17 00:00:00 2001 From: charles shin Date: Fri, 28 Apr 2023 05:55:36 -0700 Subject: [PATCH 2/2] chore: adding descriptiveText in StorageField test --- .../__snapshots__/studio-ui-codegen-react-forms.test.ts.snap | 1 + .../forms/product-datastore-update-non-array.json | 1 + 2 files changed, 2 insertions(+) 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 fcb88e9b..6a511aed 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 @@ -25391,6 +25391,7 @@ export default function UpdateProductForm(props) { errorMessage={errors.singleImgKey?.errorMessage} hasError={errors.singleImgKey?.hasError} label={\\"Single Image\\"} + descriptiveText={\\"Limited to One Image\\"} isRequired={false} isReadOnly={false} > diff --git a/packages/codegen-ui/example-schemas/forms/product-datastore-update-non-array.json b/packages/codegen-ui/example-schemas/forms/product-datastore-update-non-array.json index e60ffe63..bd93c291 100644 --- a/packages/codegen-ui/example-schemas/forms/product-datastore-update-non-array.json +++ b/packages/codegen-ui/example-schemas/forms/product-datastore-update-non-array.json @@ -10,6 +10,7 @@ "label": "Single Image", "inputType": { "type": "StorageField", + "descriptiveText": "Limited to One Image", "fileUploaderConfig": { "accessLevel": "protected", "acceptedFileTypes": [".txt", ".pdf"],