Different select dropdown for edit milestone page

app/assets/javascripts/boards/components/board_new_form.js

 /* global Vue */
-
+/* eslint-disable */
+//= require ./milestone_select
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -25,8 +26,11 @@
         milestoneDropdownOpen: false,
       };
     },
+    components: {
+      'board-milestone-select': gl.issueBoards.BoardMilestoneSelect,
+    },
     mounted() {
-      if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage === 'edit') {
+      if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
         this.board = Vue.util.extend({}, this.currentBoard);
       }
     },
@@ -45,6 +49,13 @@
 
         return 'Milestone';
       },
+      submitDisabled() {
+        if (this.currentPage !== 'milestone') {
+          return board.name === '';
+        }
+
+        return false;
+      },
     },
     methods: {
       loadMilestones() {
@@ -60,14 +71,12 @@
       submit() {
         gl.boardService.createBoard(this.board)
           .then(() => {
-            if (this.currentBoard && this.currentPage === 'edit') {
+            if (this.currentBoard && this.currentPage !== 'new') {
               this.currentBoard.name = this.board.name;
 
               if (this.board.milestone_id) {
                 this.currentBoard.milestone_id = this.board.milestone_id;
-                this.currentBoard.milestone = {
-                  title: this.board.milestone.title,
-                },
+                this.currentBoard.milestone = this.board.milestone;
 
                 Store.state.filters.milestone_title = this.currentBoard.milestone.title;
               }

app/assets/javascripts/boards/components/milestone_select.js.es6

+/* global Vue */
+(() => {
+  gl.issueBoards.BoardMilestoneSelect = Vue.extend({
+    props: {
+      board: {
+        type: Object,
+        required: true,
+      },
+      milestonePath: {
+        type: String,
+        required: true,
+      },
+      selectMilestone: {
+        type: Function,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        loading: false,
+        milestones: [],
+      };
+    },
+    mounted() {
+      this.loading = true;
+      this.$http.get(this.milestonePath)
+        .then((res) => {
+          this.milestones = res.json();
+          this.loading = false;
+        });
+    },
+    template: `
+      <div>
+        <div class="text-center">
+          <i
+            v-if="loading"
+            class="fa fa-spinner fa-spin"></i>
+        </div>
+        <ul v-if="!loading">
+          <li v-for="milestone in milestones">
+            <a
+              href="#"
+              @click.prevent.stop="selectMilestone(milestone)">
+              <i
+                class="fa fa-check"
+                v-if="board.milestone_id === milestone.id"></i>
+              {{ milestone.title }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})();

app/views/projects/boards/components/_form.html.haml

@@ -10,7 +10,7 @@
         id: "board-new-name",
         "v-model" => "board.name" }
     .dropdown{ ":class" => "{ open: milestoneDropdownOpen }",
-      "v-if" => "currentPage !== 'edit'" }
+      "v-if" => "currentPage === 'new'" }
       %label.label-light{ for: "board-milestone" }
         Board milestone
       %button.dropdown-menu-toggle.wide{ type: "button",
@@ -28,9 +28,12 @@
         = dropdown_loading
       %span
         Only show issues scheduled for the selected milestone
+    %board-milestone-select{ ":milestone-path" => "milestonePath",
+      ":select-milestone" => "selectMilestone",
+      ":board" => "board" }
     .clearfix.prepend-top-10
       %button.btn.btn-primary.pull-left{ type: "submit",
-        ":disabled" => "board.name === ''",
+        ":disabled" => "submitDisabled",
         "ref" => "'submit-btn'" }
         {{ buttonText }}
       %button.btn.btn-default.pull-right{ type: "button",