Add latest changes from gitlab-org/gitlab@master

2 files changed, 59 insertions, 2 deletions

diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 1d295e18332..e9214e3acff 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -2,11 +2,12 @@ import { GlButton } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import PerformancePlugin from '~/performance/vue_performance_plugin';
 import createStore from '~/code_navigation/store';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
@@ -20,6 +21,7 @@ import refsQuery from './queries/ref.query.graphql';
 import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
+import { generateRefDestinationPath } from './utils/ref_switcher_utils';
 
 Vue.use(Vuex);
 Vue.use(PerformancePlugin, {
@@ -89,9 +91,34 @@ export default function setupVueRepositoryList() {
       },
     });
 
-  initLastCommitApp();
+  const initRefSwitcher = () => {
+    const refSwitcherEl = document.getElementById('js-tree-ref-switcher');
+
+    if (!refSwitcherEl) return false;
+
+    const { projectId, projectRootPath } = refSwitcherEl.dataset;
+
+    return new Vue({
+      el: refSwitcherEl,
+      render(createElement) {
+        return createElement(RefSelector, {
+          props: {
+            projectId,
+            value: ref,
+          },
+          on: {
+            input(selectedRef) {
+              visitUrl(generateRefDestinationPath(projectRootPath, selectedRef));
+            },
+          },
+        });
+      },
+    });
+  };
 
+  initLastCommitApp();
   initBlobControlsApp();
+  initRefSwitcher();
 
   router.afterEach(({ params: { path } }) => {
     setTitle(path, ref, fullName);
diff --git a/app/assets/javascripts/repository/utils/ref_switcher_utils.js b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
new file mode 100644
index 00000000000..8ff52104c93
--- /dev/null
+++ b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
@@ -0,0 +1,30 @@
+import { joinPaths } from '~/lib/utils/url_utility';
+
+/**
+ * Matches the namespace and target directory/blob in a path
+ * Example: /root/Flight/-/blob/fix/main/test/spec/utils_spec.js
+ * Group 1:  /-/blob
+ * Group 2:  blob
+ * Group 3:  main/test/spec/utils_spec.js
+ */
+const NAMESPACE_TARGET_REGEX = /(\/-\/(blob|tree))\/.*?\/(.*)/;
+
+/**
+ * Generates a ref destination path based on the selected ref and current path.
+ * A user could either be in the project root, a directory on the blob view.
+ * @param {string} projectRootPath - The root path for a project.
+ * @param {string} selectedRef - The selected ref from the ref dropdown.
+ */
+export function generateRefDestinationPath(projectRootPath, selectedRef) {
+  const currentPath = window.location.pathname;
+  let namespace = '/-/tree';
+  let target;
+  const match = NAMESPACE_TARGET_REGEX.exec(currentPath);
+  if (match) {
+    [, namespace, , target] = match;
+  }
+
+  const destinationPath = joinPaths(projectRootPath, namespace, selectedRef, target);
+
+  return `${destinationPath}${window.location.hash}`;
+}