Merge pull request #1197 from eclarizio/BZ1442811

Fix for Service Catalogs: Dialogs are hanging and keeps buffering (cherry picked from commit 27a33c9) https://bugzilla.redhat.com/show_bug.cgi?id=1447088
ManageIQ · May 1, 2017 · dde21c3 · dde21c3
1 parent 3e98922
commit dde21c3
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 14 deletions.
diff --git a/app/assets/javascripts/dialog_field_refresh.js b/app/assets/javascripts/dialog_field_refresh.js
@@ -1,16 +1,20 @@
 /* global miqInitSelectPicker miqSelectPickerEvent miqSparkle miqSparkleOn */
 
 var dialogFieldRefresh = {
+  unbindAllPreviousListeners: function() {
+    $(document).off('dialog::autoRefresh');
+  },
+
   listenForAutoRefreshMessages: function(autoRefreshOptions, callbackFunction) {
-    var thisIsTheFieldToUpdate = function(event) {
-      var tabIndex = event.data.tabIndex;
-      var groupIndex = event.data.groupIndex;
-      var fieldIndex = event.data.fieldIndex;
+    var thisIsTheFieldToUpdate = function(data) {
+      var tabIndex = data.tabIndex;
+      var groupIndex = data.groupIndex;
+      var fieldIndex = data.fieldIndex;
       return tabIndex === autoRefreshOptions.tab_index && groupIndex === autoRefreshOptions.group_index && fieldIndex === autoRefreshOptions.field_index;
     };
 
-    window.addEventListener('message', function(event) {
-      if (thisIsTheFieldToUpdate(event)) {
+    $(document).on('dialog::autoRefresh', function(_event, data) {
+      if (thisIsTheFieldToUpdate(data)) {
         callbackFunction.call();
       }
     });
@@ -181,11 +185,11 @@ var dialogFieldRefresh = {
       nextAvailable = nextAvailable[0];
 
       if (nextAvailable !== undefined) {
-        parent.postMessage({
+        $(document).trigger('dialog::autoRefresh', {
           tabIndex: nextAvailable.tab_index,
           groupIndex: nextAvailable.group_index,
           fieldIndex: nextAvailable.field_index,
-        }, '*');
+        });
       }
     }
   },

diff --git a/app/views/shared/dialogs/_dialog_provision.html.haml b/app/views/shared/dialogs/_dialog_provision.html.haml
@@ -1,5 +1,9 @@
 - wf = @edit[:wf] if @edit && @edit[:wf]
 = render :partial => "layouts/flash_msg"
+
+:javascript
+  dialogFieldRefresh.unbindAllPreviousListeners();
+
 .row
   .col-md-12.col-lg-12
     #dialog_tabs

diff --git a/spec/javascripts/dialog_field_refresh_spec.js b/spec/javascripts/dialog_field_refresh_spec.js
@@ -1,4 +1,53 @@
 describe('dialogFieldRefresh', function() {
+  describe('#listenForAutoRefreshMessages', function() {
+    context('when an autoRefresh event gets triggered', function() {
+      var callback;
+      var autoRefreshOptions;
+
+      beforeEach(function() {
+        callback = jasmine.createSpyObj('callback', ['call']);
+        autoRefreshOptions = {
+          tab_index: 1,
+          group_index: 2,
+          field_index: 3
+        };
+        dialogFieldRefresh.listenForAutoRefreshMessages(autoRefreshOptions, callback);
+      });
+
+      context('when the tab index, group index, and field index match the corresponding field', function() {
+        beforeEach(function() {
+          $(document).trigger('dialog::autoRefresh', {tabIndex: 1, groupIndex: 2, fieldIndex: 3});
+        });
+
+        it('executes the callback', function() {
+          expect(callback.call).toHaveBeenCalled();
+        });
+      });
+
+      context('when the tab index, group index, and field index do not match the corresponding field', function() {
+        beforeEach(function() {
+          $(document).trigger('dialog::autoRefresh', {tabIndex: 1, groupIndex: 1, fieldIndex: 3});
+        });
+
+        it('does not execute the callback', function() {
+          expect(callback.call).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('#unbindAllPreviousListeners', function() {
+    beforeEach(function() {
+      spyOn($.fn, 'off');
+    });
+
+    it('unbinds all autoRefresh messages from the document', function() {
+      dialogFieldRefresh.unbindAllPreviousListeners();
+      expect($.fn.off.calls.mostRecent().object).toEqual(document);
+      expect($.fn.off).toHaveBeenCalledWith('dialog::autoRefresh');
+    });
+  });
+
   describe('#addOptionsToDropDownList', function() {
     var data = {};
 
@@ -581,13 +630,13 @@ describe('dialogFieldRefresh', function() {
 
   describe('#triggerAutoRefresh', function() {
     beforeEach(function() {
-      spyOn(parent, 'postMessage');
+      spyOn($.fn, 'trigger');
     });
 
     context('when the trigger passed in falsy', function() {
       it('does not post any messages', function() {
         dialogFieldRefresh.triggerAutoRefresh({trigger: ""});
-        expect(parent.postMessage).not.toHaveBeenCalled();
+        expect($.fn.trigger).not.toHaveBeenCalled();
       });
     });
 
@@ -602,7 +651,7 @@ describe('dialogFieldRefresh', function() {
         });
 
         it('does not post a message', function() {
-          expect(parent.postMessage).not.toHaveBeenCalled();
+          expect($.fn.trigger).not.toHaveBeenCalled();
         });
       });
 
@@ -619,7 +668,7 @@ describe('dialogFieldRefresh', function() {
         });
 
         it('posts a message', function() {
-          expect(parent.postMessage).toHaveBeenCalledWith({tabIndex: 1, groupIndex: 1, fieldIndex: 2}, '*');
+          expect($.fn.trigger).toHaveBeenCalledWith('dialog::autoRefresh', {tabIndex: 1, groupIndex: 1, fieldIndex: 2});
         });
       });
     });
@@ -635,7 +684,7 @@ describe('dialogFieldRefresh', function() {
         });
 
         it('does not post a message', function() {
-          expect(parent.postMessage).not.toHaveBeenCalled();
+          expect($.fn.trigger).not.toHaveBeenCalled();
         });
       });
 
@@ -652,7 +701,7 @@ describe('dialogFieldRefresh', function() {
         });
 
         it('posts a message', function() {
-          expect(parent.postMessage).toHaveBeenCalledWith({tabIndex: 1, groupIndex: 1, fieldIndex: 2}, '*');
+          expect($.fn.trigger).toHaveBeenCalledWith('dialog::autoRefresh', {tabIndex: 1, groupIndex: 1, fieldIndex: 2});
         });
       });
     });