Merge branch '38869-milestone-select' into 'master'

Resolve "Webpack Roadmap"

Closes #38869

See merge request gitlab-org/gitlab-ce!16076

6 files changed, 212 insertions, 221 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 616de2347e1..983429550f0 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -1,5 +1,4 @@
 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
-/* global MilestoneSelect */
 
 import Vue from 'vue';
 import Flash from '../../flash';
@@ -12,6 +11,7 @@ import './sidebar/remove_issue';
 import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
 import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
+import MilestoneSelect from '../../milestone_select';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 118437b82a3..42f61d33f6e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -5,7 +5,7 @@ import IssuableIndex from './issuable_index';
 import Milestone from './milestone';
 import IssuableForm from './issuable_form';
 import LabelsSelect from './labels_select';
-/* global MilestoneSelect */
+import MilestoneSelect from './milestone_select';
 import NewBranchForm from './new_branch_form';
 import NotificationsForm from './notifications_form';
 import notificationsDropdown from './notifications_dropdown';
diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 5d4c1851fe5..e61b37a2d1f 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-new */
-/* global MilestoneSelect */
+
+import MilestoneSelect from './milestone_select';
 import LabelsSelect from './labels_select';
 import IssuableContext from './issuable_context';
 import Sidebar from './right_sidebar';
diff --git a/app/assets/javascripts/init_legacy_filters.js b/app/assets/javascripts/init_legacy_filters.js
index 2cbb70220d0..b6ff97d1279 100644
--- a/app/assets/javascripts/init_legacy_filters.js
+++ b/app/assets/javascripts/init_legacy_filters.js
@@ -1,9 +1,9 @@
 /* eslint-disable no-new */
 import LabelsSelect from './labels_select';
-/* global MilestoneSelect */
 import subscriptionSelect from './subscription_select';
 import UsersSelect from './users_select';
 import issueStatusSelect from './issue_status_select';
