Feat/expression on validation message (#3454)

* WIP Expression support on validation message

* Expression support on validation message

* Expression support on validation message

* Refactor and add test

* Get textresources from many-errors-direct

* Get textresources from many-errors-direct

Author: paal2707

src/features/validation/expressionValidation/ExpressionValidation.test.tsx

@@ -10,6 +10,7 @@ import { ExpressionValidation } from 'src/features/validation/expressionValidati
 import { Validation } from 'src/features/validation/validationContext';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import * as NodesContext from 'src/utils/layout/NodesContext';
+import type { IRawTextResource } from 'src/features/language/textResources';
 import type { FieldValidations, IExpressionValidationConfig } from 'src/features/validation';
 import type { ILayoutCollection } from 'src/layout/layout';
 
@@ -25,6 +26,7 @@ type ExpressionValidationTest = {
   validationConfig: IExpressionValidationConfig;
   formData: object;
   layouts: ILayoutCollection;
+  textResources: IRawTextResource[];
 };
 
 function sortValidations(validations: SimpleValidation[]) {
@@ -63,7 +65,6 @@ function getSharedTests() {
       out.push(test);
     }
   });
-
   return out;
 }
 
@@ -76,7 +77,7 @@ describe('Expression validation shared tests', () => {
   });
 
   const sharedTests = getSharedTests();
-  it.each(sharedTests)('$name', async ({ name: _, expects, validationConfig, formData, layouts }) => {
+  it.each(sharedTests)('$name', async ({ name: _, expects, validationConfig, formData, textResources, layouts }) => {
     // Mock updateDataModelValidations
     let result: FieldValidations = {};
     const updateDataModelValidations = jest.fn((_key, _dataType, validations: FieldValidations) => {
@@ -90,6 +91,10 @@ describe('Expression validation shared tests', () => {
         fetchLayouts: async () => layouts,
         fetchCustomValidationConfig: async () => validationConfig,
         fetchFormData: async () => formData,
+        fetchTextResources: async (language) => ({
+          language,
+          resources: textResources ?? [],
+        }),
       },
     });
 

src/features/validation/expressionValidation/ExpressionValidation.tsx

@@ -91,6 +91,13 @@ function IndividualExpressionValidation({ dataType }: { dataType: string }) {
                 valueArguments,
               },
             );
+            const evaluatedMessage = evalExpr(validationDef.message, modifiedDataSources, {
+              returnType: ExprVal.String,
+              defaultValue: '',
+              positionalArguments: [field],
+              valueArguments,
+            });
+
             if (isInvalid) {
               if (!validations[field]) {
                 validations[field] = [];
@@ -99,15 +106,14 @@ function IndividualExpressionValidation({ dataType }: { dataType: string }) {
               validations[field].push({
                 field,
                 source: FrontendValidationSource.Expression,
-                message: { key: validationDef.message },
+                message: { key: evaluatedMessage },
                 severity: validationDef.severity,
                 category: validationDef.showImmediately ? 0 : ValidationMask.Expression,
               });
             }
           }
         }
       }
-
       updateDataModelValidations('expression', dataElementId, validations);
     }
   }, [

src/features/validation/expressionValidation/shared-expression-validation-tests/many-errors-direct.json

@@ -14,7 +14,7 @@
       "componentId": "name-input"
     },
     {
-      "message": "email must be real",
+      "message": "The typed email must be real",
       "severity": "error",
       "field": "form.email",
       "componentId": "email-input"
@@ -41,17 +41,13 @@
       "form.email": [
         "none-is-not-allowed",
         {
-          "message": "email must be real",
+          "message": ["text", "email-must-be-real"],
           "severity": "error",
           "condition": ["contains", ["dataModel", "form.email"], "fake"]
         },
         {
           "ref": "str-len",
-          "condition": [
-            "lessThan",
-            ["stringLength", ["dataModel", "form.email"]],
-            20
-          ]
+          "condition": ["lessThan", ["stringLength", ["dataModel", "form.email"]], 20]
         },
         {
           "message": "email must contain @",
@@ -69,11 +65,7 @@
       "str-len": {
         "message": "string is too short",
         "severity": "error",
-        "condition": [
-          "lessThan",
-          ["stringLength", ["dataModel", ["argv", 0]]],
-          5
-        ]
+        "condition": ["lessThan", ["stringLength", ["dataModel", ["argv", 0]]], 5]
       }
     }
   },
@@ -83,6 +75,12 @@
       "email": "[email protected]"
     }
   },
+  "textResources": [
+    {
+      "id": "email-must-be-real",
+      "value": "The typed email must be real"
+    }
+  ],
   "layouts": {
     "Page": {
       "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",

src/features/validation/index.ts

@@ -1,4 +1,4 @@
-import type { Expression, ExprValToActual } from 'src/features/expressions/types';
+import type { Expression, ExprVal, ExprValToActual, ExprValToActualOrExpr } from 'src/features/expressions/types';
 import type { TextReference, ValidLangParam } from 'src/features/language/useLanguage';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
@@ -229,7 +229,7 @@ export interface BackendValidationIssue {
  * Expression validation object.
  */
 export type IExpressionValidation = {
-  message: string;
+  message: ExprValToActualOrExpr<ExprVal.String>;
   condition: Expression | ExprValToActual;
   severity: ValidationSeverity;
   showImmediately: boolean;

src/layout/GenericComponent.tsx

@@ -60,6 +60,7 @@ function NonMemoGenericComponent<Type extends CompTypes = CompTypes>({
 }: IGenericComponentProps<Type>) {
   const itemExists = useNodeItem(node, (i) => !!i);
   const generatorErrors = NodesInternal.useNodeData(node, (node) => node.errors);
+
   if (generatorErrors && Object.keys(generatorErrors).length > 0) {
     return (
       <ErrorList