Remove IIFEs29219-remove-iifes-b

11 files changed, 1100 insertions, 1141 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 35b3205cca7..7824d05a432 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -7,100 +7,98 @@ import boardBlankState from './board_blank_state';
 require('./board_delete');
 require('./board_list');
 
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
+const Store = gl.issueBoards.BoardsStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.Board = Vue.extend({
-    template: '#js-board-template',
-    components: {
-      'board-list': gl.issueBoards.BoardList,
-      'board-delete': gl.issueBoards.BoardDelete,
-      boardBlankState,
-    },
-    props: {
-      list: Object,
-      disabled: Boolean,
-      issueLinkBase: String,
-      rootPath: String,
-    },
-    data () {
-      return {
-        detailIssue: Store.detail,
-        filter: Store.filter,
-      };
-    },
-    watch: {
-      filter: {
-        handler() {
-          this.list.page = 1;
-          this.list.getIssues(true);
-        },
-        deep: true,
+gl.issueBoards.Board = Vue.extend({
+  template: '#js-board-template',
+  components: {
+    'board-list': gl.issueBoards.BoardList,
+    'board-delete': gl.issueBoards.BoardDelete,
+    boardBlankState,
+  },
+  props: {
+    list: Object,
+    disabled: Boolean,
+    issueLinkBase: String,
+    rootPath: String,
+  },
+  data () {
+    return {
+      detailIssue: Store.detail,
+      filter: Store.filter,
+    };
+  },
+  watch: {
+    filter: {
+      handler() {
+        this.list.page = 1;
+        this.list.getIssues(true);
       },
-      detailIssue: {
-        handler () {
-          if (!Object.keys(this.detailIssue.issue).length) return;
+      deep: true,
+    },
+    detailIssue: {
+      handler () {
+        if (!Object.keys(this.detailIssue.issue).length) return;
 
-          const issue = this.list.findIssue(this.detailIssue.issue.id);
+        const issue = this.list.findIssue(this.detailIssue.issue.id);
 
-          if (issue) {
-            const offsetLeft = this.$el.offsetLeft;
-            const boardsList = document.querySelectorAll('.boards-list')[0];
-            const left = boardsList.scrollLeft - offsetLeft;
-            let right = (offsetLeft + this.$el.offsetWidth);
+        if (issue) {
+          const offsetLeft = this.$el.offsetLeft;
+          const boardsList = document.querySelectorAll('.boards-list')[0];
+          const left = boardsList.scrollLeft - offsetLeft;
+          let right = (offsetLeft + this.$el.offsetWidth);
 
-            if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
-              // -290 here because width of boardsList is animating so therefore
-              // getting the width here is incorrect
-              // 290 is the width of the sidebar
-              right -= (boardsList.offsetWidth - 290);
-            } else {
-              right -= boardsList.offsetWidth;
-            }
+          if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+            // -290 here because width of boardsList is animating so therefore
+            // getting the width here is incorrect
+            // 290 is the width of the sidebar
+            right -= (boardsList.offsetWidth - 290);
+          } else {
+            right -= boardsList.offsetWidth;
+          }
 
-            if (right - boardsList.scrollLeft > 0) {
-              $(boardsList).animate({
-                scrollLeft: right
-              }, this.sortableOptions.animation);
-            } else if (left > 0) {
-              $(boardsList).animate({
-                scrollLeft: offsetLeft
-              }, this.sortableOptions.animation);
-            }
+          if (right - boardsList.scrollLeft > 0) {
+            $(boardsList).animate({
+              scrollLeft: right
+            }, this.sortableOptions.animation);
+          } else if (left > 0) {
+            $(boardsList).animate({
+              scrollLeft: offsetLeft
+            }, this.sortableOptions.animation);
           }
-        },
-        deep: true
-      }
-    },
-    methods: {
-      showNewIssueForm() {
-        this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-      }
-    },
-    mounted () {
-      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
-        disabled: this.disabled,
-        group: 'boards',
-        draggable: '.is-draggable',
-        handle: '.js-board-handle',
-        onEnd: (e) => {
-          gl.issueBoards.onEnd();
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    showNewIssueForm() {
+      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+    }
+  },
+  mounted () {
+    this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
+      disabled: this.disabled,
+      group: 'boards',
+      draggable: '.is-draggable',
+      handle: '.js-board-handle',
+      onEnd: (e) => {
+        gl.issueBoards.onEnd();
 
-          if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-            const order = this.sortable.toArray();
-            const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
+        if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
+          const order = this.sortable.toArray();
+          const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
 
-            this.$nextTick(() => {
-              Store.moveList(list, order);
-            });
-          }
+          this.$nextTick(() => {
+            Store.moveList(list, order);
+          });
         }
-      });
+      }
+    });
 
-      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
-    },
-  });
-})();
+    this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
+  },
+});
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index af621cfd57f..8a1b177bba8 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -2,22 +2,20 @@
 
 import Vue from 'vue';
 
