Add latest changes from gitlab-org/gitlab@master

4 files changed, 46 insertions, 10 deletions

diff --git a/app/assets/javascripts/boards/components/board_blocked_icon.vue b/app/assets/javascripts/boards/components/board_blocked_icon.vue
index 73b3db3b387..3f8a596abd8 100644
--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui';
 import { blockingIssuablesQueries, issuableTypes } from '~/boards/constants';
-import { TYPE_ISSUE } from '~/graphql_shared/constants';
+import { TYPE_ISSUE, TYPE_EPIC } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, n__, s__, sprintf } from '~/locale';
@@ -10,10 +10,12 @@ export default {
   i18n: {
     issuableType: {
       [issuableTypes.issue]: __('issue'),
+      [issuableTypes.epic]: __('epic'),
     },
   },
   graphQLIdType: {
     [issuableTypes.issue]: TYPE_ISSUE,
+    [issuableTypes.epic]: TYPE_EPIC,
   },
   referenceFormatter: {
     [issuableTypes.issue]: (r) => r.split('/')[1],
@@ -40,7 +42,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return [issuableTypes.issue].includes(value);
+        return [issuableTypes.issue, issuableTypes.epic].includes(value);
       },
     },
   },
@@ -53,14 +55,21 @@ export default {
         return blockingIssuablesQueries[this.issuableType].query;
       },
       variables() {
+        if (this.isEpic) {
+          return {
+            fullPath: this.item.group.fullPath,
+            iid: Number(this.item.iid),
+          };
+        }
         return {
           id: convertToGraphQLId(this.$options.graphQLIdType[this.issuableType], this.item.id),
         };
       },
       update(data) {
         this.skip = true;
+        const issuable = this.isEpic ? data?.group?.issuable : data?.issuable;
 
-        return data?.issuable?.blockingIssuables?.nodes || [];
+        return issuable?.blockingIssuables?.nodes || [];
       },
       error(error) {
         const message = sprintf(s__('Boards|Failed to fetch blocking %{issuableType}s'), {
@@ -77,13 +86,16 @@ export default {
     };
   },
   computed: {
+    isEpic() {
+      return this.issuableType === issuableTypes.epic;
+    },
     displayedIssuables() {
       const { defaultDisplayLimit, referenceFormatter } = this.$options;
       return this.blockingIssuables.slice(0, defaultDisplayLimit).map((i) => {
         return {
           ...i,
           title: truncate(i.title, this.$options.textTruncateWidth),
-          reference: referenceFormatter[this.issuableType](i.reference),
+          reference: this.isEpic ? i.reference : referenceFormatter[this.issuableType](i.reference),
         };
       });
     },
@@ -106,6 +118,9 @@ export default {
         },
       );
     },
+    blockIcon() {
+      return this.issuableType === issuableTypes.issue ? 'issue-block' : 'entity-blocked';
+    },
     glIconId() {
       return `blocked-icon-${this.uniqueId}`;
     },
@@ -153,7 +168,7 @@ export default {
     <gl-icon
       :id="glIconId"
       ref="icon"
-      name="issue-block"
+      :name="blockIcon"
       class="issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500"
       data-testid="issue-blocked-icon"
       @mouseenter="handleMouseEnter"
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index 098d429a62a..92a623d65d4 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -274,16 +274,16 @@ export default {
         class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden"
       >
         <gl-loading-icon v-if="item.isLoading" size="lg" class="gl-mt-5" />
-        <work-item-type-icon
-          v-if="showWorkItemTypeIcon"
-          :work-item-type="item.type"
-          show-tooltip-on-hover
-        />
         <span
           v-if="item.referencePath"
           class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3 gl-text-secondary"
           :class="{ 'gl-font-base': isEpicBoard }"
         >
+          <work-item-type-icon
+            v-if="showWorkItemTypeIcon"
+            :work-item-type="item.type"
+            show-tooltip-on-hover
+          />
           <tooltip-on-truncate
             v-if="showReferencePath"
             :title="itemReferencePath"
diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js
index d745eed556f..ed22a375271 100644
--- a/app/assets/javascripts/boards/constants.js
+++ b/app/assets/javascripts/boards/constants.js
@@ -3,6 +3,7 @@ import { __ } from '~/locale';
 import updateEpicSubscriptionMutation from '~/sidebar/queries/update_epic_subscription.mutation.graphql';
 import updateEpicTitleMutation from '~/sidebar/queries/update_epic_title.mutation.graphql';
 import boardBlockingIssuesQuery from './graphql/board_blocking_issues.query.graphql';
+import boardBlockingEpicsQuery from './graphql/board_blocking_epics.query.graphql';
 import destroyBoardListMutation from './graphql/board_list_destroy.mutation.graphql';
 import updateBoardListMutation from './graphql/board_list_update.mutation.graphql';
 
@@ -70,6 +71,9 @@ export const blockingIssuablesQueries = {
   [issuableTypes.issue]: {
     query: boardBlockingIssuesQuery,
   },
+  [issuableTypes.epic]: {
+    query: boardBlockingEpicsQuery,
+  },
 };
 
 export const updateListQueries = {
diff --git a/app/assets/javascripts/boards/graphql/board_blocking_epics.query.graphql b/app/assets/javascripts/boards/graphql/board_blocking_epics.query.graphql
new file mode 100644
index 00000000000..071a6d7410f
--- /dev/null
+++ b/app/assets/javascripts/boards/graphql/board_blocking_epics.query.graphql
@@ -0,0 +1,17 @@
+query BoardBlockingEpics($fullPath: ID!, $iid: ID) {
+  group(fullPath: $fullPath) {
+    id
+    issuable: epic(iid: $iid) {
+      id
+      blockingIssuables: blockedByEpics {
+        nodes {
+          id
+          iid
+          title
+          reference(full: true)
+          webUrl
+        }
+      }
+    }
+  }
+}