Fix due date tooltip on milestone in sidebar

Changelog: fixed

app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

@@ -13,6 +13,7 @@ import {
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
+import { timeFor } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import {
@@ -204,6 +205,9 @@ export default {
     attributeTypeIcon() {
       return this.icon || this.issuableAttribute;
     },
+    tooltipText() {
+      return timeFor(this.currentAttribute?.dueDate);
+    },
     i18n() {
       return {
         noAttribute: sprintf(s__('DropdownWidget|No %{issuableAttribute}'), {
@@ -346,6 +350,7 @@ export default {
           :currentAttribute="currentAttribute"
         >
           <gl-link
+            v-gl-tooltip="tooltipText"
             class="gl-text-gray-900! gl-font-weight-bold"
             :href="attributeUrl"
             :data-qa-selector="`${issuableAttribute}_link`"

app/assets/javascripts/sidebar/queries/milestone.fragment.graphql

@@ -2,5 +2,6 @@ fragment MilestoneFragment on Milestone {
   id
   title
   webUrl: webPath
+  dueDate
   expired
 }

ee/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

@@ -19,6 +19,7 @@ export default {
     [IssuableAttributeType.Iteration]: __('Iteration'),
     [IssuableAttributeType.Epic]: __('Epic'),
     none: __('None'),
+    expired: __('(expired)'),
   },
   props: {
     issuableAttribute: {

spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

@@ -12,11 +12,13 @@ import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
+import { timeFor } from '~/lib/utils/datetime_utility';
 import SidebarDropdownWidget from '~/sidebar/components/sidebar_dropdown_widget.vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import { IssuableAttributeType } from '~/sidebar/constants';
@@ -54,6 +56,7 @@ describe('SidebarDropdownWidget', () => {
   const mutationSuccessWithErrors = () => jest.fn().mockResolvedValue({ data: promiseWithErrors });
 
   const findGlLink = () => wrapper.findComponent(GlLink);
+  const findDateTooltip = () => getBinding(findGlLink().element, 'gl-tooltip');
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownText = () => wrapper.findComponent(GlDropdownText);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
@@ -155,6 +158,9 @@ describe('SidebarDropdownWidget', () => {
             },
           },
         },
+        directives: {
+          GlTooltip: createMockDirective(),
+        },
         stubs: {
           SidebarEditableItem,
           GlSearchBoxByType,
@@ -177,7 +183,7 @@ describe('SidebarDropdownWidget', () => {
     beforeEach(() => {
       createComponent({
         data: {
-          currentAttribute: { id: 'id', title: 'title', webUrl: 'webUrl' },
+          currentAttribute: { id: 'id', title: 'title', webUrl: 'webUrl', dueDate: '2021-09-09' },
         },
         stubs: {
           GlDropdown,
@@ -223,6 +229,10 @@ describe('SidebarDropdownWidget', () => {
       expect(findSelectedAttribute().text()).toBe('Some milestone title');
     });
 
+    it('displays time for milestone due date in tooltip', () => {
+      expect(findDateTooltip().value).toBe(timeFor('2021-09-09'));
+    });
+
     describe('when current attribute does not exist', () => {
       it('renders "None" as the selected attribute title', () => {
         createComponent();

spec/frontend/sidebar/mock_data.js

@@ -562,6 +562,7 @@ export const mockMilestone1 = {
   webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/milestones/1',
   state: 'active',
   expired: false,
+  dueDate: '2030-09-09',
 };
 
 export const mockMilestone2 = {
@@ -571,6 +572,7 @@ export const mockMilestone2 = {
   webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/milestones/2',
   state: 'active',
   expired: false,
+  dueDate: '2030-09-09',
 };
 
 export const mockProjectMilestonesResponse = {
@@ -618,6 +620,7 @@ export const mockMilestoneMutationResponse = {
           title: 'Awesome Milestone',
           state: 'active',
           expired: false,
+          dueDate: '2030-09-09',
           __typename: 'Milestone',
         },
         __typename: 'Issue',