-(() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.BoardDelete = Vue.extend({
-    props: {
-      list: Object
-    },
-    methods: {
-      deleteBoard () {
-        $(this.$el).tooltip('hide');
+gl.issueBoards.BoardDelete = Vue.extend({
+  props: {
+    list: Object
+  },
+  methods: {
+    deleteBoard () {
+      $(this.$el).tooltip('hide');
 
-        if (confirm('Are you sure you want to delete this list?')) {
-          this.list.destroy();
-        }
+      if (confirm('Are you sure you want to delete this list?')) {
+        this.list.destroy();
       }
     }
-  });
-})();
+  }
+});
diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index 86e6c26e570..4f70b139b15 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -5,127 +5,125 @@ import Vue from 'vue';
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
 
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
+const Store = gl.issueBoards.BoardsStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.BoardList = Vue.extend({
-    template: '#js-board-list-template',
-    components: {
-      boardCard,
-      boardNewIssue,
+gl.issueBoards.BoardList = Vue.extend({
+  template: '#js-board-list-template',
+  components: {
+    boardCard,
+    boardNewIssue,
+  },
+  props: {
+    disabled: Boolean,
+    list: Object,
+    issues: Array,
+    loading: Boolean,
+    issueLinkBase: String,
+    rootPath: String,
+  },
+  data () {
+    return {
+      scrollOffset: 250,
+      filters: Store.state.filters,
+      showCount: false,
+      showIssueForm: false
+    };
+  },
+  watch: {
+    filters: {
+      handler () {
+        this.list.loadingMore = false;
+        this.$refs.list.scrollTop = 0;
+      },
+      deep: true
     },
-    props: {
-      disabled: Boolean,
-      list: Object,
-      issues: Array,
-      loading: Boolean,
-      issueLinkBase: String,
-      rootPath: String,
+    issues () {
+      this.$nextTick(() => {
+        if (this.scrollHeight() <= this.listHeight() && this.list.issuesSize > this.list.issues.length) {
+          this.list.page += 1;
+          this.list.getIssues(false);
+        }
+
+        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
+          this.showCount = true;
+        } else {
+          this.showCount = false;
+        }
+      });
+    }
+  },
+  methods: {
+    listHeight () {
+      return this.$refs.list.getBoundingClientRect().height;
     },
-    data () {
-      return {
-        scrollOffset: 250,
-        filters: Store.state.filters,
-        showCount: false,
-        showIssueForm: false
-      };
+    scrollHeight () {
+      return this.$refs.list.scrollHeight;
     },
-    watch: {
-      filters: {
-        handler () {
-          this.list.loadingMore = false;
-          this.$refs.list.scrollTop = 0;
-        },
-        deep: true
-      },
-      issues () {
-        this.$nextTick(() => {
-          if (this.scrollHeight() <= this.listHeight() && this.list.issuesSize > this.list.issues.length) {
-            this.list.page += 1;
-            this.list.getIssues(false);
-          }
+    scrollTop () {
+      return this.$refs.list.scrollTop + this.listHeight();
+    },
+    loadNextPage () {
+      const getIssues = this.list.nextPage();
 
-          if (this.scrollHeight() > Math.ceil(this.listHeight())) {
-            this.showCount = true;
-          } else {
-            this.showCount = false;
-          }
+      if (getIssues) {
+        this.list.loadingMore = true;
+        getIssues.then(() => {
+          this.list.loadingMore = false;
         });
       }
     },
-    methods: {
-      listHeight () {
-        return this.$refs.list.getBoundingClientRect().height;
-      },
-      scrollHeight () {
-        return this.$refs.list.scrollHeight;
-      },
-      scrollTop () {
-        return this.$refs.list.scrollTop + this.listHeight();
-      },
-      loadNextPage () {
-        const getIssues = this.list.nextPage();
-
-        if (getIssues) {
-          this.list.loadingMore = true;
-          getIssues.then(() => {
-            this.list.loadingMore = false;
-          });
-        }
-      },
-      toggleForm() {
-        this.showIssueForm = !this.showIssueForm;
-      },
-    },
-    created() {
-      gl.IssueBoardsApp.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    toggleForm() {
+      this.showIssueForm = !this.showIssueForm;
     },
-    mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
-        scroll: document.querySelectorAll('.boards-list')[0],
-        group: 'issues',
-        disabled: this.disabled,
-        filter: '.board-list-count, .is-disabled',
-        dataIdAttr: 'data-issue-id',
-        onStart: (e) => {
-          const card = this.$refs.issue[e.oldIndex];
+  },
+  created() {
+    gl.IssueBoardsApp.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+  },
+  mounted () {
+    const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      scroll: document.querySelectorAll('.boards-list')[0],
+      group: 'issues',
+      disabled: this.disabled,
+      filter: '.board-list-count, .is-disabled',
+      dataIdAttr: 'data-issue-id',
+      onStart: (e) => {
+        const card = this.$refs.issue[e.oldIndex];
 
-          card.showDetail = false;
-          Store.moving.list = card.list;
-          Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
+        card.showDetail = false;
+        Store.moving.list = card.list;
+        Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
 
-          gl.issueBoards.onStart();
-        },
-        onAdd: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
+        gl.issueBoards.onStart();
+      },
+      onAdd: (e) => {
+        gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
 
-          this.$nextTick(() => {
-            e.item.remove();
-          });
-        },
-        onUpdate: (e) => {
-          const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
-          gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
-        },
-        onMove(e) {
-          return !e.related.classList.contains('board-list-count');
-        }
-      });
+        this.$nextTick(() => {
+          e.item.remove();
+        });
+      },
+      onUpdate: (e) => {
+        const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
+        gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
+      },
+      onMove(e) {
+        return !e.related.classList.contains('board-list-count');
+      }
+    });
 
-      this.sortable = Sortable.create(this.$refs.list, options);
+    this.sortable = Sortable.create(this.$refs.list, options);
 
-      // Scroll event on list to load more
-      this.$refs.list.onscroll = () => {
-        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
-          this.loadNextPage();
-        }
-      };
-    },
-    beforeDestroy() {
-      gl.IssueBoardsApp.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
-    },
-  });
-})();
+    // Scroll event on list to load more
+    this.$refs.list.onscroll = () => {
+      if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
+        this.loadNextPage();
+      }
+    };
+  },
+  beforeDestroy() {
+    gl.IssueBoardsApp.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+  },
+});
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 3c080008244..004bac09f59 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -8,66 +8,64 @@ import Vue from 'vue';
 
 require('./sidebar/remove_issue');
 
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
+const Store = gl.issueBoards.BoardsStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.BoardSidebar = Vue.extend({
-    props: {
-      currentUser: Object
-    },
-    data() {
-      return {
-        detail: Store.detail,
-        issue: {},
-        list: {},
-      };
-    },
-    computed: {
-      showSidebar () {
-        return Object.keys(this.issue).length;
-      }
-    },
-    watch: {
-      detail: {
-        handler () {
-          if (this.issue.id !== this.detail.issue.id) {
-            $('.js-issue-board-sidebar', this.$el).each((i, el) => {
-              $(el).data('glDropdown').clearMenu();
-            });
-          }
-
-          this.issue = this.detail.issue;
-          this.list = this.detail.list;
-        },
-        deep: true
-      },
-      issue () {
-        if (this.showSidebar) {
-          this.$nextTick(() => {
-            $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
-            $('.right-sidebar').getNiceScroll().resize();
+gl.issueBoards.BoardSidebar = Vue.extend({
+  props: {
+    currentUser: Object
+  },
+  data() {
+    return {
+      detail: Store.detail,
+      issue: {},
+      list: {},
+    };
+  },
+  computed: {
+    showSidebar () {
+      return Object.keys(this.issue).length;
+    }
+  },
+  watch: {
+    detail: {
+      handler () {
+        if (this.issue.id !== this.detail.issue.id) {
+          $('.js-issue-board-sidebar', this.$el).each((i, el) => {
+            $(el).data('glDropdown').clearMenu();
           });
         }
-      }
+
+        this.issue = this.detail.issue;
+        this.list = this.detail.list;
+      },
+      deep: true
     },
-    methods: {
-      closeSidebar () {
-        this.detail.issue = {};
+    issue () {
+      if (this.showSidebar) {
+        this.$nextTick(() => {
+          $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
+          $('.right-sidebar').getNiceScroll().resize();
+        });
       }
-    },
-    mounted () {
-      new IssuableContext(this.currentUser);
-      new MilestoneSelect();
-      new gl.DueDateSelectors();
-      new LabelsSelect();
-      new Sidebar();
-      gl.Subscription.bindAll('.subscription');
-    },
-    components: {
-      removeBtn: gl.issueBoards.RemoveIssueBtn,
-    },
-  });
-})();
+    }
+  },
+  methods: {
+    closeSidebar () {
+      this.detail.issue = {};
+    }
+  },
+  mounted () {
+    new IssuableContext(this.currentUser);
+    new MilestoneSelect();
+    new gl.DueDateSelectors();
+    new LabelsSelect();
+    new Sidebar();
+    gl.Subscription.bindAll('.subscription');
+  },
+  components: {
+    removeBtn: gl.issueBoards.RemoveIssueBtn,
+  },
+});
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index bcda70d0638..66384d9c038 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -3,125 +3,123 @@
 
 import Cookies from 'js-cookie';
 
-(() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.BoardsStore = {
-    disabled: false,
-    filter: {
-      path: '',
-    },
-    state: {},
-    detail: {
-      issue: {}
-    },
-    moving: {
-      issue: {},
-      list: {}
-    },
-    create () {
-      this.state.lists = [];
-      this.filter.path = gl.utils.getUrlParamsArray().join('&');
-    },
-    addList (listObj) {
-      const list = new List(listObj);
-      this.state.lists.push(list);
+gl.issueBoards.BoardsStore = {
+  disabled: false,
+  filter: {
+    path: '',
+  },
+  state: {},
+  detail: {
+    issue: {}
+  },
+  moving: {
+    issue: {},
+    list: {}
+  },
+  create () {
+    this.state.lists = [];
+    this.filter.path = gl.utils.getUrlParamsArray().join('&');
+  },
+  addList (listObj) {
+    const list = new List(listObj);
+    this.state.lists.push(list);
 
-      return list;
-    },
-    new (listObj) {
-      const list = this.addList(listObj);
+    return list;
+  },
+  new (listObj) {
+    const list = this.addList(listObj);
 
-      list
-        .save()
-        .then(() => {
-          this.state.lists = _.sortBy(this.state.lists, 'position');
-        });
-      this.removeBlankState();
-    },
-    updateNewListDropdown (listId) {
-      $(`.js-board-list-${listId}`).removeClass('is-active');
-    },
-    shouldAddBlankState () {
-      // Decide whether to add the blank state
-      return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
-    },
-    addBlankState () {
-      if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
-
-      this.addList({
-        id: 'blank',
-        list_type: 'blank',
-        title: 'Welcome to your Issue Board!',
-        position: 0
+    list
+      .save()
+      .then(() => {
+        this.state.lists = _.sortBy(this.state.lists, 'position');
       });
+    this.removeBlankState();
+  },
+  updateNewListDropdown (listId) {
+    $(`.js-board-list-${listId}`).removeClass('is-active');
+  },
+  shouldAddBlankState () {
+    // Decide whether to add the blank state
+    return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
+  },
+  addBlankState () {
+    if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
 
-      this.state.lists = _.sortBy(this.state.lists, 'position');
-    },
-    removeBlankState () {
-      this.removeList('blank');
-
-      Cookies.set('issue_board_welcome_hidden', 'true', {
-        expires: 365 * 10,
-        path: ''
-      });
-    },
-    welcomeIsHidden () {
-      return Cookies.get('issue_board_welcome_hidden') === 'true';
-    },
-    removeList (id, type = 'blank') {
-      const list = this.findList('id', id, type);
+    this.addList({
+      id: 'blank',
+      list_type: 'blank',
+      title: 'Welcome to your Issue Board!',
+      position: 0
+    });
 
-      if (!list) return;
+    this.state.lists = _.sortBy(this.state.lists, 'position');
+  },
+  removeBlankState () {
+    this.removeList('blank');
 
-      this.state.lists = this.state.lists.filter(list => list.id !== id);
-    },
-    moveList (listFrom, orderLists) {
-      orderLists.forEach((id, i) => {
-        const list = this.findList('id', parseInt(id, 10));
+    Cookies.set('issue_board_welcome_hidden', 'true', {
+      expires: 365 * 10,
+      path: ''
+    });
+  },
+  welcomeIsHidden () {
+    return Cookies.get('issue_board_welcome_hidden') === 'true';
+  },
+  removeList (id, type = 'blank') {
+    const list = this.findList('id', id, type);
 
-        list.position = i;
-      });
-      listFrom.update();
-    },
-    moveIssueToList (listFrom, listTo, issue, newIndex) {
-      const issueTo = listTo.findIssue(issue.id);
-      const issueLists = issue.getLists();
-      const listLabels = issueLists.map(listIssue => listIssue.label);
+    if (!list) return;
 
-      if (!issueTo) {
-        // Add to new lists issues if it doesn't already exist
-        listTo.addIssue(issue, listFrom, newIndex);
-      } else {
-        listTo.updateIssueLabel(issue, listFrom);
-        issueTo.removeLabel(listFrom.label);
-      }
+    this.state.lists = this.state.lists.filter(list => list.id !== id);
+  },
+  moveList (listFrom, orderLists) {
+    orderLists.forEach((id, i) => {
+      const list = this.findList('id', parseInt(id, 10));
 
-      if (listTo.type === 'closed') {
-        issueLists.forEach((list) => {
-          list.removeIssue(issue);
-        });
-        issue.removeLabels(listLabels);
-      } else {
-        listFrom.removeIssue(issue);
-      }
-    },
-    moveIssueInList (list, issue, oldIndex, newIndex, idArray) {
-      const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
-      const afterId = parseInt(idArray[newIndex + 1], 10) || null;
+      list.position = i;
+    });
+    listFrom.update();
+  },
+  moveIssueToList (listFrom, listTo, issue, newIndex) {
+    const issueTo = listTo.findIssue(issue.id);
+    const issueLists = issue.getLists();
+    const listLabels = issueLists.map(listIssue => listIssue.label);
 
-      list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
-    },
-    findList (key, val, type = 'label') {
-      return this.state.lists.filter((list) => {
-        const byType = type ? list['type'] === type : true;
+    if (!issueTo) {
+      // Add to new lists issues if it doesn't already exist
+      listTo.addIssue(issue, listFrom, newIndex);
+    } else {
+      listTo.updateIssueLabel(issue, listFrom);
+      issueTo.removeLabel(listFrom.label);
+    }
 
-        return list[key] === val && byType;
-      })[0];
-    },
-    updateFiltersUrl () {
-      history.pushState(null, null, `?${this.filter.path}`);
+    if (listTo.type === 'closed') {
+      issueLists.forEach((list) => {
+        list.removeIssue(issue);
+      });
+      issue.removeLabels(listLabels);
+    } else {
+      listFrom.removeIssue(issue);
     }
-  };
-})();
+  },
+  moveIssueInList (list, issue, oldIndex, newIndex, idArray) {
+    const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
+    const afterId = parseInt(idArray[newIndex + 1], 10) || null;
+
+    list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
+  },
+  findList (key, val, type = 'label') {
+    return this.state.lists.filter((list) => {
+      const byType = type ? list['type'] === type : true;
+
+      return list[key] === val && byType;
+    })[0];
+  },
+  updateFiltersUrl () {
+    history.pushState(null, null, `?${this.filter.path}`);
+  }
+};
diff --git a/app/assets/javascripts/breakpoints.js b/app/assets/javascripts/breakpoints.js
index 2c1f988d987..5f53afb0559 100644
--- a/app/assets/javascripts/breakpoints.js
+++ b/app/assets/javascripts/breakpoints.js
@@ -1,65 +1,52 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, no-return-assign, new-parens, no-param-reassign, max-len */
 
-var Breakpoints = (function() {
-  var BreakpointInstance, instance;
-
-  function Breakpoints() {}
-
-  instance = null;
-
-  BreakpointInstance = (function() {
-    var BREAKPOINTS;
-
-    BREAKPOINTS = ["xs", "sm", "md", "lg"];
-
-    function BreakpointInstance() {
-      this.setup();
-    }
-
-    BreakpointInstance.prototype.setup = function() {
-      var allDeviceSelector, els;
-      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-        return ".device-" + breakpoint;
-      });
-      if ($(allDeviceSelector.join(",")).length) {
-        return;
-      }
-      // Create all the elements
-      els = $.map(BREAKPOINTS, function(breakpoint) {
-        return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
-      });
-      return $("body").append(els.join(''));
-    };
-
-    BreakpointInstance.prototype.visibleDevice = function() {
-      var allDeviceSelector;
-      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-        return ".device-" + breakpoint;
-      });
-      return $(allDeviceSelector.join(",")).filter(":visible");
-    };
-
-    BreakpointInstance.prototype.getBreakpointSize = function() {
-      var $visibleDevice;
-      $visibleDevice = this.visibleDevice;
-      // TODO: Consider refactoring in light of turbolinks removal.
-      // the page refreshed via turbolinks
-      if (!$visibleDevice().length) {
-        this.setup();
-      }
-      $visibleDevice = this.visibleDevice();
-      return $visibleDevice.attr("class").split("visible-")[1];
-    };
-
-    return BreakpointInstance;
-  })();
-
-  Breakpoints.get = function() {
-    return instance != null ? instance : instance = new BreakpointInstance;
-  };
-
-  return Breakpoints;
-})();
+var instance = null;
+var BREAKPOINTS = ["xs", "sm", "md", "lg"];
+
+function BreakpointInstance() {
+  this.setup();
+}
+
+BreakpointInstance.prototype.setup = function() {
+  var allDeviceSelector, els;
+  allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+    return ".device-" + breakpoint;
+  });
+  if ($(allDeviceSelector.join(",")).length) {
+    return;
+  }
+  // Create all the elements
+  els = $.map(BREAKPOINTS, function(breakpoint) {
+    return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
+  });
+  return $("body").append(els.join(''));
+};
+
+BreakpointInstance.prototype.visibleDevice = function() {
+  var allDeviceSelector;
+  allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+    return ".device-" + breakpoint;
+  });
+  return $(allDeviceSelector.join(",")).filter(":visible");
+};
+
+BreakpointInstance.prototype.getBreakpointSize = function() {
+  var $visibleDevice;
+  $visibleDevice = this.visibleDevice;
+  // TODO: Consider refactoring in light of turbolinks removal.
+  // the page refreshed via turbolinks
+  if (!$visibleDevice().length) {
+    this.setup();
+  }
+  $visibleDevice = this.visibleDevice();
+  return $visibleDevice.attr("class").split("visible-")[1];
+};
+
+function Breakpoints() {}
+
+Breakpoints.get = function() {
+  return instance != null ? instance : instance = new BreakpointInstance;
+};
 
 $(() => { window.bp = Breakpoints.get(); });
 
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 6efd26ccc37..58170d1cf72 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -5,279 +5,273 @@ var bind = function(fn, me) { return function() { return fn.apply(me, arguments)
 var AUTO_SCROLL_OFFSET = 75;
 var DOWN_BUILD_TRACE = '#down-build-trace';
 
-window.Build = (function() {
-  Build.timeout = null;
-
-  Build.state = null;
-
-  function Build(options) {
-    options = options || $('.js-build-options').data();
-    this.pageUrl = options.pageUrl;
-    this.buildUrl = options.buildUrl;
-    this.buildStatus = options.buildStatus;
-    this.state = options.logState;
-    this.buildStage = options.buildStage;
-    this.updateDropdown = bind(this.updateDropdown, this);
-    this.$document = $(document);
-    this.$body = $('body');
-    this.$buildTrace = $('#build-trace');
-    this.$autoScrollContainer = $('.autoscroll-container');
-    this.$autoScrollStatus = $('#autoscroll-status');
-    this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
-    this.$upBuildTrace = $('#up-build-trace');
-    this.$downBuildTrace = $(DOWN_BUILD_TRACE);
-    this.$scrollTopBtn = $('#scroll-top');
-    this.$scrollBottomBtn = $('#scroll-bottom');
-    this.$buildRefreshAnimation = $('.js-build-refresh');
-
-    clearTimeout(Build.timeout);
-    // Init breakpoint checker
-    this.bp = Breakpoints.get();
-
-    this.initSidebar();
-    this.$buildScroll = $('#js-build-scroll');
-
-    this.populateJobs(this.buildStage);
-    this.updateStageDropdownText(this.buildStage);
-    this.sidebarOnResize();
-
-    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
-    this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
-    this.$document.on('scroll', this.initScrollMonitor.bind(this));
-    $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
-    $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
-    this.updateArtifactRemoveDate();
-    if ($('#build-trace').length) {
-      this.getInitialBuildTrace();
-      this.initScrollButtonAffix();
-    }
-    this.invokeBuildTrace();
+function Build(options) {
+  options = options || $('.js-build-options').data();
+  this.pageUrl = options.pageUrl;
+  this.buildUrl = options.buildUrl;
+  this.buildStatus = options.buildStatus;
+  this.state = options.logState;
+  this.buildStage = options.buildStage;
+  this.updateDropdown = bind(this.updateDropdown, this);
+  this.$document = $(document);
+  this.$body = $('body');
+  this.$buildTrace = $('#build-trace');
+  this.$autoScrollContainer = $('.autoscroll-container');
+  this.$autoScrollStatus = $('#autoscroll-status');
+  this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
+  this.$upBuildTrace = $('#up-build-trace');
+  this.$downBuildTrace = $(DOWN_BUILD_TRACE);
+  this.$scrollTopBtn = $('#scroll-top');
+  this.$scrollBottomBtn = $('#scroll-bottom');
+  this.$buildRefreshAnimation = $('.js-build-refresh');
+
+  clearTimeout(Build.timeout);
+  // Init breakpoint checker
+  this.bp = Breakpoints.get();
+
+  this.initSidebar();
+  this.$buildScroll = $('#js-build-scroll');
+
+  this.populateJobs(this.buildStage);
+  this.updateStageDropdownText(this.buildStage);
+  this.sidebarOnResize();
+
+  this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
+  this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+  this.$document.on('scroll', this.initScrollMonitor.bind(this));
+  $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
+  $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
+  this.updateArtifactRemoveDate();
+  if ($('#build-trace').length) {
+    this.getInitialBuildTrace();
+    this.initScrollButtonAffix();
   }
-
-  Build.prototype.initSidebar = function() {
-    this.$sidebar = $('.js-build-sidebar');
-    this.$sidebar.niceScroll();
-    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
-  };
-
-  Build.prototype.location = function() {
-    return window.location.href.split("#")[0];
-  };
-
-  Build.prototype.invokeBuildTrace = function() {
-    var continueRefreshStatuses = ['running', 'pending'];
-    // Continue to update build trace when build is running or pending
-    if (continueRefreshStatuses.indexOf(this.buildStatus) !== -1) {
-      // Check for new build output if user still watching build page
-      // Only valid for runnig build when output changes during time
-      Build.timeout = setTimeout((function(_this) {
-        return function() {
-          if (_this.location() === _this.pageUrl) {
-            return _this.getBuildTrace();
-          }
-        };
-      })(this), 4000);
-    }
-  };
-
-  Build.prototype.getInitialBuildTrace = function() {
-    var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'];
-
-    return $.ajax({
-      url: this.buildUrl,
-      dataType: 'json',
-      success: function(buildData) {
-        $('.js-build-output').html(buildData.trace_html);
-        if (window.location.hash === DOWN_BUILD_TRACE) {
-          $("html,body").scrollTop(this.$buildTrace.height());
+  this.invokeBuildTrace();
+}
+
+Build.timeout = null;
+
+Build.state = null;
+
+Build.prototype.initSidebar = function() {
+  this.$sidebar = $('.js-build-sidebar');
+  this.$sidebar.niceScroll();
+  this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
+};
+
+Build.prototype.location = function() {
+  return window.location.href.split("#")[0];
+};
+
+Build.prototype.invokeBuildTrace = function() {
+  var continueRefreshStatuses = ['running', 'pending'];
+  // Continue to update build trace when build is running or pending
+  if (continueRefreshStatuses.indexOf(this.buildStatus) !== -1) {
+    // Check for new build output if user still watching build page
+    // Only valid for runnig build when output changes during time
+    Build.timeout = setTimeout(() => {
+      if (this.location() === this.pageUrl) {
+        return this.getBuildTrace();
+      }
+    }, 4000);
+  }
+};
+
+Build.prototype.getInitialBuildTrace = function() {
+  var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'];
+
+  return $.ajax({
+    url: this.buildUrl,
+    dataType: 'json',
+    success: function(buildData) {
+      $('.js-build-output').html(buildData.trace_html);
+      if (window.location.hash === DOWN_BUILD_TRACE) {
+        $("html,body").scrollTop(this.$buildTrace.height());
+      }
+      if (removeRefreshStatuses.indexOf(buildData.status) !== -1) {
+        this.$buildRefreshAnimation.remove();
+        return this.initScrollMonitor();
+      }
+    }.bind(this)
+  });
+};
+
+Build.prototype.getBuildTrace = function() {
+  return $.ajax({
+    url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
+    dataType: "json",
+    success: (log) => {
+      var pageUrl;
+
+      if (log.state) {
+        this.state = log.state;
+      }
+      this.invokeBuildTrace();
+      if (log.status === "running") {
+        if (log.append) {
+          $('.js-build-output').append(log.html);
+        } else {
+          $('.js-build-output').html(log.html);
         }
-        if (removeRefreshStatuses.indexOf(buildData.status) !== -1) {
-          this.$buildRefreshAnimation.remove();
-          return this.initScrollMonitor();
+        return this.checkAutoscroll();
+      } else if (log.status !== this.buildStatus) {
+        pageUrl = this.pageUrl;
+        if (this.$autoScrollStatus.data('state') === 'enabled') {
+          pageUrl += DOWN_BUILD_TRACE;
         }
-      }.bind(this)
-    });
-  };
-
-  Build.prototype.getBuildTrace = function() {
-    return $.ajax({
-      url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
-      dataType: "json",
-      success: (function(_this) {
-        return function(log) {
-          var pageUrl;
-
-          if (log.state) {
-            _this.state = log.state;
-          }
-          _this.invokeBuildTrace();
-          if (log.status === "running") {
-            if (log.append) {
-              $('.js-build-output').append(log.html);
-            } else {
-              $('.js-build-output').html(log.html);
-            }
-            return _this.checkAutoscroll();
-          } else if (log.status !== _this.buildStatus) {
-            pageUrl = _this.pageUrl;
-            if (_this.$autoScrollStatus.data('state') === 'enabled') {
-              pageUrl += DOWN_BUILD_TRACE;
-            }
-
-            return gl.utils.visitUrl(pageUrl);
-          }
-        };
-      })(this)
-    });
-  };
-
-  Build.prototype.checkAutoscroll = function() {
-    if (this.$autoScrollStatus.data("state") === "enabled") {
-      return $("html,body").scrollTop(this.$buildTrace.height());
-    }
-
-    // Handle a situation where user started new build
-    // but never scrolled a page
-    if (!this.$scrollTopBtn.is(':visible') &&
-        !this.$scrollBottomBtn.is(':visible') &&
-        !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      this.$scrollBottomBtn.show();
-    }
-  };
 
-  Build.prototype.initScrollButtonAffix = function() {
-    // Hide everything initially
-    this.$scrollTopBtn.hide();
-    this.$scrollBottomBtn.hide();
-    this.$autoScrollContainer.hide();
-  };
-
-  // Page scroll listener to detect if user has scrolling page
-  // and handle following cases
-  // 1) User is at Top of Build Log;
-  //      - Hide Top Arrow button
-  //      - Show Bottom Arrow button
-  //      - Disable Autoscroll and hide indicator (when build is running)
-  // 2) User is at Bottom of Build Log;
-  //      - Show Top Arrow button
-  //      - Hide Bottom Arrow button
-  //      - Enable Autoscroll and show indicator (when build is running)
-  // 3) User is somewhere in middle of Build Log;
-  //      - Show Top Arrow button
-  //      - Show Bottom Arrow button
-  //      - Disable Autoscroll and hide indicator (when build is running)
-  Build.prototype.initScrollMonitor = function() {
-    if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // User is somewhere in middle of Build Log
-
-      this.$scrollTopBtn.show();
-
-      if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
-        this.$scrollBottomBtn.show();
-      } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
-        this.$scrollBottomBtn.show();
-      } else {
-        this.$scrollBottomBtn.hide();
+        return gl.utils.visitUrl(pageUrl);
       }
+    }
+  });
+};
 
-      // Hide Autoscroll Status Indicator
-      if (this.$scrollBottomBtn.is(':visible')) {
-        this.$autoScrollContainer.hide();
-        this.$autoScrollStatusText.removeClass('animate');
-      } else {
-        this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
-        this.$autoScrollStatusText.addClass('animate');
-      }
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // User is at Top of Build Log
+Build.prototype.checkAutoscroll = function() {
+  if (this.$autoScrollStatus.data("state") === "enabled") {
+    return $("html,body").scrollTop(this.$buildTrace.height());
+  }
 
-      this.$scrollTopBtn.hide();
+  // Handle a situation where user started new build
+  // but never scrolled a page
+  if (!this.$scrollTopBtn.is(':visible') &&
+      !this.$scrollBottomBtn.is(':visible') &&
+      !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    this.$scrollBottomBtn.show();
+  }
+};
+
+Build.prototype.initScrollButtonAffix = function() {
+  // Hide everything initially
+  this.$scrollTopBtn.hide();
+  this.$scrollBottomBtn.hide();
+  this.$autoScrollContainer.hide();
+};
+
+// Page scroll listener to detect if user has scrolling page
+// and handle following cases
+// 1) User is at Top of Build Log;
+//      - Hide Top Arrow button
+//      - Show Bottom Arrow button
+//      - Disable Autoscroll and hide indicator (when build is running)
+// 2) User is at Bottom of Build Log;
+//      - Show Top Arrow button
+//      - Hide Bottom Arrow button
+//      - Enable Autoscroll and show indicator (when build is running)
+// 3) User is somewhere in middle of Build Log;
+//      - Show Top Arrow button
+//      - Show Bottom Arrow button
+//      - Disable Autoscroll and hide indicator (when build is running)
+Build.prototype.initScrollMonitor = function() {
+  if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    // User is somewhere in middle of Build Log
+
+    this.$scrollTopBtn.show();
+
+    if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
+      this.$scrollBottomBtn.show();
+    } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
       this.$scrollBottomBtn.show();
+    } else {
+      this.$scrollBottomBtn.hide();
+    }
 
+    // Hide Autoscroll Status Indicator
+    if (this.$scrollBottomBtn.is(':visible')) {
       this.$autoScrollContainer.hide();
       this.$autoScrollStatusText.removeClass('animate');
-    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
-               (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
-      // User is at Bottom of Build Log
-
-      this.$scrollTopBtn.show();
-      this.$scrollBottomBtn.hide();
-
-      // Show and Reposition Autoscroll Status Indicator
+    } else {
       this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
       this.$autoScrollStatusText.addClass('animate');
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
-      // Build Log height is small
+    }
+  } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    // User is at Top of Build Log
 
-      this.$scrollTopBtn.hide();
-      this.$scrollBottomBtn.hide();
+    this.$scrollTopBtn.hide();
+    this.$scrollBottomBtn.show();
 
-      // Hide Autoscroll Status Indicator
-      this.$autoScrollContainer.hide();
-      this.$autoScrollStatusText.removeClass('animate');
-    }
+    this.$autoScrollContainer.hide();
+    this.$autoScrollStatusText.removeClass('animate');
+  } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
+             (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
+    // User is at Bottom of Build Log
 
-    if (this.buildStatus === "running" || this.buildStatus === "pending") {
-      // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
-      this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
-    }
-  };
-
-  Build.prototype.shouldHideSidebarForViewport = function() {
-    var bootstrapBreakpoint;
-    bootstrapBreakpoint = this.bp.getBreakpointSize();
-    return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
-  };
-
-  Build.prototype.toggleSidebar = function(shouldHide) {
-    var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
-    this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
-      .toggleClass('sidebar-collapsed', shouldHide);
-    this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
-      .toggleClass('right-sidebar-collapsed', shouldHide);
-  };
-
-  Build.prototype.sidebarOnResize = function() {
-    this.toggleSidebar(this.shouldHideSidebarForViewport());
-  };
-
-  Build.prototype.sidebarOnClick = function() {
-    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
-  };
-
-  Build.prototype.updateArtifactRemoveDate = function() {
-    var $date, date;
-    $date = $('.js-artifacts-remove');
-    if ($date.length) {
-      date = $date.text();
-      return $date.text(gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
-    }
-  };
-
-  Build.prototype.populateJobs = function(stage) {
-    $('.build-job').hide();
-    $('.build-job[data-stage="' + stage + '"]').show();
-  };
-
-  Build.prototype.updateStageDropdownText = function(stage) {
-    $('.stage-selection').text(stage);
-  };
-
-  Build.prototype.updateDropdown = function(e) {
-    e.preventDefault();
-    var stage = e.currentTarget.text;
-    this.updateStageDropdownText(stage);
-    this.populateJobs(stage);
-  };
-
-  Build.prototype.stepTrace = function(e) {
-    var $currentTarget;
-    e.preventDefault();
-    $currentTarget = $(e.currentTarget);
-    $.scrollTo($currentTarget.attr('href'), {
-      offset: 0
-    });
-  };
-
-  return Build;
-})();
+    this.$scrollTopBtn.show();
+    this.$scrollBottomBtn.hide();
+
+    // Show and Reposition Autoscroll Status Indicator
+    this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+    this.$autoScrollStatusText.addClass('animate');
+  } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    // Build Log height is small
+
+    this.$scrollTopBtn.hide();
+    this.$scrollBottomBtn.hide();
+
+    // Hide Autoscroll Status Indicator
+    this.$autoScrollContainer.hide();
+    this.$autoScrollStatusText.removeClass('animate');
+  }
+
+  if (this.buildStatus === "running" || this.buildStatus === "pending") {
+    // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
+    this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
+  }
+};
+
+Build.prototype.shouldHideSidebarForViewport = function() {
+  var bootstrapBreakpoint;
+  bootstrapBreakpoint = this.bp.getBreakpointSize();
+  return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+};
+
+Build.prototype.toggleSidebar = function(shouldHide) {
+  var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+  this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
+    .toggleClass('sidebar-collapsed', shouldHide);
+  this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
+    .toggleClass('right-sidebar-collapsed', shouldHide);
+};
+
+Build.prototype.sidebarOnResize = function() {
+  this.toggleSidebar(this.shouldHideSidebarForViewport());
+};
+
+Build.prototype.sidebarOnClick = function() {
+  if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
+};
+
+Build.prototype.updateArtifactRemoveDate = function() {
+  var $date, date;
+  $date = $('.js-artifacts-remove');
+  if ($date.length) {
+    date = $date.text();
+    return $date.text(gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
+  }
+};
+
+Build.prototype.populateJobs = function(stage) {
+  $('.build-job').hide();
+  $('.build-job[data-stage="' + stage + '"]').show();
+};
+
+Build.prototype.updateStageDropdownText = function(stage) {
+  $('.stage-selection').text(stage);
+};
+
+Build.prototype.updateDropdown = function(e) {
+  e.preventDefault();
+  var stage = e.currentTarget.text;
+  this.updateStageDropdownText(stage);
+  this.populateJobs(stage);
+};
+
+Build.prototype.stepTrace = function(e) {
+  var $currentTarget;
+  e.preventDefault();
+  $currentTarget = $(e.currentTarget);
+  $.scrollTo($currentTarget.attr('href'), {
+    offset: 0
+  });
+};
+
+window.Build = Build;
diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index bd479700fd3..ed9ad3c6c57 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,25 +1,23 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
 
-window.BuildArtifacts = (function() {
-  function BuildArtifacts() {
-    this.disablePropagation();
-    this.setupEntryClick();
-  }
+function BuildArtifacts() {
+  this.disablePropagation();
+  this.setupEntryClick();
+}
 
-  BuildArtifacts.prototype.disablePropagation = function() {
-    $('.top-block').on('click', '.download', function(e) {
-      return e.stopPropagation();
-    });
-    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
-      return e.stopImmediatePropagation();
-    });
-  };
+BuildArtifacts.prototype.disablePropagation = function() {
+  $('.top-block').on('click', '.download', function(e) {
+    return e.stopPropagation();
+  });
+  return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
+    return e.stopImmediatePropagation();
+  });
+};
 
