From 1bff6c560643db60fcd3521524c70c5529b218e1 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <diogo.bastos@hyland.com>
Date: Mon, 15 Apr 2024 15:02:13 +0100
Subject: [PATCH] AAE-21703 Fix group form widget style

---
 .../widgets/group/group-cloud.widget.html     | 34 ++++++++++---------
 .../components/group-cloud.component.html     |  4 +--
 .../components/group-cloud.component.spec.ts  | 14 ++++++--
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
index 76c2a0426a..4514720a5d 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
@@ -1,23 +1,25 @@
 <div class="adf-dropdown-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
-    <div>
-        <label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span></label>
+    <div *ngIf="field.leftLabels">
+        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
     </div>
     <div>
-        <adf-cloud-group [mode]="mode"
-                [title]="title"
-                [readOnly]="field.readOnly"
-                [validate]="validate"
-                [roles]="roles"
-                [searchGroupsControl]="search"
-                [required]="isRequired()"
-                (changedGroups)="onChangedGroup($event)"
-                [preSelectGroups]="preSelectGroup"
-                (blur)="markAsTouched()"
-                [matTooltip]="field.tooltip"
-                [matTooltipPosition]="'above'"
-                [matTooltipShowDelay]="1000">
+        <adf-cloud-group 
+            [mode]="mode"
+            [title]="title"
+            [readOnly]="field.readOnly"
+            [validate]="validate"
+            [roles]="roles"
+            [searchGroupsControl]="search"
+            [required]="isRequired()"
+            (changedGroups)="onChangedGroup($event)"
+            [preSelectGroups]="preSelectGroup"
+            (blur)="markAsTouched()"
+            [matTooltip]="field.tooltip"
+            [matTooltipPosition]="'above'"
+            [matTooltipShowDelay]="1000"
+        >
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
         </adf-cloud-group>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
index 376a4e26d9..bd8e132b25 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
@@ -1,7 +1,6 @@
 <form>
     <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
-        <mat-label *ngIf="!isReadonly()"
-            id="adf-group-cloud-title-id">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
+        <ng-content select="[label]"></ng-content>
         <mat-chip-grid #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
@@ -20,6 +19,7 @@
                    [formControl]="searchGroupsControl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="groupChipList"
+                   [placeholder]="title | translate"
                    [required]="required"
                    (focus)="setFocus(true)"
                    (blur)="setFocus(false); markAsTouched()"
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
index 9fdcdb6a3c..537fcfd1ee 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
@@ -86,11 +86,19 @@ describe('GroupCloudComponent', () => {
 
     it('should populate placeholder when title is present', () => {
         component.title = 'TITLE_KEY';
-
         fixture.detectChanges();
 
-        const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id');
-        expect(matLabel.textContent).toEqual('TITLE_KEY');
+        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-search-input"]');
+
+        expect(inputElement.placeholder).toEqual('TITLE_KEY');
+    });
+
+    it('should not populate placeholder when title is not present', () => {
+        fixture.detectChanges();
+
+        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-search-input"]');
+
+        expect(inputElement.placeholder).toEqual('');
     });
 
     describe('Search group', () => {