Improve UX multi assigness in MR

Add merge warning on avatar in:
- open view assigness
- collapsed view assigness
- dropdown (search) view assigness

Add can_merge option to MR sidebar entity

2 files changed, 38 insertions, 180 deletions

diff --git a/spec/javascripts/sidebar/assignees_spec.js b/spec/javascripts/sidebar/assignees_spec.js
index 4ae2141d5f0..fc731e731ae 100644
--- a/spec/javascripts/sidebar/assignees_spec.js
+++ b/spec/javascripts/sidebar/assignees_spec.js
@@ -94,115 +94,9 @@ describe('Assignee component', () => {
 
       expect(assignee.querySelector('.author').innerText.trim()).toEqual(UsersMock.user.name);
     });
-
-    it('Shows one user with avatar, username and author name', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users: [UsersMock.user],
-          editable: true,
-        },
-      }).$mount();
-
-      expect(component.$el.querySelector('.author-link')).not.toBeNull();
-      // The image
-      expect(component.$el.querySelector('.author-link img').getAttribute('src')).toEqual(
-        UsersMock.user.avatar,
-      );
-      // Author name
-      expect(component.$el.querySelector('.author-link .author').innerText.trim()).toEqual(
-        UsersMock.user.name,
-      );
-      // Username
-      expect(component.$el.querySelector('.author-link .username').innerText.trim()).toEqual(
-        `@${UsersMock.user.username}`,
-      );
-    });
-
-    it('has the root url present in the assigneeUrl method', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users: [UsersMock.user],
-          editable: true,
-        },
-      }).$mount();
-
-      expect(component.assigneeUrl(UsersMock.user).indexOf('http://localhost:3000/')).not.toEqual(
-        -1,
-      );
-    });
-
-    it('has correct "cannot merge" tooltip when user cannot merge', () => {
-      const user = Object.assign({}, UsersMock.user, { can_merge: false });
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users: [user],
-          editable: true,
-          issuableType: 'merge_request',
-        },
-      }).$mount();
-
-      expect(component.mergeNotAllowedTooltipMessage).toEqual('Cannot merge');
-    });
   });
 
   describe('Two or more assignees/users', () => {
-    it('has correct "cannot merge" tooltip when one user can merge', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      users[0].can_merge = true;
-      users[1].can_merge = false;
-      users[2].can_merge = false;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users,
-          editable: true,
-          issuableType: 'merge_request',
-        },
-      }).$mount();
-
-      expect(component.mergeNotAllowedTooltipMessage).toEqual('1/3 can merge');
-    });
-
-    it('has correct "cannot merge" tooltip when no user can merge', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(2);
-      users[0].can_merge = false;
-      users[1].can_merge = false;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users,
-          editable: true,
-          issuableType: 'merge_request',
-        },
-      }).$mount();
-
-      expect(component.mergeNotAllowedTooltipMessage).toEqual('No one can merge');
-    });
-
-    it('has correct "cannot merge" tooltip when more than one user can merge', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      users[0].can_merge = false;
-      users[1].can_merge = true;
-      users[2].can_merge = true;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users,
-          editable: true,
-          issuableType: 'merge_request',
-        },
-      }).$mount();
-
-      expect(component.mergeNotAllowedTooltipMessage).toEqual('2/3 can merge');
-    });
-
     it('has no "cannot merge" tooltip when every user can merge', () => {
       const users = UsersMockHelper.createNumberRandomUsers(2);
       users[0].can_merge = true;
@@ -217,7 +111,7 @@ describe('Assignee component', () => {
         },
       }).$mount();
 
-      expect(component.mergeNotAllowedTooltipMessage).toEqual(null);
+      expect(component.collapsedTooltipTitle).not.toContain('cannot merge');
     });
 
     it('displays two assignee icons when collapsed', () => {
@@ -295,8 +189,12 @@ describe('Assignee component', () => {
       expect(component.$el.querySelector('.user-list-more')).toBe(null);
     });
 
-    it('sets tooltip container to body', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(2);
+    it('shows sorted assignee where "can merge" users are sorted first', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
+
       component = new AssigneeComponent({
         propsData: {
           rootPath: 'http://localhost:3000',
@@ -305,98 +203,48 @@ describe('Assignee component', () => {
         },
       }).$mount();
 
-      expect(component.$el.querySelector('.user-link').getAttribute('data-container')).toBe('body');
+      expect(component.sortedAssigness[0].can_merge).toBe(true);
     });
 
-    it('Shows the "show-less" assignees label', done => {
-      const users = UsersMockHelper.createNumberRandomUsers(6);
+    it('passes the sorted assignees to the uncollapsed-assignee-list', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
+
       component = new AssigneeComponent({
         propsData: {
           rootPath: 'http://localhost:3000',
           users,
-          editable: true,
+          editable: false,
         },
       }).$mount();
 
-      expect(component.$el.querySelectorAll('.user-item').length).toEqual(
-        component.defaultRenderCount,
-      );
-
-      expect(component.$el.querySelector('.user-list-more')).not.toBe(null);
-      const usersLabelExpectation = users.length - component.defaultRenderCount;
+      const userItems = component.$el.querySelectorAll('.user-list .user-item a');
 
-      expect(component.$el.querySelector('.user-list-more .btn-link').innerText.trim()).not.toBe(
-        `+${usersLabelExpectation} more`,
-      );
-      component.toggleShowLess();
-      Vue.nextTick(() => {
-        expect(component.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
-          '- show less',
-        );
-        done();
-      });
+      expect(userItems.length).toBe(3);
+      expect(userItems[0].dataset.originalTitle).toBe(users[2].name);
+      expect(userItems[0].dataset.originalTitle).not.toBe(users[0].name);
     });
 
-    it('Shows the "show-less" when "n+ more " label is clicked', done => {
-      const users = UsersMockHelper.createNumberRandomUsers(6);
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: true,
-        },
-      }).$mount();
-
-      component.$el.querySelector('.user-list-more .btn-link').click();
-      Vue.nextTick(() => {
-        expect(component.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
-          '- show less',
-        );
-        done();
-      });
-    });
+    it('passes the sorted assignees to the collapsed-assignee-list', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
 
-    it('gets the count of avatar via a computed property ', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(6);
       component = new AssigneeComponent({
         propsData: {
           rootPath: 'http://localhost:3000',
           users,
-          editable: true,
+          editable: false,
         },
       }).$mount();
 
-      expect(component.sidebarAvatarCounter).toEqual(`+${users.length - 1}`);
-    });
+      const collapsedButton = component.$el.querySelector('.sidebar-collapsed-user button');
 
-    describe('n+ more label', () => {
-      beforeEach(() => {
-        const users = UsersMockHelper.createNumberRandomUsers(6);
-        component = new AssigneeComponent({
-          propsData: {
-            rootPath: 'http://localhost:3000',
-            users,
-            editable: true,
-          },
-        }).$mount();
-      });
-
-      it('shows "+1 more" label', () => {
-        expect(component.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
-          '+ 1 more',
-        );
-      });
-
-      it('shows "show less" label', done => {
-        component.toggleShowLess();
-
-        Vue.nextTick(() => {
-          expect(component.$el.querySelector('.user-list-more .btn-link').innerText.trim()).toBe(
-            '- show less',
-          );
-          done();
-        });
-      });
+      expect(collapsedButton.innerText.trim()).toBe(users[2].name);
+      expect(collapsedButton.innerText.trim()).not.toBe(users[0].name);
     });
   });
 });
diff --git a/spec/javascripts/sidebar/mock_data.js b/spec/javascripts/sidebar/mock_data.js
index 7f20b0da991..107acead3c6 100644
--- a/spec/javascripts/sidebar/mock_data.js
+++ b/spec/javascripts/sidebar/mock_data.js
@@ -1,3 +1,13 @@
+export const userDataMock = {
+  avatar_url: 'mock_path',
+  id: 1,
+  name: 'Root',
+  state: 'active',
+  username: 'root',
+  web_url: '',
+  can_merge: true,
+};
+
 const RESPONSE_MAP = {
   GET: {
     '/gitlab-org/gitlab-shell/issues/5.json': {