Add latest changes from gitlab-org/gitlab@master

4 files changed, 44 insertions, 33 deletions

diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue
index 799c0a18444..a83884dd261 100644
--- a/app/assets/javascripts/issuable/components/status_box.vue
+++ b/app/assets/javascripts/issuable/components/status_box.vue
@@ -4,7 +4,13 @@ import Vue from 'vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
 import { __ } from '~/locale';
-import { STATUS_CLOSED, STATUS_OPEN, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
+import {
+  STATUS_CLOSED,
+  STATUS_OPEN,
+  TYPE_ISSUE,
+  TYPE_MERGE_REQUEST,
+  TYPE_EPIC,
+} from '~/issues/constants';
 
 export const badgeState = Vue.observable({
   state: '',
@@ -18,17 +24,22 @@ const CLASSES = {
   merged: 'issuable-status-badge-merged',
 };
 
-const ISSUE_ICONS = {
-  opened: 'issues',
-  locked: 'issues',
-  closed: 'issue-closed',
-};
-
-const MERGE_REQUEST_ICONS = {
-  opened: 'merge-request-open',
-  locked: 'merge-request-open',
-  closed: 'merge-request-close',
-  merged: 'merge',
+const ICONS = {
+  [TYPE_EPIC]: {
+    opened: 'epic',
+    closed: 'epic-closed',
+  },
+  [TYPE_ISSUE]: {
+    opened: 'issues',
+    locked: 'issues',
+    closed: 'issue-closed',
+  },
+  [TYPE_MERGE_REQUEST]: {
+    opened: 'merge-request-open',
+    locked: 'merge-request-open',
+    closed: 'merge-request-close',
+    merged: 'merge',
+  },
 };
 
 const STATUS = {
@@ -91,10 +102,8 @@ export default {
       return STATUS[this.state];
     },
     badgeIcon() {
-      if (this.issuableType === TYPE_ISSUE) {
-        return ISSUE_ICONS[this.state];
-      }
-      return MERGE_REQUEST_ICONS[this.state];
+      const type = this.issuableType || TYPE_MERGE_REQUEST;
+      return ICONS[type][this.state];
     },
   },
   created() {
diff --git a/app/assets/javascripts/issuable/popover/components/issue_popover.vue b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
index 55fb3958e82..044a1bba7ad 100644
--- a/app/assets/javascripts/issuable/popover/components/issue_popover.vue
+++ b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
@@ -28,7 +28,7 @@ export default {
       type: HTMLAnchorElement,
       required: true,
     },
-    projectPath: {
+    namespacePath: {
       type: String,
       required: true,
     },
@@ -65,10 +65,10 @@ export default {
       query,
       update: (data) => data.project.issue,
       variables() {
-        const { projectPath, iid } = this;
+        const { namespacePath, iid } = this;
 
         return {
-          projectPath,
+          projectPath: namespacePath,
           iid,
         };
       },
@@ -100,7 +100,7 @@ export default {
     <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
     <div>
       <work-item-type-icon v-if="!$apollo.queries.issue.loading" :work-item-type="issue.type" />
-      <span class="gl-text-secondary">{{ `${projectPath}#${iid}` }}</span>
+      <span class="gl-text-secondary">{{ `${namespacePath}#${iid}` }}</span>
     </div>
     <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
 
diff --git a/app/assets/javascripts/issuable/popover/components/mr_popover.vue b/app/assets/javascripts/issuable/popover/components/mr_popover.vue
index af93430963e..e2c2181684f 100644
--- a/app/assets/javascripts/issuable/popover/components/mr_popover.vue
+++ b/app/assets/javascripts/issuable/popover/components/mr_popover.vue
@@ -19,7 +19,7 @@ export default {
       type: HTMLAnchorElement,
       required: true,
     },
-    projectPath: {
+    namespacePath: {
       type: String,
       required: true,
     },
@@ -76,10 +76,10 @@ export default {
       query,
       update: (data) => data.project.mergeRequest,
       variables() {
-        const { projectPath, iid } = this;
+        const { namespacePath, iid } = this;
 
         return {
-          projectPath,
+          projectPath: namespacePath,
           iid,
         };
       },
@@ -108,7 +108,7 @@ export default {
       <h5 v-if="!$apollo.queries.mergeRequest.loading" class="my-2">{{ title }}</h5>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
       <div class="gl-text-secondary">
-        {{ `${projectPath}!${iid}` }}
+        {{ `${namespacePath}!${iid}` }}
       </div>
       <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
     </div>
diff --git a/app/assets/javascripts/issuable/popover/index.js b/app/assets/javascripts/issuable/popover/index.js
index 9430419685b..58f015fe40e 100644
--- a/app/assets/javascripts/issuable/popover/index.js
+++ b/app/assets/javascripts/issuable/popover/index.js
@@ -4,7 +4,7 @@ import createDefaultClient from '~/lib/graphql';
 import IssuePopover from './components/issue_popover.vue';
 import MRPopover from './components/mr_popover.vue';
 
-const componentsByReferenceType = {
+export const componentsByReferenceTypeMap = {
   issue: IssuePopover,
   work_item: IssuePopover,
   merge_request: MRPopover,
@@ -26,9 +26,10 @@ const popoverMountedAttr = 'data-popover-mounted';
  * Adds a MergeRequestPopover component to the body, hands over as much data as the target element has in data attributes.
  * loads based on data-project-path and data-iid more data about an MR from the API and sets it on the popover
  */
-const handleIssuablePopoverMount = ({
+export const handleIssuablePopoverMount = ({
+  componentsByReferenceType = componentsByReferenceTypeMap,
   apolloProvider,
-  projectPath,
+  namespacePath,
   title,
   iid,
   referenceType,
@@ -42,7 +43,7 @@ const handleIssuablePopoverMount = ({
     new PopoverComponent({
       propsData: {
         target,
-        projectPath,
+        namespacePath,
         iid,
         cachedTitle: title,
       },
@@ -53,7 +54,7 @@ const handleIssuablePopoverMount = ({
   }, 200); // 200ms delay so not every mouseover triggers Popover + API Call
 };
 
-export default (elements) => {
+export default (elements, issuablePopoverMount = handleIssuablePopoverMount) => {
   if (elements.length > 0) {
     Vue.use(VueApollo);
 
@@ -63,15 +64,16 @@ export default (elements) => {
     const listenerAddedAttr = 'data-popover-listener-added';
 
     elements.forEach((el) => {
-      const { projectPath, iid, referenceType } = el.dataset;
+      const { projectPath, groupPath, iid, referenceType } = el.dataset;
       const title = el.dataset.mrTitle || el.title;
+      const namespacePath = groupPath || projectPath;
 
-      if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid && referenceType) {
+      if (!el.getAttribute(listenerAddedAttr) && namespacePath && title && iid && referenceType) {
         el.addEventListener('mouseenter', ({ target }) => {
           if (!el.getAttribute(popoverMountedAttr)) {
-            handleIssuablePopoverMount({
+            issuablePopoverMount({
               apolloProvider,
-              projectPath,
+              namespacePath,
               title,
               iid,
               referenceType,