Display related merge requests in commit detail page

2 files changed, 75 insertions, 0 deletions

diff --git a/app/assets/javascripts/commit_merge_requests.js b/app/assets/javascripts/commit_merge_requests.js
new file mode 100644
index 00000000000..f76c9b7e690
--- /dev/null
+++ b/app/assets/javascripts/commit_merge_requests.js
@@ -0,0 +1,73 @@
+/* global Flash */
+
+import axios from './lib/utils/axios_utils';
+import { n__, s__ } from './locale';
+
+export function getHeaderText(childElementCount, mergeRequestCount) {
+  if (childElementCount === 0) {
+    return `${mergeRequestCount} ${n__('merge request', 'merge requests', mergeRequestCount)}`;
+  }
+  return ',';
+}
+
+export function createHeader(childElementCount, mergeRequestCount) {
+  const headerText = getHeaderText(childElementCount, mergeRequestCount);
+
+  return $('<span />', {
+    class: 'append-right-5',
+    text: headerText,
+  });
+}
+
+export function createLink(mergeRequest) {
+  return $('<a />', {
+    class: 'append-right-5',
+    href: mergeRequest.path,
+    text: `!${mergeRequest.iid}`,
+  });
+}
+
+export function createTitle(mergeRequest) {
+  return $('<span />', {
+    text: mergeRequest.title,
+  });
+}
+
+export function createItem(mergeRequest) {
+  const $item = $('<span />');
+  const $link = createLink(mergeRequest);
+  const $title = createTitle(mergeRequest);
+  $item.append($link);
+  $item.append($title);
+
+  return $item;
+}
+
+export function createContent(mergeRequests) {
+  const $content = $('<span />');
+
+  if (mergeRequests.length === 0) {
+    $content.text(s__('Commits|No related merge requests found'));
+  } else {
+    mergeRequests.forEach((mergeRequest) => {
+      const $header = createHeader($content.children().length, mergeRequests.length);
+      const $item = createItem(mergeRequest);
+      $content.append($header);
+      $content.append($item);
+    });
+  }
+
+  return $content;
+}
+
+export function fetchCommitMergeRequests() {
+  const $container = $('.merge-requests');
+
+  axios.get($container.data('projectCommitPath'))
+    .then((response) => {
+      const $content = createContent(response.data);
+
+      $container.html($content);
+    })
+    .catch(() => Flash(s__('Commits|An error occurred while fetching merge requests data.')));
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 64fb8aaeb7a..04b90035bcb 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -68,6 +68,7 @@ import Diff from './diff';
 import ProjectLabelSubscription from './project_label_subscription';
 import SearchAutocomplete from './search_autocomplete';
 import Activities from './activities';
+import { fetchCommitMergeRequests } from './commit_merge_requests';
 
 (function() {
   var Dispatcher;
@@ -311,6 +312,7 @@ import Activities from './activities';
           const stickyBarPaddingTop = 16;
           initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
           $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
+          fetchCommitMergeRequests();
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({