Add issue due date to Jira issue details sidebar

- Always show the due date field
- Show "None" if no value is available
- Add "Past due" text if due date is in the past
- Show for both collapsed and expanded sidebar

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue

+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { dateInWords, getDayDifference, parsePikadayDate } from '~/lib/utils/datetime_utility';
+import { __ } from '~/locale';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+  },
+  props: {
+    dueDate: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    dueDateInWords() {
+      const date = parsePikadayDate(this.dueDate);
+
+      return dateInWords(date, true);
+    },
+    formattedDueDate() {
+      const today = new Date();
+      const date = parsePikadayDate(this.dueDate);
+      const isPastDue = getDayDifference(today, date) < 0;
+
+      let formattedDate = this.dueDateInWords;
+
+      if (isPastDue) {
+        formattedDate += ` (${__('Past due')})`;
+      }
+
+      return formattedDate;
+    },
+    dueDateTooltipProps() {
+      return {
+        boundary: 'viewport',
+        placement: 'left',
+        title: this.dueDate
+          ? `${this.$options.i18n.dueDateTitle}<br>${this.formattedDueDate}`
+          : this.$options.i18n.dueDateTitle,
+      };
+    },
+  },
+  i18n: {
+    dueDateTitle: __('Due date'),
+    none: __('None'),
+  },
+};
+</script>
+
+<template>
+  <div class="block">
+    <div v-gl-tooltip.html="dueDateTooltipProps" class="sidebar-collapsed-icon">
+      <gl-icon name="calendar" />
+      <span v-if="dueDate">{{ dueDateInWords }}</span>
+      <span v-else>{{ $options.i18n.none }}</span>
+    </div>
+
+    <div class="hide-collapsed">
+      <div class="title">{{ $options.i18n.dueDateTitle }}</div>
+      <div class="value">
+        <strong v-if="dueDate">{{ formattedDueDate }}</strong>
+        <span v-else class="no-value">{{ $options.i18n.none }}</span>
+      </div>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

@@ -3,12 +3,14 @@ import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import Assignee from './assignee.vue';
+import IssueDueDate from './issue_due_date.vue';
 import IssueReference from './issue_reference.vue';
 
 export default {
   name: 'JiraIssuesSidebar',
   components: {
     Assignee,
+    IssueDueDate,
     IssueReference,
     LabelsSelect,
   },
@@ -30,10 +32,10 @@ export default {
   computed: {
     assignee() {
       // Jira issues have at most 1 assignee
-      return (this.issue?.assignees || [])[0];
+      return (this.issue.assignees || [])[0];
     },
     reference() {
-      return this.issue?.references?.relative;
+      return this.issue.references?.relative;
     },
   },
   labelsFilterParam,
@@ -44,6 +46,8 @@ export default {
   <div>
     <assignee class="block" :assignee="assignee" />
 
+    <issue-due-date :due-date="issue.dueDate" />
+
     <labels-select
       :selected-labels="issue.labels"
       :labels-filter-base-path="issuesListPath"