feat(UIForms): add errors in triggers, expose error getter utils (#1030)

packages/forms/src/UIForm/UIForm.component.js

@@ -132,7 +132,12 @@ export default class UIForm extends React.Component {
 				propertyName = schema.key[schema.key.length - 1];
 				this.onTrigger(event, { formData, formId: this.props.id, propertyName, value });
 			} else {
-				this.onTrigger(event, { trigger: schema.triggers[0], schema, properties: formData });
+				this.onTrigger(event, {
+					trigger: schema.triggers[0],
+					schema,
+					properties: formData,
+					errors,
+				});
 			}
 		}
 	}

packages/forms/src/UIForm/UIForm.component.test.js

@@ -73,6 +73,39 @@ describe('UIForm component', () => {
 	});
 
 	describe('#onFinish', () => {
+		it('should perform trigger', () => {
+			// given
+			const validData = {
+				...data,
+				properties: { firstname: 'toto' },
+			};
+			const wrapper = mount(<UIForm {...validData} {...props} />);
+			props.onTrigger.mockReturnValueOnce(Promise.resolve({}));
+
+			// when
+			wrapper
+				.find('input')
+				.at(1)
+				.simulate('blur');
+
+			// then
+			expect(props.onTrigger).toBeCalledWith(expect.anything(), {
+				trigger: 'after',
+				schema: {
+					key: ['firstname'],
+					title: 'First Name (with placeholder)',
+					placeholder: 'Enter your firstname here',
+					triggers: ['after'],
+					required: true,
+					schema: { type: 'string' },
+					ngModelOptions: {},
+					type: 'text',
+				},
+				properties: validData.properties,
+				errors: validData.errors,
+			});
+		});
+
 		it('should NOT perform trigger when field has errors', () => {
 			// given: required firstname is empty
 			const wrapper = mount(<UIForm {...data} {...props} />);

packages/forms/src/UIForm/Widget/Widget.component.js

@@ -5,6 +5,7 @@ import includes from 'lodash/includes';
 import { sfPath } from 'talend-json-schema-form-core';
 
 import defaultWidgets from '../utils/widgets';
+import { getError } from '../utils/errors';
 import { getValue } from '../utils/properties';
 
 function shouldRender(conditions, properties) {
@@ -26,7 +27,7 @@ export default function Widget(props) {
 	}
 
 	const id = sfPath.name(key, '_', props.id);
-	const error = props.errors[key];
+	const error = getError(props.errors, props.schema);
 	const errorMessage = validationMessage || error;
 	return (
 		<WidgetImpl

packages/forms/src/UIForm/utils/errors.js

@@ -1,5 +1,9 @@
 import omit from 'lodash/omit';
 
+export function getError(errors, schema) {
+	return errors[schema.key];
+}
+
 export function removeError(errors, schema) {
 	return omit(errors, schema.key.toString());
 }

packages/forms/src/UIForm/utils/errors.test.js

@@ -1,4 +1,4 @@
-import { removeError, addError } from './errors';
+import { removeError, addError, getError } from './errors';
 
 describe('Errors utils', () => {
 	describe('#removeError', () => {
@@ -34,4 +34,18 @@ describe('Errors utils', () => {
 			});
 		});
 	});
+
+	describe('#getError', () => {
+		it('should add error based on schema key', () => {
+			// given
+			const schema = { key: ['hakuna', 'matata'] };
+			const errors = { [schema.key]: 'this is it' };
+
+			// when
+			const errorMessage = getError(errors, schema);
+
+			// then
+			expect(errorMessage).toEqual('this is it');
+		});
+	});
 });