Merge branch 'ph/202049/fixRepositoryVueRouter' into 'master'

Fix repository Vue router not working for routes without /-/

Closes #202049

See merge request gitlab-org/gitlab!24444

app/assets/javascripts/repository/index.js

@@ -28,8 +28,8 @@ export default function setupVueRepositoryList() {
     },
   });
 
-  router.afterEach(({ params: { pathMatch } }) => {
-    setTitle(pathMatch, ref, fullName);
+  router.afterEach(({ params: { path } }) => {
+    setTitle(path, ref, fullName);
   });
 
   const breadcrumbEl = document.getElementById('js-repo-breadcrumb');
@@ -48,9 +48,9 @@ export default function setupVueRepositoryList() {
       newDirPath,
     } = breadcrumbEl.dataset;
 
-    router.afterEach(({ params: { pathMatch = '/' } }) => {
-      updateFormAction('.js-upload-blob-form', uploadPath, pathMatch);
-      updateFormAction('.js-create-dir-form', newDirPath, pathMatch);
+    router.afterEach(({ params: { path = '/' } }) => {
+      updateFormAction('.js-upload-blob-form', uploadPath, path);
+      updateFormAction('.js-create-dir-form', newDirPath, path);
     });
 
     // eslint-disable-next-line no-new
@@ -61,7 +61,7 @@ export default function setupVueRepositoryList() {
       render(h) {
         return h(Breadcrumbs, {
           props: {
-            currentPath: this.$route.params.pathMatch,
+            currentPath: this.$route.params.path,
             canCollaborate: parseBoolean(canCollaborate),
             canEditTree: parseBoolean(canEditTree),
             newBranchPath,
@@ -84,7 +84,7 @@ export default function setupVueRepositoryList() {
     render(h) {
       return h(LastCommit, {
         props: {
-          currentPath: this.$route.params.pathMatch,
+          currentPath: this.$route.params.path,
         },
       });
     },
@@ -100,7 +100,7 @@ export default function setupVueRepositoryList() {
     render(h) {
       return h(TreeActionLink, {
         props: {
-          path: historyLink + (this.$route.params.pathMatch || '/'),
+          path: `${historyLink}/${this.$route.params.path || ''}`,
           text: __('History'),
         },
       });
@@ -117,7 +117,7 @@ export default function setupVueRepositoryList() {
       render(h) {
         return h(TreeActionLink, {
           props: {
-            path: webIDEUrl(`/${projectPath}/edit/${ref}/-${this.$route.params.pathMatch || '/'}`),
+            path: webIDEUrl(`/${projectPath}/edit/${ref}/-/${this.$route.params.path || ''}`),
             text: __('Web IDE'),
             cssClass: 'qa-web-ide-button',
           },
@@ -134,7 +134,7 @@ export default function setupVueRepositoryList() {
       el: directoryDownloadLinks,
       router,
       render(h) {
-        const currentPath = this.$route.params.pathMatch || '/';
+        const currentPath = this.$route.params.path || '/';
 
         if (currentPath !== '/') {
           return h(DirectoryDownloadLinks, {

app/assets/javascripts/repository/mixins/preload.js

@@ -13,10 +13,10 @@ export default {
     return { projectPath: '', loadingPath: null };
   },
   beforeRouteUpdate(to, from, next) {
-    this.preload(to.params.pathMatch, next);
+    this.preload(to.params.path, next);
   },
   methods: {
-    preload(path, next) {
+    preload(path = '/', next) {
       this.loadingPath = path.replace(/^\//, '');
 
       return this.$apollo

app/assets/javascripts/repository/router.js

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

ee/app/assets/javascripts/repository/index.js

@@ -18,7 +18,7 @@ export default () => {
 
       axios
         .post(data.pathLocksToggle, {
-          path: router.currentRoute.params.pathMatch.replace(/^\//, ''),
+          path: router.currentRoute.params.path.replace(/^\//, ''),
         })
         .then(() => window.location.reload())
         .catch(() => {

spec/frontend/repository/router_spec.js

@@ -6,6 +6,7 @@ describe('Repository router spec', () => {
   it.each`
     path                           | component    | componentName
     ${'/'}                         | ${IndexPage} | ${'IndexPage'}
+    ${'/tree/master'}              | ${TreePage}  | ${'TreePage'}
     ${'/-/tree/master'}            | ${TreePage}  | ${'TreePage'}
     ${'/-/tree/master/app/assets'} | ${TreePage}  | ${'TreePage'}
     ${'/-/tree/123/app/assets'}    | ${null}      | ${'null'}