fix: change key name and remove ref

Author: Hein Jeong

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

@@ -24820,7 +24820,6 @@ export default function CreateProductForm(props) {
   };
   const [name, setName] = React.useState(initialValues.name);
   const [imgKeys, setImgKeys] = React.useState(initialValues.imgKeys);
-  const imgKeysRef = React.useRef([]);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
     setName(initialValues.name);
@@ -24937,9 +24936,8 @@ export default function CreateProductForm(props) {
         isReadOnly={false}
       >
         <StorageManager
-          ref={imgKeysRef}
           onUploadSuccess={(files) => {
-            let value = files.map(({ s3Key }) => s3Key);
+            let value = files.map(({ key }) => key);
             if (onChange) {
               const modelFields = {
                 name,
@@ -25020,7 +25018,6 @@ export default function UpdateProductForm(props) {
   };
   const [name, setName] = React.useState(initialValues.name);
   const [imgKeys, setImgKeys] = React.useState(initialValues.imgKeys);
-  const imgKeysRef = React.useRef([]);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
     const cleanValues = productRecord
@@ -25152,10 +25149,9 @@ export default function UpdateProductForm(props) {
         isReadOnly={false}
       >
         <StorageManager
-          ref={imgKeysRef}
-          defaultFiles={imgKeys.map((s3Key) => ({ s3Key }))}
+          defaultFiles={imgKeys.map((key) => ({ key }))}
           onUploadSuccess={(files) => {
-            let value = files.map(({ s3Key }) => s3Key);
+            let value = files.map(({ key }) => key);
             if (onChange) {
               const modelFields = {
                 name,
@@ -25240,7 +25236,6 @@ export default function UpdateProductForm(props) {
   const [singleImgKey, setSingleImgKey] = React.useState(
     initialValues.singleImgKey
   );
-  const singleImgKeyRef = React.useRef([]);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
     const cleanValues = productRecord
@@ -25372,10 +25367,9 @@ export default function UpdateProductForm(props) {
         isReadOnly={false}
       >
         <StorageManager
-          ref={singleImgKeyRef}
-          defaultFiles={[{ s3Key: singleImgKey }]}
+          defaultFiles={[{ key: singleImgKey }]}
           onUploadSuccess={(files) => {
-            let value = files?.[0]?.s3Key;
+            let value = files?.[0]?.key;
             if (onChange) {
               const modelFields = {
                 name,

packages/codegen-ui-react/lib/forms/form-renderer-helper/event-targets.ts

@@ -15,6 +15,7 @@
  */
 import { DataFieldDataType } from '@aws-amplify/codegen-ui';
 import { factory, NodeFlags, Expression, SyntaxKind, Identifier } from 'typescript';
+import { STORAGE_FILE_KEY } from '../../utils/constants';
 
 /*
 Builds the event target variable. Example:
@@ -44,8 +45,8 @@ const expressionMap = {
   ),
 };
 
-// array:     files.map(({ s3Key }) => s3Key)
-// non-array: files?.[0]?.s3Key;
+// array:     files.map(({ key }) => key)
+// non-array: files?.[0]?.key;
 export function extractKeyByMapping(array: string, key: string, isArray?: boolean) {
   if (isArray) {
     return factory.createCallExpression(
@@ -82,7 +83,7 @@ export function extractKeyByMapping(array: string, key: string, isArray?: boolea
       factory.createNumericLiteral('0'),
     ),
     factory.createToken(SyntaxKind.QuestionDotToken),
-    factory.createIdentifier('s3Key'),
+    factory.createIdentifier(STORAGE_FILE_KEY),
   );
 }
 
@@ -126,7 +127,7 @@ export const buildTargetVariable = (
       identifier: expressionMap.value,
     },
     StorageField: {
-      expression: extractKeyByMapping('files', 's3Key', isArray),
+      expression: extractKeyByMapping('files', STORAGE_FILE_KEY, isArray),
       identifier: expressionMap.value,
     },
   };

packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts

@@ -46,7 +46,6 @@ import {
   getSetNameIdentifier,
   buildUseStateExpression,
   getControlledComponentDefaultValue,
-  buildUseRefExpression,
 } from '../../helpers';
 import { getElementAccessExpression } from './invalid-variable-helpers';
 import { shouldWrapInArrayField } from './render-checkers';
@@ -261,21 +260,6 @@ export const getUseStateHooks = (fieldConfigs: Record<string, FieldConfigMetadat
   }, []);
 };
 
-/**
- * iterates field configs to create useRef hooks for fields that need refs.
- * @param fieldConfigs
- * @returns
- */
-export const getUseRefHooks = (fieldConfigs: Record<string, FieldConfigMetadata>): Statement[] => {
-  return Object.entries(fieldConfigs)
-    .filter(([, { componentType }]) => {
-      return componentType === 'StorageField';
-    })
-    .map(([name]) => {
-      return buildUseRefExpression(`${name}Ref`, factory.createArrayLiteralExpression([], false));
-    });
-};
-
 /**
  * function used by the Clear/ Reset button
  * it's a reset type but we also need to clear the state of the input fields as well

packages/codegen-ui-react/lib/forms/react-form-renderer.ts

@@ -91,7 +91,6 @@ import {
   getUseStateHooks,
   resetStateFunction,
   getCanUnlinkModelName,
-  getUseRefHooks,
 } from './form-renderer-helper/form-state';
 import { shouldWrapInArrayField } from './form-renderer-helper/render-checkers';
 import {
@@ -463,8 +462,6 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
 
     statements.push(...getUseStateHooks(formMetadata.fieldConfigs));
 
-    statements.push(...getUseRefHooks(formMetadata.fieldConfigs));
-
     statements.push(buildUseStateExpression('errors', factory.createObjectLiteralExpression()));
 
     let defaultValueVariableName: undefined | string;

packages/codegen-ui-react/lib/utils/constants.ts

@@ -14,3 +14,5 @@
   limitations under the License.
  */
 export const COMPOSITE_PRIMARY_KEY_PROP_NAME = 'id';
+
+export const STORAGE_FILE_KEY = 'key';

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

@@ -26,6 +26,7 @@ import { factory, JsxAttribute, JsxAttributeLike, JsxElement, JsxExpression, Syn
 import { getDecoratedLabel } from '../../forms/form-renderer-helper';
 import { buildOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props';
 import { propertyToExpression } from '../../react-component-render-helper';
+import { STORAGE_FILE_KEY } from '../constants';
 
 const fieldKeys = new Set<keyof FormDefinitionStorageFieldElement['props']>(['label', 'isRequired', 'isReadOnly']);
 
@@ -59,13 +60,6 @@ export const renderStorageFieldComponent = (
   const storageManagerAttributes: JsxAttribute[] = [];
   const fieldAttributes: JsxAttribute[] = [];
 
-  storageManagerAttributes.push(
-    factory.createJsxAttribute(
-      factory.createIdentifier('ref'),
-      factory.createJsxExpression(undefined, factory.createIdentifier(`${component.name}Ref`)),
-    ),
-  );
-
   if (componentMetadata.formMetadata) {
     const errorKey =
       componentName.split('.').length > 1 || !isValidVariableName(componentName)
@@ -98,7 +92,7 @@ export const renderStorageFieldComponent = (
                         undefined,
                         undefined,
                         undefined,
-                        factory.createIdentifier('s3Key'),
+                        factory.createIdentifier(STORAGE_FILE_KEY),
                         undefined,
                         undefined,
                         undefined,
@@ -108,7 +102,12 @@ export const renderStorageFieldComponent = (
                     factory.createToken(SyntaxKind.EqualsGreaterThanToken),
                     factory.createParenthesizedExpression(
                       factory.createObjectLiteralExpression(
-                        [factory.createShorthandPropertyAssignment(factory.createIdentifier('s3Key'), undefined)],
+                        [
+                          factory.createShorthandPropertyAssignment(
+                            factory.createIdentifier(STORAGE_FILE_KEY),
+                            undefined,
+                          ),
+                        ],
                         false,
                       ),
                     ),
@@ -124,7 +123,7 @@ export const renderStorageFieldComponent = (
                 factory.createObjectLiteralExpression(
                   [
                     factory.createPropertyAssignment(
-                      factory.createIdentifier('s3Key'),
+                      factory.createIdentifier(STORAGE_FILE_KEY),
                       factory.createIdentifier('singleImgKey'),
                     ),
                   ],