Fix compatibility with Internet Explorer 11 for merge requests

5 files changed, 63 insertions, 4 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 29cba1a49dd..8fa80502d92 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -97,6 +97,19 @@
       return $('body').data('page').split(':')[0];
     };
 
+    gl.utils.parseUrl = function (url) {
+      var parser = document.createElement('a');
+      parser.href = url;
+      return parser;
+    };
+
+    gl.utils.parseUrlPathname = function (url) {
+      var parsedUrl = gl.utils.parseUrl(url);
+      // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11
+      // We have to make sure we always have an absolute path.
+      return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname;
+    };
+
     gl.utils.isMetaKey = function(e) {
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
diff --git a/app/assets/javascripts/merge_request_tabs.js.es6 b/app/assets/javascripts/merge_request_tabs.js.es6
index 583fb9fc03d..771803edb7c 100644
--- a/app/assets/javascripts/merge_request_tabs.js.es6
+++ b/app/assets/javascripts/merge_request_tabs.js.es6
@@ -225,11 +225,10 @@
 
       // We extract pathname for the current Changes tab anchor href
       // some pages like MergeRequestsController#new has query parameters on that anchor
-      const url = document.createElement('a');
-      url.href = source;
+      var urlPathname = gl.utils.parseUrlPathname(source);
 
       this.ajaxGet({
-        url: `${url.pathname}.json${location.search}`,
+        url: `${urlPathname}.json${location.search}`,
         success: (data) => {
           $('#diffs').html(data.html);
 
diff --git a/changelogs/unreleased/fix-compatibility-with-ie11-for-merge-requests.yml b/changelogs/unreleased/fix-compatibility-with-ie11-for-merge-requests.yml
new file mode 100644
index 00000000000..db92e45d8f1
--- /dev/null
+++ b/changelogs/unreleased/fix-compatibility-with-ie11-for-merge-requests.yml
@@ -0,0 +1,4 @@
+---
+title: Fix compatibility with Internet Explorer 11 for merge requests
+merge_request: 7525
+author: Steffen Rauh
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js.es6 b/spec/javascripts/lib/utils/common_utils_spec.js.es6
new file mode 100644
index 00000000000..ef75f600898
--- /dev/null
+++ b/spec/javascripts/lib/utils/common_utils_spec.js.es6
@@ -0,0 +1,32 @@
+//= require lib/utils/common_utils
+
+(() => {
+  describe('common_utils', () => {
+    describe('gl.utils.parseUrl', () => {
+      it('returns an anchor tag with url', () => {
+        expect(gl.utils.parseUrl('/some/absolute/url').pathname).toContain('some/absolute/url');
+      });
+      it('url is escaped', () => {
+        // IE11 will return a relative pathname while other browsers will return a full pathname.
+        // parseUrl uses an anchor element for parsing an url. With relative urls, the anchor
+        // element will create an absolute url relative to the current execution context.
+        // The JavaScript test suite is executed at '/teaspoon' which will lead to an absolute
+        // url starting with '/teaspoon'.
+        expect(gl.utils.parseUrl('" test="asf"').pathname).toEqual('/teaspoon/%22%20test=%22asf%22');
+      });
+    });
+    describe('gl.utils.parseUrlPathname', () => {
+      beforeEach(() => {
+        spyOn(gl.utils, 'parseUrl').and.callFake(url => ({
+          pathname: url,
+        }));
+      });
+      it('returns an absolute url when given an absolute url', () => {
+        expect(gl.utils.parseUrlPathname('/some/absolute/url')).toEqual('/some/absolute/url');
+      });
+      it('returns an absolute url when given a relative url', () => {
+        expect(gl.utils.parseUrlPathname('some/relative/url')).toEqual('/some/relative/url');
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 65e4177ecfe..4facc42c5b4 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -2,6 +2,8 @@
 
 /*= require merge_request_tabs */
 //= require breakpoints
+//= require lib/utils/common_utils
+//= require jquery.scrollTo
 
 (function () {
   describe('MergeRequestTabs', function () {
@@ -21,13 +23,13 @@
       setLocation();
 
       this.spies = {
-        ajax: spyOn($, 'ajax').and.callFake(function () {}),
         history: spyOn(window.history, 'replaceState').and.callFake(function () {})
       };
     });
 
     describe('#activateTab', function () {
       beforeEach(function () {
+        spyOn($, 'ajax').and.callFake(function() {});
         fixture.load('merge_request_tabs.html');
         this.subject = this.class.activateTab;
       });
@@ -51,6 +53,7 @@
 
     describe('#setCurrentAction', function () {
       beforeEach(function () {
+        spyOn($, 'ajax').and.callFake(function() {});
         this.subject = this.class.setCurrentAction;
       });
       it('changes from commits', function () {
@@ -107,5 +110,13 @@
         expect(this.subject('show')).toBe('/foo/bar/merge_requests/1');
       });
     });
+    describe('#loadDiff', function() {
+      it('requires an absolute pathname', function() {
+        spyOn($, 'ajax').and.callFake(function(options) {
+          expect(options.url).toEqual('/foo/bar/merge_requests/1/diffs.json');
+        });
+        this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
+      });
+    });
   });
 }).call(this);