use dialog component

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

 /* global BoardService */
 
 import Vue from 'vue';
+import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
 import boardMilestoneSelect from './milestone_select';
 import extraMilestones from '../mixins/extra_milestones';
 
@@ -25,6 +26,7 @@ import extraMilestones from '../mixins/extra_milestones';
           milestone: extraMilestones[0],
           milestone_id: extraMilestones[0].id,
         },
+        issue: {},
         currentBoard: Store.state.currentBoard,
         currentPage: Store.state.currentPage,
         milestones: [],
@@ -34,6 +36,7 @@ import extraMilestones from '../mixins/extra_milestones';
     },
     components: {
       boardMilestoneSelect,
+      PopupDialog,
     },
     mounted() {
       if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
@@ -90,8 +93,6 @@ import extraMilestones from '../mixins/extra_milestones';
               // We reload the page to make sure the store & state of the app are correct
               this.refreshPage();
 
-              $('#edit-board-modal').modal('hide');
-
               // Enable the button thanks to our jQuery disabling it
               $(this.$refs.submitBtn).enable();
 

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

@@ -29,6 +29,7 @@ import './board_new_form';
         loading: true,
         boards: [],
         state: Store.state,
+        milestoneTitle: 'Milestone',
       };
     },
     watch: {

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

@@ -5,11 +5,11 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     body: {
       type: String,
-      required: true,
+      required: false,
     },
     kind: {
       type: String,
@@ -23,7 +23,7 @@ export default {
     },
     primaryButtonLabel: {
       type: String,
-      required: true,
+      required: false,
     },
   },
 
@@ -63,21 +63,25 @@ export default {
         <h4 class="modal-title">{{this.title}}</h4>
       </div>
       <div class="modal-body">
-        <p>{{this.body}}</p>
+        <slot name="body">
+          <p>{{this.body}}</p>
+        </slot>
       </div>
       <div class="modal-footer">
-        <button
-          type="button"
-          class="btn btn-default"
-          @click="emitSubmit(false)">
-            {{closeButtonLabel}}
-        </button>
-        <button type="button"
-          class="btn"
-          :class="btnKindClass"
-          @click="emitSubmit(true)">
-            {{primaryButtonLabel}}
-        </button>
+        <slot name="footer">
+          <button
+            type="button"
+            class="btn btn-default"
+            @click="emitSubmit(false)">
+              {{closeButtonLabel}}
+          </button>
+          <button type="button"
+            class="btn"
+            :class="btnKindClass"
+            @click="emitSubmit(true)">
+              {{primaryButtonLabel}}
+          </button>
+        </slot>
       </div>
     </div>
   </div>

app/assets/stylesheets/framework/modal.scss

@@ -35,3 +35,31 @@ body.modal-open {
     width: 98%;
   }
 }
+
+.modal-dialog {
+  // TODO: this needs top and bottom padding (inside content area)
+  max-height: calc(100vh - #{$new-navbar-height});
+  padding: $gl-padding;
+}
+
+.modal-header,
+.modal-footer {
+  padding: $gl-padding;
+  background-color: $gray-light;
+  border-top: 1px solid $border-color;
+}
+
+.modal.popup-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $black-transparent;
+  z-index: 2100;
+
+  @media (min-width: $screen-md-min) {
+    .modal-dialog {
+      width: 600px;
+      margin-top: $new-navbar-height;
+    }
+  }
+}

app/assets/stylesheets/pages/repo.scss

@@ -12,19 +12,6 @@
   background: $black-transparent;
 }
 
-.modal.popup-dialog {
-  display: block;
-  background-color: $black-transparent;
-  z-index: 2100;
-
-  @media (min-width: $screen-md-min) {
-    .modal-dialog {
-      width: 600px;
-      margin: 30px auto;
-    }
-  }
-}
-
 .project-refs-form,
 .project-refs-target-form {
   display: inline-block;

app/views/shared/boards/_switcher.html.haml

@@ -28,13 +28,13 @@
             %ul.dropdown-footer-list
               - if parent.feature_available?(:multiple_issue_boards)
                 %li
-                  %a{ "href" => "#", "@click.prevent" => "showPage('new')", data: { toggle: 'modal', target: '#edit-board-modal' } }
+                  %a{ "href" => "#", "@click.prevent" => "showPage('new')" }
                     Create new board
               %li
-                %a{ "href" => "#", "@click.prevent" => "showPage('edit')", data: { toggle: 'modal', target: '#edit-board-modal' } }
+                %a{ "href" => "#", "@click.prevent" => "showPage('edit')" }
                   Edit board
               %li{ "v-if" => "showDelete" }
-                %a{ "href" => "#", "@click.prevent" => "showPage('delete')", data: { toggle: 'modal', target: '#edit-board-modal' } }
+                %a{ "href" => "#", "@click.prevent" => "showPage('delete')" }
                   %span.text-danger
                     Delete board