-  BuildArtifacts.prototype.setupEntryClick = function() {
-    return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
-      return window.location = this.dataset.link;
-    });
-  };
+BuildArtifacts.prototype.setupEntryClick = function() {
+  return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
+    return window.location = this.dataset.link;
+  });
+};
 
-  return BuildArtifacts;
-})();
+window.BuildArtifacts = BuildArtifacts;
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
index 2955bda1a36..6a60d4d75d2 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -38,75 +38,73 @@
  *  });
  */
 
-(() => {
-  window.gl = window.gl || {};
+window.gl = window.gl || {};
 
-  window.gl.LinkedTabs = class LinkedTabs {
-    /**
-     * Binds the events and activates de default tab.
-     *
-     * @param  {Object} options
-     */
-    constructor(options) {
-      this.options = options || {};
+window.gl.LinkedTabs = class LinkedTabs {
+  /**
+   * Binds the events and activates de default tab.
+   *
+   * @param  {Object} options
+   */
+  constructor(options) {
+    this.options = options || {};
 
-      this.defaultAction = this.options.defaultAction;
-      this.action = this.options.action || this.defaultAction;
+    this.defaultAction = this.options.defaultAction;
+    this.action = this.options.action || this.defaultAction;
 
-      if (this.action === 'show') {
-        this.action = this.defaultAction;
-      }
+    if (this.action === 'show') {
+      this.action = this.defaultAction;
+    }
 
-      this.currentLocation = window.location;
+    this.currentLocation = window.location;
 
-      const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
+    const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
 
-      // since this is a custom event we need jQuery :(
-      $(document)
-        .off('shown.bs.tab', tabSelector)
-        .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
+    // since this is a custom event we need jQuery :(
+    $(document)
+      .off('shown.bs.tab', tabSelector)
+      .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
 
-      this.activateTab(this.action);
-    }
+    this.activateTab(this.action);
+  }
 
-    /**
-     * Handles the `shown.bs.tab` event to set the currect url action.
-     *
-     * @param  {type} evt
-     * @return {Function}
-     */
-    tabShown(evt) {
-      const source = evt.target.getAttribute('href');
+  /**
+   * Handles the `shown.bs.tab` event to set the currect url action.
+   *
+   * @param  {type} evt
+   * @return {Function}
+   */
+  tabShown(evt) {
+    const source = evt.target.getAttribute('href');
 
-      return this.setCurrentAction(source);
-    }
+    return this.setCurrentAction(source);
+  }
 
-    /**
-     * Updates the URL with the path that matched the given action.
-     *
-     * @param  {String} source
-     * @return {String}
-     */
-    setCurrentAction(source) {
-      const copySource = source;
+  /**
+   * Updates the URL with the path that matched the given action.
+   *
+   * @param  {String} source
+   * @return {String}
+   */
+  setCurrentAction(source) {
+    const copySource = source;
 
-      copySource.replace(/\/+$/, '');
+    copySource.replace(/\/+$/, '');
 
-      const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
+    const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
 
-      history.replaceState({
-        url: newState,
-      }, document.title, newState);
-      return newState;
-    }
+    history.replaceState({
+      url: newState,
+    }, document.title, newState);
+    return newState;
+  }
 
-    /**
-     * Given the current action activates the correct tab.
-     * http://getbootstrap.com/javascript/#tab-show
-     * Note: Will trigger `shown.bs.tab`
-     */
-    activateTab() {
-      return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
-    }
-  };
-})();
+  /**
+   * Given the current action activates the correct tab.
+   * http://getbootstrap.com/javascript/#tab-show
+   * Note: Will trigger `shown.bs.tab`
+   */
+  activateTab() {
+    return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
+  }
+};
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 5aad3908eb6..4408965fc09 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -2,346 +2,340 @@
 
 import Raphael from './raphael';
 
