Correctly escape special characters in Vue file listing routes

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

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

@@ -45,7 +45,7 @@ export default {
     currentPath: {
       type: String,
       required: false,
-      default: '/',
+      default: '',
     },
     canCollaborate: {
       type: Boolean,
@@ -107,7 +107,7 @@ export default {
             return acc.concat({
               name,
               path,
-              to: `/-/tree/${escape(this.ref)}${path}`,
+              to: `/-/tree/${escape(this.ref)}${escape(path)}`,
             });
           },
           [
@@ -133,7 +133,7 @@ export default {
           },
           {
             attrs: {
-              href: `${this.newBlobPath}${this.currentPath}`,
+              href: `${this.newBlobPath}/${this.currentPath ? escape(this.currentPath) : ''}`,
               class: 'qa-new-file-option',
             },
             text: __('New file'),

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

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

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

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

app/assets/javascripts/repository/index.js

@@ -100,7 +100,7 @@ export default function setupVueRepositoryList() {
     render(h) {
       return h(TreeActionLink, {
         props: {
-          path: `${historyLink}/${this.$route.params.path || ''}`,
+          path: `${historyLink}/${this.$route.params.path ? escape(this.$route.params.path) : ''}`,
           text: __('History'),
         },
       });

app/assets/javascripts/repository/log_tree.js

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

spec/frontend/repository/components/breadcrumbs_spec.js

@@ -33,6 +33,17 @@ describe('Repository breadcrumbs component', () => {
     expect(vm.findAll(RouterLinkStub).length).toEqual(linkCount);
   });
 
+  it('escapes hash in directory path', () => {
+    factory('app/assets/javascripts#');
+
+    expect(
+      vm
+        .findAll(RouterLinkStub)
+        .at(3)
+        .props('to'),
+    ).toEqual('/-/tree//app/assets/javascripts%23');
+  });
+
   it('renders last link as active', () => {
     factory('app/assets');
 

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

@@ -31,9 +31,10 @@ describe('Repository parent row component', () => {
   });
 
   it.each`
-    path            | to
-    ${'app'}        | ${'/-/tree/master/'}
-    ${'app/assets'} | ${'/-/tree/master/app'}
+    path                  | to
+    ${'app'}              | ${'/-/tree/master/'}
+    ${'app/assets'}       | ${'/-/tree/master/app'}
+    ${'app/assets#/test'} | ${'/-/tree/master/app/assets%23'}
   `('renders link in $path to $to', ({ path, to }) => {
     factory(path);
 

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

@@ -95,6 +95,22 @@ describe('Repository table row component', () => {
     });
   });
 
+  it('pushes new route for directory with hash', () => {
+    factory({
+      id: '1',
+      sha: '123',
+      path: 'test#',
+      type: 'tree',
+      currentPath: '/',
+    });
+
+    return vm.vm.$nextTick().then(() => {
+      vm.trigger('click');
+
+      expect($router.push).toHaveBeenCalledWith({ path: '/-/tree/master/test%23' });
+    });
+  });
+
   it.each`
     type        | pushes
     ${'tree'}   | ${true}