Fixed repository browser not working for branches with parentheses

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

app/assets/javascripts/repository/router.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { escapeRegExp } from 'lodash';
 import { joinPaths } from '../lib/utils/url_utility';
 import IndexPage from './pages/index.vue';
 import TreePage from './pages/tree.vue';
@@ -27,7 +28,7 @@ export default function createRouter(base, baseRef) {
       {
         name: 'treePath',
         // Support without decoding as well just in case the ref doesn't need to be decoded
-        path: `(/-)?/tree/${baseRef}/:path*`,
+        path: `(/-)?/tree/${escapeRegExp(baseRef)}/:path*`,
         ...treePathRoute,
       },
       {

changelogs/unreleased/ph-212785-fixRepositoryBrowserBranchWithParentheses.yml

+---
+title: Fixed repository browser not working with parentheses in branch name
+merge_request: 41591
+author:
+type: fixed

spec/frontend/repository/router_spec.js

@@ -4,12 +4,13 @@ import createRouter from '~/repository/router';
 
 describe('Repository router spec', () => {
   it.each`
-    path                           | branch      | component    | componentName
-    ${'/'}                         | ${'master'} | ${IndexPage} | ${'IndexPage'}
-    ${'/tree/master'}              | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master'}            | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master/app/assets'} | ${'master'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/123/app/assets'}    | ${'master'} | ${null}      | ${'null'}
+    path                           | branch          | component    | componentName
+    ${'/'}                         | ${'master'}     | ${IndexPage} | ${'IndexPage'}
+    ${'/tree/master'}              | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/tree/feat(test)'}          | ${'feat(test)'} | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master'}            | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master/app/assets'} | ${'master'}     | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/123/app/assets'}    | ${'master'}     | ${null}      | ${'null'}
   `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
     const router = createRouter('', branch);