From c60d456332ba0210de62ec4f7c16aba3e424a1b8 Mon Sep 17 00:00:00 2001
From: Sushmitha V <58967843+Sushmitha100796@users.noreply.github.com>
Date: Wed, 7 Apr 2021 16:30:28 +0530
Subject: [PATCH] [AAE-4358][AAE-4359] [APA] Floating label added for the
 process and task filters (#6872)

---
 angular.json                                  | 56 ++++++++++++++-----
 .../date-range-filter.component.html          |  4 +-
 .../date-range-filter.component.spec.ts       |  8 +++
 .../components/people-cloud.component.html    |  2 +-
 .../edit-process-filter-cloud.component.html  | 10 ++--
 ...dit-process-filter-cloud.component.spec.ts | 12 +++-
 ...base-edit-task-filter-cloud.component.html |  3 +
 ...ervice-task-filter-cloud.component.spec.ts | 12 +++-
 .../task-assignment-filter.component.html     |  2 +-
 .../task-assignment-filter.component.spec.ts  |  8 +++
 10 files changed, 92 insertions(+), 25 deletions(-)

diff --git a/angular.json b/angular.json
index 75f32106d8..6518a08d3e 100644
--- a/angular.json
+++ b/angular.json
@@ -30,7 +30,9 @@
             "tsConfig": "tsconfig.dev.json",
             "polyfills": "demo-shell/src/polyfills.ts",
             "stylePreprocessorOptions": {
-              "includePaths": ["lib"]
+              "includePaths": [
+                "lib"
+              ]
             },
             "assets": [
               "demo-shell/src/assets",
@@ -308,8 +310,13 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["tsconfig.dev.json"],
-            "exclude": ["**/node_modules/**/*", "package.json"]
+            "tsConfig": [
+              "tsconfig.dev.json"
+            ],
+            "exclude": [
+              "**/node_modules/**/*",
+              "package.json"
+            ]
           }
         }
       }
@@ -342,8 +349,12 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["./e2e/tsconfig.e2e.json"],
-            "exclude": ["**/node_modules/**/*"]
+            "tsConfig": [
+              "./e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**/*"
+            ]
           }
         }
       }
@@ -384,7 +395,9 @@
               "lib/core/tsconfig.lib.json",
               "lib/core/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -425,7 +438,9 @@
               "lib/content-services/tsconfig.lib.json",
               "lib/content-services/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -466,7 +481,9 @@
               "lib/process-services/tsconfig.lib.json",
               "lib/process-services/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -507,7 +524,9 @@
               "lib/process-services-cloud/tsconfig.lib.json",
               "lib/process-services-cloud/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -548,7 +567,9 @@
               "lib/insights/tsconfig.lib.json",
               "lib/insights/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -588,7 +609,9 @@
               "lib/extensions/tsconfig.lib.json",
               "lib/extensions/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -618,7 +641,9 @@
               "lib/testing/tsconfig.lib.json",
               "lib/testing/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -643,5 +668,8 @@
       }
     }
   },
-  "defaultProject": "demoshell"
-}
+  "defaultProject": "demoshell",
+  "cli": {
+    "analytics": "0ce5075f-0835-439a-bebe-7c41750179a6"
+  }
+}
\ No newline at end of file
diff --git a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html
index c669b8c801..6cee240d10 100644
--- a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html
+++ b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html
@@ -1,5 +1,5 @@
 
-<mat-form-field [attr.data-automation-id]="processFilterProperty.key">
+<mat-form-field [floatLabel]="'auto'" [attr.data-automation-id]="processFilterProperty.key">
     <mat-select
         placeholder="{{ processFilterProperty.label | translate }}"
         [value]="type"
@@ -12,7 +12,7 @@
 </mat-form-field>
 
 <ng-container *ngIf="isDateRangeType()">
-    <mat-form-field class="adf-cloud-date-range-picker">
+    <mat-form-field [floatLabel]="'auto'" class="adf-cloud-date-range-picker">
         <mat-label>{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE_TITLE' | translate }}</mat-label>
         <mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="picker">
           <input matStartDate formControlName="from" placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE' | translate }}">
diff --git a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
index 47e21cbecf..fdb54ed70a 100644
--- a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
@@ -145,4 +145,12 @@ describe('DateRangeFilterComponent', () => {
         expect(component.dateRangeForm.get('from').value).toEqual(moment(mockFilterProperty.value._startFrom));
         expect(component.dateRangeForm.get('to').value).toEqual(moment(mockFilterProperty.value._startTo));
     });
+
+    it('should have floating labels when values are present', () => {
+        fixture.detectChanges();
+        const inputLabelsNodes = document.querySelectorAll('mat-form-field');
+        inputLabelsNodes.forEach(labelNode => {
+            expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
+        });
+    });
 });
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
index 17adf02499..f7a2108ba2 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -1,5 +1,5 @@
 <form>
-    <mat-form-field class="adf-people-cloud">
+    <mat-form-field [floatLabel]="'auto'" class="adf-people-cloud">
         <mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
         <mat-chip-list #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
index b4a235ee88..0ecee4d3c5 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
@@ -24,7 +24,7 @@
             <form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm">
                 <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
                     <ng-container *ngFor="let processFilterProperty of processFilterProperties">
-                        <mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
+                        <mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
                             <mat-select
                                 placeholder="{{processFilterProperty.label | translate}}"
                                 [formControlName]="processFilterProperty.key"
@@ -36,7 +36,7 @@
                                 >{{ propertyOption.label | translate }}</mat-option>
                             </mat-select>
                         </mat-form-field>
