WIP: Update repository router to be compatible with Vue3 mode

app/assets/javascripts/lib/utils/vue3compat/vue_router.js

@@ -92,6 +92,16 @@ const transformOptions = (options = {}) => {
 
 const installed = new WeakMap();
 
+export const getMatchedComponents = (instance, path) => {
+  if (instance.getMatchedComponents) {
+    return instance.getMatchedComponents(path);
+  }
+
+  const route = path ? instance.resolve(path) : instance.currentRoute.value;
+
+  return route.matched.flatMap((record) => Object.values(record.components));
+};
+
 export default class VueRouterCompat {
   constructor(options) {
     // eslint-disable-next-line no-constructor-return

app/assets/javascripts/repository/router.js

@@ -9,11 +9,21 @@ import { getRefType } from './utils/ref_type';
 
 Vue.use(VueRouter);
 
+const normalizePathParam = (pathParam) => {
+  // Vue Router 4 when there's more than one `:path` segment
+  if (Array.isArray(pathParam)) {
+    return joinPaths(...pathParam);
+  }
+
+  // Vue Router 3, or when there's zero or one `:path` segments.
+  return pathParam?.replace(/^\//, '') || '/';
+};
+
 export default function createRouter(base, baseRef) {
   const treePathRoute = {
     component: TreePage,
     props: (route) => ({
-      path: route.params.path?.replace(/^\//, '') || '/',
+      path: normalizePathParam(route.params.path),
       refType: getRefType(route.query.ref_type || null),
     }),
   };
@@ -36,25 +46,25 @@ export default function createRouter(base, baseRef) {
       {
         name: 'treePathDecoded',
         // Sometimes the ref needs decoding depending on how the backend sends it to us
-        path: `(/-)?/tree/${decodeURI(baseRef)}/:path*`,
+        path: `/:dash(-)?/tree/${decodeURI(baseRef)}/:path*`,
         ...treePathRoute,
       },
       {
         name: 'treePath',
         // Support without decoding as well just in case the ref doesn't need to be decoded
-        path: `(/-)?/tree/${escapeRegExp(baseRef)}/:path*`,
+        path: `/:dash(-)?/tree/${escapeRegExp(baseRef)}/:path*`,
         ...treePathRoute,
       },
       {
         name: 'blobPathDecoded',
         // Sometimes the ref needs decoding depending on how the backend sends it to us
-        path: `(/-)?/blob/${decodeURI(baseRef)}/:path*`,
+        path: `/:dash(-)?/blob/${decodeURI(baseRef)}/:path*`,
         ...blobPathRoute,
       },
       {
         name: 'blobPath',
         // Support without decoding as well just in case the ref doesn't need to be decoded
-        path: `(/-)?/blob/${escapeRegExp(baseRef)}/:path*`,
+        path: `/:dash(-)?/blob/${escapeRegExp(baseRef)}/:path*`,
         ...blobPathRoute,
       },
       {
@@ -80,7 +90,7 @@ export default function createRouter(base, baseRef) {
         'edit',
         decodeURI(baseRef),
         '-',
-        to.params.path || '',
+        normalizePathParam(to.params.path),
         needsClosingSlash && '/',
       ),
     );

scripts/frontend/quarantined_vue3_specs.txt

@@ -233,10 +233,8 @@ spec/frontend/ref/init_ambiguous_ref_modal_spec.js
 spec/frontend/releases/components/app_edit_new_spec.js
 spec/frontend/releases/components/asset_links_form_spec.js
 spec/frontend/repository/components/header_area/blob_controls_spec.js
-spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js
 spec/frontend/repository/components/table/index_spec.js
 spec/frontend/repository/components/table/row_spec.js
-spec/frontend/repository/router_spec.js
 spec/frontend/search/sidebar/components/checkbox_filter_spec.js
 spec/frontend/search/topbar/components/app_spec.js
 spec/frontend/sessions/new/components/email_verification_spec.js

spec/frontend/repository/router_spec.js

@@ -2,6 +2,7 @@ import BlobPage from '~/repository/pages/blob.vue';
 import IndexPage from '~/repository/pages/index.vue';
 import TreePage from '~/repository/pages/tree.vue';
 import createRouter from '~/repository/router';
+import { getMatchedComponents } from '~/lib/utils/vue3compat/vue_router';
 
 describe('Repository router spec', () => {
   it.each`
@@ -11,18 +12,13 @@ describe('Repository router spec', () => {
     ${'/tree/feat(test)'}        | ${'feat(test)'} | ${TreePage}  | ${'TreePage'}
     ${'/-/tree/main'}            | ${'main'}       | ${TreePage}  | ${'TreePage'}
     ${'/-/tree/main/app/assets'} | ${'main'}       | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/123/app/assets'}  | ${'main'}       | ${null}      | ${'null'}
     ${'/-/blob/main/file.md'}    | ${'main'}       | ${BlobPage}  | ${'BlobPage'}
   `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
     const router = createRouter('', branch);
 
-    const componentsForRoute = router.getMatchedComponents(path);
+    const componentsForRoute = getMatchedComponents(router, path);
 
-    expect(componentsForRoute.length).toBe(component ? 1 : 0);
-
-    if (component) {
-      expect(componentsForRoute).toContain(component);
-    }
+    expect(componentsForRoute).toEqual([component]);
   });
 
   describe('Storing Web IDE path globally', () => {
@@ -45,11 +41,14 @@ describe('Repository router spec', () => {
       ${'/-/tree/main'}            | ${'main'}       | ${`/-/ide/project/${proj}/edit/main/-/`}
       ${'/-/tree/main/app/assets'} | ${'main'}       | ${`/-/ide/project/${proj}/edit/main/-/app/assets/`}
       ${'/-/blob/main/file.md'}    | ${'main'}       | ${`/-/ide/project/${proj}/edit/main/-/file.md`}
-    `('generates the correct Web IDE url for $path', ({ path, branch, expectedPath } = {}) => {
-      const router = createRouter(proj, branch);
-
-      router.push(path);
-      expect(window.gl.webIDEPath).toBe(expectedPath);
-    });
+    `(
+      'generates the correct Web IDE url for $path',
+      async ({ path, branch, expectedPath } = {}) => {
+        const router = createRouter(proj, branch);
+
+        await router.push(path);
+        expect(window.gl.webIDEPath).toBe(expectedPath);
+      },
+    );
   });
 });