Convert Issue into ES6 class (!9636)

app/assets/javascripts/dispatcher.js

@@ -5,7 +5,6 @@ import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make
 /* global ShortcutsNavigation */
 /* global Build */
 /* global Issuable */
-/* global Issue */
 /* global ShortcutsIssuable */
 /* global ZenMode */
 /* global Milestone */
@@ -35,6 +34,7 @@ import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
+import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
 import GroupsList from './groups_list';

app/assets/javascripts/issue.js

@@ -5,131 +5,125 @@ require('./flash');
 require('vendor/jquery.waitforimages');
 require('./task_list');
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
-  this.Issue = (function() {
-    function Issue() {
-      this.submitNoteForm = bind(this.submitNoteForm, this);
-      if ($('a.btn-close').length) {
-        this.taskList = new gl.TaskList({
-          dataType: 'issue',
-          fieldName: 'description',
-          selector: '.detail-page-description',
-          onSuccess: (result) => {
-            document.querySelector('#task_status').innerText = result.task_status;
-            document.querySelector('#task_status_short').innerText = result.task_status_short;
-          }
-        });
-        this.initIssueBtnEventListeners();
-      }
-      this.initMergeRequests();
-      this.initRelatedBranches();
-      this.initCanCreateBranch();
+class Issue {
+  constructor() {
+    if ($('a.btn-close').length) {
+      this.taskList = new gl.TaskList({
+        dataType: 'issue',
+        fieldName: 'description',
+        selector: '.detail-page-description',
+        onSuccess: (result) => {
+          document.querySelector('#task_status').innerText = result.task_status;
+          document.querySelector('#task_status_short').innerText = result.task_status_short;
+        }
+      });
+      Issue.initIssueBtnEventListeners();
     }
+    Issue.initMergeRequests();
+    Issue.initRelatedBranches();
+    Issue.initCanCreateBranch();
+  }
 
-    Issue.prototype.initIssueBtnEventListeners = function() {
-      var _this, issueFailMessage;
-      _this = this;
-      issueFailMessage = 'Unable to update this issue at this time.';
-      return $('a.btn-close, a.btn-reopen').on('click', function(e) {
-        var $this, isClose, shouldSubmit, url;
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        $this = $(this);
-        isClose = $this.hasClass('btn-close');
-        shouldSubmit = $this.hasClass('btn-comment');
-        if (shouldSubmit) {
-          _this.submitNoteForm($this.closest('form'));
-        }
-        $this.prop('disabled', true);
-        url = $this.attr('href');
-        return $.ajax({
-          type: 'PUT',
-          url: url,
-          error: function(jqXHR, textStatus, errorThrown) {
-            var issueStatus;
-            issueStatus = isClose ? 'close' : 'open';
-            return new Flash(issueFailMessage, 'alert');
-          },
-          success: function(data, textStatus, jqXHR) {
-            if ('id' in data) {
-              $(document).trigger('issuable:change');
-              const currentTotal = Number($('.issue_counter').text());
-              if (isClose) {
-                $('a.btn-close').addClass('hidden');
-                $('a.btn-reopen').removeClass('hidden');
-                $('div.status-box-closed').removeClass('hidden');
-                $('div.status-box-open').addClass('hidden');
-                $('.issue_counter').text(currentTotal - 1);
-              } else {
-                $('a.btn-reopen').addClass('hidden');
-                $('a.btn-close').removeClass('hidden');
-                $('div.status-box-closed').addClass('hidden');
-                $('div.status-box-open').removeClass('hidden');
-                $('.issue_counter').text(currentTotal + 1);
-              }
+  static initIssueBtnEventListeners() {
+    var issueFailMessage;
+    issueFailMessage = 'Unable to update this issue at this time.';
+    return $('a.btn-close, a.btn-reopen').on('click', function(e) {
+      var $this, isClose, shouldSubmit, url;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      $this = $(this);
+      isClose = $this.hasClass('btn-close');
+      shouldSubmit = $this.hasClass('btn-comment');
+      if (shouldSubmit) {
+        Issue.submitNoteForm($this.closest('form'));
+      }
+      $this.prop('disabled', true);
+      url = $this.attr('href');
+      return $.ajax({
+        type: 'PUT',
+        url: url,
+        error: function(jqXHR, textStatus, errorThrown) {
+          var issueStatus;
+          issueStatus = isClose ? 'close' : 'open';
+          return new Flash(issueFailMessage, 'alert');
+        },
+        success: function(data, textStatus, jqXHR) {
+          if ('id' in data) {
+            $(document).trigger('issuable:change');
+            const currentTotal = Number($('.issue_counter').text());
+            if (isClose) {
+              $('a.btn-close').addClass('hidden');
+              $('a.btn-reopen').removeClass('hidden');
+              $('div.status-box-closed').removeClass('hidden');
+              $('div.status-box-open').addClass('hidden');
+              $('.issue_counter').text(currentTotal - 1);
             } else {
-              new Flash(issueFailMessage, 'alert');
+              $('a.btn-reopen').addClass('hidden');
+              $('a.btn-close').removeClass('hidden');
+              $('div.status-box-closed').addClass('hidden');
+              $('div.status-box-open').removeClass('hidden');
+              $('.issue_counter').text(currentTotal + 1);
             }
-            return $this.prop('disabled', false);
+          } else {
+            new Flash(issueFailMessage, 'alert');
           }
-        });
+          return $this.prop('disabled', false);
+        }
       });
-    };
+    });
+  }
 
-    Issue.prototype.submitNoteForm = function(form) {
-      var noteText;
-      noteText = form.find("textarea.js-note-text").val();
-      if (noteText.trim().length > 0) {
-        return form.submit();
-      }
-    };
+  static submitNoteForm(form) {
+    var noteText;
+    noteText = form.find("textarea.js-note-text").val();
+    if (noteText.trim().length > 0) {
+      return form.submit();
+    }
+  }
 
-    Issue.prototype.initMergeRequests = function() {
-      var $container;
-      $container = $('#merge-requests');
-      return $.getJSON($container.data('url')).error(function() {
-        return new Flash('Failed to load referenced merge requests', 'alert');
-      }).success(function(data) {
-        if ('html' in data) {
-          return $container.html(data.html);
-        }
-      });
-    };
+  static initMergeRequests() {
+    var $container;
+    $container = $('#merge-requests');
+    return $.getJSON($container.data('url')).error(function() {
+      return new Flash('Failed to load referenced merge requests', 'alert');
+    }).success(function(data) {
+      if ('html' in data) {
+        return $container.html(data.html);
+      }
+    });
+  }
 
-    Issue.prototype.initRelatedBranches = function() {
-      var $container;
-      $container = $('#related-branches');
-      return $.getJSON($container.data('url')).error(function() {
-        return new Flash('Failed to load related branches', 'alert');
-      }).success(function(data) {
-        if ('html' in data) {
-          return $container.html(data.html);
-        }
-      });
-    };
+  static initRelatedBranches() {
+    var $container;
+    $container = $('#related-branches');
+    return $.getJSON($container.data('url')).error(function() {
+      return new Flash('Failed to load related branches', 'alert');
+    }).success(function(data) {
+      if ('html' in data) {
+        return $container.html(data.html);
+      }
+    });
+  }
 
-    Issue.prototype.initCanCreateBranch = function() {
-      var $container;
-      $container = $('#new-branch');
-      // If the user doesn't have the required permissions the container isn't
-      // rendered at all.
-      if ($container.length === 0) {
-        return;
+  static initCanCreateBranch() {
+    var $container;
+    $container = $('#new-branch');
+    // If the user doesn't have the required permissions the container isn't
+    // rendered at all.
+    if ($container.length === 0) {
+      return;
+    }
+    return $.getJSON($container.data('path')).error(function() {
+      $container.find('.unavailable').show();
+      return new Flash('Failed to check if a new branch can be created.', 'alert');
+    }).success(function(data) {
+      if (data.can_create_branch) {
+        $container.find('.available').show();
+      } else {
+        return $container.find('.unavailable').show();
       }
-      return $.getJSON($container.data('path')).error(function() {
-        $container.find('.unavailable').show();
-        return new Flash('Failed to check if a new branch can be created.', 'alert');
-      }).success(function(data) {
-        if (data.can_create_branch) {
-          $container.find('.available').show();
-        } else {
-          return $container.find('.unavailable').show();
-        }
-      });
-    };
+    });
+  }
+}
 
-    return Issue;
-  })();
-}).call(window);
+export default Issue;

changelogs/unreleased/es6-class-issue.yml

+---
+title: Convert Issue into ES6 class
+merge_request: 9636
+author: winniehell

spec/javascripts/issue_spec.js

 /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
-/* global Issue */
+import Issue from '~/issue';
 
 require('~/lib/utils/text_utility');
-require('~/issue');
 
-(function() {
+describe('Issue', function() {
   var INVALID_URL = 'http://goesnowhere.nothing/whereami';
   var $boxClosed, $boxOpen, $btnClose, $btnReopen;
 
@@ -59,28 +58,26 @@ require('~/issue');
     expect($btnReopen).toHaveText('Reopen issue');
   }
 
-  describe('Issue', function() {
-    describe('task lists', function() {
-      beforeEach(function() {
-        loadFixtures('issues/issue-with-task-list.html.raw');
-        this.issue = new Issue();
-      });
-
-      it('modifies the Markdown field', function() {
-        spyOn(jQuery, 'ajax').and.stub();
-        $('input[type=checkbox]').attr('checked', true).trigger('change');
-        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
-      });
+  describe('task lists', function() {
+    beforeEach(function() {
+      loadFixtures('issues/issue-with-task-list.html.raw');
+      this.issue = new Issue();
+    });
 
-      it('submits an ajax request on tasklist:changed', function() {
-        spyOn(jQuery, 'ajax').and.callFake(function(req) {
-          expect(req.type).toBe('PATCH');
-          expect(req.url).toBe(gl.TEST_HOST + '/frontend-fixtures/issues-project/issues/1.json'); // eslint-disable-line prefer-template
-          expect(req.data.issue.description).not.toBe(null);
-        });
+    it('modifies the Markdown field', function() {
+      spyOn(jQuery, 'ajax').and.stub();
+      $('input[type=checkbox]').attr('checked', true).trigger('change');
+      expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+    });
 
-        $('.js-task-list-field').trigger('tasklist:changed');
+    it('submits an ajax request on tasklist:changed', function() {
+      spyOn(jQuery, 'ajax').and.callFake(function(req) {
+        expect(req.type).toBe('PATCH');
+        expect(req.url).toBe(gl.TEST_HOST + '/frontend-fixtures/issues-project/issues/1.json'); // eslint-disable-line prefer-template
+        expect(req.data.issue.description).not.toBe(null);
       });
+
+      $('.js-task-list-field').trigger('tasklist:changed');
     });
   });
 
@@ -165,4 +162,4 @@ require('~/issue');
       expect($('.issue_counter')).toHaveText(1);
     });
   });
-}).call(window);
+});