1 files changed, 30 insertions, 20 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index ddd20ff281c..457d0d4dcd6 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -1,6 +1,6 @@
 <script>
 import { sortBy } from 'lodash';
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
 import { sprintf, __, n__ } from '~/locale';
@@ -8,9 +8,10 @@ import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import IssueDueDate from './issue_due_date.vue';
 import IssueTimeEstimate from './issue_time_estimate.vue';
-import boardsStore from '../stores/boards_store';
+import eventHub from '../eventhub';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { ListType } from '../constants';
+import { updateHistory } from '~/lib/utils/url_utility';
 
 export default {
   components: {
@@ -26,6 +27,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [issueCardInner],
+  inject: ['groupId', 'rootPath', 'scopedLabelsAvailable'],
   props: {
     issue: {
       type: Object,
@@ -42,7 +44,6 @@ export default {
       default: false,
     },
   },
-  inject: ['groupId', 'rootPath'],
   data() {
     return {
       limitBeforeCounter: 2,
@@ -52,6 +53,16 @@ export default {
   },
   computed: {
     ...mapState(['isShowingLabels']),
+    cappedAssignees() {
+      // e.g. maxRender is 4,
+      // Render up to all 4 assignees if there are only 4 assigness
+      // Otherwise render up to the limitBeforeCounter
+      if (this.issue.assignees.length <= this.maxRender) {
+        return this.issue.assignees.slice(0, this.maxRender);
+      }
+
+      return this.issue.assignees.slice(0, this.limitBeforeCounter);
+    },
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
     },
@@ -98,19 +109,10 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['performSearch']),
     isIndexLessThanlimit(index) {
       return index < this.limitBeforeCounter;
     },
-    shouldRenderAssignee(index) {
-      // Eg. maxRender is 4,
-      // Render up to all 4 assignees if there are only 4 assigness
-      // Otherwise render up to the limitBeforeCounter
-      if (this.issue.assignees.length <= this.maxRender) {
-        return index < this.maxRender;
-      }
-
-      return index < this.limitBeforeCounter;
-    },
     assigneeUrl(assignee) {
       if (!assignee) return '';
       return `${this.rootPath}${assignee.username}`;
@@ -118,6 +120,9 @@ export default {
     avatarUrlTitle(assignee) {
       return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name });
     },
+    avatarUrl(assignee) {
+      return assignee.avatarUrl || assignee.avatar || gon.default_avatar_url;
+    },
     showLabel(label) {
       if (!label.id) return false;
       return true;
@@ -133,13 +138,19 @@ export default {
     },
     filterByLabel(label) {
       if (!this.updateFilters) return;
-      const labelTitle = encodeURIComponent(label.title);
-      const filter = `label_name[]=${labelTitle}`;
+      const filterPath = window.location.search ? `${window.location.search}&` : '?';
+      const filter = `label_name[]=${encodeURIComponent(label.title)}`;
 
-      boardsStore.toggleFilter(filter);
+      if (!filterPath.includes(filter)) {
+        updateHistory({
+          url: `${filterPath}${filter}`,
+        });
+        this.performSearch();
+        eventHub.$emit('updateTokens');
+      }
     },
     showScopedLabel(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+      return this.scopedLabelsAvailable && isScopedLabel(label);
     },
   },
 };
@@ -222,12 +233,11 @@ export default {
       </div>
       <div class="board-card-assignee gl-display-flex">
         <user-avatar-link
-          v-for="(assignee, index) in issue.assignees"
-          v-if="shouldRenderAssignee(index)"
+          v-for="assignee in cappedAssignees"
           :key="assignee.id"
           :link-href="assigneeUrl(assignee)"
           :img-alt="avatarUrlTitle(assignee)"
-          :img-src="assignee.avatarUrl || assignee.avatar || assignee.avatar_url"
+          :img-src="avatarUrl(assignee)"
           :img-size="24"
           class="js-no-trigger"
           tooltip-placement="bottom"