Merge branch '3501-fix-rebase-in-ie' into 'master'

Fix rebase in IE

Closes #3501

See merge request gitlab-org/gitlab-ee!3732

app/assets/javascripts/lib/utils/axios_utils.js

@@ -2,6 +2,8 @@ import axios from 'axios';
 import csrf from './csrf';
 
 axios.defaults.headers.common[csrf.headerKey] = csrf.token;
+// Used by Rails to check if it is a valid XHR request
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb

changelogs/unreleased-ee/3501-fix-rebase-in-ie.yml

+---
+title: Fix Merge Rquest widget rebase action in Internet Explorer
+merge_request: 3732
+author:
+type: fixed

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -23,7 +23,7 @@
     data() {
       return {
         isMakingRequest: false,
-        rebasingError: '',
+        rebasingError: null,
       };
     },
     computed: {
@@ -39,14 +39,11 @@
       showDisabledButton() {
         return ['failed', 'loading'].includes(this.status);
       },
-      hasRebasingError() {
-        return this.rebasingError.length;
-      },
     },
     methods: {
       rebase() {
         this.isMakingRequest = true;
-        this.rebasingError = '';
+        this.rebasingError = null;
 
         this.service.rebase()
           .then(() => {
@@ -117,7 +114,7 @@
             Rebase
           </button>
           <span
-            v-if="!hasRebasingError"
+            v-if="!rebasingError"
             class="bold">
             Fast-forward merge is not possible.
             Rebase the source branch onto the target branch or merge target

ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

-import Vue from 'vue';
+import axios from '~/lib/utils/axios_utils';
 
 import CEWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
@@ -6,36 +6,31 @@ export default class MRWidgetService extends CEWidgetService {
   constructor(mr) {
     super(mr);
 
-    // Set as a text/plain request so BE doesn't try to parse
-    // See https://gitlab.com/gitlab-org/gitlab-ce/issues/34534
-    this.approvalsResource = Vue.resource(mr.approvalsPath, {}, {}, {
-      headers: {
-        'Content-Type': 'text/plain',
-      },
-    });
-    this.rebaseResource = Vue.resource(mr.rebasePath);
+    this.approvalsPath = mr.approvalsPath;
+    this.rebasePath = mr.rebasePath;
   }
 
   fetchApprovals() {
-    return this.approvalsResource.get()
-      .then(res => res.json());
+    return axios.get(this.approvalsPath)
+      .then(res => res.data);
   }
 
   approveMergeRequest() {
-    return this.approvalsResource.save()
-      .then(res => res.json());
+    return axios.post(this.approvalsPath)
+      .then(res => res.data);
   }
 
   unapproveMergeRequest() {
-    return this.approvalsResource.delete()
-      .then(res => res.json());
+    return axios.delete(this.approvalsPath)
+      .then(res => res.data);
   }
 
   rebase() {
-    return this.rebaseResource.save();
+    return axios.post(this.rebasePath);
   }
 
   fetchReport(endpoint) { // eslint-disable-line
-    return Vue.http.get(endpoint).then(res => res.json());
+    return axios.get(endpoint)
+      .then(res => res.data);
   }
 }

spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js

 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import mrWidgetOptions from 'ee/vue_merge_request_widget/mr_widget_options';
 import MRWidgetService from 'ee/vue_merge_request_widget/services/mr_widget_service';
 import MRWidgetStore from 'ee/vue_merge_request_widget/stores/mr_widget_store';
@@ -49,21 +51,16 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with successful request', () => {
-      const interceptor = (request, next) => {
-        if (request.url === 'path.json') {
-          next(request.respondWith(JSON.stringify(securityIssues), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(interceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('path.json').reply(200, securityIssues);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -77,21 +74,16 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with empty successful request', () => {
-      const emptyInterceptor = (request, next) => {
-        if (request.url === 'path.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(emptyInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('path.json').reply(200, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, emptyInterceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -105,21 +97,16 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with failed request', () => {
-      const errorInterceptor = (request, next) => {
-        if (request.url === 'path.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 500,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(errorInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('path.json').reply(500, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, errorInterceptor);
+        mock.reset();
       });
 
       it('should render error indicator', (done) => {
@@ -157,27 +144,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with successful request', () => {
-      const interceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify(headIssues), {
-            status: 200,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify(baseIssues), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(interceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(200, headIssues);
+        mock.onGet('base.json').reply(200, baseIssues);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -218,27 +195,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with empty successful request', () => {
-      const emptyInterceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 200,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(emptyInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(200, []);
+        mock.onGet('base.json').reply(200, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, emptyInterceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -252,27 +219,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with failed request', () => {
-      const errorInterceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 500,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 500,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(errorInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(500, []);
+        mock.onGet('base.json').reply(500, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, errorInterceptor);
+        mock.reset();
       });
 
       it('should render error indicator', (done) => {
@@ -308,27 +265,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with successful request', () => {
-      const interceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify(headPerformance), {
-            status: 200,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify(basePerformance), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(interceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(200, headPerformance);
+        mock.onGet('base.json').reply(200, basePerformance);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -370,27 +317,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with empty successful request', () => {
-      const emptyInterceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 200,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 200,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(emptyInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(200, []);
+        mock.onGet('base.json').reply(200, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, emptyInterceptor);
+        mock.reset();
       });
 
       it('should render provided data', (done) => {
@@ -404,27 +341,17 @@ describe('ee merge request widget options', () => {
     });
 
     describe('with failed request', () => {
-      const errorInterceptor = (request, next) => {
-        if (request.url === 'head.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 500,
-          }));
-        }
-
-        if (request.url === 'base.json') {
-          next(request.respondWith(JSON.stringify([]), {
-            status: 500,
-          }));
-        }
-      };
+      let mock;
 
       beforeEach(() => {
-        Vue.http.interceptors.push(errorInterceptor);
+        mock = mock = new MockAdapter(axios);
+        mock.onGet('head.json').reply(500, []);
+        mock.onGet('base.json').reply(500, []);
         vm = mountComponent(Component);
       });
 
       afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, errorInterceptor);
+        mock.reset();
       });
 
       it('should render error indicator', (done) => {