-export default (function() {
-  function BranchGraph(element1, options1) {
-    this.element = element1;
-    this.options = options1;
-    this.scrollTop = this.scrollTop.bind(this);
-    this.scrollBottom = this.scrollBottom.bind(this);
-    this.scrollRight = this.scrollRight.bind(this);
-    this.scrollLeft = this.scrollLeft.bind(this);
-    this.scrollUp = this.scrollUp.bind(this);
-    this.scrollDown = this.scrollDown.bind(this);
-    this.preparedCommits = {};
-    this.mtime = 0;
-    this.mspace = 0;
-    this.parents = {};
-    this.colors = ["#000"];
-    this.offsetX = 150;
-    this.offsetY = 20;
-    this.unitTime = 30;
-    this.unitSpace = 10;
-    this.prev_start = -1;
-    this.load();
-  }
-
-  BranchGraph.prototype.load = function() {
-    return $.ajax({
-      url: this.options.url,
-      method: "get",
-      dataType: "json",
-      success: $.proxy(function(data) {
-        $(".loading", this.element).hide();
-        this.prepareData(data.days, data.commits);
-        return this.buildGraph();
-      }, this)
-    });
-  };
-
-  BranchGraph.prototype.prepareData = function(days, commits) {
-    var c, ch, cw, j, len, ref;
-    this.days = days;
-    this.commits = commits;
-    this.collectParents();
-    this.graphHeight = $(this.element).height();
-    this.graphWidth = $(this.element).width();
-    ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
-    cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
-    this.r = Raphael(this.element.get(0), cw, ch);
-    this.top = this.r.set();
-    this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
-    ref = this.commits;
-    for (j = 0, len = ref.length; j < len; j += 1) {
-      c = ref[j];
-      if (c.id in this.parents) {
-        c.isParent = true;
-      }
-      this.preparedCommits[c.id] = c;
-      this.markCommit(c);
-    }
-    return this.collectColors();
-  };
+function BranchGraph(element1, options1) {
+  this.element = element1;
+  this.options = options1;
+  this.scrollTop = this.scrollTop.bind(this);
+  this.scrollBottom = this.scrollBottom.bind(this);
+  this.scrollRight = this.scrollRight.bind(this);
+  this.scrollLeft = this.scrollLeft.bind(this);
+  this.scrollUp = this.scrollUp.bind(this);
+  this.scrollDown = this.scrollDown.bind(this);
+  this.preparedCommits = {};
+  this.mtime = 0;
+  this.mspace = 0;
+  this.parents = {};
+  this.colors = ["#000"];
+  this.offsetX = 150;
+  this.offsetY = 20;
+  this.unitTime = 30;
+  this.unitSpace = 10;
+  this.prev_start = -1;
+  this.load();
+}
 
-  BranchGraph.prototype.collectParents = function() {
-    var c, j, len, p, ref, results;
-    ref = this.commits;
-    results = [];
-    for (j = 0, len = ref.length; j < len; j += 1) {
-      c = ref[j];
-      this.mtime = Math.max(this.mtime, c.time);
-      this.mspace = Math.max(this.mspace, c.space);
-      results.push((function() {
-        var l, len1, ref1, results1;
-        ref1 = c.parents;
-        results1 = [];
-        for (l = 0, len1 = ref1.length; l < len1; l += 1) {
-          p = ref1[l];
-          this.parents[p[0]] = true;
-          results1.push(this.mspace = Math.max(this.mspace, p[1]));
-        }
-        return results1;
-      }).call(this));
-    }
-    return results;
-  };
+BranchGraph.prototype.load = function() {
+  return $.ajax({
+    url: this.options.url,
+    method: "get",
+    dataType: "json",
+    success: $.proxy(function(data) {
+      $(".loading", this.element).hide();
+      this.prepareData(data.days, data.commits);
+      return this.buildGraph();
+    }, this)
+  });
+};
 
-  BranchGraph.prototype.collectColors = function() {
-    var k, results;
-    k = 0;
-    results = [];
-    while (k < this.mspace) {
-      this.colors.push(Raphael.getColor(.8));
-      // Skipping a few colors in the spectrum to get more contrast between colors
-      Raphael.getColor();
-      Raphael.getColor();
-      results.push(k += 1);
+BranchGraph.prototype.prepareData = function(days, commits) {
+  var c, ch, cw, j, len, ref;
+  this.days = days;
+  this.commits = commits;
+  this.collectParents();
+  this.graphHeight = $(this.element).height();
+  this.graphWidth = $(this.element).width();
+  ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
+  cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+  this.r = Raphael(this.element.get(0), cw, ch);
+  this.top = this.r.set();
+  this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
+  ref = this.commits;
+  for (j = 0, len = ref.length; j < len; j += 1) {
+    c = ref[j];
+    if (c.id in this.parents) {
+      c.isParent = true;
     }
-    return results;
-  };
+    this.preparedCommits[c.id] = c;
+    this.markCommit(c);
+  }
+  return this.collectColors();
+};
 
-  BranchGraph.prototype.buildGraph = function() {
-    var cuday, cumonth, day, j, len, mm, r, ref;
-    r = this.r;
-    cuday = 0;
-    cumonth = "";
-    r.rect(0, 0, 40, this.barHeight).attr({
-      fill: "#222"
-    });
-    r.rect(40, 0, 30, this.barHeight).attr({
-      fill: "#444"
-    });
-    ref = this.days;
-    for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
-      day = ref[mm];
-      if (cuday !== day[0] || cumonth !== day[1]) {
-        // Dates
-        r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
-          font: "12px Monaco, monospace",
-          fill: "#BBB"
-        });
-        cuday = day[0];
-      }
-      if (cumonth !== day[1]) {
-        // Months
-        r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
-          font: "12px Monaco, monospace",
-          fill: "#EEE"
-        });
-        cumonth = day[1];
+BranchGraph.prototype.collectParents = function() {
+  var c, j, len, p, ref, results;
+  ref = this.commits;
+  results = [];
+  for (j = 0, len = ref.length; j < len; j += 1) {
+    c = ref[j];
+    this.mtime = Math.max(this.mtime, c.time);
+    this.mspace = Math.max(this.mspace, c.space);
+    results.push((function() {
+      var l, len1, ref1, results1;
+      ref1 = c.parents;
+      results1 = [];
+      for (l = 0, len1 = ref1.length; l < len1; l += 1) {
+        p = ref1[l];
+        this.parents[p[0]] = true;
+        results1.push(this.mspace = Math.max(this.mspace, p[1]));
       }
-    }
-    this.renderPartialGraph();
-    return this.bindEvents();
-  };
+      return results1;
+    }).call(this));
+  }
+  return results;
+};
+
+BranchGraph.prototype.collectColors = function() {
+  var k, results;
+  k = 0;
+  results = [];
+  while (k < this.mspace) {
+    this.colors.push(Raphael.getColor(.8));
+    // Skipping a few colors in the spectrum to get more contrast between colors
+    Raphael.getColor();
+    Raphael.getColor();
+    results.push(k += 1);
+  }
+  return results;
+};
 
