AAE-21336 Display selected external property in preview state (#9475)

lib/core/src/lib/styles/_components-variables.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable value-list-max-empty-lines */
 /* stylelint-disable scss/no-global-function-names */
 @use './reference-variables' as *;
 @use '@angular/material' as mat;
@@ -97,7 +98,9 @@
         --adf-header-icon-button-pressed-color: $adf-ref-header-icon-color,
         --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
         --adf-danger-button-background: $adf-danger-button-background,
-        --adf-secondary-button-background: $adf-secondary-button-background
+        --adf-secondary-button-background: $adf-secondary-button-background,
+
+        --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html

@@ -22,6 +22,14 @@
                    [id]="field.id"
                    [formControl]="propertyControl"
             >
+
+            <ng-container *ngIf="previewState">
+                <label class="adf-display-external-property-widget-preview"
+                       data-automation-id="adf-display-external-property-widget-preview"
+                >
+                    {{ field.externalProperty }}
+                </label>
+            </ng-container>
         </mat-form-field>
 
         <ng-container *ngIf="!previewState">

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss

@@ -5,5 +5,9 @@
         .adf-label {
             top: 20px;
         }
+
+        &-preview {
+            color: var(--adf-display-external-property-widget-preview-selection-color);
+        }
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.spec.ts

@@ -25,6 +25,7 @@ import { DisplayExternalPropertyWidgetComponent } from './display-external-prope
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
 
 describe('DisplayExternalPropertyWidgetComponent', () => {
     let loader: HarnessLoader;
@@ -71,6 +72,20 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
         expect(await input.getValue()).toBe('banana');
     });
 
+    it('should NOT display external property name in NO preview state', () => {
+        widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+            type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
+            readOnly: true,
+            externalProperty: 'fruitName',
+            value: 'banana'
+        });
+
+        fixture.detectChanges();
+
+        const externalPropertyPreview = fixture.debugElement.query(By.css('[data-automation-id="adf-display-external-property-widget-preview"]'));
+        expect(externalPropertyPreview).toBeFalsy();
+    });
+
     describe('when property load fails', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
@@ -96,7 +111,7 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
                 type: FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY,
-                externalProperty: true,
+                externalProperty: 'fruitName',
                 value: null
             });
 
@@ -112,6 +127,11 @@ describe('DisplayExternalPropertyWidgetComponent', () => {
         it('should NOT log the error', () => {
             expect(logServiceSpy).not.toHaveBeenCalled();
         });
+
+        it('should display external property name', () => {
+            const externalPropertyPreview = fixture.debugElement.query(By.css('[data-automation-id="adf-display-external-property-widget-preview"]'));
+            expect(externalPropertyPreview.nativeElement.textContent.trim()).toBe('fruitName');
+        });
     });
 
     describe('when is required', () => {