From 10a5bf2e686b39792fe75d90f91f7e9d8341b194 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <diogo.bastos@hyland.com>
Date: Mon, 25 Mar 2024 11:47:55 +0000
Subject: [PATCH] AAE-21392 Fix dropdown cloud widget style

---
 .../widgets/dropdown/dropdown-cloud.widget.html   | 15 ++++++---------
 .../dropdown/dropdown-cloud.widget.spec.ts        |  4 ++--
 .../widgets/dropdown/dropdown-cloud.widget.ts     |  6 +++++-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
index 0bf385425e..332ffdc62f 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
@@ -1,16 +1,12 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
-    <div class="adf-dropdown-widget-top-labels">
-        <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span>
-        </label>
-    </div>
     <div>
         <mat-form-field>
-            <mat-label *ngIf="getDefaultOption(list$ | async) as defaultOption">
-                {{ defaultOption.name }}
-            </mat-label>
+            <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
+                *ngIf="isRequired()">*</span>
+            </label>
             <mat-select class="adf-select"
+                        *ngIf="list$ | async as options"
                         [id]="field.id"
                         [(ngModel)]="field.value"
                         [disabled]="field.readOnly"
@@ -22,10 +18,11 @@
                         (blur)="markAsTouched()"
                         matTooltipPosition="above"
                         matTooltipShowDelay="1000"
+                        [placeholder]="defaultOption?.name"
                         [multiple]="field.hasMultipleValues">
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
 
-                <mat-option *ngFor="let opt of list$ | async"
+                <mat-option *ngFor="let opt of options"
                             [value]="getOptionValue(opt, field.value)"
                             [id]="opt.id">{{opt.name}}
                 </mat-option>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
index 19e062bde4..f7e3dfb240 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
@@ -298,10 +298,10 @@ describe('DropdownCloudWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const dropdownLabel = fixture.debugElement.query(By.css('.adf-dropdown-widget mat-label'));
+            const placeholderElement = fixture.debugElement.query(By.css('.mat-mdc-select-placeholder'));
             selectedValueElement = fixture.debugElement.query(By.css('.mat-mdc-select-value-text'));
 
-            expect(dropdownLabel.nativeNode.innerText).toEqual('This is a mock none option');
+            expect(placeholderElement.nativeNode.innerText).toEqual('This is a mock none option');
             expect(widget.fieldValue).toEqual(undefined);
             expect(selectedValueElement).toBeFalsy();
         });
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
index a53b52bb43..f17d01a27d 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
@@ -29,7 +29,7 @@ import {
 } from '@alfresco/adf-core';
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs';
-import { filter, map, takeUntil } from 'rxjs/operators';
+import { filter, map, takeUntil, tap } from 'rxjs/operators';
 import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
 
 export const DEFAULT_OPTION = {
@@ -66,6 +66,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     restApiHostName: string;
     list$: Observable<FormFieldOption[]>;
     filter$ = new BehaviorSubject<string>('');
+    defaultOption: FormFieldOption;
 
     private readonly defaultVariableOptionId = 'id';
     private readonly defaultVariableOptionLabel = 'name';
@@ -403,6 +404,9 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
                     }
                     return items.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
                 }),
+                tap(items => {
+                    this.defaultOption = this.getDefaultOption(items);
+                }),
                 takeUntil(this.onDestroy$)
             );
     }