2 files changed, 38 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/commit_box/info/index.js b/app/assets/javascripts/projects/commit_box/info/index.js
new file mode 100644
index 00000000000..352ac39f3c4
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/index.js
@@ -0,0 +1,18 @@
+import { loadBranches } from './load_branches';
+import { fetchCommitMergeRequests } from '~/commit_merge_requests';
+import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+
+export const initCommitBoxInfo = (containerSelector = '.js-commit-box-info') => {
+  const containerEl = document.querySelector(containerSelector);
+
+  // Display commit related branches
+  loadBranches(containerEl);
+
+  // Related merge requests to this commit
+  fetchCommitMergeRequests();
+
+  // Display pipeline info for this commit
+  new MiniPipelineGraph({
+    container: '.js-commit-pipeline-graph',
+  }).bindEvents();
+};
diff --git a/app/assets/javascripts/projects/commit_box/info/load_branches.js b/app/assets/javascripts/projects/commit_box/info/load_branches.js
new file mode 100644
index 00000000000..0efa1998507
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/load_branches.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+import { sanitize } from '~/lib/dompurify';
+import { __ } from '~/locale';
+
+export const loadBranches = containerEl => {
+  if (!containerEl) {
+    return;
+  }
+
+  const { commitPath } = containerEl.dataset;
+  const branchesEl = containerEl.querySelector('.commit-info.branches');
+  axios
+    .get(commitPath)
+    .then(({ data }) => {
+      branchesEl.innerHTML = sanitize(data);
+    })
+    .catch(() => {
+      branchesEl.textContent = __('Failed to load branches. Please try again.');
+    });
+};