New UI for Assignee dropdown (#2355)

* assignee-selector component

* fix(template): Replaced depricated template with ng-tempalte

* fix(assignee): Multiple assignees done

* fix(assignee-dropdown): add assignee dropdown to full details

* fix(preview): Removed unwanted code

* fix(preview): Fetching list of users on opening the assignee dropdown

* fix(preview): Multiple assignee issue fixed

* fix(avatar): fix avatar on assignees component

* fix(assignees): fix tests for assignees and add html for unassigned

* fix(tests): fix tests(specs) for assignees

* fix(detail-page):fix user unassign icon

* fix(assignee): fix assigne column width

runtime/src/tests/work-item/work-item-list/page-objects/work-item-detail.page.js

@@ -35,7 +35,7 @@ class WorkItemDetailPage {
   }
 
   get workItemDetailCloseButton () {
-      return element(by.css(".pficon-close.f8-quick-preview--close")); 
+      return element(by.css(".f8-quick-preview--close"));
 //    return element(by.xpath(".//*[contains (@class,'pficon-close pull-right margin-right-5 padding-15 close')]"));
   }
 
@@ -168,7 +168,7 @@ class WorkItemDetailPage {
     //    return element(by.css("#wi-detail-desc .edit-icon"));
         return element(by.xpath(".//*[contains (@id,'wi-detail-desc')]/div/div/div/i[contains(@class,'pficon-edit edit-icon')]"));
       }
-    
+
       clickWorkItemDescriptionEditIcon2 () {
         return this.workItemDescriptionEditIcon2.click();
       }
@@ -339,96 +339,49 @@ testSupport.clickElement(this.workItemDescriptionCancelIcon, "workItemDescriptio
   /* The following UI elements support the assignment of a user to a work item */
 
   /* Icon for the user assigned to the workitem */
-  get workItemDetailAssigneeIcon () {
-    return element(by.css(".user-assign-icon"));
-  }
-  clickworkItemDetailAssigneeIcon () {
-    return this.workItemDetailAssigneeIcon.click();
-  }
-  get workItemDetailUnAssigneeIcon () {
-    return element(by.css(".pull-left.fa.fa-user-plus.user-assign-icon"));
-  }
-  clickWorkItemDetailUnAssigneeIcon () {
-    return this.workItemDetailUnAssigneeIcon.click();
-  }
-
-  /* The user assigned to the workitem */
-  workItemDetailAssignee () {
-    return element(by.xpath(".//*[contains(@class,'detail-assignee-name')]"));
-  }
-  workItemDetailAssigneeName () {
-    return element(by.css(".pull-left.detail-assignee-name"));
-  }
-  clickworkItemDetailAssigneeName () {
-    return this.workItemDetailAssigneeName.click();
-  }
-
-  workItemDetailAssigneeNameClickable () {
-    return element(by.css(".placeholder.pointer"));
-  }
-  details_assigned_user () {
-    return element(by.id("WI_details_assigned_user"));
-  }
-  get clickWorkItemDetailAssignee () {
-    return this.workItemDetailAssignee.click();
-  }
 
-  /* Search string box for the user to assign to the workitem */
-  get workItemDetailAssigneeSearch () {
-    return element(by.id('userAssigneeSearchInput'));
-  }
-  checkworkItemDetailAssigneeSearch () {
-    return element(by.id('userAssigneeSearchInput'));
-  }
-  setWorkItemDetailAssigneeSearch (newSearchString, append) {
-    if (!append) { this.workItemDetailAssigneeSearch.clear(newSearchString) };
-    return this.workItemDetailAssigneeSearch.sendKeys(newSearchString);
+  /* ASSIGNEES */
+  get AddAssigneeButton () {
+    return element(by.id("f8-add-assignee"));
   }
 
-  /* The list of users to whom work items can be assigned */
-  get workItemDetailAssigneeList () {
-    return element(by.css(".user-list"));
+  clickAddAssigneeButton() {
+    return this.AddAssigneeButton.click();
   }
 
-  clickworkItemDetailAssigneeList () {
-    return this.workItemDetailAssigneeList.click();
+  get AssigneeDropdown() {
+    return element(by.css("#f8-add-assignee-dropdown .select-dropdown"));
   }
 
-  /* The first username in the list of users */
-  get workItemDetailFirstUser () {
-    return element(by.css(".item-li.first-item"));
+  get AssigneeSearch () {
+    return element(by.css("#f8-add-assignee-dropdown .select-dropdown-search-input"));
   }
 
-  get clickworkItemDetailFirstUser () {
-    return this.workItemDetailFirstUser.click();
+  setAssigneeSearch(newSearchString, append) {
+    if (!append) { this.AssigneeSearch.clear() };
+    return this.AssigneeSearch.sendKeys(newSearchString);
   }
 
-  /* Select the assigned user by name */
-  assignedUserDropDownList (userName) {
-    return element(by.xpath(".//*[@id='wi-detail-form']//li[.//text()[contains(.,'" + userName + "')]]"));
+  get AssigneeDropdownListItem() {
+    return element(by.xpath('.//f8-select-dropdown[@id="f8-add-assignee-dropdown"]//li'));
   }
 
-  clickAssignedUserDropDownList (userName) {
-    return this.assignedUserDropDownList(userName).click();
+  clickAssigneeListItem(username) {
+    element(by.xpath('.//f8-select-dropdown[@id="f8-add-assignee-dropdown"]//b[text()="'+ username +'"]')).click();
   }
 
-  /* The Unassign button */
-  get workItemDetailUnassignButton () {
-    return element(by.xpath(".//*[contains(@class,'action-item') and contains(text(),'Unassign')]"));
+  get closeAssigneeDropdown () {
+    return element(by.css("#f8-add-assignee-dropdown .close-pointer"));
   }
 
-  clickworkItemDetailUnassignButton () {
-    return this.workItemDetailUnassignButton.click();
+  clickCloseAssigneeDropdown() {
+    return this.closeAssigneeDropdown.click();
   }
 
-  /* The Cancel button */
-  get workItemDetailCancelButton () {
-    return element(by.xpath(".//*[contains(@class,'action-item') and contains(text(),'Cancel')]"));
+  get AssignUsers() {
+    return $$(".f8-assignees span");
   }
 
-  clickworkItemDetailCancelButton () {
-    return this.workItemDetailCancelButton.click();
-  }
 /**UI elements for comments testSupport  */
   clickCommentsDiv (){
     return element(by.id("wi-comment-add-comment")).click();

runtime/src/tests/work-item/work-item-list/smokeTest.spec.js

@@ -48,15 +48,22 @@ describe('Work item list', function () {
     page.typeQuickAddWorkItemTitle(WORK_ITEM_TITLE);
     page.clickQuickAddSave().then(function() {
       var detailPage = page.clickWorkItemTitle(WORK_ITEM_TITLE);
-      browser.wait(until.elementToBeClickable(detailPage.workItemDetailAssigneeIcon), constants.WAIT, 'Failed to find Assignee Icon');
-      detailPage.clickworkItemDetailAssigneeIcon();
-      detailPage.setWorkItemDetailAssigneeSearch(EXAMPLE_USER_1, false);
-      detailPage.clickAssignedUserDropDownList(EXAMPLE_USER_1);
-      expect(detailPage.details_assigned_user().getText()).toContain(EXAMPLE_USER_1);
-      detailPage.details_assigned_user().click();
-      detailPage.clickworkItemDetailUnassignButton();
-      expect(detailPage.workItemDetailAssigneeNameClickable().getText()).toBe('Unassigned');
-    });
+      browser.wait(until.elementToBeClickable(detailPage.workItemDetailCloseButton), constants.WAIT, 'Failed to find detail page close Icon');
+      //Assign the user
+      detailPage.clickAddAssigneeButton();
+      detailPage.setAssigneeSearch(EXAMPLE_USER_1, false);
+      detailPage.clickAssigneeListItem(EXAMPLE_USER_1);
+      detailPage.clickCloseAssigneeDropdown();
+      //Verify assignee has been assigned
+      expect(detailPage.AssignUsers.getText()).toContain(EXAMPLE_USER_1);
+      //unassign the user
+      detailPage.clickAddAssigneeButton();
+      detailPage.setAssigneeSearch(EXAMPLE_USER_1, false);
+      detailPage.clickAssigneeListItem(EXAMPLE_USER_1);
+      detailPage.clickCloseAssigneeDropdown();
+      //Verify assignee has been unassigned
+      expect(detailPage.AssignUsers.getText()).not.toContain(EXAMPLE_USER_1);
+     });
   });
 
   /* Create a new workitem, fill in the details, save, retrieve, update, save, verify updates are saved */
@@ -70,7 +77,7 @@ describe('Work item list', function () {
       /* Fill in/update the new work item's title and details field */
       expect(page.workItemTitle(page.workItemByTitle(WORK_ITEM_TITLE))).toBe(WORK_ITEM_TITLE);
       var detailPage = page.clickWorkItemTitle(WORK_ITEM_TITLE);
-      browser.wait(until.elementToBeClickable(detailPage.workItemDetailAssigneeIcon), constants.WAIT, 'Failed to find Assignee Icon');
+      browser.wait(until.elementToBeClickable(detailPage.workItemDetailCloseButton), constants.WAIT, 'Failed to find Assignee Icon');
       detailPage.clickWorkItemDetailTitleClick();
       detailPage.setWorkItemDetailTitle (WORK_ITEM_UPDATED_TITLE, false);
       detailPage.clickWorkItemTitleSaveIcon();
@@ -176,17 +183,16 @@ describe('Work item list', function () {
   it('Edit comment and cancel - Desktop ', function() {
     var detailPage = page.clickWorkItem(page.firstWorkItem);
     detailPage.scrollToBottomRight().then(function() {
-        detailPage.clickCommentEdit('0');
-        detailPage.editComments('updated comment!','0',false);
-        detailPage.scrollToBottomRight().then(function(){
-          detailPage.clickCloseComment('0');
-        });
-        expect(detailPage.getCommentBody('0')).toBe('Some Comment 0');
+      detailPage.clickCommentEdit('0');
+      detailPage.editComments('updated comment!','0',false);
+      detailPage.scrollToBottomRight().then(function(){
+        detailPage.clickCloseComment('0');
       });
-
+      expect(detailPage.getCommentBody('0')).toBe('Some Comment 0');
+    });
   });
 
-    /* Commenting the following two tests as they are unreliable; failing often. 
+    /* Commenting the following two tests as they are unreliable; failing often.
   They will be added back once they attain certain reliability */
 
   // it('Verify create new Label', function(){

src/app/components/assignee-selector/assignee-selector.component.html

@@ -0,0 +1,37 @@
+<f8-select-dropdown
+  id="f8-add-assignee-dropdown"
+  #dropdown
+  *ngIf="assignees.length"
+  [toggleButtonRef]="toggleButtonRef"
+  [dropdownItem]="dropdownItem"
+  [headerText]="'Add Assignee'"
+  [menuItems]="assignees"
+  [showSearch]="backup.length > 2"
+  (onSelect)="onSelect($event)"
+  (onSearch)="onSearch($event)"
+  (onOpen)="onOpen($event)"
+  (onClose)="onClose($event)">
+  <ng-template #toggleButtonRef>
+    <span class="clickable add-label"
+      id="f8-add-assignee"
+      (click)="closeAddAssignee()">
+      <i class="pficon pficon-add-circle-o"></i>
+      Add Assignee
+    </span>
+  </ng-template>
+  <ng-template #dropdownItem let-name="name"
+    let-src="src + '&s=20'"
+    let-stickontop="stickontop">
+    <div class="user-avatar margin-right-10 pull-left">
+      <img
+        class="user-assign-avatar"
+        [src]="src | almAvatarSize: 20"
+        onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=20'"/>
+    </div>
+    <span *ngIf="!stickontop" [innerHTML]="name | almSearchHighlight: searchValue"></span>
+    <span
+      *ngIf="stickontop"
+      [innerHTML]="(name | almSearchHighlight: searchValue) + ' (me)'"
+      class="bold"></span>
+  </ng-template>
+</f8-select-dropdown>

src/app/components/assignee-selector/assignee-selector.component.less

@@ -0,0 +1,12 @@
+@import '../../../assets/stylesheets/_base';
+
+.clickable {
+  cursor: pointer;
+}
+.add-label {
+  color: @color-pf-blue-300;
+  font-weight: 600;
+}
+.bold {
+  font-weight: 600;
+}