Handle cancelled request40487-stop-polling

[ci skip] Adds specs

Adds specs

2 files changed, 21 insertions, 12 deletions

diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
new file mode 100644
index 00000000000..b384c7500e7
--- /dev/null
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CANCEL_REQUEST = 'CANCEL_REQUEST';
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index a70b777d726..6d87f75ae8e 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -7,6 +7,7 @@ import SvgBlankState from '../components/blank_state.vue';
 import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
+import { CANCEL_REQUEST } from '../constants';
 
 export default {
   components: {
@@ -65,15 +66,13 @@ export default {
     updateTable() {
       // Cancel ongoing request
       if (this.isMakingRequest) {
-        this.service.cancelationSource.cancel();
+        this.service.cancelationSource.cancel(CANCEL_REQUEST);
       }
-
       // Stop polling
       this.poll.stop();
-      // make new request
-      this.getPipelines();
-      // restart polling
-      this.poll.restart();
+      // Update the table
+      return this.getPipelines()
+        .then(() => this.poll.restart());
     },
     fetchPipelines() {
       if (!this.isMakingRequest) {
@@ -83,21 +82,29 @@ export default {
       }
     },
     getPipelines() {
-      this.service.getPipelines(this.requestData)
+      return this.service.getPipelines(this.requestData)
         .then(response => this.successCallback(response))
-        .catch(() => this.errorCallback());
+        .catch((error) => this.errorCallback(error));
     },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
       this.isLoading = false;
       this.updateGraphDropdown = true;
       this.hasMadeRequest = true;
+
+      // In case the previous polling request returned an error, we need to reset it
+      if (this.hasError) {
+        this.hasError = false;
+      }
     },
-    errorCallback() {
-      this.hasError = true;
-      this.isLoading = false;
-      this.updateGraphDropdown = false;
+    errorCallback(error) {
       this.hasMadeRequest = true;
+      this.isLoading = false;
+
+      if (error && error.message && error.message !== CANCEL_REQUEST) {
+        this.hasError = true;
+        this.updateGraphDropdown = false;
+      }
     },
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;