Merge branch 'ide-url-util-relative-url-fix' into 'master'

Fixes IDE button on merge requests not working with relative URL config

Closes #46438

See merge request gitlab-org/gitlab-ce!19546

4 files changed, 48 insertions, 3 deletions

diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index dd17544b656..72b72f4247d 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -85,9 +85,9 @@ export function redirectTo(url) {
 }
 
 export function webIDEUrl(route = undefined) {
-  let returnUrl = `${gon.relative_url_root}/-/ide/`;
+  let returnUrl = `${gon.relative_url_root || ''}/-/ide/`;
   if (route) {
-    returnUrl += `project${route}`;
+    returnUrl += `project${route.replace(new RegExp(`^${gon.relative_url_root || ''}`), '')}`;
   }
   return returnUrl;
 }
diff --git a/changelogs/unreleased/ide-url-util-relative-url-fix.yml b/changelogs/unreleased/ide-url-util-relative-url-fix.yml
new file mode 100644
index 00000000000..9f0f4a0f7be
--- /dev/null
+++ b/changelogs/unreleased/ide-url-util-relative-url-fix.yml
@@ -0,0 +1,6 @@
+---
+title: Fixes Web IDE button on merge requests when GitLab is installed with relative
+  URL
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/lib/utils/url_utility_spec.js b/spec/javascripts/lib/utils/url_utility_spec.js
new file mode 100644
index 00000000000..c7f4092911c
--- /dev/null
+++ b/spec/javascripts/lib/utils/url_utility_spec.js
@@ -0,0 +1,29 @@
+import { webIDEUrl } from '~/lib/utils/url_utility';
+
+describe('URL utility', () => {
+  describe('webIDEUrl', () => {
+    afterEach(() => {
+      gon.relative_url_root = '';
+    });
+
+    describe('without relative_url_root', () => {
+      it('returns IDE path with route', () => {
+        expect(webIDEUrl('/gitlab-org/gitlab-ce/merge_requests/1')).toBe(
+          '/-/ide/project/gitlab-org/gitlab-ce/merge_requests/1',
+        );
+      });
+    });
+
+    describe('with relative_url_root', () => {
+      beforeEach(() => {
+        gon.relative_url_root = '/gitlab';
+      });
+
+      it('returns IDE path with route', () => {
+        expect(webIDEUrl('/gitlab/gitlab-org/gitlab-ce/merge_requests/1')).toBe(
+          '/gitlab/-/ide/project/gitlab-org/gitlab-ce/merge_requests/1',
+        );
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 9b9c9656979..3d36e46d863 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -12,6 +12,7 @@ describe('MRWidgetHeader', () => {
 
   afterEach(() => {
     vm.$destroy();
+    gon.relative_url_root = '';
   });
 
   describe('computed', () => {
@@ -145,7 +146,16 @@ describe('MRWidgetHeader', () => {
         const button = vm.$el.querySelector('.js-web-ide');
 
         expect(button.textContent.trim()).toEqual('Web IDE');
-        expect(button.getAttribute('href')).toEqual('undefined/-/ide/projectabc');
+        expect(button.getAttribute('href')).toEqual('/-/ide/projectabc');
+      });
+
+      it('renders web ide button with relative URL', () => {
+        gon.relative_url_root = '/gitlab';
+
+        const button = vm.$el.querySelector('.js-web-ide');
+
+        expect(button.textContent.trim()).toEqual('Web IDE');
+        expect(button.getAttribute('href')).toEqual('/-/ide/projectabc');
       });
 
       it('renders download dropdown with links', () => {