-  BranchGraph.prototype.renderPartialGraph = function() {
-    var commit, end, i, isGraphEdge, start, x, y;
-    start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
-    if (start < 0) {
-      isGraphEdge = true;
-      start = 0;
+BranchGraph.prototype.buildGraph = function() {
+  var cuday, cumonth, day, j, len, mm, r, ref;
+  r = this.r;
+  cuday = 0;
+  cumonth = "";
+  r.rect(0, 0, 40, this.barHeight).attr({
+    fill: "#222"
+  });
+  r.rect(40, 0, 30, this.barHeight).attr({
+    fill: "#444"
+  });
+  ref = this.days;
+  for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
+    day = ref[mm];
+    if (cuday !== day[0] || cumonth !== day[1]) {
+      // Dates
+      r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
+        font: "12px Monaco, monospace",
+        fill: "#BBB"
+      });
+      cuday = day[0];
     }
-    end = start + 40;
-    if (this.commits.length < end) {
-      isGraphEdge = true;
-      end = this.commits.length;
+    if (cumonth !== day[1]) {
+      // Months
+      r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
+        font: "12px Monaco, monospace",
+        fill: "#EEE"
+      });
+      cumonth = day[1];
     }
-    if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
-      i = start;
-      this.prev_start = start;
-      while (i < end) {
-        commit = this.commits[i];
-        i += 1;
-        if (commit.hasDrawn !== true) {
-          x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-          y = this.offsetY + this.unitTime * commit.time;
-          this.drawDot(x, y, commit);
-          this.drawLines(x, y, commit);
-          this.appendLabel(x, y, commit);
-          this.appendAnchor(x, y, commit);
-          commit.hasDrawn = true;
-        }
+  }
+  this.renderPartialGraph();
+  return this.bindEvents();
+};
+
+BranchGraph.prototype.renderPartialGraph = function() {
+  var commit, end, i, isGraphEdge, start, x, y;
+  start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
+  if (start < 0) {
+    isGraphEdge = true;
+    start = 0;
+  }
+  end = start + 40;
+  if (this.commits.length < end) {
+    isGraphEdge = true;
+    end = this.commits.length;
+  }
+  if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
+    i = start;
+    this.prev_start = start;
+    while (i < end) {
+      commit = this.commits[i];
+      i += 1;
+      if (commit.hasDrawn !== true) {
+        x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+        y = this.offsetY + this.unitTime * commit.time;
+        this.drawDot(x, y, commit);
+        this.drawLines(x, y, commit);
+        this.appendLabel(x, y, commit);
+        this.appendAnchor(x, y, commit);
+        commit.hasDrawn = true;
       }
-      return this.top.toFront();
     }
-  };
+    return this.top.toFront();
+  }
+};
 
