From 5b7fd07cc64d23e248fd37247206e607c183d199 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 16 Nov 2016 19:15:50 +0100
Subject: [PATCH 1/4] Subscribe milestone to issuable updates.

---
 app/assets/javascripts/milestone_select.js | 39 +++++++++++++---------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index d1cd38ad1104a..e46922a05cb5a 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -32,6 +32,28 @@
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
           collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
         }
+
+        var renderMethod = function(data) {
+          $dropdown.trigger('loaded.gl.dropdown');
+          $loading.fadeOut();
+          $selectbox.hide();
+          $value.css('display', '');
+          if (data.milestone != null) {
+            data.milestone.namespace = _this.currentProject.namespace;
+            data.milestone.path = _this.currentProject.path;
+            data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
+            $value.html(milestoneLinkTemplate(data.milestone));
+            return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
+          } else {
+            $value.html(milestoneLinkNoneTemplate);
+            return $sidebarCollapsedValue.find('span').text('No');
+          }
+        };
+
+        if (gl.IssuableResource) {
+          gl.IssuableResource.subscribe(renderMethod);
+        }
+
         return $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
           data: function(term, callback) {
@@ -154,22 +176,7 @@
                 type: 'PUT',
                 url: issueUpdateURL,
                 data: data
-              }).done(function(data) {
-                $dropdown.trigger('loaded.gl.dropdown');
-                $loading.fadeOut();
-                $selectbox.hide();
-                $value.css('display', '');
-                if (data.milestone != null) {
-                  data.milestone.namespace = _this.currentProject.namespace;
-                  data.milestone.path = _this.currentProject.path;
-                  data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
-                  $value.html(milestoneLinkTemplate(data.milestone));
-                  return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
-                } else {
-                  $value.html(milestoneLinkNoneTemplate);
-                  return $sidebarCollapsedValue.find('span').text('No');
-                }
-              });
+              }).done(renderMethod);
             }
           }
         });
-- 
GitLab


From f566c440cda10ef496a878a98e4780fa8c36d414 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 16 Nov 2016 20:02:52 +0100
Subject: [PATCH 2/4] Subscribe DueDateSelect to Issuable resource.

---
 app/assets/javascripts/due_date_select.js.es6 | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
index fd7f961aab980..ddc7191ef6104 100644
--- a/app/assets/javascripts/due_date_select.js.es6
+++ b/app/assets/javascripts/due_date_select.js.es6
@@ -25,6 +25,7 @@
       this.initRemoveDueDate();
       this.initDatePicker();
       this.initStopPropagation();
+      this.subscribeToIssuableUpdates();
     }
 
     initGlDropdown() {
@@ -72,6 +73,12 @@
       });
     }
 
+    subscribeToIssuableUpdates() {
+      if (gl.IssuableResource) {
+        gl.IssuableResource.subscribe(this.renderUpdatedDueDate.bind(this));
+      }
+    }
+
     saveDueDate(isDropdown) {
       this.parseSelectedDate();
       this.prepSelectedDate();
@@ -107,39 +114,43 @@
         });
     }
 
+    renderUpdatedDueDate(data) {
+      const selectedDateValue = data.due_date;
+
+      this.displayedDate = data.due_date !== null ? $.datepicker.formatDate('M d, yy', new Date(selectedDateValue)) : 'No due date';
+
+      const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
+
+      this.$loading.fadeIn();
+
+      if (this.isDropdown) {
+        this.$dropdown.trigger('loading.gl.dropdown');
+        this.$selectbox.hide();
+      }
+
+      this.$value.css('display', '');
+      this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
+      this.$sidebarValue.html(this.displayedDate);
+
+      selectedDateValue !== null ?
+          $('.js-remove-due-date-holder').removeClass('hidden') :
+          $('.js-remove-due-date-holder').addClass('hidden');
+
+      if (this.isDropdown) {
+        this.$dropdown.trigger('loaded.gl.dropdown');
+        this.$dropdown.dropdown('toggle');
+      }
+      return this.$loading.fadeOut();
+    }
+
     submitSelectedDate(isDropdown) {
+      this.isDropdown = isDropdown;
       return $.ajax({
         type: 'PUT',
         url: this.issueUpdateURL,
         data: this.datePayload,
         dataType: 'json',
-        beforeSend: () => {
-          const selectedDateValue = this.datePayload[this.abilityName].due_date;
-          const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
-
-          this.$loading.fadeIn();
-
-          if (isDropdown) {
-            this.$dropdown.trigger('loading.gl.dropdown');
-            this.$selectbox.hide();
-          }
-
-          this.$value.css('display', '');
-          this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
-          this.$sidebarValue.html(this.displayedDate);
-
-          return selectedDateValue.length ?
-            $('.js-remove-due-date-holder').removeClass('hidden') :
-            $('.js-remove-due-date-holder').addClass('hidden');
-
-        }
-      }).done((data) => {
-        if (isDropdown) {
-          this.$dropdown.trigger('loaded.gl.dropdown');
-          this.$dropdown.dropdown('toggle');
-        }
-        return this.$loading.fadeOut();
-      });
+      }).done((data) => this.renderUpdatedDueDate(data))
     }
   }
 
-- 
GitLab


From 171c308443abd9c6b3440bfe97b312760741041e Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 16 Nov 2016 20:03:33 +0100
Subject: [PATCH 3/4] Subscribe label select to IssuableResource.

---
 app/assets/javascripts/labels_select.js | 105 +++++++++++++-----------
 1 file changed, 56 insertions(+), 49 deletions(-)

diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index c334e3e0c0265..14d96f2f0b7b0 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -50,6 +50,61 @@
           new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
         }
 
+
+        var renderMethod = function(data) {
+          var labelCount, template, labelTooltipTitle, labelTitles;
+          $loading.fadeOut();
+          $dropdown.trigger('loaded.gl.dropdown');
+          $selectbox.hide();
+          data.issueURLSplit = issueURLSplit;
+          labelCount = 0;
+          if (data.labels.length) {
+            template = labelHTMLTemplate(data);
+            labelCount = data.labels.length;
+          }
+          else {
+            template = labelNoneHTMLTemplate;
+          }
+          $value.removeAttr('style').html(template);
+          $sidebarCollapsedValue.text(labelCount);
+
+          if (data.labels.length) {
+            labelTitles = data.labels.map(function(label) {
+              return label.title;
+            });
+
+            if (labelTitles.length > 5) {
+              labelTitles = labelTitles.slice(0, 5);
+              labelTitles.push('and ' + (data.labels.length - 5) + ' more');
+            }
+
+            labelTooltipTitle = labelTitles.join(', ');
+          }
+          else {
+            labelTooltipTitle = '';
+            $sidebarLabelTooltip.tooltip('destroy');
+          }
+
+          $sidebarLabelTooltip
+            .attr('title', labelTooltipTitle)
+            .tooltip('fixTitle');
+
+          $('.has-tooltip', $value).tooltip({
+            container: 'body'
+          });
+          return $value.find('a').each(function(i) {
+            return setTimeout((function(_this) {
+              return function() {
+                return gl.animate.animate($(_this), 'pulse');
+              };
+            })(this), 200 * i);
+          });
+        };
+
+        if (gl.IssuableResource) {
+          gl.IssuableResource.subscribe(renderMethod);
+        }
+
         saveLabelData = function() {
           var data, selected;
           selected = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "']").map(function() {
@@ -72,55 +127,7 @@
             url: issueUpdateURL,
             dataType: 'JSON',
             data: data
-          }).done(function(data) {
-            var labelCount, template, labelTooltipTitle, labelTitles;
-            $loading.fadeOut();
-            $dropdown.trigger('loaded.gl.dropdown');
-            $selectbox.hide();
-            data.issueURLSplit = issueURLSplit;
-            labelCount = 0;
-            if (data.labels.length) {
-              template = labelHTMLTemplate(data);
-              labelCount = data.labels.length;
-            }
-            else {
-              template = labelNoneHTMLTemplate;
-            }
-            $value.removeAttr('style').html(template);
-            $sidebarCollapsedValue.text(labelCount);
-
-            if (data.labels.length) {
-              labelTitles = data.labels.map(function(label) {
-                return label.title;
-              });
-
-              if (labelTitles.length > 5) {
-                labelTitles = labelTitles.slice(0, 5);
-                labelTitles.push('and ' + (data.labels.length - 5) + ' more');
-              }
-
-              labelTooltipTitle = labelTitles.join(', ');
-            }
-            else {
-              labelTooltipTitle = '';
-              $sidebarLabelTooltip.tooltip('destroy');
-            }
-
-            $sidebarLabelTooltip
-              .attr('title', labelTooltipTitle)
-              .tooltip('fixTitle');
-
-            $('.has-tooltip', $value).tooltip({
-              container: 'body'
-            });
-            return $value.find('a').each(function(i) {
-              return setTimeout((function(_this) {
-                return function() {
-                  return gl.animate.animate($(_this), 'pulse');
-                };
-              })(this), 200 * i);
-            });
-          });
+          }).done(renderMethod);
         };
         return $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
-- 
GitLab


From 41b587c36e11989e6df32c40f7f060b0e9654fd3 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 16 Nov 2016 20:11:07 +0100
Subject: [PATCH 4/4] Subscribe assignee select to Issuable resource.

---
 app/assets/javascripts/users_select.js | 51 +++++++++++++++-----------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 7a2221dbaf5f6..7d4c3fe232c31 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -48,6 +48,34 @@
               });
           };
 
+          var renderMethod = function(data) {
+            var user;
+            $dropdown.trigger('loaded.gl.dropdown');
+            $loading.fadeOut();
+            $selectbox.hide();
+            if (data.assignee) {
+              user = {
+                name: data.assignee.name,
+                username: data.assignee.username,
+                avatar: data.assignee.avatar_url
+              };
+            } else {
+              user = {
+                name: 'Unassigned',
+                username: '',
+                avatar: ''
+              };
+            }
+
+            $value.html(assigneeTemplate(user));
+            $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
+            return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
+          };
+
+          if (gl.IssuableResource) {
+            gl.IssuableResource.subscribe(renderMethod);
+          }
+
           $block.on('click', '.js-assign-yourself', function(e) {
             e.preventDefault();
 
@@ -76,28 +104,7 @@
               dataType: 'json',
               url: issueURL,
               data: data
-            }).done(function(data) {
-              var user;
-              $dropdown.trigger('loaded.gl.dropdown');
-              $loading.fadeOut();
-              $selectbox.hide();
-              if (data.assignee) {
-                user = {
-                  name: data.assignee.name,
-                  username: data.assignee.username,
-                  avatar: data.assignee.avatar_url
-                };
-              } else {
-                user = {
-                  name: 'Unassigned',
-                  username: '',
-                  avatar: ''
-                };
-              }
-              $value.html(assigneeTemplate(user));
-              $collapsedSidebar.attr('title', user.name).tooltip('fixTitle');
-              return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
-            });
+            }).done(renderMethod);
           };
           collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
           assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
-- 
GitLab