Fix Web IDE router breaking on files matching "targetmode"

3 files changed, 66 insertions, 5 deletions

diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index 44c35e9a5a5..c6d7d218e81 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { join as joinPath } from 'path';
 import flash from '~/flash';
 import store from './stores';
 import { activityBarViews } from './constants';
@@ -37,17 +38,29 @@ const router = new VueRouter({
   base: `${gon.relative_url_root}/-/ide/`,
   routes: [
     {
-      path: '/project/:namespace/:project+',
+      path: '/project/:namespace+/:project',
       component: EmptyRouterComponent,
       children: [
         {
-          path: ':targetmode(edit|tree|blob)/*',
+          path: ':targetmode(edit|tree|blob)/:branchid+/-/*',
           component: EmptyRouterComponent,
         },
         {
+          path: ':targetmode(edit|tree|blob)/:branchid+/',
+          redirect: to => joinPath(to.path, '/-/'),
+        },
+        {
+          path: ':targetmode(edit|tree|blob)',
+          redirect: to => joinPath(to.path, '/master/-/'),
+        },
+        {
           path: 'merge_requests/:mrid',
           component: EmptyRouterComponent,
         },
+        {
+          path: '',
+          redirect: to => joinPath(to.path, '/edit/master/-/'),
+        },
       ],
     },
   ],
@@ -63,11 +76,10 @@ router.beforeEach((to, from, next) => {
       .then(() => {
         const fullProjectId = `${to.params.namespace}/${to.params.project}`;
 
-        const baseSplit = (to.params[0] && to.params[0].split('/-/')) || [''];
-        const branchId = baseSplit[0].slice(-1) === '/' ? baseSplit[0].slice(0, -1) : baseSplit[0];
+        const branchId = to.params.branchid;
 
         if (branchId) {
-          const basePath = baseSplit.length > 1 ? baseSplit[1] : '';
+          const basePath = to.params[0] || '';
 
           store.dispatch('setCurrentBranchId', branchId);
 
diff --git a/changelogs/unreleased/48036-fix-web-ide-blob-crash.yml b/changelogs/unreleased/48036-fix-web-ide-blob-crash.yml
new file mode 100644
index 00000000000..6ff209b5181
--- /dev/null
+++ b/changelogs/unreleased/48036-fix-web-ide-blob-crash.yml
@@ -0,0 +1,5 @@
+---
+title: Fix Web IDE crashing on directories named 'blob'
+merge_request: 20712
+author:
+type: fixed
diff --git a/spec/javascripts/ide/ide_router_spec.js b/spec/javascripts/ide/ide_router_spec.js
new file mode 100644
index 00000000000..52ea0882bf4
--- /dev/null
+++ b/spec/javascripts/ide/ide_router_spec.js
@@ -0,0 +1,44 @@
+import router from '~/ide/ide_router';
+import store from '~/ide/stores';
+
+describe('IDE router', () => {
+  const PROJECT_NAMESPACE = 'my-group/sub-group';
+  const PROJECT_NAME = 'my-project';
+
+  afterEach(() => {
+    router.push('/');
+  });
+
+  afterAll(() => {
+    // VueRouter leaves this window.history at the "base" url. We need to clean this up.
+    window.history.replaceState({}, '', '/');
+  });
+
+  [
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/master/-/src/blob/`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/master/-/src/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/blob/-/src/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/master/-/src/tree/`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/weird:branch/name-123/-/src/tree/`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/blob/master/-/src/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/blob/master/-/src/edit`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/blob/master/-/src/merge_requests/2`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/blob/blob/-/src/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/edit/blob/-/src/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/merge_requests/2`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/tree/blob`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/edit`,
+    `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}`,
+  ].forEach(route => {
+    it(`finds project path when route is "${route}"`, () => {
+      spyOn(store, 'dispatch').and.returnValue(new Promise(() => {}));
+
+      router.push(route);
+
+      expect(store.dispatch).toHaveBeenCalledWith('getProjectData', {
+        namespace: PROJECT_NAMESPACE,
+        projectId: PROJECT_NAME,
+      });
+    });
+  });
+});