-  BranchGraph.prototype.bindEvents = function() {
-    var element;
-    element = this.element;
-    return $(element).scroll((function(_this) {
-      return function(event) {
-        return _this.renderPartialGraph();
-      };
-    })(this));
-  };
+BranchGraph.prototype.bindEvents = function() {
+  var element;
+  element = this.element;
+  return $(element).scroll(() => this.renderPartialGraph);
+};
 
-  BranchGraph.prototype.scrollDown = function() {
-    this.element.scrollTop(this.element.scrollTop() + 50);
-    return this.renderPartialGraph();
-  };
+BranchGraph.prototype.scrollDown = function() {
+  this.element.scrollTop(this.element.scrollTop() + 50);
+  return this.renderPartialGraph();
+};
 
-  BranchGraph.prototype.scrollUp = function() {
-    this.element.scrollTop(this.element.scrollTop() - 50);
-    return this.renderPartialGraph();
-  };
+BranchGraph.prototype.scrollUp = function() {
+  this.element.scrollTop(this.element.scrollTop() - 50);
+  return this.renderPartialGraph();
+};
 
-  BranchGraph.prototype.scrollLeft = function() {
-    this.element.scrollLeft(this.element.scrollLeft() - 50);
-    return this.renderPartialGraph();
-  };
+BranchGraph.prototype.scrollLeft = function() {
+  this.element.scrollLeft(this.element.scrollLeft() - 50);
+  return this.renderPartialGraph();
+};
 
