Merge branch 'issue-boards-closed-shows-empty-label' into 'master'

Fixed issue boards closed list displaying empty label

Closes #36650

See merge request !13658

2 files changed, 20 insertions, 1 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index d3de1830895..9a5d87ede7e 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -97,7 +97,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       return `Avatar for ${assignee.name}`;
     },
     showLabel(label) {
-      if (!this.list || !label) return true;
+      if (!label.id) return false;
       return true;
     },
     filterByLabel(label, e) {
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index 69cfcbbce5a..47aaa57e6b9 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -278,6 +278,25 @@ describe('Issue card component', () => {
           nodes.includes(label1.color),
         ).toBe(true);
       });
+
+      it('does not render label if label does not have an ID', (done) => {
+        component.issue.addLabel(new ListLabel({
+          title: 'closed',
+        }));
+
+        Vue.nextTick()
+          .then(() => {
+            expect(
+              component.$el.querySelectorAll('.label').length,
+            ).toBe(2);
+            expect(
+              component.$el.textContent,
+            ).not.toContain('closed');
+
+            done();
+          })
+          .catch(done.fail);
+      });
     });
   });
 });