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	995f13e
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6970acebbf3b6e00081dd2ee
😎 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.

[lucas-koehler]

This function signature suggests it always receives an EnumOption, but Angular Material's autocomplete will pass the raw value (string) when displaying the current selection in the input field.

Suggested change

	displayFn(option: EnumOption): string {
	return option.label;
	}
	displayFn(option: EnumOption | string): string {
	if (!option) {
	return '';
	}
	return typeof option === 'string' ? option : option.label;
	}

[lucas-koehler]

Several expect(inputElement.value) assertions were removed from the tests. Was this intentional due to the displayFn changes affecting how values are displayed? If so, it would be helpful to add replacement assertions that verify the translated label is displayed correctly in the input field, rather than removing the coverage entirely.