Make commit IDs in merge request discussion header monospace

3 files changed, 54 insertions, 3 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index d4450c9f2c8..441c6073202 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -160,10 +160,14 @@ export default {
       return expanded || this.alwaysExpanded || isResolvedNonDiffDiscussion;
     },
     actionText() {
-      const commitId = this.discussion.commit_id ? truncateSha(this.discussion.commit_id) : '';
       const linkStart = `<a href="${_.escape(this.discussion.discussion_path)}">`;
       const linkEnd = '</a>';
 
+      let { commit_id: commitId } = this.discussion;
+      if (commitId) {
+        commitId = `<span class="commit-sha">${truncateSha(commitId)}</span>`;
+      }
+
       let text = s__('MergeRequests|started a discussion');
 
       if (this.discussion.for_commit) {
diff --git a/changelogs/unreleased/winh-princess-mononospace.yml b/changelogs/unreleased/winh-princess-mononospace.yml
new file mode 100644
index 00000000000..e2d33de375e
--- /dev/null
+++ b/changelogs/unreleased/winh-princess-mononospace.yml
@@ -0,0 +1,5 @@
+---
+title: Make commit IDs in merge request discussion header monospace
+merge_request: 23562
+author:
+type: changed
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index e4d29a3860c..106a4ac2546 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -42,12 +42,14 @@ describe('noteable_discussion component', () => {
     const discussion = { ...discussionMock };
     discussion.diff_file = mockDiffFile;
     discussion.diff_discussion = true;
-    const diffDiscussionVm = new Component({
+
+    vm.$destroy();
+    vm = new Component({
       store,
       propsData: { discussion },
     }).$mount();
 
-    expect(diffDiscussionVm.$el.querySelector('.discussion-header')).not.toBeNull();
+    expect(vm.$el.querySelector('.discussion-header')).not.toBeNull();
   });
 
   describe('actions', () => {
@@ -130,4 +132,44 @@ describe('noteable_discussion component', () => {
       expect(note).toEqual(data);
     });
   });
+
+  describe('commit discussion', () => {
+    const commitId = 'razupaltuff';
+
+    beforeEach(() => {
+      vm.$destroy();
+
+      store.state.diffs = {
+        projectPath: 'something',
+      };
+
+      vm.$destroy();
+      vm = new Component({
+        propsData: {
+          discussion: {
+            ...discussionMock,
+            for_commit: true,
+            commit_id: commitId,
+            diff_discussion: true,
+            diff_file: {
+              ...mockDiffFile,
+            },
+          },
+          renderDiffFile: true,
+        },
+        store,
+      }).$mount();
+    });
+
+    it('displays a monospace started a discussion on commit', () => {
+      const truncatedCommitId = commitId.substr(0, 8);
+
+      expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`);
+
+      const commitElement = vm.$el.querySelector('.commit-sha');
+
+      expect(commitElement).not.toBe(null);
+      expect(commitElement).toHaveText(truncatedCommitId);
+    });
+  });
 });