1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/network/show/index.js b/app/assets/javascripts/pages/projects/network/show/index.js
index 2dabcfadfab..414636f0a74 100644
--- a/app/assets/javascripts/pages/projects/network/show/index.js
+++ b/app/assets/javascripts/pages/projects/network/show/index.js
@@ -1,7 +1,39 @@
 import $ from 'jquery';
+import Vue from 'vue';
+import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import ShortcutsNetwork from '~/behaviors/shortcuts/shortcuts_network';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import Network from '../network';
 
+const initRefSwitcher = () => {
+  const refSwitcherEl = document.getElementById('js-graph-ref-switcher');
+  const NETWORK_PATH_REGEX = /^(.*?)\/-\/network/g;
+
+  if (!refSwitcherEl) return false;
+
+  const { projectId, ref, networkPath } = refSwitcherEl.dataset;
+  const networkRootPath = networkPath.match(NETWORK_PATH_REGEX)?.[0]; // gets the network path without the ref
+
+  return new Vue({
+    el: refSwitcherEl,
+    render(createElement) {
+      return createElement(RefSelector, {
+        props: {
+          projectId,
+          value: ref,
+        },
+        on: {
+          input(selectedRef) {
+            visitUrl(joinPaths(networkRootPath, selectedRef));
+          },
+        },
+      });
+    },
+  });
+};
+
+initRefSwitcher();
+
 (() => {
   if (!$('.network-graph').length) return;