Added extra milestone to new dropdown

Defaults to any milestone on new board

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

 /* global Vue */
-/* eslint-disable */
+/* global BoardService */
 const boardMilestoneSelect = require('./milestone_select');
+const extraMilestones = require('../mixins/extra_milestones');
+
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -19,13 +21,14 @@ const boardMilestoneSelect = require('./milestone_select');
         board: {
           id: false,
           name: '',
-          milestone: {},
-          milestone_id: '',
+          milestone: extraMilestones[0],
+          milestone_id: extraMilestones[0].id,
         },
         currentBoard: Store.state.currentBoard,
         currentPage: Store.state.currentPage,
         milestones: [],
         milestoneDropdownOpen: false,
+        extraMilestones,
       };
     },
     components: {
@@ -70,7 +73,8 @@ const boardMilestoneSelect = require('./milestone_select');
                 this.currentBoard.milestone_id = this.board.milestone_id;
                 this.currentBoard.milestone = this.board.milestone;
 
-                Store.state.filters.milestone_title = this.currentBoard.milestone_id ? this.currentBoard.milestone.title : null;
+                Store.state.filters.milestone_title = this.currentBoard.milestone_id ?
+                  this.currentBoard.milestone.title : null;
               }
             }
 

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

 /* global BoardService */
 /* global Vue */
-module.exports = Vue.extend({
+const extraMilestones = require('../mixins/extra_milestones');
+
+module.exports = {
   props: {
     board: {
       type: Object,
@@ -19,16 +21,7 @@ module.exports = Vue.extend({
     return {
       loading: false,
       milestones: [],
-      extraMilestones: [
-        {
-          id: null,
-          title: 'Any Milestone',
-        },
-        {
-          id: -2,
-          title: 'Upcoming',
-        },
-      ],
+      extraMilestones,
     };
   },
   mounted() {
@@ -68,4 +61,4 @@ module.exports = Vue.extend({
       </ul>
     </div>
   `,
-});
+};

app/assets/javascripts/boards/mixins/extra_milestones.js

+module.exports = [
+  {
+    id: null,
+    title: 'Any Milestone',
+  },
+  {
+    id: -2,
+    title: 'Upcoming',
+  },
+];

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

@@ -20,6 +20,12 @@
       .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen" }
         .dropdown-content
           %ul
+            %li{ "v-for" => "milestone in extraMilestones" }
+              %a{ href: "#",
+                ":class" => "{ 'is-active': milestone.id === board.milestone_id }",
+                "@click.stop.prevent" => "selectMilestone(milestone)" }
+                {{ milestone.title }}
+            %li.divider
             %li{ "v-for" => "milestone in milestones" }
               %a{ href: "#",
                 ":class" => "{ 'is-active': milestone.id === board.milestone_id }",