[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

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 || [];
     }