Remove jquery from todos icon with badge

Adds polyfill for custom Event

Fix es6 files

Removes unused var

Fixes after review

Adds entry to CHANGELOG

Fixes eslint rule for quotes

Fix eslint error

Revert changes CHANGELOG

Fix broken test

Fix eslint error

Fix eslint error

Simplifies the polyfill

Removes eslint disable comment for new constructors

7 files changed, 112 insertions, 8 deletions

diff --git a/app/assets/javascripts/header.js.es6 b/app/assets/javascripts/header.js.es6
new file mode 100644
index 00000000000..0dd0cebf3a3
--- /dev/null
+++ b/app/assets/javascripts/header.js.es6
@@ -0,0 +1,14 @@
+document.addEventListener('todo:toggle', (event) => {
+  const todoPendingCount = document.querySelector('.todos-pending-count');
+  const count = event.detail.count;
+
+  if (todoPendingCount !== null) {
+    todoPendingCount.textContent = gl.text.addDelimiter(count);
+  }
+
+  if (count === 0 && !todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.add('hidden');
+  } else if (count !== 0 && todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.remove('hidden');
+  }
+});
diff --git a/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6 b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
new file mode 100644
index 00000000000..416edb674dd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
@@ -0,0 +1,11 @@
+/**
+ * CustomEvent support for IE
+ */
+window.CustomEvent = window.CustomEvent || function CustomEvent(event, params) {
+  const options = params || { bubbles: false, cancelable: false, detail: undefined };
+  const evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(event, options.bubbles, options.cancelable, options.detail);
+  return evt;
+};
+
+window.CustomEvent.prototype = window.CustomEvent.prototype || window.Event.prototype;
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b1e844b7302..c6fbc508f38 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -84,7 +84,13 @@
     };
 
     Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
 
       $btn.enable();
       $todoLoading.addClass('hidden');
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 9790a44972d..d73d775074c 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -40,8 +40,12 @@
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
-        .on('page:change', () => this.renderState())
-        .on('todo:toggle', (e, count) => this.updateTodoCount(count));
+        .on('page:change', () => this.renderState());
+
+      document.addEventListener('todo:toggle', (event) => {
+        this.updateTodoCount(event.detail.count);
+      });
+
       this.renderState();
     }
 
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index d8713600030..d9c1a739ee4 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -101,7 +101,14 @@
     }
 
     updateBadges(data) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
+
       $('.todos-pending .badge').text(data.count);
       return $('.todos-done .badge').text(data.done_count);
     }
diff --git a/spec/javascripts/dashboard_spec.js.es6 b/spec/javascripts/dashboard_spec.js.es6
index aadf6f518a8..3d2a9be401e 100644
--- a/spec/javascripts/dashboard_spec.js.es6
+++ b/spec/javascripts/dashboard_spec.js.es6
@@ -1,20 +1,27 @@
 /* eslint-disable no-new, padded-blocks */
 
 /*= require sidebar */
-/*= require jquery */
 /*= require js.cookie */
 /*= require lib/utils/text_utility */
+/* eslint-disable no-new */
 
 ((global) => {
   describe('Dashboard', () => {
     const fixtureTemplate = 'dashboard.html';
 
     function todosCountText() {
-      return $('.js-todos-count').text();
+      const countContainer = document.querySelector('.js-todos-count');
+
+      return countContainer !== null ? countContainer.textContent : '';
     }
 
     function triggerToggle(newCount) {
-      $(document).trigger('todo:toggle', newCount);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: newCount,
+        },
+      });
+      document.dispatchEvent(event);
     }
 
     fixture.preload(fixtureTemplate);
@@ -36,5 +43,4 @@
       expect(todosCountText()).toEqual('1,000,000');
     });
   });
-
 })(window.gl);
diff --git a/spec/javascripts/header_spec.js.es6 b/spec/javascripts/header_spec.js.es6
new file mode 100644
index 00000000000..33b0c979b59
--- /dev/null
+++ b/spec/javascripts/header_spec.js.es6
@@ -0,0 +1,56 @@
+/*= require header */
+/*= require lib/utils/text_utility */
+
+describe('Header', () => {
+  const fixtureTemplate = 'header.html';
+
+  const isTodosCountHidden = () => {
+    const countContainer = document.querySelector('.todos-pending-count');
+    return countContainer !== null ? countContainer.classList.contains('hidden') : null;
+  };
+
+  const triggerToggle = (newCount) => {
+    const event = new CustomEvent('todo:toggle', {
+      detail: {
+        count: newCount,
+      },
+    });
+
+    document.dispatchEvent(event);
+  };
+
+  fixture.preload(fixtureTemplate);
+  beforeEach(() => {
+    fixture.load(fixtureTemplate);
+  });
+
+  it('should update todos-pending-count after receiving the todo:toggle event', () => {
+    triggerToggle(5);
+    expect(document.querySelector('.todos-pending-count').textContent).toEqual('5');
+  });
+
+  it('should hide todos-pending-count when it is 0', () => {
+    triggerToggle(0);
+    expect(isTodosCountHidden()).toEqual(true);
+  });
+
+  it('should show todos-pending-count when it is more than 0', () => {
+    triggerToggle(10);
+    expect(isTodosCountHidden()).toEqual(false);
+  });
+
+  describe('when todos-pending-count is 1000', () => {
+    beforeEach(() => {
+      triggerToggle(1000);
+    });
+
+    it('should show todos-pending-count', () => {
+      expect(isTodosCountHidden()).toEqual(false);
+    });
+
+    it('should add delimiter to todos-pending-count', () => {
+      expect(document.querySelector('.todos-pending-count').textContent).toEqual('1,000');
+    });
+  });
+});
+