Add blocked icon on issue board card

- Blocked issue displays icon on board
- Documentation

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

@@ -161,6 +161,14 @@ export default {
   <div>
     <div class="d-flex board-card-header" dir="auto">
       <h4 class="board-card-title append-bottom-0 prepend-top-0">
+        <icon
+          v-if="issue.blocked"
+          v-gl-tooltip
+          name="issue-block"
+          :title="__('Blocked issue')"
+          class="issue-blocked-icon append-right-4"
+          :aria-label="__('Blocked issue')"
+        />
         <icon
           v-if="issue.confidential"
           v-gl-tooltip

app/assets/javascripts/boards/models/issue.js

@@ -37,6 +37,7 @@ class ListIssue {
     this.project_id = obj.project_id;
     this.timeEstimate = obj.time_estimate;
     this.assignableLabelsEndpoint = obj.assignable_labels_endpoint;
+    this.blocked = obj.blocked;
 
     if (obj.project) {
       this.project = new IssueProject(obj.project);

app/assets/stylesheets/pages/boards.scss

@@ -287,6 +287,10 @@
     cursor: help;
   }
 
+  .issue-blocked-icon {
+    color: $red-500;
+  }
+
   @include media-breakpoint-down(md) {
     padding: $gl-padding-8;
   }

changelogs/unreleased/34723-visually-differentiate-blocked-issues.yml

+---
+title: Add blocked icon on issue board card
+merge_request: 24420
+author:
+type: added

doc/user/project/issue_board.md

@@ -303,6 +303,14 @@ Different issue board features are available in different [GitLab tiers](https:/
 | Premium / Silver | Multiple                       | Multiple                     | Yes                       | Yes            |
 | Ultimate / Gold | Multiple                       | Multiple                     | Yes                       | Yes            |
 
+## Blocked issues
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/34723) in GitLab 12.8.
+
+If an issue is blocked by another issue, an icon will display next to its title to differentiate it from unblocked issues.
+
+![Blocked issues](img/issue_boards_blocked_icon_v12_8.png)
+
 ## Actions you can take on an Issue Board
 
 - [Create a new list](#creating-a-new-list).

locale/gitlab.pot

@@ -2768,6 +2768,9 @@ msgstr ""
 msgid "Blocked"
 msgstr ""
 
+msgid "Blocked issue"
+msgstr ""
+
 msgid "Blocks"
 msgstr ""
 

spec/frontend/boards/issue_card_spec.js

@@ -66,7 +66,11 @@ describe('Issue card component', () => {
   });
 
   it('does not render confidential icon', () => {
-    expect(wrapper.find('.fa-eye-flash').exists()).toBe(false);
+    expect(wrapper.find('.confidential-icon').exists()).toBe(false);
+  });
+
+  it('does not render blocked icon', () => {
+    expect(wrapper.find('.issue-blocked-icon').exists()).toBe(false);
   });
 
   it('renders confidential icon', done => {
@@ -324,4 +328,20 @@ describe('Issue card component', () => {
         .catch(done.fail);
     });
   });
+
+  describe('blocked', () => {
+    beforeEach(done => {
+      wrapper.setProps({
+        issue: {
+          ...wrapper.props('issue'),
+          blocked: true,
+        },
+      });
+      wrapper.vm.$nextTick(done);
+    });
+
+    it('renders blocked icon if issue is blocked', () => {
+      expect(wrapper.find('.issue-blocked-icon').exists()).toBe(true);
+    });
+  });
 });