fix: update form with storage field should render with existing files (…

…#993) * fix: update form with storage field should render with existing files * chore: adding descriptiveText in StorageField test
aws-amplify · May 1, 2023 · ba85dbb · ba85dbb
1 parent 41637ce
commit ba85dbb
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 95 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
@@ -25211,41 +25211,43 @@ export default function UpdateProductForm(props) {
         isRequired={false}
         isReadOnly={false}
       >
-        <StorageManager
-          defaultFiles={imgKeys.map((key) => ({ 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}
-        ></StorageManager>
+        {productRecord && (
+          <StorageManager
+            defaultFiles={productRecord.imgKeys.map((key) => ({ 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}
+          ></StorageManager>
+        )}
       </Field>
       <Flex
         justifyContent=\\"space-between\\"
@@ -25439,46 +25441,49 @@ 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}
       >
-        <StorageManager
-          defaultFiles={singleImgKey ? [{ key: singleImgKey }] : undefined}
-          onUploadSuccess={({ key }) => {
-            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}
-        ></StorageManager>
+        {productRecord && (
+          <StorageManager
+            defaultFiles={[{ key: productRecord.singleImgKey }]}
+            onUploadSuccess={({ key }) => {
+              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}
+          ></StorageManager>
+        )}
       </Field>
       <Flex
         justifyContent=\\"space-between\\"

diff --git a/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts b/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts
@@ -22,13 +22,19 @@ import {
   ComponentMetadata,
   isValidVariableName,
 } from '@aws-amplify/codegen-ui';
-import { factory, JsxAttribute, JsxAttributeLike, JsxElement, JsxExpression, SyntaxKind } from 'typescript';
+import { factory, JsxAttribute, JsxAttributeLike, JsxChild, JsxElement, JsxExpression, SyntaxKind } from 'typescript';
 import { getDecoratedLabel } from '../../forms/form-renderer-helper';
 import { buildStorageManagerOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props';
 import { propertyToExpression } from '../../react-component-render-helper';
 import { STORAGE_FILE_KEY } from '../constants';
+import { lowerCaseFirst } from '../../helpers';
 
-const fieldKeys = new Set<keyof FormDefinitionStorageFieldElement['props']>(['label', 'isRequired', 'isReadOnly']);
+const fieldKeys = new Set<keyof FormDefinitionStorageFieldElement['props']>([
+  'label',
+  'isRequired',
+  'isReadOnly',
+  'descriptiveText',
+]);
 
 const storageManagerKeys = new Set<keyof FormDefinitionStorageFieldElement['props']>([
   'accessLevel',
@@ -54,8 +60,11 @@ export const renderStorageFieldComponent = (
   fieldConfigs: Record<string, FieldConfigMetadata>,
   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(

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
@@ -10,6 +10,7 @@
         "label": "Single Image",
         "inputType": {
           "type": "StorageField",
+          "descriptiveText": "Limited to One Image",
           "fileUploaderConfig": {
             "accessLevel": "protected",
             "acceptedFileTypes": [".txt", ".pdf"],