AAE-20848 Add display external property widget (#9429)

* AAE-20848 Add display external property widget

* revert css changes

* AAE-20848 validate validatable types

* AAE-20848 implement suggestions

* fix lint

lib/core/src/lib/form/components/widgets/core/form-field-types.ts

@@ -48,6 +48,7 @@ export class FormFieldTypes {
     static DISPLAY_RICH_TEXT: string = 'display-rich-text';
     static JSON: string = 'json';
     static DATA_TABLE: string = 'data-table';
+    static DISPLAY_EXTERNAL_PROPERTY: string = 'display-external-property';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,
@@ -56,10 +57,18 @@ export class FormFieldTypes {
         FormFieldTypes.GROUP
     ];
 
+    static VALIDATABLE_TYPES: string[] = [
+        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
+    ];
+
     static isReadOnlyType(type: string) {
         return FormFieldTypes.READONLY_TYPES.includes(type);
     }
 
+    static isValidatableType(type: string) {
+        return FormFieldTypes.VALIDATABLE_TYPES.includes(type);
+    }
+
     static isContainerType(type: string) {
         return type === FormFieldTypes.CONTAINER || type === FormFieldTypes.GROUP;
     }

lib/core/src/lib/form/components/widgets/core/form-field-validator.ts

@@ -49,7 +49,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.DATE,
         FormFieldTypes.DATETIME,
         FormFieldTypes.ATTACH_FOLDER,
-        FormFieldTypes.DECIMAL
+        FormFieldTypes.DECIMAL,
+        FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY
     ];
 
     isSupported(field: FormFieldModel): boolean {

lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts

@@ -17,6 +17,7 @@
 
 import { DateFnsUtils } from '../../../../common';
 import { FormFieldTypes } from './form-field-types';
+import { RequiredFieldValidator } from './form-field-validator';
 import { FormFieldModel } from './form-field.model';
 import { FormModel } from './form.model';
 
@@ -881,4 +882,55 @@ describe('FormFieldModel', () => {
         });
 
     });
+
+    it('should validate readOnly field if it is validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockDisplayExternalPropertyFieldId',
+            type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
+            readOnly: true,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY)).toBeTrue();
+        expect(field.validate()).toBe(false);
+    });
+
+    it('should validate NOT readOnly field if it is validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockDisplayExternalPropertyFieldId',
+            type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
+            readOnly: false,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY)).toBeTrue();
+        expect(field.validate()).toBe(false);
+    });
+
+    it('should NOT validate readOnly field if it is NOT validatable', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            id: 'mockTextFieldId',
+            type: FormFieldTypes.TEXT,
+            readOnly: true,
+            required: true,
+            value: null
+        });
+
+        const validator = new RequiredFieldValidator();
+        form.fieldValidators = [validator];
+
+        expect(FormFieldTypes.isValidatableType(FormFieldTypes.TEXT)).toBeFalse();
+        expect(field.validate()).toBe(true);
+    });
 });

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -86,6 +86,7 @@ export class FormFieldModel extends FormWidgetModel {
     leftLabels: boolean = false;
     variableConfig: VariableConfig;
     schemaDefinition: DataColumn[];
+    externalProperty?: string;
 
     // container model members
     numberOfColumns: number = 1;
@@ -143,7 +144,7 @@ export class FormFieldModel extends FormWidgetModel {
     validate(): boolean {
         this.validationSummary = new ErrorMessageModel();
 
-        if (!this.readOnly) {
+        if (this.isFieldValidatable()) {
             const validators = this.form.fieldValidators || [];
             for (const validator of validators) {
                 if (!validator.validate(this)) {
@@ -156,6 +157,10 @@ export class FormFieldModel extends FormWidgetModel {
         return this._isValid;
     }
 
+    private isFieldValidatable(): boolean {
+        return !this.readOnly || FormFieldTypes.isValidatableType(this.type);
+    }
+
     constructor(form: any, json?: any) {
         super(form, json);
         if (json) {
@@ -204,6 +209,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.variableConfig = json.variableConfig;
             this.schemaDefinition = json.schemaDefinition;
             this.precision = json.precision;
+            this.externalProperty = json.externalProperty;
 
             if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
                 this.placeholder = json.placeholder;

lib/core/src/lib/i18n/en.json

@@ -48,6 +48,7 @@
       "REST_API_FAILED": "The server `{{ hostname }}` is not reachable",
       "VARIABLE_DROPDOWN_OPTIONS_FAILED": "There was a problem loading dropdown elements. Please contact administrator.",
       "DATA_TABLE_LOAD_FAILED": "There was a problem loading table elements. Please contact administrator.",
+      "EXTERNAL_PROPERTY_LOAD_FAILED": "There was a problem loading external property. Please contact administrator.",
       "FILE_NAME": "File Name",
       "NO_FILE_ATTACHED": "No file attached",
       "VALIDATOR": {