use milestone_select to select milestone

app/assets/javascripts/boards/components/board_form.vue

@@ -59,7 +59,6 @@
             <board-milestone-select
               :board="board"
               :milestone-path="milestonePath"
-              v-model="board.milestone_id"
               title="Milestone"
               default-text="Any milestone"
               :can-edit="canAdminBoard"

app/assets/javascripts/boards/components/milestone_select.vue

 <script>
-/* global BoardService */
+/* global BoardService, MilestoneSelect */
 
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
@@ -14,10 +14,6 @@ export default {
       type: String,
       required: true,
     },
-    value: {
-      type: Number,
-      required: false,
-    },
     defaultText: {
       type: String,
       required: true,
@@ -45,94 +41,107 @@ export default {
   },
   computed: {
     milestoneTitle() {
-      return this.board.milestone ? this.board.milestone.title : this.defaultText;
+      return this.board.milestone ? this.board.milestone.title : '';
     },
   },
   methods: {
     selectMilestone(milestone) {
       this.$set(this.board, 'milestone', milestone);
-      this.$emit('input', milestone.id);
-      this.close();
-    },
-    open() {
-      this.isOpen = true;
-    },
-    close() {
-      this.isOpen = false;
-    },
-    toggle() {
-      this.isOpen = !this.isOpen;
     },
   },
   mounted() {
-    this.$http.get(this.milestonePath)
-      .then(resp => resp.json())
-      .then((data) => {
-        this.milestones = data;
-        this.loading = false;
-      })
-      .catch(() => {
-        this.loading = false;
-      });
+    new MilestoneSelect(null, this.$refs.dropdownButton, {
+      handleClick: this.selectMilestone,
+    });
   },
 };
 </script>
 
 <template>
-  <div class="dropdown milestone" :class="{ open: isOpen }">
+  <div class="block milestone">
     <div class="title append-bottom-10">
-      {{ title }}
+      Milestone
       <a
         v-if="canEdit"
         class="edit-link pull-right"
         href="#"
-        @click.prevent="toggle"
       >
         Edit
       </a>
     </div>
+    <div class="value">
+      <span
+        class="no-value"
+        v-if="!board.milestone"
+      >
+        None
+      </span>
+      <span
+        class="bold has-tooltip"
+        v-if="board.milestone"
+      >
+        {{ board.milestone.title }}
+      </span>
+    </div>
     <div
-      class="dropdown-menu dropdown-menu-wide"
+      class="selectbox"
+      style="display: none;"
     >
-      <ul
-        ref="list"
+      <input
+        :value="board.milestone.id"
+        name="milestone_id"
+        type="hidden"
+        v-if="board.milestone"
       >
-        <li
-          v-for="milestone in extraMilestones"
-          :key="milestone.id"
+      <div class="dropdown">
+        <button
+          ref="dropdownButton"
+          :data-selected="milestoneTitle"
+          class="dropdown-menu-toggle wide"
+          :data-milestones="milestonePath"
+          :data-show-no="true"
+          :data-show-any="true"
+          :data-show-started="true"
+          :data-show-upcoming="true"
+          data-toggle="dropdown"
+          :data-use-id="true"
+          type="button"
         >
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
+          Milestone
+          <i
+            aria-hidden="true"
+            data-hidden="true"
+            class="fa fa-chevron-down"
+          />
+        </button>
+        <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+          <div
+            class="dropdown-input"
+          >
+            <input
+              type="search"
+              class="dropdown-input-field"
+              placeholder="Search milestones"
+              autocomplete="off"
+            >
             <i
-              class="fa fa-check"
-              v-if="milestone.id === value"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-        <li class="divider"></li>
-        <li v-if="loading">
-          <loading-icon />
-        </li>
-        <li
-          v-else
-          v-for="milestone in milestones"
-          :key="milestone.id"
-          class="dropdown-menu-item"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
+              aria-hidden="true"
+              data-hidden="true"
+              class="fa fa-search dropdown-input-search"
+            />
             <i
-              class="fa fa-check"
-              v-if="milestone.id === value"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="value">
-      {{ milestoneTitle }}
+              role="button"
+              aria-hidden="true"
+              data-hidden="true"
+              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+            />
+          </div>
+          <div class="dropdown-content" />
+          <div class="dropdown-loading">
+            <loading-icon />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

app/assets/javascripts/milestone_select.js

@@ -5,7 +5,7 @@ import _ from 'underscore';
 
 (function() {
   this.MilestoneSelect = (function() {
-    function MilestoneSelect(currentProject, els) {
+    function MilestoneSelect(currentProject, els, options = {}) {
       var _this, $els;
       if (currentProject != null) {
         _this = this;
@@ -158,18 +158,25 @@ import _ from 'underscore';
           },
           isSelectable: function() {
             if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
-              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone_id) {
+              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone_id &&
+              !options.handleClick) {
               return false;
             }
 
             return true;
           },
-          clicked: function(options) {
-            const { $el, e } = options;
-            let selected = options.selectedObj;
+          clicked: function(clickEvent) {
+            const { $el, e } = clickEvent;
+            let selected = clickEvent.selectedObj;
 
             var data, isIssueIndex, isMRIndex, isSelecting, page, boardsStore;
             if (!selected) return;
+
+            if (options.handleClick) {
+              options.handleClick(selected);
+              return;
+            }
+
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = (page === page && page === 'projects:merge_requests:index');