+import MilestoneSelect from './milestone_select';
 
 export default () => {
   new UsersSelect();
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index bf77b93b643..2056efe701b 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -1,8 +1,7 @@
 /* eslint-disable class-methods-use-this, no-new */
-/* global MilestoneSelect */
 
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
-import './milestone_select';
+import MilestoneSelect from './milestone_select';
 import issueStatusSelect from './issue_status_select';
 import subscriptionSelect from './subscription_select';
 import LabelsSelect from './labels_select';
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 2e5e818d61d..0e854295fe3 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -1,237 +1,228 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
 /* global Issuable */
 /* global ListMilestone */
 import _ from 'underscore';
 import { timeFor } from './lib/utils/datetime_utility';
 
-(function() {
-  this.MilestoneSelect = (function() {
-    function MilestoneSelect(currentProject, els, options = {}) {
-      var _this, $els;
-      if (currentProject != null) {
-        _this = this;
-        this.currentProject = typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject;
-      }
+export default class MilestoneSelect {
+  constructor(currentProject, els, options = {}) {
+    if (currentProject !== null) {
+      this.currentProject = typeof currentProject === 'string' ? JSON.parse(currentProject) : currentProject;
+    }
 
-      $els = $(els);
+    this.init(els, options);
+  }
 
-      if (!els) {
-        $els = $('.js-milestone-select');
-      }
+  init(els, options) {
+    let $els = $(els);
 
-      $els.each(function(i, dropdown) {
-        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, defaultNo, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, selectedMilestoneDefault, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove;
-        $dropdown = $(dropdown);
-        projectId = $dropdown.data('project-id');
-        milestonesUrl = $dropdown.data('milestones');
-        issueUpdateURL = $dropdown.data('issueUpdate');
-        showNo = $dropdown.data('show-no');
-        showAny = $dropdown.data('show-any');
-        showMenuAbove = $dropdown.data('showMenuAbove');
-        showUpcoming = $dropdown.data('show-upcoming');
-        showStarted = $dropdown.data('show-started');
-        useId = $dropdown.data('use-id');
-        defaultLabel = $dropdown.data('default-label');
-        defaultNo = $dropdown.data('default-no');
-        issuableId = $dropdown.data('issuable-id');
-        abilityName = $dropdown.data('ability-name');
-        $selectbox = $dropdown.closest('.selectbox');
-        $block = $selectbox.closest('.block');
-        $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
-        $value = $block.find('.value');
-        $loading = $block.find('.block-loading').fadeOut();
-        selectedMilestoneDefault = (showAny ? '' : null);
-        selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault);
-        selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault;
-        if (issueUpdateURL) {
-          milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
-          milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
-          collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
-        }
-        return $dropdown.glDropdown({
-          showMenuAbove: showMenuAbove,
-          data: function(term, callback) {
-            return $.ajax({
-              url: milestonesUrl
-            }).done(function(data) {
-              var extraOptions = [];
-              if (showAny) {
-                extraOptions.push({
-                  id: 0,
-                  name: '',
-                  title: 'Any Milestone'
-                });
-              }
-              if (showNo) {
-                extraOptions.push({
-                  id: -1,
-                  name: 'No Milestone',
-                  title: 'No Milestone'
-                });
-              }
-              if (showUpcoming) {
-                extraOptions.push({
-                  id: -2,
-                  name: '#upcoming',
-                  title: 'Upcoming'
-                });
-              }
-              if (showStarted) {
-                extraOptions.push({
-                  id: -3,
-                  name: '#started',
-                  title: 'Started'
-                });
-              }
-              if (extraOptions.length) {
-                extraOptions.push('divider');
-              }
+    if (!els) {
+      $els = $('.js-milestone-select');
+    }
 
-              callback(extraOptions.concat(data));
-              if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
-              }
-              $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
-            });
-          },
-          renderRow: function(milestone) {
-            return `
-              <li data-milestone-id="${milestone.name}">
-                <a href='#' class='dropdown-menu-milestone-link'>
-                  ${_.escape(milestone.title)}
-                </a>
-              </li>
-            `;
-          },
-          filterable: true,
-          search: {
-            fields: ['title']
-          },
-          selectable: true,
-          toggleLabel: function(selected, el, e) {
-            if (selected && 'id' in selected && $(el).hasClass('is-active')) {
-              return selected.title;
-            } else {
-              return defaultLabel;
-            }
-          },
-          defaultLabel: defaultLabel,
-          fieldName: $dropdown.data('field-name'),
-          text: function(milestone) {
-            return _.escape(milestone.title);
-          },
-          id: function(milestone) {
-            if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
-              return milestone.name;
-            } else {
-              return milestone.id;
-            }
-          },
-          isSelected: function(milestone) {
-            return milestone.name === selectedMilestone;
-          },
-          hidden: function() {
-            $selectbox.hide();
-            // display:block overrides the hide-collapse rule
-            return $value.css('display', '');
-          },
-          opened: function(e) {
-            const $el = $(e.currentTarget);
-            if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
-              selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
-            }
-            $('a.is-active', $el).removeClass('is-active');
-            $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
-          },
-          vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(clickEvent) {
-            const { $el, e } = clickEvent;
-            let selected = clickEvent.selectedObj;
+    $els.each((i, dropdown) => {
+      let collapsedSidebarLabelTemplate, milestoneLinkNoneTemplate, milestoneLinkTemplate, selectedMilestone, selectedMilestoneDefault;
+      const $dropdown = $(dropdown);
+      const projectId = $dropdown.data('project-id');
+      const milestonesUrl = $dropdown.data('milestones');
+      const issueUpdateURL = $dropdown.data('issueUpdate');
+      const showNo = $dropdown.data('show-no');
+      const showAny = $dropdown.data('show-any');
+      const showMenuAbove = $dropdown.data('showMenuAbove');
+      const showUpcoming = $dropdown.data('show-upcoming');
+      const showStarted = $dropdown.data('show-started');
+      const useId = $dropdown.data('use-id');
+      const defaultLabel = $dropdown.data('default-label');
+      const defaultNo = $dropdown.data('default-no');
+      const issuableId = $dropdown.data('issuable-id');
+      const abilityName = $dropdown.data('ability-name');
+      const $selectBox = $dropdown.closest('.selectbox');
+      const $block = $selectBox.closest('.block');
+      const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
+      const $value = $block.find('.value');
+      const $loading = $block.find('.block-loading').fadeOut();
+      selectedMilestoneDefault = (showAny ? '' : null);
+      selectedMilestoneDefault = (showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault);
+      selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault;
 
-            var data, isIssueIndex, isMRIndex, isSelecting, page, boardsStore;
-            if (!selected) return;
+      if (issueUpdateURL) {
+        milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
+        milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
+        collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
+      }
+      return $dropdown.glDropdown({
+        showMenuAbove: showMenuAbove,
+        data: (term, callback) => $.ajax({
+          url: milestonesUrl
+        }).done((data) => {
+          const extraOptions = [];
+          if (showAny) {
+            extraOptions.push({
+              id: 0,
+              name: '',
+              title: 'Any Milestone'
+            });
+          }
+          if (showNo) {
+            extraOptions.push({
+              id: -1,
+              name: 'No Milestone',
+              title: 'No Milestone'
+            });
+          }
+          if (showUpcoming) {
+            extraOptions.push({
+              id: -2,
+              name: '#upcoming',
+              title: 'Upcoming'
+            });
+          }
+          if (showStarted) {
+            extraOptions.push({
+              id: -3,
+              name: '#started',
+              title: 'Started'
+            });
+          }
+          if (extraOptions.length) {
+            extraOptions.push('divider');
+          }
 
-            if (options.handleClick) {
-              e.preventDefault();
-              options.handleClick(selected);
-              return;
-            }
+          callback(extraOptions.concat(data));
+          if (showMenuAbove) {
+            $dropdown.data('glDropdown').positionMenuAbove();
+          }
+          $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
+        }),
+        renderRow: milestone => `
+          <li data-milestone-id="${milestone.name}">
+            <a href='#' class='dropdown-menu-milestone-link'>
+              ${_.escape(milestone.title)}
+            </a>
+          </li>
+        `,
+        filterable: true,
+        search: {
+          fields: ['title']
+        },
+        selectable: true,
+        toggleLabel: (selected, el, e) => {
+          if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+            return selected.title;
+          } else {
+            return defaultLabel;
+          }
+        },
+        defaultLabel: defaultLabel,
+        fieldName: $dropdown.data('field-name'),
+        text: milestone => _.escape(milestone.title),
+        id: (milestone) => {
+          if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
+            return milestone.name;
+          } else {
+            return milestone.id;
+          }
+        },
+        isSelected: milestone => milestone.name === selectedMilestone,
+        hidden: () => {
+          $selectBox.hide();
+          // display:block overrides the hide-collapse rule
+          return $value.css('display', '');
+        },
+        opened: (e) => {
+          const $el = $(e.currentTarget);
+          if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
+            selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
+          }
+          $('a.is-active', $el).removeClass('is-active');
+          $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
+        },
+        vue: $dropdown.hasClass('js-issue-board-sidebar'),
+        clicked: (clickEvent) => {
+          const { $el, e } = clickEvent;
+          let selected = clickEvent.selectedObj;
 
-            page = $('body').attr('data-page');
-            isIssueIndex = page === 'projects:issues:index';
-            isMRIndex = (page === page && page === 'projects:merge_requests:index');
-            isSelecting = (selected.name !== selectedMilestone);
-            selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault;
-            if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
-              e.preventDefault();
-              return;
-            }
+          let data, boardsStore;
+          if (!selected) return;
 
-            if ($dropdown.closest('.add-issues-modal').length) {
-              boardsStore = gl.issueBoards.ModalStore.store.filter;
-            }
+          if (options.handleClick) {
+            e.preventDefault();
+            options.handleClick(selected);
+            return;
+          }
 
-            if (boardsStore) {
-              boardsStore[$dropdown.data('field-name')] = selected.name;
-              e.preventDefault();
-            } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-              return Issuable.filterResults($dropdown.closest('form'));
-            } else if ($dropdown.hasClass('js-filter-submit')) {
-              return $dropdown.closest('form').submit();
-            } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              if (selected.id !== -1 && isSelecting) {
-                gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
-                  id: selected.id,
-                  title: selected.name
-                }));
-              } else {
-                gl.issueBoards.boardStoreIssueDelete('milestone');
-              }
+          const page = $('body').attr('data-page');
+          const isIssueIndex = page === 'projects:issues:index';
+          const isMRIndex = (page === page && page === 'projects:merge_requests:index');
+          const isSelecting = (selected.name !== selectedMilestone);
+          selectedMilestone = isSelecting ? selected.name : selectedMilestoneDefault;
+          if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+            e.preventDefault();
+            return;
+          }
 
-              $dropdown.trigger('loading.gl.dropdown');
-              $loading.removeClass('hidden').fadeIn();
+          if ($dropdown.closest('.add-issues-modal').length) {
+            boardsStore = gl.issueBoards.ModalStore.store.filter;
+          }
 
-              gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
-                .then(function () {
-                  $dropdown.trigger('loaded.gl.dropdown');
-                  $loading.fadeOut();
-                })
-                .catch(() => {
-                  $loading.fadeOut();
-                });
+          if (boardsStore) {
+            boardsStore[$dropdown.data('field-name')] = selected.name;
+            e.preventDefault();
+          } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+            return Issuable.filterResults($dropdown.closest('form'));
+          } else if ($dropdown.hasClass('js-filter-submit')) {
+            return $dropdown.closest('form').submit();
+          } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            if (selected.id !== -1 && isSelecting) {
+              gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
+                id: selected.id,
+                title: selected.name
+              }));
             } else {
-              selected = $selectbox.find('input[type="hidden"]').val();
-              data = {};
-              data[abilityName] = {};
-              data[abilityName].milestone_id = selected != null ? selected : null;
-              $loading.removeClass('hidden').fadeIn();
-              $dropdown.trigger('loading.gl.dropdown');
-              return $.ajax({
-                type: 'PUT',
-                url: issueUpdateURL,
-                data: data
-              }).done(function(data) {
+              gl.issueBoards.boardStoreIssueDelete('milestone');
+            }
+
+            $dropdown.trigger('loading.gl.dropdown');
+            $loading.removeClass('hidden').fadeIn();
+
+            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
+              .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');
                 $loading.fadeOut();
-                $selectbox.hide();
-                $value.css('display', '');
-                if (data.milestone != null) {
-                  data.milestone.full_path = _this.currentProject.full_path;
-                  data.milestone.remaining = timeFor(data.milestone.due_date);
-                  data.milestone.name = data.milestone.title;
-                  $value.html(milestoneLinkTemplate(data.milestone));
-                  return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
-                } else {
-                  $value.html(milestoneLinkNoneTemplate);
-                  return $sidebarCollapsedValue.find('span').text('No');
-                }
+              })
+              .catch(() => {
+                $loading.fadeOut();
               });
-            }
+          } else {
+            selected = $selectBox.find('input[type="hidden"]').val();
+            data = {};
+            data[abilityName] = {};
+            data[abilityName].milestone_id = selected != null ? selected : null;
+            $loading.removeClass('hidden').fadeIn();
+            $dropdown.trigger('loading.gl.dropdown');
+            return $.ajax({
+              type: 'PUT',
+              url: issueUpdateURL,
+              data: data
+            }).done((data) => {
+              $dropdown.trigger('loaded.gl.dropdown');
+              $loading.fadeOut();
+              $selectBox.hide();
+              $value.css('display', '');
+              if (data.milestone != null) {
+                data.milestone.full_path = this.currentProject.full_path;
+                data.milestone.remaining = timeFor(data.milestone.due_date);
+                data.milestone.name = data.milestone.title;
+                $value.html(milestoneLinkTemplate(data.milestone));
+                return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
+              } else {
+                $value.html(milestoneLinkNoneTemplate);
+                return $sidebarCollapsedValue.find('span').text('No');
+              }
+            });
           }
-        });
+        }
       });
-    }
-
-    return MilestoneSelect;
-  })();
-}).call(window);
+    });
+  }
+}