Hide redundant labels in issue boards

Before in issue boards, a card showed labels including the list label.
The list label is redundant since you can see the list label at the top
of the card collection and adds noise. This commit removes list labels
from inside list label cards.

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -99,7 +99,10 @@ export default {
       return !groupId ? referencePath.split('#')[0] : null;
     },
     orderedLabels() {
-      return _.sortBy(this.issue.labels, 'title');
+      return _.chain(this.issue.labels)
+        .filter(this.isNonListLabel)
+        .sortBy('title')
+        .value();
     },
     helpLink() {
       return boardsStore.scopedLabels.helpLink;
@@ -130,6 +133,9 @@ export default {
       if (!label.id) return false;
       return true;
     },
+    isNonListLabel(label) {
+      return label.id && !(this.list.type === 'label' && this.list.title === label.title);
+    },
     filterByLabel(label) {
       if (!this.updateFilters) return;
       const labelTitle = encodeURIComponent(label.title);
@@ -167,7 +173,7 @@ export default {
       </h4>
     </div>
     <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
-      <template v-for="label in orderedLabels" v-if="showLabel(label)">
+      <template v-for="label in orderedLabels">
         <issue-card-inner-scoped-label
           v-if="showScopedLabel(label)"
           :key="label.id"

changelogs/unreleased/10893-hide-redundant-labels-in-issue-boards.yml

+---
+title: Hide redundant labels in issue boards
+merge_request: 17937
+author:
+type: fixed

spec/features/boards/boards_spec.rb

@@ -251,7 +251,7 @@ describe 'Issue Boards', :js do
         expect(page).to have_selector(selector, text: development.title, count: 1)
       end
 
-      it 'issue moves between lists' do
+      it 'issue moves between lists and does not show the "Development" label since the card is in the "Development" list label' do
         drag(list_from_index: 1, from_index: 1, list_to_index: 2)
 
         wait_for_board_cards(2, 7)
@@ -259,10 +259,10 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(3)')).to have_content(issue6.title)
-        expect(find('.board:nth-child(3)').all('.board-card').last).to have_content(development.title)
+        expect(find('.board:nth-child(3)').all('.board-card').last).not_to have_content(development.title)
       end
 
-      it 'issue moves between lists' do
+      it 'issue moves between lists and does not show the "Planning" label since the card is in the "Planning" list label' do
         drag(list_from_index: 2, list_to_index: 1)
 
         wait_for_board_cards(2, 9)
@@ -270,7 +270,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(2)')).to have_content(issue7.title)
-        expect(find('.board:nth-child(2)').all('.board-card').first).to have_content(planning.title)
+        expect(find('.board:nth-child(2)').all('.board-card').first).not_to have_content(planning.title)
       end
 
       it 'issue moves from closed' do

spec/features/boards/sidebar_spec.rb

@@ -304,7 +304,8 @@ describe 'Issue Boards', :js do
         end
       end
 
-      expect(card).to have_selector('.badge', count: 3)
+      # 'Development' label does not show since the card is in a 'Development' list label
+      expect(card).to have_selector('.badge', count: 2)
       expect(card).to have_content(bug.title)
     end
 
@@ -330,7 +331,8 @@ describe 'Issue Boards', :js do
         end
       end
 
-      expect(card).to have_selector('.badge', count: 4)
+      # 'Development' label does not show since the card is in a 'Development' list label
+      expect(card).to have_selector('.badge', count: 3)
       expect(card).to have_content(bug.title)
       expect(card).to have_content(regression.title)
     end
@@ -357,7 +359,8 @@ describe 'Issue Boards', :js do
         end
       end
 
-      expect(card).to have_selector('.badge', count: 1)
+      # 'Development' label does not show since the card is in a 'Development' list label
+      expect(card).to have_selector('.badge', count: 0)
       expect(card).not_to have_content(stretch.title)
     end
 

spec/javascripts/boards/issue_card_spec.js

@@ -32,7 +32,10 @@ describe('Issue card component', () => {
   beforeEach(() => {
     setFixtures('<div class="test-container"></div>');
 
-    list = listObj;
+    list = {
+      ...listObj,
+      type: 'label',
+    };
     issue = new ListIssue({
       title: 'Testing',
       id: 1,
@@ -241,8 +244,8 @@ describe('Issue card component', () => {
       Vue.nextTick(() => done());
     });
 
-    it('renders list label', () => {
-      expect(component.$el.querySelectorAll('.badge').length).toBe(2);
+    it('does not render list label but renders all other labels', () => {
+      expect(component.$el.querySelectorAll('.badge').length).toBe(1);
     });
 
     it('renders label', () => {
@@ -278,7 +281,7 @@ describe('Issue card component', () => {
 
       Vue.nextTick()
         .then(() => {
-          expect(component.$el.querySelectorAll('.badge').length).toBe(2);
+          expect(component.$el.querySelectorAll('.badge').length).toBe(1);
           expect(component.$el.textContent).not.toContain('closed');
 
           done();

spec/javascripts/boards/mock_data.js

@@ -15,7 +15,7 @@ export const listObj = {
   weight: 3,
   label: {
     id: 5000,
-    title: 'Testing',
+    title: 'Test',
     color: 'red',
     description: 'testing;',
     textColor: 'white',
@@ -30,7 +30,7 @@ export const listObjDuplicate = {
   weight: 3,
   label: {
     id: listObj.label.id,
-    title: 'Testing',
+    title: 'Test',
     color: 'red',
     description: 'testing;',
   },