Merge branch 'add-stop-to-polling' into 'master'

Adds stop function so we can stop polling anytime

See merge request !10191

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

@@ -36,20 +36,21 @@ export default class Poll {
     this.options.data = options.data || {};
 
     this.intervalHeader = 'POLL-INTERVAL';
+    this.timeoutID = null;
+    this.canPoll = true;
   }
 
   checkConditions(response) {
     const headers = gl.utils.normalizeHeaders(response.headers);
     const pollInterval = headers[this.intervalHeader];
 
-    if (pollInterval > 0 && response.status === httpStatusCodes.OK) {
-      this.options.successCallback(response);
-      setTimeout(() => {
+    if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) {
+      this.timeoutID = setTimeout(() => {
         this.makeRequest();
       }, pollInterval);
-    } else {
-      this.options.successCallback(response);
     }
+
+    this.options.successCallback(response);
   }
 
   makeRequest() {
@@ -59,4 +60,14 @@ export default class Poll {
     .then(response => this.checkConditions(response))
     .catch(error => errorCallback(error));
   }
+
+  /**
+   * Stops the polling recursive chain
+   * and guarantees if the timeout is already running it won't make another request by
+   * cancelling the previously established timeout.
+   */
+  stop() {
+    this.canPoll = false;
+    clearTimeout(this.timeoutID);
+  }
 }

spec/javascripts/lib/utils/poll_spec.js

@@ -124,4 +124,40 @@ describe('Poll', () => {
 
     Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
   });
+
+  describe('stop', () => {
+    it('stops polling when method is called', (done) => {
+      const pollInterceptor = (request, next) => {
+        next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': 2 } }));
+      };
+
+      Vue.http.interceptors.push(pollInterceptor);
+
+      const service = new ServiceMock('endpoint');
+      spyOn(service, 'fetch').and.callThrough();
+
+      const Polling = new Poll({
+        resource: service,
+        method: 'fetch',
+        data: { page: 1 },
+        successCallback: () => {
+          Polling.stop();
+        },
+        errorCallback: callbacks.error,
+      });
+
+      spyOn(Polling, 'stop').and.callThrough();
+
+      Polling.makeRequest();
+
+      setTimeout(() => {
+        expect(service.fetch.calls.count()).toEqual(1);
+        expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
+        expect(Polling.stop).toHaveBeenCalled();
+        done();
+      }, 100);
+
+      Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
+    });
+  });
 });