Fixes the web IDE link in tree list opening the wrong URL

Closes #44477

app/assets/javascripts/ide/components/repo_file.vue

@@ -43,6 +43,7 @@ export default {
         'file-open': this.isBlob && this.file.opened,
         'file-active': this.isBlob && this.file.active,
         folder: this.isTree,
+        'is-open': this.file.opened,
       };
     },
   },

app/assets/javascripts/ide/ide_router.js

@@ -54,41 +54,61 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.params.namespace && to.params.project) {
-    store.dispatch('getProjectData', {
-      namespace: to.params.namespace,
-      projectId: to.params.project,
-    })
-    .then(() => {
-      const fullProjectId = `${to.params.namespace}/${to.params.project}`;
+    store
+      .dispatch('getProjectData', {
+        namespace: to.params.namespace,
+        projectId: to.params.project,
+      })
+      .then(() => {
+        const fullProjectId = `${to.params.namespace}/${to.params.project}`;
 
-      if (to.params.branch) {
-        store.dispatch('getBranchData', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        });
+        if (to.params.branch) {
+          store.dispatch('getBranchData', {
+            projectId: fullProjectId,
+            branchId: to.params.branch,
+          });
 
-        store.dispatch('getFiles', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        })
-        .then(() => {
-          if (to.params[0]) {
-            const treeEntry = store.state.entries[to.params[0]];
-            if (treeEntry) {
-              store.dispatch('handleTreeEntryAction', treeEntry);
-            }
-          }
-        })
-        .catch((e) => {
-          flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
-          throw e;
-        });
-      }
-    })
-    .catch((e) => {
-      flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true);
-      throw e;
-    });
+          store
+            .dispatch('getFiles', {
+              projectId: fullProjectId,
+              branchId: to.params.branch,
+            })
+            .then(() => {
+              if (to.params[0]) {
+                const path =
+                  to.params[0].slice(-1) === '/'
+                    ? to.params[0].slice(0, -1)
+                    : to.params[0];
+                const treeEntry = store.state.entries[path];
+                if (treeEntry) {
+                  store.dispatch('handleTreeEntryAction', treeEntry);
+                }
+              }
+            })
+            .catch(e => {
+              flash(
+                'Error while loading the branch files. Please try again.',
+                'alert',
+                document,
+                null,
+                false,
+                true,
+              );
+              throw e;
+            });
+        }
+      })
+      .catch(e => {
+        flash(
+          'Error while loading the project data. Please try again.',
+          'alert',
+          document,
+          null,
+          false,
+          true,
+        );
+        throw e;
+      });
   }
 
   next();

app/assets/javascripts/ide/stores/workers/files_decorator_worker.js

-import {
-  decorateData,
-  sortTree,
-} from '../utils';
+import { decorateData, sortTree } from '../utils';
 
-self.addEventListener('message', (e) => {
-  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
+self.addEventListener('message', e => {
+  const {
+    data,
+    projectId,
+    branchId,
+    tempFile = false,
+    content = '',
+    base64 = false,
+  } = e.data;
 
   const treeList = [];
   let file;
@@ -15,7 +19,9 @@ self.addEventListener('message', (e) => {
     if (pathSplit.length > 0) {
       pathSplit.reduce((pathAcc, folderName) => {
         const parentFolder = acc[pathAcc[pathAcc.length - 1]];
-        const folderPath = `${(parentFolder ? `${parentFolder.path}/` : '')}${folderName}`;
+        const folderPath = `${
+          parentFolder ? `${parentFolder.path}/` : ''
+        }${folderName}`;
         const foundEntry = acc[folderPath];
 
         if (!foundEntry) {
@@ -25,9 +31,11 @@ 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}/`,
+            parentTreeUrl: parentFolder
+              ? parentFolder.url
+              : `/${projectId}/tree/${branchId}/`,
             tempFile,
             changed: tempFile,
             opened: tempFile,
@@ -62,7 +70,9 @@ self.addEventListener('message', (e) => {
         path,
         url: `/${projectId}/blob/${branchId}/${path}`,
         type: 'blob',
-        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        parentTreeUrl: fileFolder
+          ? fileFolder.url
+          : `/${projectId}/blob/${branchId}`,
         tempFile,
         changed: tempFile,
         content,

app/assets/javascripts/vue_shared/components/file_icon.vue

@@ -62,8 +62,7 @@
         return `${gon.sprite_file_icons}#${iconName}`;
       },
       folderIconName() {
-        // We don't have a open folder icon yet
-        return this.opened ? 'folder' : 'folder';
+        return this.opened ? 'folder-open' : 'folder';
       },
       iconSizeClass() {
         return this.size ? `s${this.size}` : '';

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

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

changelogs/unreleased/ide-folder-button-path.yml

+---
+title: Fixed IDE button opening the wrong URL in tree list
+merge_request:
+author:
+type: fixed

spec/features/projects/tree/tree_show_spec.rb

@@ -25,4 +25,18 @@ feature 'Projects tree' do
       expect(page).to have_selector('.label-lfs', text: 'LFS')
     end
   end
+
+  context 'web IDE', :js do
+    before do
+      visit project_tree_path(project, File.join('master', 'bar'))
+
+      click_link 'Web IDE'
+
+      find('.ide-file-list')
+    end
+
+    it 'opens folder in IDE' do
+      expect(page).to have_selector('.is-open', text: 'bar')
+    end
+  end
 end