-                        <mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
+                        <mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
                             <mat-select
                                 placeholder="{{processFilterProperty.label | translate}}"
                                 [formControlName]="processFilterProperty.key"
@@ -47,21 +47,21 @@
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>
-                        <mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
+                        <mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
                             <input matInput
                                 [formControlName]="processFilterProperty.key"
                                 type="text"
                                 placeholder="{{processFilterProperty.label | translate}}"
                                 [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
                         </mat-form-field>
-                        <mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
+                        <mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
                             <input matInput
                                 [formControlName]="processFilterProperty.key"
                                 type="number" min="0"
                                 placeholder="{{processFilterProperty.label | translate}}"
                                 [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
                         </mat-form-field>
-                        <mat-form-field fxFlex="23%" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
+                        <mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
                             <mat-label>{{processFilterProperty.label | translate}}</mat-label>
                             <input
                                 matInput
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
index 6ef71229a6..0ac1dad302 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
@@ -38,6 +38,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ProcessCloudService } from '../../services/process-cloud.service';
 import { DateCloudFilterType } from '../../../models/date-cloud-filter.model';
 import { ApplicationVersionModel } from '../../../models/application-version.model';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 describe('EditProcessFilterCloudComponent', () => {
     let component: EditProcessFilterCloudComponent;
@@ -73,7 +74,8 @@ describe('EditProcessFilterCloudComponent', () => {
         imports: [
             TranslateModule.forRoot(),
             ProcessServiceCloudTestingModule,
-            ProcessFiltersCloudModule
+            ProcessFiltersCloudModule,
+            MatIconTestingModule
         ],
         providers: [
             MatDialog,
@@ -357,6 +359,14 @@ describe('EditProcessFilterCloudComponent', () => {
         }));
     });
 
+    it('should have floating labels when values are present', async(() => {
+        fixture.detectChanges();
+        const inputLabelsNodes = document.querySelectorAll('mat-form-field');
+        inputLabelsNodes.forEach(labelNode => {
+            expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
+        });
+    }));
+
     it('should be able to filter filterProperties when input is defined', async(() => {
         fixture.detectChanges();
         component.filterProperties = ['appName', 'processName'];
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
index 46f0e15862..dd501a099e 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
@@ -31,6 +31,7 @@
                 <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
                     <ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
                         <mat-form-field fxFlex="23%"
+                                        [floatLabel]="'auto'"
                                         *ngIf="taskFilterProperty.type === 'select'"
                                         [attr.data-automation-id]="taskFilterProperty.key">
                             <mat-select placeholder="{{taskFilterProperty.label | translate}}"
@@ -44,6 +45,7 @@
                             </mat-select>
                         </mat-form-field>
                         <mat-form-field fxFlex="23%"
+                                        [floatLabel]="'auto'"
                                         *ngIf="taskFilterProperty.type === 'text'"
                                         [attr.data-automation-id]="taskFilterProperty.key">
                             <input matInput
@@ -53,6 +55,7 @@
                                    [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" />
                         </mat-form-field>
                         <mat-form-field fxFlex="23%"
+                                        [floatLabel]="'auto'"
                                         *ngIf="taskFilterProperty.type === 'date'"
                                         [attr.data-automation-id]="taskFilterProperty.key">
                             <mat-label>{{taskFilterProperty.label | translate}}</mat-label>
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts
index d9bf22d1af..51af624530 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts
@@ -33,6 +33,7 @@ import { TaskCloudService } from '../../../services/task-cloud.service';
 import { fakeServiceFilter } from '../../mock/task-filters-cloud.mock';
 import { TranslateModule } from '@ngx-translate/core';
 import { EditServiceTaskFilterCloudComponent } from './edit-service-task-filter-cloud.component';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 describe('EditServiceTaskFilterCloudComponent', () => {
     let component: EditServiceTaskFilterCloudComponent;
@@ -48,7 +49,8 @@ describe('EditServiceTaskFilterCloudComponent', () => {
         imports: [
             TranslateModule.forRoot(),
             ProcessServiceCloudTestingModule,
-            TaskFiltersCloudModule
+            TaskFiltersCloudModule,
+            MatIconTestingModule
         ],
         providers: [
             MatDialog,
@@ -433,6 +435,14 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         }));
 
+        it('should have floating labels when values are present', async(() => {
+            fixture.detectChanges();
+            const inputLabelsNodes = document.querySelectorAll('mat-form-field');
+            inputLabelsNodes.forEach(labelNode => {
+                expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
+            });
+        }));
+
         it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
index b9365f9a6a..9a0aa28ead 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.html
@@ -1,5 +1,5 @@
 <div class="adf-cloud-assignment-container" fxLayout="row">
-    <mat-form-field>
+    <mat-form-field [floatLabel]="'auto'">
         <mat-select class="adf-task-assignment-filter"
                     placeholder="{{ 'ADF_CLOUD_TASK_ASSIGNEMNT_FILTER.ASSIGNMENT_TYPE' | translate }}"
                     [(ngModel)]="assignmentType"
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts
index bdf9005b9c..1df2943038 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts
@@ -73,4 +73,12 @@ describe('EditTaskFilterCloudComponent', () => {
         const candidateGroups = fixture.debugElement.nativeElement.querySelector('.adf-group-cloud-filter');
         expect(candidateGroups).toBeTruthy();
     });
+
+    it('should have floating labels when values are present', () => {
+        fixture.detectChanges();
+        const inputLabelsNodes = document.querySelectorAll('mat-form-field');
+        inputLabelsNodes.forEach(labelNode => {
+            expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
+        });
+    });
 });