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,39 +26,45 @@ export default {
   },
   mounted() {
     BoardService.loadMilestones.call(this);
+    MilestoneSelect();
   },
   template: `
-    <div>
-      <div class="text-center">
-        <i
-          v-if="loading"
-          class="fa fa-spinner fa-spin"></i>
-      </div>
-      <ul
-        class="board-milestone-list"
-        v-if="!loading">
-        <li v-for="milestone in extraMilestones">
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
-            <i
-              class="fa fa-check"
-              v-if="board.milestone_id === milestone.id"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-        <li class="divider"></li>
-        <li v-for="milestone in milestones">
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
+    <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
-              class="fa fa-check"
-              v-if="board.milestone_id === milestone.id"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-      </ul>
+              v-if="loading"
+              class="fa fa-spinner fa-spin"></i>
+          </div>
+          <ul
+            class="board-milestone-list"
+            v-if="!loading">
+            <li v-for="milestone in extraMilestones">
+              <a
+                href="#"
+                @click.prevent.stop="selectMilestone(milestone)">
+                <i
+                  class="fa fa-check"
+                  v-if="board.milestone_id === milestone.id"></i>
+                {{ milestone.title }}
+              </a>
+            </li>
+            <li class="divider"></li>
+            <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>
+      </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,16 +54,18 @@ export default {
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button"
-          class="close"
-          @click="close"
-          aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="modal-title">{{this.title}}</h4>
+        <slot name="header">
+          <button type="button"
+            class="close"
+            @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">
-        <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
-            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" }
-          %div
-            %label.label-light{ for: "board-new-name" }
-              Board name
-            %input.form-control{ type: "text",
-              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",
-            ":disabled" => "submitDisabled",
-            "ref" => "'submit-btn'" }
-            {{ buttonText }}
-          %button.btn.btn-default.pull-right{ type: "button",
-            "@click.prevent" => "cancel",
-            data: { dismiss: "modal" } }
-            Cancel
+%popup-dialog{ ":title": "title" }
+  %template{ slot: "body" }
+    %p{ "v-if" => "currentPage === 'delete'" }
+      Are you sure you want to delete this board?
+    %form{ "v-else" => true,
+      "@submit.prevent" => "submit" }
+      %input{ type: "hidden",
+        id: "board-milestone",
+        "v-model.number" => "board.milestone_id" }
+      %div
+        %label.label-light{ for: "board-new-name" }
+          Board name
+        %input.form-control{ type: "text",
+          id: "board-new-name",
+          "v-model" => "board.name" }
+      - if current_board_parent.issue_board_milestone_available?(current_user)
+        %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" => "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 }