Merge branch 'tor/defect/vue-mr-list-merged-at-tooltip' into 'master'

Re-add missing merge date tooltip to Vue MR list page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/175458



Merged-by: Zack Cuddy <zcuddy@gitlab.com>
Approved-by: Lukas Wanko <lwanko@gitlab.com>
Approved-by: Zack Cuddy <zcuddy@gitlab.com>
Reviewed-by: Zack Cuddy <zcuddy@gitlab.com>
Reviewed-by: Lukas Wanko <lwanko@gitlab.com>
Co-authored-by: Thomas Randolph <trandolph@gitlab.com>

app/assets/javascripts/merge_requests/list/queries/merge_request.fragment.graphql

@@ -9,6 +9,7 @@ fragment MergeRequestFragment on MergeRequest {
   state
   title
   updatedAt
+  mergedAt
   upvotes
   resolvedDiscussionsCount @include(if: $isSignedIn)
   resolvableDiscussionsCount @include(if: $isSignedIn)

app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue

@@ -166,6 +166,9 @@ export default {
     isClosed() {
       return [STATUS_CLOSED, STATE_CLOSED].includes(this.issuable.state);
     },
+    statusTooltip() {
+      return this.issuable.mergedAt ? this.tooltipTitle(this.issuable.mergedAt) : '';
+    },
     timestamp() {
       return this.isClosed && this.issuable.closedAt
         ? this.issuable.closedAt
@@ -495,7 +498,12 @@ export default {
       <ul v-if="showIssuableMeta" class="controls gl-gap-3">
         <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
         <li v-if="$slots.status" data-testid="issuable-status" class="!gl-mr-0">
-          <gl-badge v-if="!isOpen" :variant="statusBadgeVariant">
+          <gl-badge
+            v-if="!isOpen"
+            v-gl-tooltip.top
+            :variant="statusBadgeVariant"
+            :title="statusTooltip"
+          >
             <slot name="status"></slot>
           </gl-badge>
           <slot v-else name="status"></slot>

spec/frontend/merge_requests/list/mock_data.js

@@ -21,6 +21,7 @@ export const getQueryResponse = {
             state: 'opened',
             title: 'Merge request title',
             updatedAt: '2021-05-22T04:08:01Z',
+            mergedAt: '2021-05-22T04:08:01Z',
             upvotes: 3,
             resolvedDiscussionsCount: 4,
             resolvableDiscussionsCount: 4,

spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js

@@ -546,6 +546,45 @@ describe('IssuableItem', () => {
         expect(statusEl.text()).toBe(`${closedMockIssuable.state}`);
       });
 
+      it('renders the mergedAt date as a tooltip of the status badge if the issuable has that value', () => {
+        const mergedMockIssuable = {
+          ...mockIssuable,
+          state: 'merged',
+          mergedAt: '2000-01-01T00:00:00Z',
+        };
+        wrapper = createComponent({
+          issuableSymbol: '!',
+          issuable: mergedMockIssuable,
+          slots: {
+            status: mergedMockIssuable.state,
+          },
+        });
+        const statusEl = findStatusEl();
+        const statusBadge = statusEl.findComponent(GlBadge);
+
+        expect(statusBadge.exists()).toBe(true);
+        expect(statusBadge.attributes('title')).toBe('January 1, 2000 at 12:00:00 AM GMT');
+      });
+
+      it('does not render a tooltip if the issuable doesn\t have a mergedAt value', () => {
+        const mergedMockIssuable = {
+          ...mockIssuable,
+          state: 'merged',
+        };
+        wrapper = createComponent({
+          issuableSymbol: '!',
+          issuable: mergedMockIssuable,
+          slots: {
+            status: mergedMockIssuable.state,
+          },
+        });
+        const statusEl = findStatusEl();
+        const statusBadge = statusEl.findComponent(GlBadge);
+
+        expect(statusBadge.exists()).toBe(true);
+        expect(statusBadge.attributes('title')).toBe('');
+      });
+
       it('renders issuable status without badge if open', () => {
         wrapper = createComponent({
           issuableSymbol: '#',