correctly display currently selected value in Milestone/Weight selects

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

@@ -4,6 +4,8 @@
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
 
+const ANY_MILESTONE = 'Any Milestone';
+
 export default {
   props: {
     board: {
@@ -28,21 +30,22 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      isOpen: false,
-      loading: true,
-      milestones: [],
-      extraMilestones,
-    };
-  },
   components: {
     loadingIcon,
   },
   computed: {
     milestoneTitle() {
-      return this.board.milestone ? this.board.milestone.title : '';
+      return this.board.milestone ? this.board.milestone.title : ANY_MILESTONE;
+    },
+    milestoneId() {
+      return this.board.milestone ? this.board.milestone.id : '';
+    },
+    milestoneTitleClass() {
+      return this.milestoneTitle === 'ANY_MILESTONE' ? 'bold' : 'text-secondary';
     },
+    selected() {
+      return this.board.milestone ? this.board.milestone.name : '';
+    }
   },
   methods: {
     selectMilestone(milestone) {
@@ -70,17 +73,8 @@ export default {
       </a>
     </div>
     <div class="value">
-      <span
-        class="no-value"
-        v-if="!board.milestone"
-      >
-        None
-      </span>
-      <span
-        class="bold has-tooltip"
-        v-if="board.milestone"
-      >
-        {{ board.milestone.title }}
+      <span :class="milestoneTitleClass">
+        {{ milestoneTitle }}
       </span>
     </div>
     <div
@@ -88,15 +82,14 @@ export default {
       style="display: none;"
     >
       <input
-        :value="board.milestone.id"
+        :value="milestoneId"
         name="milestone_id"
         type="hidden"
-        v-if="board.milestone"
       >
       <div class="dropdown">
         <button
           ref="dropdownButton"
-          :data-selected="milestoneTitle"
+          :data-selected="selected"
           class="dropdown-menu-toggle wide"
           :data-milestones="milestonePath"
           :data-show-no="true"

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

@@ -5,6 +5,8 @@ import '~/weight_select';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import eventHub from '../eventhub';
 
+const ANY_WEIGHT = 'Any Weight';
+
 export default {
   props: {
     board: {
@@ -43,11 +45,14 @@ export default {
   },
   computed: {
     valueClass() {
-      if (this.value === 'Any Weight') {
+      if (this.valueText === ANY_WEIGHT) {
         return 'text-secondary';
       }
       return 'bold';
     },
+    valueText() {
+      return this.value || ANY_WEIGHT;
+    }
   },
   methods: {
     selectWeight(weight) {
@@ -80,7 +85,7 @@ export default {
       class="value"
       :class="valueClass"
     >
-      {{ value }}
+      {{ valueText }}
     </div>
     <div
       class="selectbox"

app/assets/javascripts/boards/services/board_service.js

@@ -36,6 +36,10 @@ class BoardService {
       board.assignee_id = board.assignee.id;
     }
 
+    if (board.milestone) {
+      board.milestone_id = board.milestone.id;
+    }
+
     if (board.id) {
       return this.boards.update({ id: board.id }, { board });
     }

app/assets/javascripts/milestone_select.js

@@ -141,7 +141,7 @@ import _ from 'underscore';
           },
           opened: function(e) {
             const $el = $(e.currentTarget);
-            if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
               selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
             }
             $('a.is-active', $el).removeClass('is-active');
@@ -150,7 +150,8 @@ import _ from 'underscore';
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
           hideRow: function(milestone) {
             if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
-              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone) {
+              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone &&
+              !options.handleClick) {
               return milestone !== gl.issueBoards.BoardsStore.state.currentBoard.milestone.title;
             }
 

ee/app/helpers/ee/boards_helper.rb

@@ -35,7 +35,7 @@ module EE
       board.to_json(
         only: [:id, :name, :milestone_id, :author_id, :assignee_id, :weight, :label_ids],
         include: {
-          milestone: { only: [:title] },
+          milestone: { only: [:id, :title, :name] },
           author: { only: [:id, :name, :username ], methods: [:avatar_url] },
           assignee: { only: [:id, :name, :username ], methods: [:avatar_url] },
           labels: { only: [:title, :color, :id] }