1 files changed, 30 insertions, 1 deletions
diff --git a/app/assets/javascripts/projects/commits/index.js b/app/assets/javascripts/projects/commits/index.js
index 03b94fde0f3..53169f689c9 100644
--- a/app/assets/javascripts/projects/commits/index.js
+++ b/app/assets/javascripts/projects/commits/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { visitUrl } from '~/lib/utils/url_utility';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import AuthorSelectApp from './components/author_select.vue';
 import store from './store';
 
 Vue.use(Vuex);
 
-export default (el) => {
+export const mountCommits = (el) => {
   if (!el) {
     return null;
   }
@@ -24,3 +26,30 @@ export default (el) => {
     },
   });
 };
+
+export const initCommitsRefSwitcher = () => {
+  const el = document.getElementById('js-project-commits-ref-switcher');
+  const COMMITS_PATH_REGEX = /^(.*?)\/-\/commits/g;
+
+  if (!el) return false;
+
+  const { projectId, ref, commitsPath } = el.dataset;
+  const commitsPathPrefix = commitsPath.match(COMMITS_PATH_REGEX)?.[0];
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(RefSelector, {
+        props: {
+          projectId,
+          value: ref,
+        },
+        on: {
+          input(selected) {
+            visitUrl(`${commitsPathPrefix}/${selected}`);
+          },
+        },
+      });
+    },
+  });
+};