Merge branch 'fix-compatibility-with-ie11-for-merge-requests' into 'master'

Fix compatibility with Internet Explorer 11 for merge requests

## What does this MR do?
This merge request restores the compatibility with Internet Explorer 11.

## Are there points in the code the reviewer needs to double check?
No.

## Why was this MR needed?
Commit ca3c0c6cd915d44ec2d409b04ab05d964bd5a403 introduced an incompatibility with Internet Explorer 11. On all merge requests in all projects the 'Changes' tab does not display the changes in IE11 but instead fails with 'Something went wrong on our end'. The reason ist, that this code snipped produces different results on Firefox and Internet Explorer 11:

```
var element = document.createElement('a');
element.href = '/some/absolute/url';
alert(element.pathname);
```

With Internet Explorer 11 the alert will print a relative path, whereas with Firefox the alert will print an absolute path. For GitLab this meant that a wrong AJAX URL was composed which resulted in a 404.

## Screenshots (if relevant)
None.

## Does this MR meet the acceptance criteria?

- [X] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [X] Added for this feature/bug
  - [ ] All builds are passing
- [X] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [X] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [X] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
#23977 
#24380

See merge request !7525

6 files changed, 67 insertions, 4 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index d83c41fae9d..19266479048 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -126,6 +126,19 @@
       $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
     };
 
+    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..3ec0f1fd613 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;
+      const 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/bootstrap_linked_tabs_spec.js.es6 b/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
index 9aa3c50611d..133712debab 100644
--- a/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
+++ b/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
@@ -9,6 +9,10 @@
     });
 
     describe('when is initialized', () => {
+      beforeEach(() => {
+        spyOn(window.history, 'replaceState').and.callFake(function () {});
+      });
+
       it('should activate the tab correspondent to the given action', () => {
         const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
           action: 'tab1',
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..130d391bfab 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);