fix: add getOverrideProps to StorageManager (#1020)

* fix: add getOverrideProps to StorageManager

* fix: add overrideProps to Field component

* Revert "fix: add overrideProps to Field component"

This reverts commit 6393718.

Author: Charles Shin

packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap

@@ -25021,6 +25021,7 @@ export default function CreateProductForm(props) {
           showThumbnails={false}
           maxFileCount={5}
           maxSize={1024}
+          {...getOverrideProps(overrides, \\"imgKeys\\")}
         ></StorageManager>
       </Field>
       <Flex
@@ -25248,6 +25249,7 @@ export default function UpdateProductForm(props) {
             acceptedFileTypes={[\\".doc\\", \\".pdf\\"]}
             isResumable={false}
             showThumbnails={true}
+            {...getOverrideProps(overrides, \\"imgKeys\\")}
           ></StorageManager>
         )}
       </Field>
@@ -25525,6 +25527,7 @@ export default function UpdateProductForm(props) {
             showThumbnails={false}
             maxFileCount={1}
             maxSize={1024}
+            {...getOverrideProps(overrides, \\"singleImgKey\\")}
           ></StorageManager>
         )}
       </Field>

packages/codegen-ui-react/lib/react-component-renderer.ts

@@ -89,8 +89,8 @@ export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<
       if (this.component.componentType === 'StorageField') {
         this.importCollection.addImport(ImportSource.REACT_STORAGE, 'StorageManager');
         this.importCollection.addImport(ImportSource.UI_REACT_INTERNAL, 'Field');
+        this.importCollection.addImport(ImportSource.UI_REACT_INTERNAL, ImportValue.GET_OVERRIDE_PROPS);
         this.importCollection.addImport(ImportSource.UTILS, 'processFile');
-
         return renderStorageFieldComponent(
           this.component,
           this.componentMetadata,

packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts

@@ -22,16 +22,7 @@ import {
   ComponentMetadata,
   isValidVariableName,
 } from '@aws-amplify/codegen-ui';
-import {
-  factory,
-  JsxAttribute,
-  JsxAttributeLike,
-  JsxChild,
-  JsxElement,
-  JsxExpression,
-  NodeFlags,
-  SyntaxKind,
-} from 'typescript';
+import { factory, JsxAttributeLike, JsxChild, JsxElement, JsxExpression, NodeFlags, 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';
@@ -339,8 +330,8 @@ export const renderStorageFieldComponent = (
   const lowerCaseDataTypeName = lowerCaseFirst(dataTypeName);
   const lowerCaseDataTypeNameRecord = `${lowerCaseDataTypeName}Record`;
   const storageManagerComponentName = factory.createIdentifier('StorageManager');
-  const storageManagerAttributes: JsxAttribute[] = [];
-  const fieldAttributes: JsxAttribute[] = [];
+  const storageManagerAttributes: JsxAttributeLike[] = [];
+  const fieldAttributes: JsxAttributeLike[] = [];
 
   if (componentMetadata.formMetadata) {
     const errorKey =
@@ -494,6 +485,15 @@ export const renderStorageFieldComponent = (
     }
   });
 
+  storageManagerAttributes.push(
+    factory.createJsxSpreadAttribute(
+      factory.createCallExpression(factory.createIdentifier('getOverrideProps'), undefined, [
+        factory.createIdentifier('overrides'),
+        factory.createStringLiteral(componentName),
+      ]),
+    ),
+  );
+
   const storageManager = factory.createJsxElement(
     factory.createJsxOpeningElement(
       storageManagerComponentName,