Merge branch '53950-commit-comments-displayed-on-a-merge-request' into 'master'56221-spec-features-projects-clusters-gcp_spec-rb-appears-to-be-making-real-google-api-requests

Resolve "Commit comments displayed on a merge request that contains that commit no longer specify which commit they come from"

Closes #53950

See merge request gitlab-org/gitlab-ce!24427

2 files changed, 37 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 1a116161e3c..1a9723de856 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -216,6 +216,16 @@ export default {
 
       return null;
     },
+    commit() {
+      if (!this.discussion.for_commit) {
+        return null;
+      }
+
+      return {
+        id: this.discussion.commit_id,
+        url: this.discussion.discussion_path,
+      };
+    },
   },
   watch: {
     isReplying() {
@@ -380,6 +390,7 @@ Please check your network connection and try again.`;
                     :is="componentName(initialDiscussion)"
                     :note="componentData(initialDiscussion)"
                     :line="line"
+                    :commit="commit"
                     :help-page-path="helpPagePath"
                     @handleDeleteNote="deleteNoteHandler"
                   >
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 4c02588127e..3c48d81ed05 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -2,7 +2,9 @@
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { escape } from 'underscore';
+import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import { s__, sprintf } from '../../locale';
 import Flash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import noteHeader from './note_header.vue';
@@ -37,6 +39,11 @@ export default {
       required: false,
       default: '',
     },
+    commit: {
+      type: Object,
+      required: false,
+      default: () => null,
+    },
   },
   data() {
     return {
@@ -73,6 +80,21 @@ export default {
     isTarget() {
       return this.targetNoteHash === this.noteAnchorId;
     },
+    actionText() {
+      if (!this.commit) {
+        return '';
+      }
+
+      // We need to do this to ensure we have the currect sentence order
+      // when translating this as the sentence order may change from one
+      // language to the next. See:
+      // https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24427#note_133713771
+      const { id, url } = this.commit;
+      const commitLink = `<a class="commit-sha monospace" href="${escape(url)}">${truncateSha(
+        id,
+      )}</a>`;
+      return sprintf(s__('MergeRequests|commented on commit %{commitLink}'), { commitLink }, false);
+    },
   },
 
   created() {
@@ -200,13 +222,10 @@ export default {
     </div>
     <div class="timeline-content">
       <div class="note-header">
-        <note-header
-          v-once
-          :author="author"
-          :created-at="note.created_at"
-          :note-id="note.id"
-          action-text="commented"
-        />
+        <note-header v-once :author="author" :created-at="note.created_at" :note-id="note.id">
+          <span v-if="commit" v-html="actionText"></span>
+          <span v-else class="d-none d-sm-inline">&middot;</span>
+        </note-header>
         <note-actions
           :author-id="author.id"
           :note-id="note.id"