From 2421d8a851f9f86c3f5fc2d38d3fc7afab9c6893 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
Date: Mon, 29 Apr 2024 12:33:38 +0100
Subject: [PATCH] AAE-21703 Fix group widget style (#9612)

* AAE-21703 Fix group form widget style

* AAE-21703 Improve tests
---
 .../widgets/group/group-cloud.widget.html     | 34 ++++++++++---------
 .../components/group-cloud.component.html     |  4 +--
 .../components/group-cloud.component.spec.ts  | 18 +++++++---
 3 files changed, 33 insertions(+), 23 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 76c2a0426a7..4514720a5dc 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 376a4e26d99..bd8e132b259 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 ae76d18f1b1..34164b9cd69 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
@@ -18,7 +18,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
-import { ProcessServiceCloudTestingModule } from './../../testing/process-service-cloud.testing.module';
 import { GroupCloudModule } from '../group-cloud.module';
 import { GroupCloudComponent } from './group-cloud.component';
 import { CoreTestingModule } from '@alfresco/adf-core';
@@ -73,7 +72,7 @@ describe('GroupCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule, ProcessServiceCloudTestingModule, GroupCloudModule]
+            imports: [CoreTestingModule, GroupCloudModule]
         });
         fixture = TestBed.createComponent(GroupCloudComponent);
         component = fixture.componentInstance;
@@ -83,13 +82,22 @@ describe('GroupCloudComponent', () => {
         loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
-    it('should populate placeholder when title is present', () => {
+    it('should populate placeholder when title is present', async () => {
         component.title = 'TITLE_KEY';
 
         fixture.detectChanges();
 
-        const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id');
-        expect(matLabel.textContent).toEqual('TITLE_KEY');
+        const inputElement = await loader.getHarness(MatInputHarness.with({ selector: '[data-automation-id="adf-cloud-group-search-input"]' }));
+
+        expect(await inputElement.getPlaceholder()).toEqual('TITLE_KEY');
+    });
+
+    it('should not populate placeholder when title is not present', async () => {
+        fixture.detectChanges();
+
+        const inputElement = await loader.getHarness(MatInputHarness.with({ selector: '[data-automation-id="adf-cloud-group-search-input"]' }));
+
+        expect(await inputElement.getPlaceholder()).toEqual('');
     });
 
     describe('Search group', () => {