Angular Material: Translate Autocomplete Control Renderer

[daniel-shuy]

Background

The company I work for (SICPA Product Security) is considering adopting JSON Forms for a project.

Unfortunately the project is written in Angular, and I noticed that the Angular Material renderer set is missing quite a lot of supported features compared to the React/Vue renderer sets.

As such, I have been testing the Angular Material renderer set quite thoroughly, and will be contributing some missing features, especially to the Angular Material renderer set.

Description

The Angular Material renderer set renders enums using the AutocompleteControlRenderer.

Unlike the other renderer sets, AutocompleteControlRenderer does not translate the enum values.

This PR updates AutocompleteControlRenderer to use mapStateToEnumControlProps(JsonFormsState, OwnPropsOfControl & OwnPropsOfEnum) like the other renderer sets, which translates the enum values as labels, while keeping the original values as the values:

jsonforms/packages/core/src/mappers/renderer.ts

Lines 676 to 707 in e642b3d

	/**
	* Default mapStateToCellProps for enum control. Options is used for populating dropdown list
	* @param state
	* @param ownProps
	* @returns {StatePropsOfControl & OwnPropsOfEnum}
	*/
	export const mapStateToEnumControlProps = (
	state: JsonFormsState,
	ownProps: OwnPropsOfControl & OwnPropsOfEnum
	): StatePropsOfControl & OwnPropsOfEnum => {
	const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
	const options: EnumOption[] =
	ownProps.options ||
	props.schema.enum?.map((e) =>
	enumToEnumOptionMapper(
	e,
	getTranslator()(state),
	getI18nKeyPrefix(props.schema, props.uischema, props.path)
	)
	) ||
	(props.schema.const && [
	enumToEnumOptionMapper(
	props.schema.const,
	getTranslator()(state),
	getI18nKeyPrefix(props.schema, props.uischema, props.path)
	),
	]);
	return {
	...props,
	options,
	};
	};

For backwards compatibility, I've allowed the options @Input to still take in string[] (by typing it as EnumOption[] | string[]), but it will not be translated if a string[] is passed.

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	5302153
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/698aa3241b19b300089fc604
😎 Deploy Preview	https://deploy-preview-2535--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CLAassistant]

All committers have signed the CLA.

[sdirix]

Hi @daniel-shuy,

You are right, the Angular Material renderer set is the most inconsistent one with the most missing features. Happy to review your contribution(s) ❤️

[lucas-koehler]

Hi @daniel-shuy Thanks for the contribution and extending the tests ❤️ . Allowing translation of the values defintely makes sense!
I have two comments inline. Pease have a look.

[coveralls]

coverage: 82.803% (+0.005%) from 82.798%
when pulling 5302153 on daniel-shuy:angular-material/translate-autocomplete-control-renderer
into 563015d on eclipsesource:master.

[lucas-koehler]

Misclicked before, sorry:

Hi @daniel-shuy ,
thanks for the update!
Unfortunately, it seems that something is broken now:
Looking at the Enums example in the preview https://deploy-preview-2535--jsonforms-examples.netlify.app/angular-material/ selecting a value does not update the value for me. On the master preview this works fine for me.
Can you have a look?

[daniel-shuy]

@lucas-koehler sorry, I had some leftover code that depended on displayWith. I've removed it, please try again

[lucas-koehler]

Hi @daniel-shuy , thanks for the update! Generally, the enum controls work again. However, after selecting a value, the untranslated value is shown in the enum control while the dropdown (correctly) shows the translated values.
This should be aligned to also show the translated value in the input. This is for instance already the case in the react-material renderer set.

Find attached an enum i18n example to test this. You can also add this example to the PR.

enum-i18n.patch

[daniel-shuy]

@lucas-koehler Ah, now I remember why I needed displayWith. This is challenging as I'm trying to not break backwards compatibility by keeping the data and FormControl value type as string, but it looks like I will need to change it to EnumOption to translate the input label, which is a breaking change for those who use the internal JSON Forms API. Is that acceptable?

I'll also update the tests to assert that the input label is correctly translated.

[lucas-koehler]

Hi @daniel-shuy ,
I'd say it's acceptable to break the API here as long as it only affects this renderer resp. renderer set. We do not want to change the core behavior of JSON Forms :)

[daniel-shuy]

@lucas-koehler Great! I've made the changes and updated the tests, it should work now

[lucas-koehler]

Thank you for the updates but something is still missing.
When I select an option in the enum i18n example at the preview https://deploy-preview-2535--jsonforms-examples.netlify.app/angular-material/ the control stays empty:

jf-angular-enums.webm