1 files changed, 50 insertions, 4 deletions
diff --git a/app/assets/javascripts/issuable/popover/components/issue_popover.vue b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
index 0cafaa1e500..945a3782642 100644
--- a/app/assets/javascripts/issuable/popover/components/issue_popover.vue
+++ b/app/assets/javascripts/issuable/popover/components/issue_popover.vue
@@ -1,14 +1,26 @@
 <script>
-import { GlPopover, GlSkeletonLoader } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlSkeletonLoader, GlTooltipDirective } from '@gitlab/ui';
+import query from 'ee_else_ce/issuable/popover/queries/issue.query.graphql';
+import IssueDueDate from '~/boards/components/issue_due_date.vue';
+import IssueMilestone from '~/issuable/components/issue_milestone.vue';
 import StatusBox from '~/issuable/components/status_box.vue';
+import { IssuableStatus } from '~/issues/constants';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import query from '../queries/issue.query.graphql';
+import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 
 export default {
   components: {
+    GlIcon,
     GlPopover,
     GlSkeletonLoader,
+    IssueDueDate,
+    IssueMilestone,
+    IssueWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
     StatusBox,
+    WorkItemTypeIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
   props: {
@@ -44,6 +56,9 @@ export default {
     showDetails() {
       return Object.keys(this.issue).length > 0;
     },
+    isIssueClosed() {
+      return this.issue?.state === IssuableStatus.Closed;
+    },
   },
   apollo: {
     issue: {
@@ -69,15 +84,46 @@ export default {
     </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" />
+      <gl-icon
+        v-if="issue.confidential"
+        v-gl-tooltip
+        name="eye-slash"
+        :title="__('Confidential')"
+        class="gl-text-orange-500 gl-mr-2"
+        :aria-label="__('Confidential')"
+      />
       <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>
+      <work-item-type-icon v-if="!$apollo.queries.issue.loading" :work-item-type="issue.type" />
+      <span class="gl-text-secondary">{{ `${projectPath}#${iid}` }}</span>
     </div>
     <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+
+    <div v-if="!$apollo.queries.issue.loading" class="gl-display-flex gl-text-secondary gl-mt-2">
+      <issue-due-date
+        v-if="issue.dueDate"
+        :date="issue.dueDate.toString()"
+        :closed="isIssueClosed"
+        tooltip-placement="top"
+        class="gl-mr-4"
+        css-class="gl-display-flex gl-white-space-nowrap"
+      />
+      <issue-weight
+        v-if="issue.weight"
+        :weight="issue.weight"
+        tag-name="span"
+        class="gl-display-flex gl-mr-4"
+      />
+      <issue-milestone
+        v-if="issue.milestone"
+        :milestone="issue.milestone"
+        class="gl-display-flex gl-overflow-hidden"
+      />
+    </div>
   </gl-popover>
 </template>