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: store selected relationship data for scalar fields #1077

Merged
merged 1 commit into from
Aug 17, 2023
Merged

fix: store selected relationship data for scalar fields #1077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1,746 changes: 1,585 additions & 161 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 24 additions & 0 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 @@ -1184,6 +1184,30 @@ describe('amplify form renderer tests', () => {
expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});

it('should render an update form with child field', () => {
const { componentText, declaration } = generateWithAmplifyFormRenderer(
'models/custom-key-model/forms/ChildItemUpdateForm',
'models/custom-key-model/schema',
{ ...defaultCLIRenderConfig, ...rendererConfigWithGraphQL },
{ isNonModelSupported: true, isRelationshipSupported: true },
);

expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});

it('should render an update form with id field instead of belongsTo', () => {
const { componentText, declaration } = generateWithAmplifyFormRenderer(
'models/comment-with-postID/forms/PostUpdateForm',
'models/comment-with-postID/schema',
{ ...defaultCLIRenderConfig, ...rendererConfigWithGraphQL },
{ isNonModelSupported: true, isRelationshipSupported: true },
);

expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});
});

describe('NoApi form tests', () => {
Expand Down
16 changes: 14 additions & 2 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
isValidVariableName,
isNonModelDataType,
StudioForm,
StudioFormActionType,
} from '@aws-amplify/codegen-ui';
import {
factory,
Expand Down Expand Up @@ -49,7 +50,7 @@ import {
buildInitConstVariableExpression,
} from '../../helpers';
import { getElementAccessExpression } from './invalid-variable-helpers';
import { shouldWrapInArrayField } from './render-checkers';
import { isModelDataType, shouldWrapInArrayField } from './render-checkers';
import { DataApiKind } from '../../react-render-config';

// used just to sanitize nested array field names
Expand Down Expand Up @@ -237,10 +238,13 @@ export const getInitialValues = (
*/
export const getUseStateHooks = (
fieldConfigs: Record<string, FieldConfigMetadata>,
formActionType: StudioFormActionType,
dataApi?: DataApiKind,
hasAutoComplete?: boolean,
): Statement[] => {
const stateNames = new Set();
return Object.entries(fieldConfigs).reduce<Statement[]>((acc, [name, { sanitizedFieldName, relationship }]) => {
return Object.entries(fieldConfigs).reduce<Statement[]>((acc, fieldConfig) => {
const [name, { sanitizedFieldName, relationship }] = fieldConfig;
const fieldName = name.split('.')[0];
const renderedFieldName = sanitizedFieldName || fieldName;

Expand Down Expand Up @@ -268,6 +272,14 @@ export const getUseStateHooks = (
if (dataApi === 'GraphQL' && relationship) {
acc.push(buildUseStateExpression(`${renderedFieldName}Loading`, factory.createFalse()));
acc.push(buildUseStateExpression(`${renderedFieldName}Records`, factory.createArrayLiteralExpression([], false)));
if (hasAutoComplete && !isModelDataType(fieldConfig[1])) {
acc.push(
buildUseStateExpression(
`selected${capitalizeFirstLetter(renderedFieldName)}Records`,
factory.createArrayLiteralExpression([], false),
),
);
}
}
return acc;
}, []);
Expand Down
124 changes: 98 additions & 26 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import { buildAccessChain, getRecordsName } from './form-state';
import { getElementAccessExpression, getValidProperty } from './invalid-variable-helpers';
import { isEnumDataType, isModelDataType } from './render-checkers';
import { DataApiKind } from '../../react-render-config';
import { capitalizeFirstLetter } from '../../helpers';

export const getDisplayValueObjectName = 'getDisplayValue';

Expand Down Expand Up @@ -74,7 +75,7 @@ const getDisplayValueCallChain = ({ fieldName, recordString }: { fieldName: stri
compositeDogRecords.find((r) => r.description === value)
)
*/
export function getDisplayValueScalar(fieldName: string, model: string, key: string) {
export function getDisplayValueScalar(fieldName: string, model: string, key: string, dataApi?: DataApiKind) {
const recordString = 'r';

return factory.createConditionalExpression(
Expand All @@ -87,39 +88,110 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
),
undefined,
[
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(getRecordsName(model)),
factory.createIdentifier('find'),
),
undefined,
[
factory.createArrowFunction(
undefined,
dataApi === 'GraphQL'
? factory.createBinaryExpression(
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(`selected${capitalizeFirstLetter(fieldName)}Records`),
factory.createIdentifier('find'),
),
undefined,
[
factory.createArrowFunction(
undefined,
undefined,
[
factory.createParameterDeclaration(
undefined,
undefined,
undefined,
factory.createIdentifier(recordString),
undefined,
undefined,
undefined,
),
],
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(recordString),
factory.createIdentifier('id'),
),
factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
factory.createIdentifier('value'),
),
),
],
),
factory.createToken(SyntaxKind.QuestionQuestionToken),
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(getRecordsName(model)),
factory.createIdentifier('find'),
),
undefined,
[
factory.createArrowFunction(
undefined,
undefined,
[
factory.createParameterDeclaration(
undefined,
undefined,
undefined,
factory.createIdentifier(recordString),
undefined,
undefined,
),
],
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(recordString),
factory.createIdentifier(key),
),
factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
factory.createIdentifier('value'),
),
),
],
),
)
: factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(getRecordsName(model)),
factory.createIdentifier('find'),
),
undefined,
[
factory.createParameterDeclaration(
factory.createArrowFunction(
undefined,
undefined,
[
factory.createParameterDeclaration(
undefined,
undefined,
undefined,
factory.createIdentifier(recordString),
undefined,
undefined,
),
],
undefined,
factory.createIdentifier(recordString),
undefined,
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(recordString),
factory.createIdentifier(key),
),
factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
factory.createIdentifier('value'),
),
),
],
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(recordString),
factory.createIdentifier(key),
),
factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
factory.createIdentifier('value'),
),
),
],
),
],
),
factory.createToken(SyntaxKind.ColonToken),
Expand Down
8 changes: 5 additions & 3 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 @@ -1371,9 +1371,11 @@ export const buildGetRelationshipModels = (
]),
),
factory.createExpressionStatement(
factory.createCallExpression(getSetNameIdentifier(`${fieldName}Records`), undefined, [
factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)]),
]),
factory.createCallExpression(
getSetNameIdentifier(`selected${capitalizeFirstLetter(fieldName)}Records`),
undefined,
[factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)])],
),
),
];
}
Expand Down
69 changes: 61 additions & 8 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@
limitations under the License.
*/
import { FieldConfigMetadata, LabelDecorator } from '@aws-amplify/codegen-ui';
import { Expression, factory, Identifier, JsxAttribute, JsxChild, NodeFlags, SyntaxKind } from 'typescript';
import { Expression, factory, Identifier, JsxAttribute, JsxChild, NodeFlags, Statement, SyntaxKind } from 'typescript';
import {
buildAccessChain,
getArrayChildRefName,
getCurrentDisplayValueName,
getCurrentValueIdentifier,
getCurrentValueName,
getDefaultValueExpression,
getRecordsName,
setFieldState,
} from './form-state';
import { buildOverrideOnChangeStatement } from './event-handler-props';
Expand Down Expand Up @@ -264,8 +265,8 @@ export const renderArrayFieldComponent = (
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
? getDisplayValueScalar(fieldName, fieldName, scalarKey)
: getDisplayValueScalar(fieldName, scalarModel, scalarKey),
? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
: getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
);
}

