Resolve "Web IDE doesn't work for branches with slashes"

4 files changed, 28 insertions, 16 deletions

diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index adca85dc65b..a21cec4e8d8 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -41,7 +41,7 @@ const router = new VueRouter({
       component: EmptyRouterComponent,
       children: [
         {
-          path: ':targetmode(edit|tree|blob)/:branch/*',
+          path: ':targetmode(edit|tree|blob)/*',
           component: EmptyRouterComponent,
         },
         {
@@ -63,23 +63,27 @@ router.beforeEach((to, from, next) => {
       .then(() => {
         const fullProjectId = `${to.params.namespace}/${to.params.project}`;
 
-        if (to.params.branch) {
-          store.dispatch('setCurrentBranchId', to.params.branch);
+        const baseSplit = to.params[0].split('/-/');
+        const branchId = baseSplit[0].slice(-1) === '/' ? baseSplit[0].slice(0, -1) : baseSplit[0];
+
+        if (branchId) {
+          const basePath = baseSplit.length > 1 ? baseSplit[1] : '';
+
+          store.dispatch('setCurrentBranchId', branchId);
 
           store.dispatch('getBranchData', {
             projectId: fullProjectId,
-            branchId: to.params.branch,
+            branchId,
           });
 
           store
             .dispatch('getFiles', {
               projectId: fullProjectId,
-              branchId: to.params.branch,
+              branchId,
             })
             .then(() => {
-              if (to.params[0]) {
-                const path =
-                  to.params[0].slice(-1) === '/' ? to.params[0].slice(0, -1) : to.params[0];
+              if (basePath) {
+                const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
                 const treeEntryKey = Object.keys(store.state.entries).find(
                   key => key === path && !store.state.entries[key].pending,
                 );
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index b6baa693104..13aea91d8ba 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -63,7 +63,9 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive
   const file = state.entries[path];
   commit(types.TOGGLE_LOADING, { entry: file });
   return service
-    .getFileData(`${gon.relative_url_root ? gon.relative_url_root : ''}${file.url}`)
+    .getFileData(
+      `${gon.relative_url_root ? gon.relative_url_root : ''}${file.url.replace('/-/', '/')}`,
+    )
     .then(res => {
       const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
       setPageTitle(pageTitle);
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index b85246b2502..cd25c3060f2 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -204,17 +204,23 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
             dispatch('updateViewer', 'editor', { root: true });
 
             router.push(
-              `/project/${rootState.currentProjectId}/blob/${getters.branchName}/${
+              `/project/${rootState.currentProjectId}/blob/${getters.branchName}/-/${
                 rootGetters.activeFile.path
               }`,
             );
           }
         })
         .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH))
-        .then(() => dispatch('refreshLastCommitData', {
-          projectId: rootState.currentProjectId,
-          branchId: rootState.currentBranchId,
-        }, { root: true }));
+        .then(() =>
+          dispatch(
+            'refreshLastCommitData',
+            {
+              projectId: rootState.currentProjectId,
+              branchId: rootState.currentBranchId,
+            },
+            { root: true },
+          ),
+        );
     })
     .catch(err => {
       let errMsg = __('Error committing changes. Please try again.');
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index d249b05f47c..0a1c253c637 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -26,7 +26,7 @@ self.addEventListener('message', e => {
             id: folderPath,
             name: folderName,
             path: folderPath,
-            url: `/${projectId}/tree/${branchId}/${folderPath}/`,
+            url: `/${projectId}/tree/${branchId}/-/${folderPath}/`,
             type: 'tree',
             parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
             tempFile,
@@ -64,7 +64,7 @@ self.addEventListener('message', e => {
         id: path,
         name: blobName,
         path,
-        url: `/${projectId}/blob/${branchId}/${path}`,
+        url: `/${projectId}/blob/${branchId}/-/${path}`,
         type: 'blob',
         parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
         tempFile,