Fixes Vue file list for paths with non-ascii characters

This also fixes the logs tree endpoint not returning any
commit data for a path with a non-ascii character

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

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

 <script>
 import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '../../locale';
 import Icon from '../../vue_shared/components/icon.vue';
 import getRefMixin from '../mixins/get_ref';
@@ -102,12 +103,12 @@ export default {
         .filter(p => p !== '')
         .reduce(
           (acc, name, i) => {
-            const path = `${i > 0 ? acc[i].path : ''}/${name}`;
+            const path = joinPaths(i > 0 ? acc[i].path : '', encodeURIComponent(name));
 
             return acc.concat({
               name,
               path,
-              to: `/-/tree/${escape(this.ref)}${escape(path)}`,
+              to: `/-/tree/${joinPaths(escape(this.ref), path)}`,
             });
           },
           [

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

@@ -91,7 +91,9 @@ export default {
   },
   computed: {
     routerLinkTo() {
-      return this.isFolder ? { path: `/-/tree/${escape(this.ref)}/${escape(this.path)}` } : null;
+      return this.isFolder
+        ? { path: `/-/tree/${escape(this.ref)}/${encodeURIComponent(this.path)}` }
+        : null;
     },
     iconName() {
       return `fa-${getIconName(this.type, this.path)}`;
@@ -141,6 +143,7 @@ export default {
       <i v-else :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
       <component
         :is="linkComponent"
+        ref="link"
         :to="routerLinkTo"
         :href="url"
         class="str-truncated"

app/assets/javascripts/repository/log_tree.js

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

changelogs/unreleased/ph-p207499-fixNonAsciiChars.yml

+---
+title: Fixed repository browsing for folders with non-ascii characters
+merge_request: 25877
+author:
+type: fixed

lib/gitlab/tree_summary.rb

@@ -69,7 +69,7 @@ module Gitlab
     end
 
     def entry_path(entry)
-      File.join(*[path, entry[:file_name]].compact)
+      File.join(*[path, entry[:file_name]].compact).force_encoding(Encoding::ASCII_8BIT)
     end
 
     def build_entry(entry)

spec/frontend/repository/components/breadcrumbs_spec.js

@@ -41,7 +41,7 @@ describe('Repository breadcrumbs component', () => {
         .findAll(RouterLinkStub)
         .at(3)
         .props('to'),
-    ).toEqual('/-/tree//app/assets/javascripts%23');
+    ).toEqual('/-/tree/app/assets/javascripts%23');
   });
 
   it('renders last link as active', () => {

spec/frontend/repository/components/table/row_spec.js

@@ -109,6 +109,26 @@ describe('Repository table row component', () => {
     });
   });
 
+  it.each`
+    path
+    ${'test#'}
+    ${'Änderungen'}
+  `('renders link for $path', ({ path }) => {
+    factory({
+      id: '1',
+      sha: '123',
+      path,
+      type: 'tree',
+      currentPath: '/',
+    });
+
+    return vm.vm.$nextTick().then(() => {
+      expect(vm.find({ ref: 'link' }).props('to')).toEqual({
+        path: `/-/tree/master/${encodeURIComponent(path)}`,
+      });
+    });
+  });
+
   it('pushes new route for directory with hash', () => {
     factory({
       id: '1',