Skip to content

Commit

Permalink
fix: alias model names collision with component types
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Shih committed Oct 28, 2022
1 parent 39b3fc3 commit ac84088
Show file tree
Hide file tree
Showing 9 changed files with 385 additions and 25 deletions.
167 changes: 161 additions & 6 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,14 +345,14 @@ exports[`amplify render tests actions with conditional in parameters 1`] = `
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { User } from \\"../models\\";
import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\";

export type ConditionalInMutationProps = React.PropsWithChildren<
Expand Down Expand Up @@ -578,6 +578,39 @@ export default function DataBindingNamedClass(
"
`;

exports[`amplify render tests bindings data supports model with conflicting component type 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Flex as FlexModel } from \\"../models\\";
import {
EscapeHatchProps,
getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export type DataBindingNamedClassProps = React.PropsWithChildren<
Partial<TextProps> & {
class?: FlexModel;
} & {
overrides?: EscapeHatchProps | undefined | null;
}
>;
export default function DataBindingNamedClass(
props: DataBindingNamedClassProps
): React.ReactElement {
const { class: classProp, overrides, ...rest } = props;
return (
/* @ts-ignore: TS2322 */
<Text
children={classProp?.name}
{...rest}
{...getOverrideProps(overrides, \\"DataBindingNamedClass\\")}
></Text>
);
}
"
`;

exports[`amplify render tests collection should not render nested query if the data schema is not provided 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
Expand Down Expand Up @@ -639,13 +672,13 @@ export default function AuthorProfileCollection(
exports[`amplify render tests collection should render collection with data binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User, UserPreferences } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
Expand Down Expand Up @@ -742,14 +775,14 @@ exports[`amplify render tests collection should render collection with data bind
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User, UserPreferences } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection, SortPredicate } from \\"@aws-amplify/datastore\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
Expand Down Expand Up @@ -853,13 +886,13 @@ export default function CollectionOfCustomButtons(
exports[`amplify render tests collection should render collection with data binding if binding name is items 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User, UserPreferences } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { User, UserPreferences } from \\"../models\\";
import {
Button,
Collection,
Expand Down Expand Up @@ -1058,6 +1091,128 @@ export default function ListingCardCollection(
"
`;

exports[`amplify render tests collection should render if model name collides with component types 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
Flex as FlexModel,
FlexModel as FlexModelModel,
Button as ButtonModel,
} from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
getOverrideProps,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection, SortPredicate } from \\"@aws-amplify/datastore\\";
import {
Button,
Collection,
CollectionProps,
Flex,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export type CollectionWithModelNameCollisionsProps = React.PropsWithChildren<
Partial<CollectionProps<any>> & {
backgroundColor?: String;
buttonColor?: FlexModel;
buttonShape?: FlexModelModel;
items?: any[];
overrideItems?: (collectionItem: {
item: any;
index: number;
}) => MyFlexProps;
} & {
overrides?: EscapeHatchProps | undefined | null;
}
>;
export default function CollectionWithModelNameCollisions(
props: CollectionWithModelNameCollisionsProps
): React.ReactElement {
const {
backgroundColor,
buttonColor: buttonColorProp,
buttonShape: buttonShapeProp,
items,
overrideItems,
overrides,
...rest
} = props;
const buttonModelFilterObj = {
and: [
{ field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
{ field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
],
};
const buttonModelFilter =
createDataStorePredicate<ButtonModel>(buttonModelFilterObj);
const buttonModelPagination = {
sort: (s: SortPredicate<ButtonModel>) =>
s.lastName(SortDirection.ASCENDING),
};
const buttonModelDataStore = useDataStoreBinding({
type: \\"collection\\",
model: ButtonModel,
criteria: buttonModelFilter,
pagination: buttonModelPagination,
}).items;
const buttonModel = items !== undefined ? items : buttonModelDataStore;
const buttonColorFilterObj = {
field: \\"userID\\",
operand: \\"user@email.com\\",
operator: \\"eq\\",
};
const buttonColorFilter =
createDataStorePredicate<FlexModel>(buttonColorFilterObj);
const buttonColorDataStore = useDataStoreBinding({
type: \\"collection\\",
model: FlexModel,
criteria: buttonColorFilter,
}).items[0];
const buttonColor =
buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
const buttonShapeFilterObj = {
field: \\"userID\\",
operand: \\"user@email.com\\",
operator: \\"eq\\",
};
const buttonShapeFilter =
createDataStorePredicate<FlexModelModel>(buttonShapeFilterObj);
const buttonShapeDataStore = useDataStoreBinding({
type: \\"collection\\",
model: FlexModelModel,
criteria: buttonShapeFilter,
}).items[0];
const buttonShape =
buttonShapeProp !== undefined ? buttonShapeProp : buttonShapeDataStore;
return (
/* @ts-ignore: TS2322 */
<Collection
type=\\"list\\"
items={buttonModel || []}
{...rest}
{...getOverrideProps(overrides, \\"CollectionWithModelNameCollisions\\")}
>
{(item, index) => (
<Flex
key={item.id}
{...(overrideItems && overrideItems({ item, index }))}
>
<Button
backgroundColor={buttonColor?.favoriteColor}
children={item.lastName}
{...(overrideItems && overrideItems({ item, index }))}
></Button>
</Flex>
)}
</Collection>
);
}
"
`;

exports[`amplify render tests collection should render nested query if model has a hasMany relationship 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
Expand Down Expand Up @@ -5981,6 +6136,7 @@ exports[`amplify render tests mutations supports all initial value binding types
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
EscapeHatchProps,
createDataStorePredicate,
Expand All @@ -5989,7 +6145,6 @@ import {
useDataStoreBinding,
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { User } from \\"../models\\";
import { useEffect } from \\"react\\";
import {
Button,
Expand Down Expand Up @@ -6283,12 +6438,12 @@ exports[`amplify render tests mutations supports invalid statement names for mut
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { Listing } from \\"../models\\";
import {
EscapeHatchProps,
getOverrideProps,
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Listing } from \\"../models\\";
import { Flex, FlexProps, Image, Text } from \\"@aws-amplify/ui-react\\";

export type CardAProps = React.PropsWithChildren<
Expand Down
12 changes: 11 additions & 1 deletion packages/codegen-ui-react/lib/__tests__/imports/import-collection.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
import { ImportCollection } from '../../imports';
import { ImportCollection, ImportSource } from '../../imports';
import { assertASTMatchesSnapshot } from '../__utils__';

function assertImportCollectionMatchesSnapshot(importCollection: ImportCollection) {
Expand Down Expand Up @@ -69,6 +69,16 @@ describe('ImportCollection', () => {
importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');
assertImportCollectionMatchesSnapshot(importCollection);
});
test('model imports colliding with exisiting imports', () => {
const importCollection = new ImportCollection({
componentNameToTypeMap: { TextInput: 'TextField' },
hasAuthBindings: false,
requiredDataModels: [],
stateReferences: [],
});
importCollection.addImport(ImportSource.LOCAL_MODELS, 'TextField');
expect(importCollection.getMappedAlias(ImportSource.LOCAL_MODELS, 'TextField')).toEqual('TextFieldModel');
});
});

test('mergeCollections', () => {
Expand Down
7 changes: 7 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,10 @@ describe('amplify render tests', () => {
const { componentText } = generateWithAmplifyRenderer('authorCollectionComponent');
expect(componentText).toMatchSnapshot();
});
it('should render if model name collides with component types', () => {
const { componentText } = generateWithAmplifyRenderer('collectionWithModelNameCollisions');
expect(componentText).toMatchSnapshot();
});
});

describe('complex examples', () => {
Expand Down Expand Up @@ -594,6 +598,9 @@ describe('amplify render tests', () => {
it('supports bindings with reserved keywords', () => {
expect(generateWithAmplifyRenderer('bindings/data/dataBindingNamedClass').componentText).toMatchSnapshot();
});
it('supports model with conflicting component type', () => {
expect(generateWithAmplifyRenderer('bindings/data/dataBindingNamedFlex').componentText).toMatchSnapshot();
});
});
});
});
Loading

0 comments on commit ac84088

Please sign in to comment.