diff --git a/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts b/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts index 624274a8b..bdf85ec75 100644 --- a/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts +++ b/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts @@ -70,6 +70,24 @@ export const generateWithAmplifyFormRenderer = ( return renderer.renderComponent(); }; +export const generateComponentOnlyWithAmplifyFormRenderer = ( + formJsonFile: string, + dataSchemaJsonFile: string | undefined, + renderConfig: ReactRenderConfig = defaultCLIRenderConfig, +) => { + let dataSchema: GenericDataSchema | undefined; + if (dataSchemaJsonFile) { + const dataStoreSchema = loadSchemaFromJSONFile(dataSchemaJsonFile); + dataSchema = getGenericFromDataStore(dataStoreSchema); + } + const rendererFactory = new StudioTemplateRendererFactory( + (component: StudioForm) => new AmplifyFormRenderer(component, dataSchema, renderConfig), + ); + + const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile(formJsonFile)); + return renderer.renderComponentOnly(); +}; + export const renderWithAmplifyViewRenderer = ( viewJsonFile: string, dataSchemaJsonFile: string | undefined, diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts index fb37d10ca..a2e1aa414 100644 --- a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts +++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts @@ -13,7 +13,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { generateWithAmplifyFormRenderer } from './__utils__'; +import { ImportSource } from '../imports'; +import { generateComponentOnlyWithAmplifyFormRenderer, generateWithAmplifyFormRenderer } from './__utils__'; describe('amplify form renderer tests', () => { describe('datastore form tests', () => { @@ -285,6 +286,20 @@ describe('amplify form renderer tests', () => { expect(declaration).toMatchSnapshot(); }); + it('should use requiredDataModels and importCollection to get model alias', () => { + const { requiredDataModels, importCollection } = generateComponentOnlyWithAmplifyFormRenderer( + 'forms/member-datastore-update-belongs-to', + 'datastore/project-team-model', + ); + + const teamAlias = importCollection.importAlias.get(ImportSource.LOCAL_MODELS)?.get('Team'); + + const includesTeam = requiredDataModels.includes('Team'); + expect(teamAlias).toBe('Team0'); + expect(includesTeam).toBe(true); + expect(importCollection).toBeDefined(); + }); + describe('custom form tests', () => { it('should render a custom backed create form', () => { const { componentText, declaration } = generateWithAmplifyFormRenderer('forms/post-custom-create', undefined); 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 f1f950477..19653ddd9 100644 --- a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts +++ b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts @@ -96,6 +96,15 @@ import { validationResponseType, } from './form-renderer-helper/type-helper'; +type RenderComponentOnlyResponse = { + compText: string; + /** + * @deprecated Use {@link RenderComponentOnlyResponse.importCollection} instead. + */ + importsText: string; + requiredDataModels: string[]; + importCollection: ImportCollection; +}; export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer< string, StudioForm, @@ -151,7 +160,7 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer< } @handleCodegenErrors - renderComponentOnly() { + renderComponentOnly(): RenderComponentOnlyResponse { const variableStatements = this.buildVariableStatements(); const jsx = this.renderJsx(this.formComponent); @@ -176,7 +185,12 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer< // do not produce declaration becuase it is not used const { componentText: compText } = transpile(result, { ...this.renderConfig, renderTypeDeclarations: false }); - return { compText, importsText, requiredDataModels: this.requiredDataModels }; + return { + compText, + importsText, + requiredDataModels: this.requiredDataModels, + importCollection: this.importCollection, + }; } renderComponentInternal() { @@ -558,9 +572,10 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer< this.shouldRenderArrayField = usesArrayField; - this.requiredDataModels.push(...modelsToImport); - - modelsToImport.forEach((model) => this.importCollection.addImport(ImportSource.LOCAL_MODELS, model)); + modelsToImport.forEach((model) => { + this.requiredDataModels.push(model); + this.importCollection.addImport(ImportSource.LOCAL_MODELS, model); + }); // datastore relationship query /**