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

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,
                 );

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);

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.');

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,

app/helpers/blob_helper.rb

@@ -17,7 +17,9 @@ module BlobHelper
   end
 
   def ide_edit_path(project = @project, ref = @ref, path = @path, options = {})
-    "#{ide_path}/project#{url_for([project, "edit", "blob", id: [ref, path], script_name: "/"])}"
+    segments = [ide_path, 'project', project.full_path, 'edit', ref]
+    segments.concat(['-', path]) if path.present?
+    File.join(segments)
   end
 
   def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
@@ -331,7 +333,6 @@ module BlobHelper
     if !on_top_of_branch?(project, ref)
       edit_disabled_button_tag(text, common_classes)
       # This condition only applies to users who are logged in
-      # Web IDE (Beta) requires the user to have this feature enabled
     elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
       edit_link_tag(text, edit_path, common_classes)
     elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)

app/views/projects/tree/_tree_header.html.haml

@@ -82,7 +82,7 @@
 
   - if can_collaborate
     = succeed " " do
-      = link_to ide_edit_path(@project, @id, ""), class: 'btn btn-default' do
+      = link_to ide_edit_path(@project, @ref, @path), class: 'btn btn-default' do
         = _('Web IDE')
 
   = render 'projects/buttons/download', project: @project, ref: @ref

spec/helpers/blob_helper_spec.rb

@@ -258,13 +258,19 @@ describe BlobHelper do
     it 'returns full IDE path' do
       Rails.application.routes.default_url_options[:script_name] = nil
 
-      expect(helper.ide_edit_path(project, "master", "")).to eq("/-/ide/project/#{project.namespace.path}/#{project.path}/edit/master/")
+      expect(helper.ide_edit_path(project, "master", "")).to eq("/-/ide/project/#{project.namespace.path}/#{project.path}/edit/master")
+    end
+
+    it 'returns full IDE path with second -' do
+      Rails.application.routes.default_url_options[:script_name] = nil
+
+      expect(helper.ide_edit_path(project, "testing/slashes", "readme.md")).to eq("/-/ide/project/#{project.namespace.path}/#{project.path}/edit/testing/slashes/-/readme.md")
     end
 
     it 'returns IDE path without relative_url_root' do
       Rails.application.routes.default_url_options[:script_name] = "/gitlab"
 
-      expect(helper.ide_edit_path(project, "master", "")).to eq("/gitlab/-/ide/project/#{project.namespace.path}/#{project.path}/edit/master/")
+      expect(helper.ide_edit_path(project, "master", "")).to eq("/gitlab/-/ide/project/#{project.namespace.path}/#{project.path}/edit/master")
     end
   end
 end