From 6765a4e4d3a5171c7738651fac204358b4d3daa3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 27 Mar 2017 19:07:44 +0100
Subject: [PATCH] Stops triggering board sidebar when clicking avatar

---
 .../boards/components/board_card.js           |  4 +---
 .../boards/components/issue_card_inner.js     |  6 +++---
 spec/javascripts/boards/board_card_spec.js    | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
index 9320848bcca..f591134c548 100644
--- a/app/assets/javascripts/boards/components/board_card.js
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -50,9 +50,7 @@ export default {
       this.showDetail = false;
     },
     showIssue(e) {
-      const targetTagName = e.target.tagName.toLowerCase();
-
-      if (targetTagName === 'a' || targetTagName === 'button') return;
+      if (e.target.classList.contains('js-no-trigger')) return;
 
       if (this.showDetail) {
         this.showDetail = false;
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index ba44dc5ed94..a4629b092bf 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -84,20 +84,20 @@ import eventHub from '../eventhub';
             #{{ issue.id }}
           </span>
           <a
-            class="card-assignee has-tooltip"
+            class="card-assignee has-tooltip js-no-trigger"
             :href="rootPath + issue.assignee.username"
             :title="'Assigned to ' + issue.assignee.name"
             v-if="issue.assignee"
             data-container="body">
             <img
-              class="avatar avatar-inline s20"
+              class="avatar avatar-inline s20 js-no-trigger"
               :src="issue.assignee.avatar"
               width="20"
               height="20"
               :alt="'Avatar for ' + issue.assignee.name" />
           </a>
           <button
-            class="label color-label has-tooltip"
+            class="label color-label has-tooltip js-no-trigger"
             v-for="label in issue.labels"
             type="button"
             v-if="showLabel(label)"
diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js
index 73d18458366..de072e7e470 100644
--- a/spec/javascripts/boards/board_card_spec.js
+++ b/spec/javascripts/boards/board_card_spec.js
@@ -1,10 +1,12 @@
 /* global List */
+/* global ListUser */
 /* global ListLabel */
 /* global listObj */
 /* global boardsMockInterceptor */
 /* global BoardService */
 
 import Vue from 'vue';
+import '~/boards/models/user';
 
 require('~/boards/models/list');
 require('~/boards/models/label');
@@ -130,6 +132,23 @@ describe('Issue card', () => {
       expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
     });
 
+    it('does not set detail issue if img is clicked', (done) => {
+      vm.issue.assignee = new ListUser({
+        id: 1,
+        name: 'testing 123',
+        username: 'test',
+        avatar: 'test_image',
+      });
+
+      Vue.nextTick(() => {
+        triggerEvent('mouseup', vm.$el.querySelector('img'));
+
+        expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+
+        done();
+      });
+    });
+
     it('does not set detail issue if showDetail is false after mouseup', () => {
       triggerEvent('mouseup');