Add latest changes from gitlab-org/gitlab@master

5 files changed, 122 insertions, 18 deletions

diff --git a/app/assets/javascripts/issuable/popover/components/issue_popover.vue b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
new file mode 100644
index 00000000000..0cafaa1e500
--- /dev/null
+++ b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlPopover, GlSkeletonLoader } from '@gitlab/ui';
+import StatusBox from '~/issuable/components/status_box.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import query from '../queries/issue.query.graphql';
+
+export default {
+  components: {
+    GlPopover,
+    GlSkeletonLoader,
+    StatusBox,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    target: {
+      type: HTMLAnchorElement,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    iid: {
+      type: String,
+      required: true,
+    },
+    cachedTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      issue: {},
+    };
+  },
+  computed: {
+    formattedTime() {
+      return this.timeFormatted(this.issue.createdAt);
+    },
+    title() {
+      return this.issue?.title || this.cachedTitle;
+    },
+    showDetails() {
+      return Object.keys(this.issue).length > 0;
+    },
+  },
+  apollo: {
+    issue: {
+      query,
+      update: (data) => data.project.issue,
+      variables() {
+        const { projectPath, iid } = this;
+
+        return {
+          projectPath,
+          iid,
+        };
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover :target="target" boundary="viewport" placement="top" show>
+    <gl-skeleton-loader v-if="$apollo.queries.issue.loading" :height="15">
+      <rect width="250" height="15" rx="4" />
+    </gl-skeleton-loader>
+    <div v-else-if="showDetails" class="gl-display-flex gl-align-items-center">
+      <status-box issuable-type="issue" :initial-state="issue.state" />
+      <span class="gl-text-secondary">
+        {{ __('Opened') }} <time :datetime="issue.createdAt">{{ formattedTime }}</time>
+      </span>
+    </div>
+    <h5 v-if="!$apollo.queries.issue.loading" class="gl-my-3">{{ title }}</h5>
+    <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+    <div class="gl-text-secondary">
+      {{ `${projectPath}#${iid}` }}
+    </div>
+    <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+  </gl-popover>
+</template>
diff --git a/app/assets/javascripts/issuable/popover/components/mr_popover.vue b/app/assets/javascripts/issuable/popover/components/mr_popover.vue
index f467d7e93b1..8573dd702a6 100644
--- a/app/assets/javascripts/issuable/popover/components/mr_popover.vue
+++ b/app/assets/javascripts/issuable/popover/components/mr_popover.vue
@@ -25,11 +25,11 @@ export default {
       type: String,
       required: true,
     },
-    mergeRequestIID: {
+    iid: {
       type: String,
       required: true,
     },
-    mergeRequestTitle: {
+    cachedTitle: {
       type: String,
       required: true,
     },
@@ -67,7 +67,7 @@ export default {
       }
     },
     title() {
-      return this.mergeRequest?.title || this.mergeRequestTitle;
+      return this.mergeRequest?.title || this.cachedTitle;
     },
     showDetails() {
       return Object.keys(this.mergeRequest).length > 0;
@@ -78,11 +78,11 @@ export default {
       query,
       update: (data) => data.project.mergeRequest,
       variables() {
-        const { projectPath, mergeRequestIID } = this;
+        const { projectPath, iid } = this;
 
         return {
           projectPath,
-          mergeRequestIID,
+          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}!${mergeRequestIID}` }}
+        {{ `${projectPath}!${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 1f0a00bc286..a09aae00aeb 100644
--- a/app/assets/javascripts/issuable/popover/index.js
+++ b/app/assets/javascripts/issuable/popover/index.js
@@ -1,8 +1,14 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import IssuePopover from './components/issue_popover.vue';
 import MRPopover from './components/mr_popover.vue';
 
+const componentsByReferenceType = {
+  issue: IssuePopover,
+  merge_request: MRPopover,
+};
+
 let renderedPopover;
 let renderFn;
 
@@ -22,20 +28,24 @@ const handleIssuablePopoverMouseOut = ({ target }) => {
  * 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 = ({ apolloProvider, projectPath, title, iid }) => ({
-  target,
-}) => {
+const handleIssuablePopoverMount = ({
+  apolloProvider,
+  projectPath,
+  title,
+  iid,
+  referenceType,
+}) => ({ target }) => {
   // Add listener to actually remove it again
   target.addEventListener('mouseleave', handleIssuablePopoverMouseOut);
 
   renderFn = setTimeout(() => {
-    const MRPopoverComponent = Vue.extend(MRPopover);
-    renderedPopover = new MRPopoverComponent({
+    const PopoverComponent = Vue.extend(componentsByReferenceType[referenceType]);
+    renderedPopover = new PopoverComponent({
       propsData: {
         target,
         projectPath,
-        mergeRequestIID: iid,
-        mergeRequestTitle: title,
+        iid,
+        cachedTitle: title,
       },
       apolloProvider,
     });
@@ -54,13 +64,13 @@ export default (elements) => {
     const listenerAddedAttr = 'data-popover-listener-added';
 
     elements.forEach((el) => {
-      const { projectPath, iid } = el.dataset;
+      const { projectPath, iid, referenceType } = el.dataset;
       const title = el.dataset.mrTitle || el.title;
 
-      if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid) {
+      if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid && referenceType) {
         el.addEventListener(
           'mouseenter',
-          handleIssuablePopoverMount({ apolloProvider, projectPath, title, iid }),
+          handleIssuablePopoverMount({ apolloProvider, projectPath, title, iid, referenceType }),
         );
         el.setAttribute(listenerAddedAttr, true);
       }
diff --git a/app/assets/javascripts/issuable/popover/queries/issue.query.graphql b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql
new file mode 100644
index 00000000000..47a62e2b6ea
--- /dev/null
+++ b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql
@@ -0,0 +1,11 @@
+query issue($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    id
+    issue(iid: $iid) {
+      id
+      title
+      createdAt
+      state
+    }
+  }
+}
diff --git a/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql
index b3e5d89d495..7cd344c1d5e 100644
--- a/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql
+++ b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql
@@ -1,7 +1,7 @@
-query mergeRequest($projectPath: ID!, $mergeRequestIID: String!) {
+query mergeRequest($projectPath: ID!, $iid: String!) {
   project(fullPath: $projectPath) {
     id
-    mergeRequest(iid: $mergeRequestIID) {
+    mergeRequest(iid: $iid) {
       id
       title
       createdAt