Merge branch 'issue-board-edit-modal' into edit-board

app/assets/javascripts/boards/boards_bundle.js

@@ -148,12 +148,19 @@ $(() => {
 
   gl.boardConfigToggle = new Vue({
     el: document.querySelector('.js-board-config'),
+    data() {
+      return {
+        canAdminList: convertPermissionToBoolean(
+          this.$options.el.dataset.canAdminList,
+        ),
+      };
+    },
     methods: {
       showPage: page => gl.issueBoards.BoardsStore.showPage(page),
     },
     computed: {
       buttonText() {
-        return Math.random > 0.5 ? 'Edit board' : 'View scope';
+        return this.canAdminList ? 'Edit board' : 'View scope';
       },
     },
     template: `

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

@@ -4,6 +4,7 @@
     v-show="currentPage"
     :title="title"
     :primaryButtonLabel="buttonText"
+    :kind="buttonKind"
     @toggle="cancel"
     @submit="submit"
   >
@@ -13,8 +14,11 @@
     <form
       v-else
     >
-      <div class="append-bottom-20">
-        <label class="label-light" for="board-new-name">
+      <div
+        v-if="!readonly"
+        class="append-bottom-20"
+      >
+        <label class="form-section-title label-light" for="board-new-name">
           Board name
         </label>
         <input
@@ -24,19 +28,23 @@
           v-model="board.name"
         >
       </div>
-      <div class="media append-bottom-10">
-        <label class="label-light media-body">
+      <div
+        v-if="canAdminBoard"
+        class="media append-bottom-10"
+      >
+        <label class="form-section-title label-light media-body">
           Board scope
         </label>
         <button
           type="button"
           class="btn"
-          @click="expand = !expand"
+          @click="expanded = !expanded"
+          v-if="collapseScope"
         >
-          Expand
+          {{ expandButtonText }}
         </button>
       </div>
-      <div v-if="expand">
+      <div v-if="!collapseScope || expanded">
         <p class="light append-bottom-10">
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
@@ -45,47 +53,57 @@
         <form-block
           title="Milestone"
           defaultText="Any milestone"
+          :canEdit="canAdminBoard"
         >
-          <input
-            type="hidden"
-            id="board-milestone"
-            v-model.number="board.milestone_id"
+          <div
+            v-if="board.milestone"
+            slot="currentValue"
           >
+            {{ board.milestone.title }}
+          </div>
           <board-milestone-select
             :board="board"
             :milestone-path="milestonePath"
-            :select-milestone="selectMilestone">
+            v-model="board.milestone">
           </board-milestone-select>
         </form-block>
 
         <form-block
           title="Labels"
           defaultText="Any label"
+          :canEdit="canAdminBoard"
         >
         </form-block>
 
         <form-block
           title="Assignee"
           defaultText="Any assignee"
-          :fieldName="'filter[assignee]'"
+          :fieldName="'board_filter[assignee]'"
+          :canEdit="canAdminBoard"
         >
         </form-block>
 
         <form-block
           title="Author"
           defaultText="Any author"
-          :fieldName="'filter[author]'"
+          :fieldName="'board_filter[author]'"
+          :canEdit="canAdminBoard"
         >
         </form-block>
 
         <form-block
           title="Weight"
           defaultText="Any weight"
-          :fieldName="'filter[weight]'"
+          :fieldName="'board_filter[weight]'"
+          :canEdit="canAdminBoard"
         >
         </form-block>
       </div>
     </form>
+    <div
+      slot="footer"
+      v-if="readonly"
+    ></div>
   </popup-dialog>
 </template>
 
@@ -108,6 +126,10 @@ export default Vue.extend({
       type: String,
       required: true,
     },
+    canAdminBoard: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -115,7 +137,7 @@ export default Vue.extend({
         id: false,
         name: '',
       },
-      expand: false,
+      expanded: false,
       issue: {},
       currentBoard: Store.state.currentBoard,
       currentPage: Store.state.currentPage,
@@ -139,14 +161,31 @@ export default Vue.extend({
         return 'Create';
       }
 
+      if (this.currentPage === 'delete') {
+        return 'Delete';
+      }
+
       return 'Save';
     },
+    buttonKind() {
+      if (this.currentPage === 'delete') {
+        return 'danger';
+      }
+      return 'info';
+    },
     title() {
       if (this.currentPage === 'new') {
         return 'Create new board';
       }
 
-      // TODO check for readonly
+      if (this.currentPage === 'delete') {
+        return 'Delete board';
+      }
+
+      if (this.readonly) {
+        return 'Board scope';
+      }
+
       return 'Edit board';
     },
     milestoneToggleText() {
@@ -155,6 +194,15 @@ export default Vue.extend({
     submitDisabled() {
       return false;
     },
+    expandButtonText() {
+      return this.expanded ? 'Collapse' : 'Expand'
+    },
+    collapseScope() {
+      return this.currentPage === 'new';
+    },
+    readonly() {
+      return !this.canAdminBoard;
+    },
   },
   methods: {
     refreshPage() {

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

-<template>
-  <ul
-    ref="list"
-    class="dropdown-menu"
-  >
-    <slot name="items"></slot>
-  </ul>
-</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/form_block.vue

 <template>
-  <div class="board-inner-container">
+  <div class="list-item">
     <div class="media">
-      <label class="media-body">{{ title }}</label>
-      <a href="#" @click.prevent="toggleEditing">
+      <label class="label-light media-body">{{ title }}</label>
+      <a
+        v-if="canEdit"
+        class="edit-link"
+        href="#"
+        @click.prevent="toggleEditing"
+      >
         Edit
       </a>
     </div>
-    <div class="droplab-dropdown">
-      <div v-if="editing">
+    <div
+      v-if="editing"
+      class="dropdown open"
+    >
       <input
         v-if="fieldName"
         :name="fieldName"
       >
       <slot></slot>
     </div>
-      <div v-else>
+    <div :class="{ invisible: editing }">
+      <slot name="currentValue">
         {{ defaultText }}
-      </div>
+      </slot>
     </div>
   </div>
 </template>
@@ -36,6 +44,11 @@
         type: String,
         required: false,
       },
+      canEdit: {
+        type: Boolean,
+        required: false,
+        default: false,
+      }
     },
     data() {
       return {

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

 <template>
-  <div>
-    <gl-dropdown>
-      <template slot="items">
+  <div class="dropdown-menu dropdown-menu-wide">
+    <div class="dropdown-input">
+      <input
+        class="dropdown-input-field"
+        type="search"
+        placeholder="Search milestones">
+      <i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i>
+    </div>
+    <ul
+      ref="list"
+    >
       <li
         v-for="milestone in extraMilestones"
         :key="milestone.id"
@@ -16,7 +24,11 @@
         </a>
       </li>
       <li class="divider"></li>
+      <li v-if="loading">
+        <loading-icon />
+      </li>
       <li
+        v-else
         v-for="milestone in milestones"
         :key="milestone.id"
       >
@@ -29,16 +41,14 @@
           {{ milestone.title }}
         </a>
       </li>
-      </template>
-    </gl-dropdown>
+    </ul>
   </div>
 </template>
 
 <script>
 /* global BoardService */
 
-import DropLab from '~/droplab/drop_lab';
-import GlDropdown from './dropdown.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
 
 export default {
@@ -51,23 +61,29 @@ export default {
       type: String,
       required: true,
     },
-    selectMilestone: {
-      type: Function,
-      required: true,
+    value: {
+      type: String,
+      required: false,
     },
   },
+  components: {
+    loadingIcon,
+  },
   data() {
     return {
-      loading: false,
+      loading: true,
       milestones: [],
       extraMilestones,
     };
   },
-  components: {
-    GlDropdown,
-  },
   mounted() {
-    BoardService.loadMilestones.call(this);
+    BoardService.loadMilestones.call(this).then(() => this.loading = false);
+  },
+  methods: {
+    selectMilestone(milestone) {
+      this.board.milestone_id = milestone.id;
+      this.$emit('input', milestone);
+    },
   },
 };
 </script>

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

@@ -42,13 +42,14 @@ export default {
 </script>
 
 <template>
-<div
+<div class="modal-open">
+  <div
     class="modal popup-dialog"
     role="dialog"
     tabindex="-1"
->
+  >
     <div
-    class="modal-dialog modal-lg"
+      class="modal-dialog modal-md"
       role="document"
     >
       <div class="modal-content">
@@ -88,5 +89,11 @@ export default {
         </slot>
       </div>
     </div>
+  </div>
+
+  <div
+    class="modal-backdrop fade in"
+    @click="close"
+  ></div>
 </div>
 </template>

app/assets/stylesheets/framework/dropdowns.scss

@@ -291,6 +291,10 @@
   }
 }
 
+.dropdown-menu-wide {
+  width: 100%;
+}
+
 .droplab-dropdown {
   .dropdown-toggle > i {
     pointer-events: none;

app/assets/stylesheets/framework/lists.scss

@@ -390,3 +390,8 @@ ul.indent-list {
     text-align: center;
   }
 }
+
+.list-item {
+  padding: $gl-padding 0;
+  border-bottom: solid 1px $border-color;
+}

app/assets/stylesheets/framework/modal.scss

@@ -36,6 +36,10 @@ body.modal-open {
   }
 }
 
+.modal-md {
+  max-width: 440px;
+}
+
 .modal-dialog {
   // TODO: this needs top and bottom padding (inside content area)
   max-height: calc(100vh - #{$new-navbar-height});
@@ -53,12 +57,9 @@ body.modal-open {
   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/framework/typography.scss

@@ -305,6 +305,10 @@ h6 {
   font-weight: $gl-font-weight-bold;
 }
 
+.edit-link {
+  color: $gl-text-color;
+}
+
 .light-header {
   font-weight: $gl-font-weight-bold;
 }

app/assets/stylesheets/pages/boards.scss

@@ -462,6 +462,10 @@
   white-space: normal;
 }
 
+.form-section-title {
+  font-size: 16px;
+}
+
 .board-delete-btns {
   padding-top: 12px;
   border-top: 1px solid $border-color;

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

@@ -124,7 +124,7 @@
             = icon('times')
         .filter-dropdown-container
           - if type == :boards
-            .js-board-config
+            .js-board-config{ data: { can_admin_list: can?(current_user, :admin_list, board.parent).to_s } }
             - 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 }