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 ca3c0c6c 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

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

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

changelogs/unreleased/fix-compatibility-with-ie11-for-merge-requests.yml

+---
+title: Fix compatibility with Internet Explorer 11 for merge requests
+merge_request: 7525
+author: Steffen Rauh

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',

spec/javascripts/lib/utils/common_utils_spec.js.es6

+//= 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');
+      });
+    });
+  });
+})();

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