Swimlanes - Show number of blocked issues in card

Update blocked issue icon tooltip to display number of blocking issues
for swimlanes and graphQL boards

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

@@ -3,7 +3,7 @@ import { sortBy } from 'lodash';
 import { mapState } from 'vuex';
 import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
-import { sprintf, __ } from '~/locale';
+import { sprintf, __, n__ } from '~/locale';
 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';
@@ -89,6 +89,12 @@ export default {
     orderedLabels() {
       return sortBy(this.issue.labels.filter(this.isNonListLabel), 'title');
     },
+    blockedLabel() {
+      if (this.issue.blockedByCount) {
+        return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.issue.blockedByCount);
+      }
+      return __('Blocked issue');
+    },
   },
   methods: {
     isIndexLessThanlimit(index) {
@@ -139,9 +145,10 @@ export default {
           v-if="issue.blocked"
           v-gl-tooltip
           name="issue-block"
-          :title="__('Blocked issue')"
+          :title="blockedLabel"
           class="issue-blocked-icon gl-mr-2"
-          :aria-label="__('Blocked issue')"
+          :aria-label="blockedLabel"
+          data-testid="issue-blocked-icon"
         />
         <gl-icon
           v-if="issue.confidential"

ee/app/assets/javascripts/boards/queries/issue.fragment.graphql

@@ -15,6 +15,7 @@ fragment IssueNode on Issue {
   webUrl
   subscribed
   blocked
+  blockedByCount
   relativePosition
   epic {
     id

ee/spec/frontend/boards/issue_card_spec.js

@@ -51,6 +51,8 @@ describe('Issue card component', () => {
       reference_path: '#1',
       real_path: '/test/1',
       weight: 1,
+      blocked: true,
+      blockedByCount: 2,
     });
   });
 
@@ -106,6 +108,35 @@ describe('Issue card component', () => {
     });
   });
 
+  describe('blocked', () => {
+    const findBlockedIcon = () => wrapper.find('[data-testid="issue-blocked-icon"');
+
+    it('shows blocked icon if issue is blocked, when blocked by multiple issues', () => {
+      createComponent();
+      const blockedIcon = findBlockedIcon();
+
+      expect(blockedIcon.exists()).toBe(true);
+      expect(blockedIcon.attributes('title')).toBe('Blocked by 2 issues');
+    });
+
+    it('shows blocked icon if issue is blocked, when blocked by one issue', () => {
+      issue.blockedByCount = 1;
+      createComponent();
+      const blockedIcon = findBlockedIcon();
+
+      expect(blockedIcon.exists()).toBe(true);
+      expect(blockedIcon.attributes('title')).toBe('Blocked by 1 issue');
+    });
+
+    it('does not show blocked icon if issue is not blocked', () => {
+      issue.blocked = false;
+      issue.blockedByCount = 0;
+      createComponent();
+
+      expect(findBlockedIcon().exists()).toBe(false);
+    });
+  });
+
   describe('weight', () => {
     it('shows weight component', () => {
       createComponent();

locale/gitlab.pot

@@ -4320,6 +4320,11 @@ msgstr ""
 msgid "Blocked"
 msgstr ""
 
+msgid "Blocked by %d issue"
+msgid_plural "Blocked by %d issues"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Blocked issue"
 msgstr ""