-  BranchGraph.prototype.scrollRight = function() {
-    this.element.scrollLeft(this.element.scrollLeft() + 50);
-    return this.renderPartialGraph();
-  };
+BranchGraph.prototype.scrollRight = function() {
+  this.element.scrollLeft(this.element.scrollLeft() + 50);
+  return this.renderPartialGraph();
+};
 
-  BranchGraph.prototype.scrollBottom = function() {
-    return this.element.scrollTop(this.element.find('svg').height());
-  };
+BranchGraph.prototype.scrollBottom = function() {
+  return this.element.scrollTop(this.element.find('svg').height());
+};
 
-  BranchGraph.prototype.scrollTop = function() {
-    return this.element.scrollTop(0);
-  };
+BranchGraph.prototype.scrollTop = function() {
+  return this.element.scrollTop(0);
+};
 
-  BranchGraph.prototype.appendLabel = function(x, y, commit) {
-    var label, r, rect, shortrefs, text, textbox, triangle;
-    if (!commit.refs) {
-      return;
+BranchGraph.prototype.appendLabel = function(x, y, commit) {
+  var label, r, rect, shortrefs, text, textbox, triangle;
+  if (!commit.refs) {
+    return;
+  }
+  r = this.r;
+  shortrefs = commit.refs;
+  // Truncate if longer than 15 chars
+  if (shortrefs.length > 17) {
+    shortrefs = shortrefs.substr(0, 15) + "…";
+  }
+  text = r.text(x + 4, y, shortrefs).attr({
+    "text-anchor": "start",
+    font: "10px Monaco, monospace",
+    fill: "#FFF",
+    title: commit.refs
+  });
+  textbox = text.getBBox();
+  // Create rectangle based on the size of the textbox
+  rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
+    fill: "#000",
+    "fill-opacity": .5,
+    stroke: "none"
+  });
+  triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
+    fill: "#000",
+    "fill-opacity": .5,
+    stroke: "none"
+  });
+  label = r.set(rect, text);
+  label.transform(["t", -rect.getBBox().width - 15, 0]);
+  // Set text to front
+  return text.toFront();
+};
+
+BranchGraph.prototype.appendAnchor = function(x, y, commit) {
+  var anchor, options, r, top;
+  r = this.r;
+  top = this.top;
+  options = this.options;
+  anchor = r.circle(x, y, 10).attr({
+    fill: "#000",
+    opacity: 0,
+    cursor: "pointer"
+  }).click(function() {
+    return window.open(options.commit_url.replace("%s", commit.id), "_blank");
+  }).hover(function() {
+    this.tooltip = r.commitTooltip(x + 5, y, commit);
+    return top.push(this.tooltip.insertBefore(this));
+  }, function() {
+    return this.tooltip && this.tooltip.remove() && delete this.tooltip;
+  });
+  return top.push(anchor);
+};
+
+BranchGraph.prototype.drawDot = function(x, y, commit) {
+  var avatar_box_x, avatar_box_y, r;
+  r = this.r;
+  r.circle(x, y, 3).attr({
+    fill: this.colors[commit.space],
+    stroke: "none"
+  });
+  avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
+  avatar_box_y = y - 10;
+  r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
+    stroke: this.colors[commit.space],
+    "stroke-width": 2
+  });
+  r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
+  return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
+    "text-anchor": "start",
+    font: "14px Monaco, monospace"
+  });
+};
+
+BranchGraph.prototype.drawLines = function(x, y, commit) {
+  var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
+  r = this.r;
+  ref = commit.parents;
+  results = [];
+  for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
+    parent = ref[i];
+    parentCommit = this.preparedCommits[parent[0]];
+    parentY = this.offsetY + this.unitTime * parentCommit.time;
+    parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
+    parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
+    // Set line color
+    if (parentCommit.space <= commit.space) {
+      color = this.colors[commit.space];
+    } else {
+      color = this.colors[parentCommit.space];
     }
-    r = this.r;
-    shortrefs = commit.refs;
-    // Truncate if longer than 15 chars
-    if (shortrefs.length > 17) {
-      shortrefs = shortrefs.substr(0, 15) + "…";
+    // Build line shape
+    if (parent[1] === commit.space) {
+      offset = [0, 5];
+      arrow = "l-2,5,4,0,-2,-5,0,5";
+    } else if (parent[1] < commit.space) {
+      offset = [3, 3];
+      arrow = "l5,0,-2,4,-3,-4,4,2";
+    } else {
+      offset = [-3, 3];
+      arrow = "l-5,0,2,4,3,-4,-4,2";
     }
-    text = r.text(x + 4, y, shortrefs).attr({
-      "text-anchor": "start",
-      font: "10px Monaco, monospace",
-      fill: "#FFF",
-      title: commit.refs
-    });
-    textbox = text.getBBox();
-    // Create rectangle based on the size of the textbox
-    rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
-      fill: "#000",
-      "fill-opacity": .5,
-      stroke: "none"
-    });
-    triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
-      fill: "#000",
-      "fill-opacity": .5,
-      stroke: "none"
-    });
-    label = r.set(rect, text);
-    label.transform(["t", -rect.getBBox().width - 15, 0]);
-    // Set text to front
-    return text.toFront();
-  };
+    // Start point
+    route = ["M", x + offset[0], y + offset[1]];
+    // Add arrow if not first parent
+    if (i > 0) {
+      route.push(arrow);
+    }
+    // Circumvent if overlap
+    if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
+      route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
+    }
+    // End point
+    route.push("L", parentX1, parentY);
+    results.push(r.path(route).attr({
+      stroke: color,
+      "stroke-width": 2
+    }));
+  }
+  return results;
+};
 
