Decode URI before passing to Vue Router for file listing router

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

app/assets/javascripts/repository/router.js

@@ -7,17 +7,28 @@ import TreePage from './pages/tree.vue';
 Vue.use(VueRouter);
 
 export default function createRouter(base, baseRef) {
+  const treePathRoute = {
+    component: TreePage,
+    props: route => ({
+      path: route.params.path?.replace(/^\//, '') || '/',
+    }),
+  };
+
   return new VueRouter({
     mode: 'history',
     base: joinPaths(gon.relative_url_root || '', base),
     routes: [
       {
-        path: `(/-)?/tree/${baseRef}/:path*`,
+        name: 'treePathDecoded',
+        // Sometimes the ref needs decoding depending on how the backend sends it to us
+        path: `(/-)?/tree/${decodeURI(baseRef)}/:path*`,
+        ...treePathRoute,
+      },
+      {
         name: 'treePath',
-        component: TreePage,
-        props: route => ({
-          path: route.params.path?.replace(/^\//, '') || '/',
-        }),
+        // Support without decoding as well just in case the ref doesn't need to be decoded
+        path: `(/-)?/tree/${baseRef}/:path*`,
+        ...treePathRoute,
       },
       {
         path: '/',

spec/features/projects/files/user_browses_files_spec.rb

@@ -209,6 +209,33 @@ describe "User browses files" do
     end
   end
 
+  context "when browsing a `Ääh-test-utf-8` branch", :js do
+    before do
+      project.repository.create_branch('Ääh-test-utf-8', project.repository.root_ref)
+      visit(project_tree_path(project, "Ääh-test-utf-8"))
+    end
+
+    it "shows files from a repository" do
+      expect(page).to have_content("VERSION")
+        .and have_content(".gitignore")
+        .and have_content("LICENSE")
+
+      click_link("files")
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
+      click_link("html")
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('html')
+      end
+
+      expect(page).to have_link('500.html')
+    end
+  end
+
   context "when browsing a `test-#` branch", :js do
     before do
       project.repository.create_branch('test-#', project.repository.root_ref)