Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: alias form model names so we do not get naming collisions #771

Merged
merged 2 commits into from
Nov 18, 2022
Merged

fix: alias form model names so we do not get naming collisions #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28e7c78
fix: alias form model names so we do not get naming collisions
lyonsbp Nov 17, 2022
e6fdc1a
chore: update snapshots and fix model import
lyonsbp Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 56 additions & 56 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3445,7 +3445,7 @@ exports[`amplify form renderer tests datastore form tests should generate a crea
"/* eslint-disable */
import * as React from \\"react\\";
import { fetchByPath, validateField } from \\"./utils\\";
import { Member, Team } from \\"../models\\";
import { Member, Team as Team0 } from \\"../models\\";
import {
getOverrideProps,
useDataStoreBinding,
Expand Down Expand Up @@ -3622,32 +3622,32 @@ export default function MyMemberForm(props) {
} = props;
const initialValues = {
name: undefined,
team: undefined,
Team: undefined,
};
const [name, setName] = React.useState(initialValues.name);
const [team, setTeam] = React.useState(initialValues.team);
const [Team, setTeam] = React.useState(initialValues.Team);
const [errors, setErrors] = React.useState({});
const resetStateValues = () => {
setName(initialValues.name);
setTeam(initialValues.team);
setTeam(initialValues.Team);
setCurrentTeamValue(undefined);
setCurrentTeamDisplayValue(\\"\\");
setErrors({});
};
const [currentTeamDisplayValue, setCurrentTeamDisplayValue] =
React.useState(\\"\\");
const [currentTeamValue, setCurrentTeamValue] = React.useState(undefined);
const teamRef = React.createRef();
const TeamRef = React.createRef();
const teamRecords = useDataStoreBinding({
type: \\"collection\\",
model: Team,
model: Team0,
}).items;
const getDisplayValue = {
team: (record) => record?.name,
Team: (record) => record?.name,
};
const validations = {
name: [],
team: [],
Team: [],
};
const runValidationTasks = async (
fieldName,
Expand Down Expand Up @@ -3675,7 +3675,7 @@ export default function MyMemberForm(props) {
event.preventDefault();
let modelFields = {
name,
team,
Team,
};
const validationResponses = await Promise.all(
Object.keys(validations).reduce((promises, fieldName) => {
Expand Down Expand Up @@ -3761,7 +3761,7 @@ export default function MyMemberForm(props) {
if (onChange) {
const modelFields = {
name: value,
team,
Team,
};
const result = onChange(modelFields);
value = result?.name ?? value;
Expand All @@ -3783,22 +3783,22 @@ export default function MyMemberForm(props) {
if (onChange) {
const modelFields = {
name,
team: value,
Team: value,
};
const result = onChange(modelFields);
value = result?.team ?? value;
value = result?.Team ?? value;
}
setTeam(value);
setCurrentTeamValue(undefined);
setCurrentTeamDisplayValue(\\"\\");
}}
currentFieldValue={currentTeamValue}
label={\\"Team Label\\"}
items={team ? [team] : []}
hasError={errors.team?.hasError}
getBadgeText={getDisplayValue.team}
items={Team ? [Team] : []}
hasError={errors.Team?.hasError}
getBadgeText={getDisplayValue.Team}
setFieldValue={setCurrentTeamDisplayValue}
inputFieldRef={teamRef}
inputFieldRef={TeamRef}
defaultFieldValue={\\"\\"}
>
<Autocomplete
Expand All @@ -3808,7 +3808,7 @@ export default function MyMemberForm(props) {
value={currentTeamDisplayValue}
options={teamRecords.map((r) => ({
id: r.id,
label: getDisplayValue.team?.(r) ?? r.id,
label: getDisplayValue.Team?.(r) ?? r.id,
}))}
onSelect={({ id, label }) => {
setCurrentTeamValue(teamRecords.find((r) => r.id === id));
Expand All @@ -3819,17 +3819,17 @@ export default function MyMemberForm(props) {
}}
onChange={(e) => {
let { value } = e.target;
if (errors.team?.hasError) {
runValidationTasks(\\"team\\", value);
if (errors.Team?.hasError) {
runValidationTasks(\\"Team\\", value);
}
setCurrentTeamDisplayValue(value);
setCurrentTeamValue(undefined);
}}
onBlur={() => runValidationTasks(\\"team\\", team)}
errorMessage={errors.team?.errorMessage}
hasError={errors.team?.hasError}
ref={teamRef}
{...getOverrideProps(overrides, \\"team\\")}
onBlur={() => runValidationTasks(\\"Team\\", Team)}
errorMessage={errors.Team?.errorMessage}
hasError={errors.Team?.hasError}
ref={TeamRef}
{...getOverrideProps(overrides, \\"Team\\")}
></Autocomplete>
</ArrayField>
</Grid>
Expand All @@ -3840,7 +3840,7 @@ export default function MyMemberForm(props) {

exports[`amplify form renderer tests datastore form tests should generate a create form with belongsTo relationship 2`] = `
"import * as React from \\"react\\";
import { Team } from \\"../models\\";
import { Team as Team0 } from \\"../models\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { AutocompleteProps, GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
Expand All @@ -3850,17 +3850,17 @@ export declare type ValidationResponse = {
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type MyMemberFormInputValues = {
name?: string;
team?: Team;
Team?: Team0;
};
export declare type MyMemberFormValidationValues = {
name?: ValidationFunction<string>;
team?: ValidationFunction<Team>;
Team?: ValidationFunction<Team0>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type MyMemberFormOverridesProps = {
MyMemberFormGrid?: FormProps<GridProps>;
name?: FormProps<TextFieldProps>;
team?: FormProps<AutocompleteProps>;
Team?: FormProps<AutocompleteProps>;
} & EscapeHatchProps;
export declare type MyMemberFormProps = React.PropsWithChildren<{
overrides?: MyMemberFormOverridesProps | undefined | null;
Expand Down Expand Up @@ -9575,7 +9575,7 @@ exports[`amplify form renderer tests datastore form tests should use proper fiel
"/* eslint-disable */
import * as React from \\"react\\";
import { fetchByPath, validateField } from \\"./utils\\";
import { Member, Team } from \\"../models\\";
import { Member, Team as Team0 } from \\"../models\\";
import {
getOverrideProps,
useDataStoreBinding,
Expand Down Expand Up @@ -9752,32 +9752,32 @@ export default function MyMemberForm(props) {
} = props;
const initialValues = {
name: undefined,
team: undefined,
Team: undefined,
};
const [name, setName] = React.useState(initialValues.name);
const [team, setTeam] = React.useState(initialValues.team);
const [Team, setTeam] = React.useState(initialValues.Team);
const [errors, setErrors] = React.useState({});
const resetStateValues = () => {
setName(initialValues.name);
setTeam(initialValues.team);
setTeam(initialValues.Team);
setCurrentTeamValue(undefined);
setCurrentTeamDisplayValue(\\"\\");
setErrors({});
};
const [currentTeamDisplayValue, setCurrentTeamDisplayValue] =
React.useState(\\"\\");
const [currentTeamValue, setCurrentTeamValue] = React.useState(undefined);
const teamRef = React.createRef();
const TeamRef = React.createRef();
const teamRecords = useDataStoreBinding({
type: \\"collection\\",
model: Team,
model: Team0,
}).items;
const getDisplayValue = {
team: (record) => record?.name,
Team: (record) => record?.name,
};
const validations = {
name: [],
team: [],
Team: [],
};
const runValidationTasks = async (
fieldName,
Expand Down Expand Up @@ -9805,7 +9805,7 @@ export default function MyMemberForm(props) {
event.preventDefault();
let modelFields = {
name,
team,
Team,
};
const validationResponses = await Promise.all(
Object.keys(validations).reduce((promises, fieldName) => {
Expand Down Expand Up @@ -9891,7 +9891,7 @@ export default function MyMemberForm(props) {
if (onChange) {
const modelFields = {
name: value,
team,
Team,
};
const result = onChange(modelFields);
value = result?.name ?? value;
Expand All @@ -9913,22 +9913,22 @@ export default function MyMemberForm(props) {
if (onChange) {
const modelFields = {
name,
team: value,
Team: value,
};
const result = onChange(modelFields);
value = result?.team ?? value;
value = result?.Team ?? value;
}
setTeam(value);
setCurrentTeamValue(undefined);
setCurrentTeamDisplayValue(\\"\\");
}}
currentFieldValue={currentTeamValue}
label={\\"Team Label\\"}
items={team ? [team] : []}
hasError={errors.team?.hasError}
getBadgeText={getDisplayValue.team}
items={Team ? [Team] : []}
hasError={errors.Team?.hasError}
getBadgeText={getDisplayValue.Team}
setFieldValue={setCurrentTeamDisplayValue}
inputFieldRef={teamRef}
inputFieldRef={TeamRef}
defaultFieldValue={\\"\\"}
>
<Autocomplete
Expand All @@ -9938,7 +9938,7 @@ export default function MyMemberForm(props) {
value={currentTeamDisplayValue}
options={teamRecords.map((r) => ({
id: r.id,
label: getDisplayValue.team?.(r) ?? r.id,
label: getDisplayValue.Team?.(r) ?? r.id,
}))}
onSelect={({ id, label }) => {
setCurrentTeamValue(teamRecords.find((r) => r.id === id));
Expand All @@ -9949,17 +9949,17 @@ export default function MyMemberForm(props) {
}}
onChange={(e) => {
let { value } = e.target;
if (errors.team?.hasError) {
runValidationTasks(\\"team\\", value);
if (errors.Team?.hasError) {
runValidationTasks(\\"Team\\", value);
}
setCurrentTeamDisplayValue(value);
setCurrentTeamValue(undefined);
}}
onBlur={() => runValidationTasks(\\"team\\", team)}
errorMessage={errors.team?.errorMessage}
hasError={errors.team?.hasError}
ref={teamRef}
{...getOverrideProps(overrides, \\"team\\")}
onBlur={() => runValidationTasks(\\"Team\\", Team)}
errorMessage={errors.Team?.errorMessage}
hasError={errors.Team?.hasError}
ref={TeamRef}
{...getOverrideProps(overrides, \\"Team\\")}
></Autocomplete>
</ArrayField>
</Grid>
Expand All @@ -9970,7 +9970,7 @@ export default function MyMemberForm(props) {

exports[`amplify form renderer tests datastore form tests should use proper field overrides for belongsTo relationship 2`] = `
"import * as React from \\"react\\";
import { Team } from \\"../models\\";
import { Team as Team0 } from \\"../models\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { AutocompleteProps, GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
Expand All @@ -9980,17 +9980,17 @@ export declare type ValidationResponse = {
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type MyMemberFormInputValues = {
name?: string;
team?: Team;
Team?: Team0;
};
export declare type MyMemberFormValidationValues = {
name?: ValidationFunction<string>;
team?: ValidationFunction<Team>;
Team?: ValidationFunction<Team0>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type MyMemberFormOverridesProps = {
MyMemberFormGrid?: FormProps<GridProps>;
name?: FormProps<TextFieldProps>;
team?: FormProps<AutocompleteProps>;
Team?: FormProps<AutocompleteProps>;
} & EscapeHatchProps;
export declare type MyMemberFormProps = React.PropsWithChildren<{
overrides?: MyMemberFormOverridesProps | undefined | null;
Expand Down
4 changes: 2 additions & 2 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('amplify form renderer tests', () => {
'datastore/project-team-model',
);
// check nested model is imported
expect(componentText).toContain('import { Member, Team } from "../models";');
expect(componentText).toContain('import { Member, Team as Team0 } from "../models";');

// check binding call is generated
expect(componentText).toContain('const teamRecords = useDataStoreBinding({');
Expand All @@ -81,7 +81,7 @@ describe('amplify form renderer tests', () => {
// Check that custom field label is working as expected
expect(componentText).toContain('Team Label');
// Check that Autocomplete custom display value is set
expect(componentText).toContain('team: (record) => record?.name');
expect(componentText).toContain('Team: (record) => record?.name');

expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
Expand Down
11 changes: 9 additions & 2 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,20 @@ import { factory, NodeFlags, SyntaxKind } from 'typescript';
import { FieldConfigMetadata, GenericDataRelationshipType, HasManyRelationshipType } from '@aws-amplify/codegen-ui';
import { getRecordsName } from './form-state';
import { buildBaseCollectionVariableStatement } from '../../react-studio-template-renderer-helper';
import { ImportCollection, ImportSource } from '../../imports';

export const buildRelationshipQuery = (relationship: GenericDataRelationshipType) => {
export const buildRelationshipQuery = (
relationship: GenericDataRelationshipType,
importCollection: ImportCollection,
) => {
const { relatedModelName } = relationship;
const itemsName = getRecordsName(relatedModelName);
const objectProperties = [
factory.createPropertyAssignment(factory.createIdentifier('type'), factory.createStringLiteral('collection')),
factory.createPropertyAssignment(factory.createIdentifier('model'), factory.createIdentifier(relatedModelName)),
factory.createPropertyAssignment(
factory.createIdentifier('model'),
factory.createIdentifier(importCollection.getMappedAlias(ImportSource.LOCAL_MODELS, relatedModelName)),
),
];
return buildBaseCollectionVariableStatement(
itemsName,
Expand Down
4 changes: 2 additions & 2 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/type-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ const getTypeNode = ({ componentType, dataType, isArray, isValidation, importCol

if (dataType && typeof dataType === 'object' && 'model' in dataType) {
const modelName = dataType.model;
importCollection?.addImport(ImportSource.LOCAL_MODELS, modelName);
typeNode = factory.createTypeReferenceNode(factory.createIdentifier(modelName));
const aliasedModel = importCollection?.addImport(ImportSource.LOCAL_MODELS, modelName);
typeNode = factory.createTypeReferenceNode(factory.createIdentifier(aliasedModel || modelName));
}

if (isValidation) {
Expand Down
Loading