-  BranchGraph.prototype.appendAnchor = function(x, y, commit) {
-    var anchor, options, r, top;
+BranchGraph.prototype.markCommit = function(commit) {
+  var r, x, y;
+  if (commit.id === this.options.commit_id) {
     r = this.r;
-    top = this.top;
-    options = this.options;
-    anchor = r.circle(x, y, 10).attr({
+    x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+    y = this.offsetY + this.unitTime * commit.time;
+    r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
       fill: "#000",
-      opacity: 0,
-      cursor: "pointer"
-    }).click(function() {
-      return window.open(options.commit_url.replace("%s", commit.id), "_blank");
-    }).hover(function() {
-      this.tooltip = r.commitTooltip(x + 5, y, commit);
-      return top.push(this.tooltip.insertBefore(this));
-    }, function() {
-      return this.tooltip && this.tooltip.remove() && delete this.tooltip;
-    });
-    return top.push(anchor);
-  };
-
-  BranchGraph.prototype.drawDot = function(x, y, commit) {
-    var avatar_box_x, avatar_box_y, r;
-    r = this.r;
-    r.circle(x, y, 3).attr({
-      fill: this.colors[commit.space],
+      "fill-opacity": .5,
       stroke: "none"
     });
-    avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
-    avatar_box_y = y - 10;
-    r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
-      stroke: this.colors[commit.space],
-      "stroke-width": 2
-    });
-    r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
-    return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
-      "text-anchor": "start",
-      font: "14px Monaco, monospace"
-    });
-  };
-
-  BranchGraph.prototype.drawLines = function(x, y, commit) {
-    var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
-    r = this.r;
-    ref = commit.parents;
-    results = [];
-    for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
-      parent = ref[i];
-      parentCommit = this.preparedCommits[parent[0]];
-      parentY = this.offsetY + this.unitTime * parentCommit.time;
-      parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
-      parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
-      // Set line color
-      if (parentCommit.space <= commit.space) {
-        color = this.colors[commit.space];
-      } else {
-        color = this.colors[parentCommit.space];
-      }
-      // Build line shape
-      if (parent[1] === commit.space) {
-        offset = [0, 5];
-        arrow = "l-2,5,4,0,-2,-5,0,5";
-      } else if (parent[1] < commit.space) {
-        offset = [3, 3];
-        arrow = "l5,0,-2,4,-3,-4,4,2";
-      } else {
-        offset = [-3, 3];
-        arrow = "l-5,0,2,4,3,-4,-4,2";
-      }
-      // Start point
-      route = ["M", x + offset[0], y + offset[1]];
-      // Add arrow if not first parent
-      if (i > 0) {
-        route.push(arrow);
-      }
-      // Circumvent if overlap
-      if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
-        route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
-      }
-      // End point
-      route.push("L", parentX1, parentY);
-      results.push(r.path(route).attr({
-        stroke: color,
-        "stroke-width": 2
-      }));
-    }
-    return results;
-  };
-
-  BranchGraph.prototype.markCommit = function(commit) {
-    var r, x, y;
-    if (commit.id === this.options.commit_id) {
-      r = this.r;
-      x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-      y = this.offsetY + this.unitTime * commit.time;
-      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
-        fill: "#000",
-        "fill-opacity": .5,
-        stroke: "none"
-      });
-      // Displayed in the center
-      return this.element.scrollTop(y - this.graphHeight / 2);
-    }
-  };
+    // Displayed in the center
+    return this.element.scrollTop(y - this.graphHeight / 2);
+  }
+};
 
-  return BranchGraph;
-})();
+export default BranchGraph;
diff --git a/spec/javascripts/bootstrap_linked_tabs_spec.js b/spec/javascripts/bootstrap_linked_tabs_spec.js
index fa9f95e16cd..4fc549149ef 100644
--- a/spec/javascripts/bootstrap_linked_tabs_spec.js
+++ b/spec/javascripts/bootstrap_linked_tabs_spec.js
@@ -1,71 +1,69 @@
 require('~/lib/utils/bootstrap_linked_tabs');
 
-(() => {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  let phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
+// TODO: remove this hack!
+// PhantomJS causes spyOn to panic because replaceState isn't "writable"
+let phantomjs;
+try {
+  phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
+} catch (err) {
+  phantomjs = false;
+}
 
-  describe('Linked Tabs', () => {
-    preloadFixtures('static/linked_tabs.html.raw');
+describe('Linked Tabs', () => {
+  preloadFixtures('static/linked_tabs.html.raw');
 
+  beforeEach(() => {
+    loadFixtures('static/linked_tabs.html.raw');
+  });
+
+  describe('when is initialized', () => {
     beforeEach(() => {
-      loadFixtures('static/linked_tabs.html.raw');
+      if (!phantomjs) {
+        spyOn(window.history, 'replaceState').and.callFake(function () {});
+      }
     });
 
-    describe('when is initialized', () => {
-      beforeEach(() => {
-        if (!phantomjs) {
-          spyOn(window.history, 'replaceState').and.callFake(function () {});
-        }
+    it('should activate the tab correspondent to the given action', () => {
+      const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+        action: 'tab1',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
       });
 
-      it('should activate the tab correspondent to the given action', () => {
-        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
-          action: 'tab1',
-          defaultAction: 'tab1',
-          parentEl: '.linked-tabs',
-        });
+      expect(document.querySelector('#tab1').classList).toContain('active');
+    });
 
-        expect(document.querySelector('#tab1').classList).toContain('active');
+    it('should active the default tab action when the action is show', () => {
+      const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+        action: 'show',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
       });
 
-      it('should active the default tab action when the action is show', () => {
-        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
-          action: 'show',
-          defaultAction: 'tab1',
-          parentEl: '.linked-tabs',
-        });
-
-        expect(document.querySelector('#tab1').classList).toContain('active');
-      });
+      expect(document.querySelector('#tab1').classList).toContain('active');
     });
+  });
 
-    describe('on click', () => {
-      it('should change the url according to the clicked tab', () => {
-        const historySpy = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});
+  describe('on click', () => {
+    it('should change the url according to the clicked tab', () => {
+      const historySpy = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});
 
-        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
-          action: 'show',
-          defaultAction: 'tab1',
-          parentEl: '.linked-tabs',
-        });
+      const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+        action: 'show',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
+      });
 
-        const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
-        const newState = secondTab.getAttribute('href') + linkedTabs.currentLocation.search + linkedTabs.currentLocation.hash;
+      const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
+      const newState = secondTab.getAttribute('href') + linkedTabs.currentLocation.search + linkedTabs.currentLocation.hash;
 
-        secondTab.click();
+      secondTab.click();
 
-        if (historySpy) {
-          expect(historySpy).toHaveBeenCalledWith({
-            url: newState,
-          }, document.title, newState);
-        }
-      });
+      if (historySpy) {
+        expect(historySpy).toHaveBeenCalledWith({
+          url: newState,
+        }, document.title, newState);
+      }
     });
   });
-})();
+});