Fix tooltip title and date for Merged state

Pass merged_at state to component, format and display
proper merged date in the tooltip.

app/assets/javascripts/issue_show/utils/parse_data.js

@@ -6,6 +6,8 @@ export const parseIssuableData = () => {
 
     return JSON.parse(sanitize(initialDataEl.textContent).replace(/"/g, '"'));
   } catch (e) {
+    console.error(e); // eslint-disable-line no-console
+
     return {};
   }
 };

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -30,14 +30,14 @@ export default {
   computed: {
     ...mapState(['isFetchingMergeRequests', 'mergeRequests', 'totalCount']),
     closingMergeRequestsText() {
-      if (this.closingMergeRequestsCount === 0) {
+      if (!this.hasClosingMergeRequest) {
         return '';
       }
 
       const mrText = n__(
         'When this merge request is accepted',
         'When these merge requests are accepted',
-        this.closingMergeRequestsCount,
+        this.totalCount,
       );
 
       return sprintf(s__('%{mrText}, this issue will be closed automatically.'), { mrText });
@@ -48,7 +48,7 @@ export default {
     this.fetchMergeRequests();
   },
   created() {
-    this.closingMergeRequestsCount = parseIssuableData().closingMergeRequestsCount;
+    this.hasClosingMergeRequest = parseIssuableData().hasClosingMergeRequest;
   },
   methods: {
     ...mapActions(['setInitialState', 'fetchMergeRequests']),
@@ -64,14 +64,14 @@ export default {
 </script>
 
 <template>
-  <div v-if="totalCount">
+  <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
     <div id="merge-requests" class="card-slim mt-3">
       <div class="card-header">
         <div class="card-title mt-0 mb-0 h5 merge-requests-title">
           <span class="mr-1">
             {{ __('Related merge requests') }}
           </span>
-          <div class="d-inline-flex lh-100 align-middle">
+          <div v-if="totalCount" class="d-inline-flex lh-100 align-middle">
             <div class="mr-count-badge">
               <div class="mr-count-badge-count">
                 <svg class="s16 mr-1 text-secondary">
@@ -100,6 +100,7 @@ export default {
               :assignees="getAssignees(mr)"
               :created-at="mr.created_at"
               :closed-at="mr.closed_at"
+              :merged-at="mr.merged_at"
               :path="mr.web_url"
               :state="mr.state"
               :is-merge-request="true"
@@ -110,7 +111,10 @@ export default {
         </ul>
       </div>
     </div>
-    <div class="issue-closed-by-widget second-block">
+    <div
+      v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
+      class="issue-closed-by-widget second-block"
+    >
       {{ closingMergeRequestsText }}
     </div>
   </div>

app/assets/javascripts/related_merge_requests/store/actions.js

 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
+import { normalizeHeaders } from '~/lib/utils/common_utils';
 import * as types from './mutation_types';
-import { normalizeHeaders } from '../../lib/utils/common_utils';
 
 const REQUEST_PAGE_COUNT = 100;
 
@@ -23,7 +23,7 @@ export const fetchMergeRequests = ({ state, dispatch }) => {
     .get(`${state.apiEndpoint}?per_page=${REQUEST_PAGE_COUNT}`)
     .then(res => {
       const { headers, data } = res;
-      const total = parseInt(normalizeHeaders(headers)['X-TOTAL'], 10) || 0;
+      const total = Number(normalizeHeaders(headers)['X-TOTAL']) || 0;
 
       dispatch('receiveDataSuccess', { data, total });
     })

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { sprintf } from '~/locale';
 import IssueMilestone from '../../components/issue/issue_milestone.vue';
 import IssueAssignees from '../../components/issue/issue_assignees.vue';
 import relatedIssuableMixin from '../../mixins/related_issuable_mixin';
@@ -29,9 +29,9 @@ export default {
       return sprintf(
         '<span class="bold">%{state}</span> %{timeInWords}<br/><span class="text-tertiary">%{timestamp}</span>',
         {
-          state: this.isOpen ? __('Opened') : __('Closed'),
-          timeInWords: this.isOpen ? this.createdAtInWords : this.closedAtInWords,
-          timestamp: this.isOpen ? this.createdAtTimestamp : this.closedAtTimestamp,
+          state: this.stateText,
+          timeInWords: this.stateTimeInWords,
+          timestamp: this.stateTimestamp,
         },
       );
     },

app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js

@@ -59,6 +59,11 @@ const mixins = {
       required: false,
       default: '',
     },
+    mergedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
     milestone: {
       type: Object,
       required: false,
@@ -156,12 +161,39 @@ const mixins = {
     createdAtTimestamp() {
       return this.createdAt ? formatDate(new Date(this.createdAt)) : '';
     },
+    mergedAtTimestamp() {
+      return this.mergedAt ? formatDate(new Date(this.mergedAt)) : '';
+    },
+    mergedAtInWords() {
+      return this.mergedAt ? this.timeFormated(this.mergedAt) : '';
+    },
     closedAtInWords() {
       return this.closedAt ? this.timeFormated(this.closedAt) : '';
     },
     closedAtTimestamp() {
       return this.closedAt ? formatDate(new Date(this.closedAt)) : '';
     },
+    stateText() {
+      if (this.isMerged) {
+        return __('Merged');
+      }
+
+      return this.isOpen ? __('Opened') : __('Closed');
+    },
+    stateTimeInWords() {
+      if (this.isMerged) {
+        return this.mergedAtInWords;
+      }
+
+      return this.isOpen ? this.createdAtInWords : this.closedAtInWords;
+    },
+    stateTimestamp() {
+      if (this.isMerged) {
+        return this.mergedAtTimestamp;
+      }
+
+      return this.isOpen ? this.createdAtTimestamp : this.closedAtTimestamp;
+    },
     pipelineStatusTooltip() {
       return this.hasPipeline
         ? sprintf(__('Pipeline: %{status}'), { status: this.pipelineStatus.label })

app/helpers/issuables_helper.rb

@@ -277,7 +277,7 @@ module IssuablesHelper
       initialTaskStatus: issuable.task_status
     }
 
-    data[:closingMergeRequestsCount] = issuable.merge_requests_count if issuable.is_a?(Issue)
+    data[:hasClosingMergeRequest] = issuable.merge_requests_count != 0 if issuable.is_a?(Issue)
 
     if parent.is_a?(Group)
       data[:groupPath] = parent.path

app/views/projects/issues/show.html.haml

@@ -91,7 +91,7 @@
 
     - if can?(current_user, :download_code, @project)
       #related-branches{ data: { url: related_branches_project_issue_path(@project, @issue) } }
-        - # This element is filled in using JavaScript.
+        -# This element is filled in using JavaScript.
 
   .content-block.emoji-block.emoji-block-sticky
     .row

changelogs/unreleased/_acet-related-mrs-widget-rewrite.yml

+---
+title: Rewrite related MRs widget with Vue
+merge_request: 27027
+author:
+type: other

spec/features/issuables/markdown_references/internal_references_spec.rb

@@ -70,7 +70,7 @@ describe "Internal references", :js do
 
             page.within("#merge-requests ul") do
               expect(page).to have_content(private_project_merge_request.title)
-              expect(page).to have_css(".merge-request-status")
+              expect(page).to have_css(".ic-issue-open-m")
             end
 
             expect(page).to have_content("mentioned in merge request #{private_project_merge_request.to_reference(public_project)}")

spec/javascripts/fixtures/issues.rb

@@ -106,7 +106,7 @@ describe API::Issues, '(JavaScript fixtures)', type: :request do
             description: issue_description
 
     project.add_reporter(user)
-    related_mr = create_referencing_mr(user, project, issue)
+    create_referencing_mr(user, project, issue)
 
     create(:merge_request,
            :simple,