[ADF-2614] Edit icon misses in Info-drawer Assignee (#3145)

* [DW-488] Edit icon misses in Info-drawer Assignee

* * Added unit testcases for the recent changes .

* * Updated card-view doc for the recent changes made.

* * Fixed failing taskHeader testcases

docs/core/card-view.component.md

@@ -55,6 +55,7 @@ export interface CardViewItem {
     type: string;
     displayValue: string;
     editable?: boolean;
+    icon?: string;
 }
 ```
 
@@ -77,7 +78,8 @@ Each of them extends the abstract CardViewBaseItemModel class to add some custom
         value: 'Spock',
         key: 'name',
         default: 'default bar' ,
-        multiline: false
+        multiline: false,
+        icon: 'icon';
     }),
     new CardViewMapItemModel({
         label: 'My map',
@@ -141,6 +143,7 @@ const textItemProperty = new CardViewTextItemModel(options);
 | displayValue\* | string | --- | The value to render |
 | editable | boolean | false | Whether the property editable or not |
 | clickable | boolean | false | Whether the property clickable or not |
+| icon | string | The material icon to show against the clickable property |
 | multiline | string | false | Single or multiline text |
 | pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue |
 

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -5,9 +5,12 @@
             <span *ngIf="showProperty()">{{ property.displayValue }}</span>
         </span>
         <ng-template #elseBlock>
-            <span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">
+        <div class="adf-textitem-clickable" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">
+            <span class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
             </span>
+            <mat-icon *ngIf="hasIcon()" fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.icon" class="adf-textitem-icon">{{ property.icon }}</mat-icon>
+        </div>
         </ng-template>
     </span>
     <span *ngIf="isEditable()">

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -24,6 +24,12 @@
             }
         }
 
+        &-textitem-clickable {
+            &:hover mat-icon {
+                opacity: 1;
+            }
+        }
+
         &-textitem-clickable-value {
             cursor: pointer;
             color: mat-color($primary);

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -185,6 +185,51 @@ describe('CardViewTextItemComponent', () => {
             expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
         });
 
+        it('should render the edit icon in case of clickable true and icon defined', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: true,
+                icon: 'FAKE-ICON'
+            });
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-ICON');
+        });
+
+        it('should not render the edit icon in case of clickable true and icon undefined', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: true
+            });
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
+            expect(value).toBeNull('Edit icon should NOT be shown');
+        });
+
+        it('should not render the edit icon in case of clickable false and icon defined', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: false,
+                icon: 'FAKE-ICON'
+            });
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
+            expect(value).toBeNull('Edit icon should NOT be shown');
+        });
+
         it('should render value when editable:true', () => {
             component.editable = true;
             component.property.editable = true;

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -59,6 +59,10 @@ export class CardViewTextItemComponent implements OnChanges {
         return this.property.clickable;
     }
 
+    hasIcon(): boolean {
+        return !!this.property.icon;
+    }
+
     hasErrors(): number {
         return this.errorMessages && this.errorMessages.length;
     }

lib/core/card-view/interfaces/card-view-item-properties.interface.ts

@@ -24,5 +24,6 @@ export interface CardViewItemProperties {
     default?: any;
     editable?: boolean;
     clickable?: boolean;
+    icon?: string;
     validators?: CardViewItemValidator[];
 }

lib/core/card-view/interfaces/card-view-item.interface.ts

@@ -23,4 +23,5 @@ export interface CardViewItem {
     type: string;
     displayValue: any;
     editable?: boolean;
+    icon?: string;
 }

lib/core/card-view/models/card-view-baseitem.model.ts

@@ -24,6 +24,7 @@ export abstract class CardViewBaseItemModel {
     default: any;
     editable: boolean;
     clickable: boolean;
+    icon?: string;
     validators?: CardViewItemValidator[];
 
     constructor(obj: CardViewItemProperties) {
@@ -33,6 +34,7 @@ export abstract class CardViewBaseItemModel {
         this.default = obj.default;
         this.editable = !!obj.editable;
         this.clickable = !!obj.clickable;
+        this.icon = obj.icon || '';
         this.validators = obj.validators || [];
     }
 

lib/process-services/task-list/components/task-header.component.spec.ts

@@ -90,18 +90,32 @@ describe('TaskHeaderComponent', () => {
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
-            let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-property-value'));
+            let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value'));
             expect(formNameEl.nativeElement.innerText).toBe('Wilbur Adams');
         });
     }));
 
+    it('should display clickable edit icon', async(() => {
+        component.refreshData();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value'));
+            let iconE = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-create"]`));
+            expect(formNameEl).not.toBeNull();
+            expect(iconE).not.toBeNull();
+            expect(formNameEl.nativeElement.innerText).toBe('Wilbur Adams');
+            expect(iconE.nativeElement.innerText.trim()).toBe('create');
+        });
+    }));
+
     it('should display placeholder if no assignee', async(() => {
         component.taskDetails.assignee = null;
         component.refreshData();
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
-            let valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-property-value'));
+            let valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value'));
             expect(valueEl.nativeElement.innerText).toBe('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT');
         });
 

lib/process-services/task-list/components/task-header.component.ts

@@ -79,7 +79,8 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                  value: this.taskDetails.getFullName(),
                  key: 'assignee',
                  default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'),
-                 clickable: !this.isCompleted()
+                 clickable: !this.isCompleted(),
+                 icon: 'create'
                 }
             ),
             new CardViewTextItemModel(