Show blocked icon on epic blocked issues

Changelog: added
EE: true

app/graphql/queries/epic/epic_children.query.graphql

@@ -89,6 +89,7 @@ query childItems(
             iid
             epicIssueId
             title
+            blocked
             closedAt
             state
             createdAt

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -66,6 +66,9 @@ export default {
     isOpen() {
       return this.item.state === ChildState.Open;
     },
+    isBlocked() {
+      return this.item.blocked;
+    },
     isClosed() {
       return this.item.state === ChildState.Closed;
     },
@@ -85,9 +88,15 @@ export default {
       if (this.item.type === ChildType.Epic) {
         return this.isOpen ? 'epic' : 'epic-closed';
       }
+      if (this.isBlocked && this.isOpen) {
+        return 'issue-block';
+      }
       return this.isOpen ? 'issues' : 'issue-closed';
     },
     stateIconClass() {
+      if (this.isBlocked && this.isOpen) {
+        return 'gl-text-red-500';
+      }
       return this.isOpen
         ? 'issue-token-state-icon-open gl-text-green-500'
         : 'issue-token-state-icon-closed gl-text-blue-500';

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -142,6 +142,18 @@ describe('RelatedItemsTree', () => {
         });
       });
 
+      describe('isBlocked', () => {
+        it('returns true when `item.blocked` value is `true`', () => {
+          wrapper.setProps({
+            item: { ...mockItem, blocked: true },
+          });
+
+          return wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.isBlocked).toBe(true);
+          });
+        });
+      });
+
       describe('isClosed', () => {
         it('returns true when `item.state` value is `closed`', () => {
           wrapper.setProps({
@@ -199,6 +211,16 @@ describe('RelatedItemsTree', () => {
           });
         });
 
+        it('return string `gl-text-red-500` when `item.blocked` value is `true`', () => {
+          wrapper.setProps({
+            item: { ...mockItem, blocked: true },
+          });
+
+          return wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.stateIconClass).toBe('gl-text-red-500');
+          });
+        });
+
         it('returns string `issue-token-state-icon-closed gl-text-blue-500` when `item.state` value is `closed`', () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Closed },