Fix pagination and duplicate requests in environments page

This commit fixes two problems:

1. When a user clicked on another page, the app would fetch the new page
data but never update because the request and response parameters failed
to match the isEqual check. This was happening because the JSON response
omitted the `nested` attribute, so there was a comparison with a `null`
value.  We fix this by scrubbing undefined values before doing the
comparison.

2. There were duplicate requests made for the environments page because
the success handler of fetchPipelines() would cause the polling
component to make another XHR request.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/58191

1 files changed, 8 insertions, 5 deletions

diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index e81a1525df0..49b36143d17 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -43,7 +43,11 @@ export default {
     saveData(resp) {
       this.isLoading = false;
 
-      if (_.isEqual(resp.config.params, this.requestData)) {
+      // Prevent the absence of the nested flag from causing mismatches
+      const response = _.omit(resp.config.params, _.isUndefined);
+      const request = _.omit(this.requestData, _.isUndefined);
+
+      if (_.isEqual(response, request)) {
         this.store.storeAvailableCount(resp.data.available_count);
         this.store.storeStoppedCount(resp.data.stopped_count);
         this.store.storeEnvironments(resp.data.environments);
@@ -64,10 +68,9 @@ export default {
       // fetch new data
       return this.service
         .fetchEnvironments(this.requestData)
-        .then(response => this.successCallback(response))
-        .then(() => {
-          // restart polling
-          this.poll.restart({ data: this.requestData });
+        .then(response => {
+          this.successCallback(response);
+          this.poll.enable({ data: this.requestData, response });
         })
         .catch(() => {
           this.errorCallback();