3 files changed, 26 insertions, 16 deletions

diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index 4c9eb830ff6..27659348dcc 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -118,9 +118,10 @@ export default class Project {
             const urlParams = { [fieldName]: ref };
             if (params.group === BRANCH_GROUP_NAME) {
               urlParams.ref_type = BRANCH_REF_TYPE;
-            } else {
+            } else if (params.group === TAG_GROUP_NAME) {
               urlParams.ref_type = TAG_REF_TYPE;
             }
+
             link.href = mergeUrlParams(urlParams, linkTarget);
           }
 
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index e5d22f50d72..0f6b159ffc5 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -2,7 +2,7 @@ import { GlButton } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
+import { joinPaths, 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';
@@ -119,7 +119,7 @@ export default function setupVueRepositoryList() {
 
     if (!refSwitcherEl) return false;
 
-    const { projectId, projectRootPath } = refSwitcherEl.dataset;
+    const { projectId, projectRootPath, refType } = refSwitcherEl.dataset;
 
     return new Vue({
       el: refSwitcherEl,
@@ -127,11 +127,12 @@ export default function setupVueRepositoryList() {
         return createElement(RefSelector, {
           props: {
             projectId,
-            value: ref,
+            value: refType ? joinPaths('refs', refType, ref) : ref,
+            useSymbolicRefNames: true,
           },
           on: {
             input(selectedRef) {
-              visitUrl(generateRefDestinationPath(projectRootPath, selectedRef));
+              visitUrl(generateRefDestinationPath(projectRootPath, ref, selectedRef));
             },
           },
         });
diff --git a/app/assets/javascripts/repository/utils/ref_switcher_utils.js b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
index f296b5e9b4a..fc0d521ad54 100644
--- a/app/assets/javascripts/repository/utils/ref_switcher_utils.js
+++ b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
@@ -15,22 +15,30 @@ const NAMESPACE_TARGET_REGEX = /(\/-\/(blob|tree))\/.*?\/(.*)/;
  * @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;
-  const encodedHash = '%23';
+
+export function generateRefDestinationPath(projectRootPath, ref, selectedRef) {
+  const url = new URL(window.location.href);
+  const currentPath = url.pathname;
+  let refType = null;
   let namespace = '/-/tree';
   let target;
+  let actualRef = selectedRef;
+
+  const matches = selectedRef.match(/^refs\/(heads|tags)\/(.+)/);
+  if (matches) {
+    [, refType, actualRef] = matches;
+  }
+  if (refType) {
+    url.searchParams.set('ref_type', refType);
+  } else {
+    url.searchParams.delete('ref_type');
+  }
+
   const match = NAMESPACE_TARGET_REGEX.exec(currentPath);
   if (match) {
     [, namespace, , target] = match;
   }
+  url.pathname = joinPaths(projectRootPath, namespace, actualRef, target);
 
-  const destinationPath = joinPaths(
-    projectRootPath,
-    namespace,
-    encodeURI(selectedRef).replace(/#/g, encodedHash),
-    target,
-  );
-
-  return `${destinationPath}${window.location.hash}`;
+  return url.toString();
 }