Expand Down Expand Up @@ -348,7 +349,61 @@ export const renderArrayFieldComponent = (
),
);
} else if (scalarModel && scalarKey) {
const setStateStatements: Statement[] = [];
const valueArgument = 'value';

setStateStatements.push(
factory.createExpressionStatement(
factory.createCallExpression(setStateName, undefined, [factory.createIdentifier(valueArgument)]),
),
);

if (dataApi === 'GraphQL') {
setStateStatements.push(
factory.createExpressionStatement(
factory.createCallExpression(
getSetNameIdentifier(`selected${capitalizeFirstLetter(fieldName)}Records`),
undefined,
[
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier(getRecordsName(fieldName)),
factory.createIdentifier('find'),
),
undefined,
[
factory.createArrowFunction(
undefined,
undefined,
[
factory.createParameterDeclaration(
undefined,
undefined,
undefined,
factory.createIdentifier('r'),
undefined,
undefined,
),
],
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('r'),
factory.createIdentifier(scalarKey),
),
factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
factory.createIdentifier('value'),
),
),
],
),
],
),
),
);
}

props.push(
factory.createJsxAttribute(
factory.createIdentifier('setFieldValue'),
Expand All @@ -375,13 +430,11 @@ export const renderArrayFieldComponent = (
factory.createExpressionStatement(
factory.createCallExpression(setFieldValueIdentifier, undefined, [
dataApi === 'GraphQL'
? getDisplayValueScalar(fieldName, fieldName, scalarKey)
: getDisplayValueScalar(fieldName, scalarModel, scalarKey),
? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
: getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
]),
),
factory.createExpressionStatement(
factory.createCallExpression(setStateName, undefined, [factory.createIdentifier(valueArgument)]),
),
...setStateStatements,
],
true,
),
Expand Down
2 changes: 1 addition & 1 deletion packages/codegen-ui-react/lib/forms/react-form-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<

statements.push(getInitialValues(formMetadata.fieldConfigs, this.component));

statements.push(...getUseStateHooks(formMetadata.fieldConfigs, dataApi));
statements.push(...getUseStateHooks(formMetadata.fieldConfigs, formActionType, dataApi, hasAutoComplete));

statements.push(...getAutocompleteOptions(formMetadata.fieldConfigs, hasAutoComplete, dataApi));

Expand Down
12 changes: 12 additions & 0 deletions packages/codegen-ui/example-schemas/models/comment-with-postID/forms/PostUpdateForm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "PostUpdateForm",
"dataType": {
"dataSourceType": "DataStore",
"dataTypeName": "Post"
},
"formActionType": "update",
"fields": {},
"sectionalElements": {},
"style": {},
"cta": {}
}
12 changes: 12 additions & 0 deletions packages/codegen-ui/example-schemas/models/custom-key-model/forms/ChildItemUpdateForm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "ChildItemUpdateForm",
"dataType": {
"dataSourceType": "DataStore",
"dataTypeName": "ChildItem"
},
"formActionType": "update",
"fields": {},
"sectionalElements": {},
"style": {},
"cta": {}
}