fix: [BETA-116][DHIS2-15896] validate values assigned from the rules …

…engine (#3612)

src/core_modules/capture-core/components/D2Form/FormBuilder/FormBuilder.component.js

@@ -1,6 +1,7 @@
 // @flow
 /* eslint-disable complexity */
 import i18n from '@dhis2/d2-i18n';
+import { isEqual } from 'lodash';
 import log from 'loglevel';
 import { v4 as uuid } from 'uuid';
 import * as React from 'react';
@@ -40,6 +41,7 @@ type FieldUI = {
     errorType?: ?string,
     errorData?: ErrorData,
     validatingMessage?: ?string,
+    pendingValidation?: ?boolean,
 };
 
 type RenderDividerFn = (index: number, fieldsCount: number, field: FieldConfig) => React.Node;
@@ -108,6 +110,7 @@ export class FormBuilder extends React.Component<Props> {
         if (!validators || validators.length === 0) {
             return {
                 valid: true,
+                pendingValidation: false,
             };
         }
 
@@ -139,11 +142,16 @@ export class FormBuilder extends React.Component<Props> {
                 errorMessage: validatorResult.message,
                 errorType: validatorResult.type,
                 errorData: validatorResult.data,
+                pendingValidation: false,
             };
         }
 
         return {
             valid: true,
+            errorMessage: null,
+            errorType: null,
+            errorData: null,
+            pendingValidation: false,
         };
     }
 
@@ -180,17 +188,19 @@ export class FormBuilder extends React.Component<Props> {
         }, asyncUIState);
     }
 
-    static executeValidateAllFields(
+    static executeValidateFields(
         props: Props,
         fieldsValidatingPromiseContainer: FieldsValidatingPromiseContainer,
+        customFields?: Array<FieldConfig>,
     ) {
         const {
             id,
-            fields,
+            fields: allFields,
             values,
             onGetValidationContext,
             onIsValidating,
         } = props;
+        const fields = customFields || allFields || [];
         const validationContext = onGetValidationContext && onGetValidationContext();
         const validationPromises = fields
             .map(async (field) => {
@@ -233,6 +243,7 @@ export class FormBuilder extends React.Component<Props> {
                             valid: false,
                             errorMessage: [i18n.t('error encountered during field validation')],
                             errorType: i18n.t('error'),
+                            pendingValidation: false,
                         };
                         log.error({ reason, field });
                     }
@@ -268,7 +279,7 @@ export class FormBuilder extends React.Component<Props> {
         this.commitUpdateTriggeredForFields = {};
 
         if (this.props.validateIfNoUIData) {
-            this.validateAllFields(this.props);
+            this.validateFields(this.props);
         }
     }
 
@@ -277,14 +288,27 @@ export class FormBuilder extends React.Component<Props> {
             this.asyncUIState = FormBuilder.getAsyncUIState(this.props.fieldsUI);
             this.commitUpdateTriggeredForFields = {};
             if (this.props.validateIfNoUIData) {
-                this.validateAllFields(newProps);
+                this.validateFields(newProps);
             }
         } else {
             this.asyncUIState =
                 FormBuilder.updateAsyncUIState(this.props.fieldsUI, newProps.fieldsUI, this.asyncUIState);
         }
     }
 
+    componentDidUpdate(prevProps: Props) {
+        const { fieldsUI, fields } = this.props;
+
+        if (!isEqual(prevProps.fieldsUI, fieldsUI)) {
+            const pendingValidationFields = Object.keys(fieldsUI).filter(key => fieldsUI[key].pendingValidation);
+
+            if (pendingValidationFields.length !== 0 && !this.validateAllCancelablePromise) {
+                const fieldsToValidate = fields.filter(field => pendingValidationFields.includes(field.id));
+                this.validateFields(this.props, fieldsToValidate);
+            }
+        }
+    }
+
     getCleanUpData() {
         const remainingCompleteUids: Array<string> = Object
             .keys(this.fieldsValidatingPromiseContainer)
@@ -300,12 +324,13 @@ export class FormBuilder extends React.Component<Props> {
         return remainingCompleteUids;
     }
 
-    validateAllFields(
+    validateFields(
         props: Props,
+        customFields?: Array<FieldConfig>,
     ) {
         this.validateAllCancelablePromise && this.validateAllCancelablePromise.cancel();
         this.validateAllCancelablePromise = makeCancelablePromise(
-            FormBuilder.executeValidateAllFields(props, this.fieldsValidatingPromiseContainer),
+            FormBuilder.executeValidateFields(props, this.fieldsValidatingPromiseContainer, customFields),
         );
 
         this.validateAllCancelablePromise

src/core_modules/capture-core/reducers/descriptions/form.reducerDescription.js

@@ -216,13 +216,11 @@ export const formsSectionsFieldsUIDesc = createReducerDescription({
         const updatedFields = Object.keys(assignEffects).reduce((acc, id) => {
             if (formSectionFields[id]) {
                 acc[id] = {
-                    valid: true,
-                    errorData: undefined,
-                    errorMessage: undefined,
-                    errorType: undefined,
+                    ...state[formId][id],
                     modified: true,
                     touched: true,
                     validatingMessage: null,
+                    pendingValidation: true,
                 };
             }
             return acc;