start separating milestone and dropdown components

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

 <template>
-  <popup-dialog :title="title">
+        <!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
+  <popup-dialog
+    v-show="currentPage"
+    :title="title"
+    :primaryButtonLabel="buttonText"
+    @toggle="cancel"
+    @submit="submit"
+  >
     <p v-if="currentPage === 'delete'">
       Are you sure you want to delete this board?
     </p>
     <form
       v-else
-      @submit="submit"
     >
       <div class="append-bottom-20">
         <label class="label-light" for="board-new-name">
@@ -31,11 +37,12 @@
         </button>
       </div>
       <div v-if="expand">
-        <p>
+        <p class="light append-bottom-10">
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
 
         <!-- TODO: if current_board_parent.issue_board_milestone_available?(current_user) -->
+        <div class="board-inner-container">
           <input
             type="hidden"
             id="board-milestone"
@@ -46,24 +53,10 @@
             :milestone-path="milestonePath"
             :select-milestone="selectMilestone">
           </board-milestone-select>
+        </div>
+
       </div>
     </form>
-    <template slot="footer">
-      <!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
-      <button
-        class="btn btn-primary pull-left"
-        @click="submit"
-        type="button"
-      >
-        {{ buttonText }}
-      </button>
-      <button
-        class="btn btn-default pull-right"
-        type="button"
-      >
-        Cancel
-      </button>
-    </template>
   </popup-dialog>
 </template>
 

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

+<template>
+  <div class="">
+    <div class="media">
+      <label class="media-body">Milestone</label>
+      <a href="#" data-dropdown-trigger="#milestone-dropdown" ref="trigger">
+        Edit
+      </a>
+    </div>
+    <div class="droplab-dropdown">
+      <div>
+        Current value
+      </div>
+      <ul
+        ref="list"
+        class="dropdown-menu"
+      >
+        <slot name="items"></slot>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import DropLab from '~/droplab/drop_lab';
+
+export default {
+  props: {
+  },
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  mounted() {
+    this.droplab = new DropLab();
+    this.droplab.init(this.$refs.trigger, this.$refs.list);
+  },
+};
+</script>

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

 <template>
-  <div class="droplab-dropdown">
-    <div class="media">
-      <label class="media-body">Milestone</label>
-      <a href="#" data-dropdown-trigger="#milestone-dropdown" ref="trigger">
-        Edit
-      </a>
-    </div>
-    <div>
-      {{ board.milestone ? board.milestone.title : 'Milestone' }}
-      <ul
-        ref="list"
-        class="dropdown-menu"
-      >
+  <div>
+    <gl-dropdown>
+      <template slot="items">
         <li
           v-for="milestone in extraMilestones"
           :key="milestone.id"
@@ -21,7 +11,7 @@
             @click.prevent.stop="selectMilestone(milestone)">
             <i
               class="fa fa-check"
-              v-if="board.milestone_id === milestone.id"></i>
+              v-if="false"></i>
             {{ milestone.title }}
           </a>
         </li>
@@ -35,12 +25,12 @@
             @click.prevent.stop="selectMilestone(milestone)">
             <i
               class="fa fa-check"
-              v-if="board.milestone_id === milestone.id"></i>
+              v-if="false"></i>
             {{ milestone.title }}
           </a>
         </li>
-      </ul>
-    </div>
+      </template>
+    </gl-dropdown>
   </div>
 </template>
 
@@ -48,6 +38,7 @@
 /* global BoardService */
 
 import DropLab from '~/droplab/drop_lab';
+import GlDropdown from './dropdown.vue';
 import extraMilestones from '../mixins/extra_milestones';
 
 export default {
@@ -72,11 +63,11 @@ export default {
       extraMilestones,
     };
   },
+  components: {
+    GlDropdown,
+  },
   mounted() {
     BoardService.loadMilestones.call(this);
-
-    this.droplab = new DropLab();
-    this.droplab.init(this.$refs.trigger, this.$refs.list);
   },
 };
 </script>

app/assets/javascripts/vue_shared/components/popup_dialog.vue

@@ -48,20 +48,21 @@ export default {
   tabindex="-1"
 >
   <div
-    class="modal-dialog"
+    class="modal-dialog modal-sm"
     role="document"
   >
     <div class="modal-content">
       <div class="modal-header">
         <slot name="header">
-          <button type="button"
-            class="close"
+          <h4 class="modal-title pull-left">{{this.title}}</h4>
+          <button
+            type="button"
+            class="close pull-right"
             @click="close"
             aria-label="Close"
           >
             <span aria-hidden="true">&times;</span>
           </button>
-          <h4 class="modal-title">{{this.title}}</h4>
         </slot>
       </div>
       <div class="modal-body">
@@ -69,22 +70,22 @@ export default {
           <p>{{this.body}}</p>
         </slot>
       </div>
-      <div class="modal-footer">
-        <slot name="footer">
-          <button
-            type="button"
-            class="btn btn-default"
-            @click="emitSubmit(false)">
-              Cancel
-          </button>
+      <slot name="footer">
+        <div class="modal-footer">
           <button type="button"
-            class="btn"
+            class="btn pull-left"
             :class="btnKindClass"
             @click="emitSubmit(true)">
               {{primaryButtonLabel}}
           </button>
-        </slot>
-      </div>
+          <button
+            type="button"
+            class="btn btn-default pull-right"
+            @click="close">
+              Cancel
+          </button>
+        </div>
+      </slot>
     </div>
   </div>
 </div>