Fixed Vue file browser not working with special characters

Closes https://gitlab.com/gitlab-org/gitlab/issues/199308

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -107,10 +107,16 @@ export default {
             return acc.concat({
               name,
               path,
-              to: `/-/tree/${this.ref}${path}`,
+              to: `/-/tree/${escape(this.ref)}${path}`,
             });
           },
-          [{ name: this.projectShortPath, path: '/', to: `/-/tree/${this.ref}/` }],
+          [
+            {
+              name: this.projectShortPath,
+              path: '/',
+              to: `/-/tree/${escape(this.ref)}/`,
+            },
+          ],
         );
     },
     canCreateMrFromFork() {

app/assets/javascripts/repository/components/table/parent_row.vue

@@ -28,7 +28,7 @@ export default {
       return splitArray.join('/');
     },
     parentRoute() {
-      return { path: `/-/tree/${this.commitRef}/${this.parentPath}` };
+      return { path: `/-/tree/${escape(this.commitRef)}/${this.parentPath}` };
     },
   },
   methods: {

app/assets/javascripts/repository/components/table/row.vue

@@ -90,7 +90,7 @@ export default {
   },
   computed: {
     routerLinkTo() {
-      return this.isFolder ? { path: `/-/tree/${this.ref}/${this.path}` } : null;
+      return this.isFolder ? { path: `/-/tree/${escape(this.ref)}/${this.path}` } : null;
     },
     iconName() {
       return `fa-${getIconName(this.type, this.path)}`;

app/assets/javascripts/repository/log_tree.js

@@ -27,7 +27,10 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
 
   fetchpromise = axios
     .get(
-      `${gon.relative_url_root}/${projectPath}/-/refs/${ref}/logs_tree/${path.replace(/^\//, '')}`,
+      `${gon.relative_url_root}/${projectPath}/-/refs/${escape(ref)}/logs_tree/${path.replace(
+        /^\//,
+        '',
+      )}`,
       {
         params: { format: 'json', offset },
       },

app/assets/javascripts/repository/router.js

@@ -12,7 +12,7 @@ export default function createRouter(base, baseRef) {
     base: joinPaths(gon.relative_url_root || '', base),
     routes: [
       {
-        path: `/-/tree/${baseRef}(/.*)?`,
+        path: `/-/tree/${escape(baseRef)}(/.*)?`,
         name: 'treePath',
         component: TreePage,
         props: route => ({

spec/features/projects/files/user_browses_files_spec.rb

@@ -171,6 +171,31 @@ describe "User browses files" do
     end
   end
 
+  context "when browsing a `improve/awesome` branch", :js do
+    before do
+      visit(project_tree_path(project, "improve/awesome"))
+    end
+
+    it "shows files from a repository" do
+      expect(page).to have_content("VERSION")
+        .and have_content(".gitignore")
+        .and have_content("LICENSE")
+    end
+  end
+
+  context "when browsing a `test-#` branch", :js do
+    before do
+      project.repository.create_branch('test-#', project.repository.root_ref)
+      visit(project_tree_path(project, "test-#"))
+    end
+
+    it "shows files from a repository" do
+      expect(page).to have_content("VERSION")
+        .and have_content(".gitignore")
+        .and have_content("LICENSE")
+    end
+  end
+
   context "when browsing a specific ref", :js do
     let(:ref) { project_tree_path(project, "6d39438") }