Merge branch '10893-hide-redundant-labels-in-issue-boards' into 'master'

Resolve "Hide redundant labels in issue boards"

See merge request gitlab-org/gitlab!17937

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;',
   },