use popup dialog component and move Edit button outside dropdown

app/assets/javascripts/boards/boards_bundle.js

@@ -145,6 +145,29 @@ $(() => {
     },
   });
 
+  gl.boardConfigToggle = new Vue({
+    el: document.querySelector('.js-board-config'),
+    methods: {
+      showPage: page => gl.issueBoards.BoardsStore.showPage(page),
+    },
+    computed: {
+      buttonText() {
+        return Math.random > 0.5 ? 'Edit board' : 'View scope';
+      },
+    },
+    template: `
+      <div class="prepend-left-10">
+        <button
+          class="btn btn-inverted"
+          type="button"
+          @click.prevent="showPage('edit')"
+        >
+          {{ buttonText }}
+        </button>
+      </div>
+    `,
+  });
+
   gl.IssueBoardsModalAddBtn = new Vue({
     mixins: [gl.issueBoards.ModalMixins],
     el: document.getElementById('js-add-issues-btn'),

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

@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
 import boardMilestoneSelect from './milestone_select';
-import extraMilestones from '../mixins/extra_milestones';
 
 (() => {
   window.gl = window.gl || {};
@@ -23,15 +22,12 @@ import extraMilestones from '../mixins/extra_milestones';
         board: {
           id: false,
           name: '',
-          milestone: extraMilestones[0],
-          milestone_id: extraMilestones[0].id,
         },
         issue: {},
         currentBoard: Store.state.currentBoard,
         currentPage: Store.state.currentPage,
         milestones: [],
         milestoneDropdownOpen: false,
-        extraMilestones,
       };
     },
     components: {

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

-/* global BoardService */
+/* global BoardService, MilestoneSelect */
 
 import extraMilestones from '../mixins/extra_milestones';
 
@@ -26,9 +26,13 @@ export default {
   },
   mounted() {
     BoardService.loadMilestones.call(this);
+    MilestoneSelect();
   },
   template: `
-    <div>
+    <div class="dropdown">
+      <button data-toggle="dropdown" class="dropdown-menu-toggle">{{ board.milestone ? board.milestone.title : 'Milestone' }}</button>
+      <div class="dropdown-menu">
+        <div class="dropdown-content">
           <div class="text-center">
             <i
               v-if="loading"
@@ -60,5 +64,7 @@ export default {
             </li>
           </ul>
         </div>
+      </div>
+    </div>
   `,
 };

app/assets/javascripts/boards/stores/boards_store.js

@@ -12,7 +12,11 @@ gl.issueBoards.BoardsStore = {
   filter: {
     path: '',
   },
-  state: {},
+  state: {
+    currentBoard: {},
+    currentPage: '',
+    reload: false,
+  },
   detail: {
     issue: {}
   },
@@ -30,6 +34,10 @@ gl.issueBoards.BoardsStore = {
     this.state.currentPage = '';
     this.state.reload = false;
   },
+  showPage(page) {
+    this.state.reload = false;
+    this.state.currentPage = page;
+  },
   addList (listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);
     this.state.lists.push(list);

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

@@ -54,6 +54,7 @@ export default {
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
+        <slot name="header">
           <button type="button"
             class="close"
             @click="close"
@@ -61,9 +62,10 @@ export default {
             <span aria-hidden="true">&times;</span>
           </button>
           <h4 class="modal-title">{{this.title}}</h4>
+        </slot>
       </div>
       <div class="modal-body">
-        <slot name="body">
+        <slot>
           <p>{{this.body}}</p>
         </slot>
       </div>

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

@@ -30,9 +30,6 @@
                 %li
                   %a{ "href" => "#", "@click.prevent" => "showPage('new')" }
                     Create new board
-              %li
-                %a{ "href" => "#", "@click.prevent" => "showPage('edit')" }
-                  Edit board
               %li{ "v-if" => "showDelete" }
                 %a{ "href" => "#", "@click.prevent" => "showPage('delete')" }
                   %span.text-danger

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

-#edit-board-modal.modal.fade{ tabindex: -1 }
-  .modal-dialog.modal-md
-    .modal-content
-      .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h4
-          {{ title }}
-      %div{ "v-if" => "currentPage === 'delete'" }
-        .modal-body
-          %p
+%popup-dialog{ ":title": "title" }
+  %template{ slot: "body" }
+    %p{ "v-if" => "currentPage === 'delete'" }
       Are you sure you want to delete this board?
-        .modal-footer
-          = link_to current_board_path(board),
-            class: "btn btn-danger pull-left",
-            method: :delete do
-            Delete
-          %button.btn.btn-default.pull-right{ type: "button",
-            "@click" => "cancel",
-            data: { dismiss: "modal" } }
-            Cancel
     %form{ "v-else" => true,
       "@submit.prevent" => "submit" }
-        .modal-body
       %input{ type: "hidden",
         id: "board-milestone",
         "v-model.number" => "board.milestone_id" }
@@ -31,35 +14,22 @@
           id: "board-new-name",
           "v-model" => "board.name" }
       - if current_board_parent.issue_board_milestone_available?(current_user)
-            .dropdown.board-inner-milestone-dropdown{ ":class" => "{ open: milestoneDropdownOpen }" }
-              %label.label-light{ for: "board-milestone" }
-                Board milestone
-              %button.dropdown-menu-toggle.wide{ type: "button",
-                "@click.stop.prevent" => "loadMilestones($event)" }
-                {{ milestoneToggleText }}
-                = icon("chevron-down")
-              .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen",
-                ref: "milestoneDropdown" }
-                .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 }",
-                        "@click.stop.prevent" => "selectMilestone(milestone)" }
-                        {{ milestone.title }}
-                = dropdown_loading
-        .modal-footer
-          %button.btn.btn-primary.pull-left{ type: "submit",
+        %board-milestone-select{ ":board": "board",
+          ":milestone-path": "milestonePath",
+          ":select-milestone": "selectMilestone" }
+  %template{ slot: "footer" }
+    = link_to current_board_path(board),
+      class: "btn btn-danger pull-left",
+      "v-if": "currentPage === 'delete'",
+      method: :delete do
+      Delete
+    %button.btn.btn-primary.pull-left{ type: "button",
+      "v-else": true,
+      "@click" => "submit",
       ":disabled" => "submitDisabled",
       "ref" => "'submit-btn'" }
       {{ buttonText }}
     %button.btn.btn-default.pull-right{ type: "button",
-            "@click.prevent" => "cancel",
+      "@click" => "cancel",
       data: { dismiss: "modal" } }
       Cancel

app/views/shared/issuable/_search_bar.html.haml

@@ -124,6 +124,7 @@
             = icon('times')
         .filter-dropdown-container
           - if type == :boards
+            .js-board-config
             - if can?(current_user, :admin_list, board.parent)
               .dropdown.prepend-left-10#js-add-list
                 %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }