1 files changed, 41 insertions, 45 deletions

diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue
index 144a81f009b..829f1c72806 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_milestone_select.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
 import {
   GlDropdown,
   GlDropdownItem,
@@ -8,11 +7,11 @@ import {
   GlDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
-import { fetchPolicies } from '~/lib/graphql';
+import { mapGetters, mapActions } from 'vuex';
 import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
-import groupMilestones from '../../graphql/group_milestones.query.graphql';
 import createFlash from '~/flash';
 import { __, s__ } from '~/locale';
+import projectMilestones from '../../graphql/project_milestones.query.graphql';
 
 export default {
   components: {
@@ -34,22 +33,21 @@ export default {
   },
   apollo: {
     milestones: {
-      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
-      query: groupMilestones,
+      query: projectMilestones,
       debounce: 250,
       skip() {
         return !this.edit;
       },
       variables() {
         return {
-          fullPath: this.groupFullPath,
+          fullPath: this.projectPath,
           searchTitle: this.searchTitle,
           state: 'active',
-          includeDescendants: true,
+          includeAncestors: true,
         };
       },
       update(data) {
-        const edges = data?.group?.milestones?.edges ?? [];
+        const edges = data?.project?.milestones?.edges ?? [];
         return edges.map((item) => item.node);
       },
       error() {
@@ -74,21 +72,20 @@ export default {
       return this.activeIssue.milestone?.title ?? this.$options.i18n.noMilestone;
     },
   },
-  mounted() {
-    this.$root.$on('bv::dropdown::hide', () => {
-      this.$refs.sidebarItem.collapse();
-    });
-  },
   methods: {
     ...mapActions(['setActiveIssueMilestone']),
     handleOpen() {
       this.edit = true;
       this.$refs.dropdown.show();
     },
+    handleClose() {
+      this.edit = false;
+      this.$refs.sidebarItem.collapse();
+    },
     async setMilestone(milestoneId) {
       this.loading = true;
       this.searchTitle = '';
-      this.$refs.sidebarItem.collapse();
+      this.handleClose();
 
       try {
         const input = { milestoneId, projectPath: this.projectPath };
@@ -117,45 +114,44 @@ export default {
     :title="$options.i18n.milestone"
     :loading="loading"
     @open="handleOpen()"
-    @close="edit = false"
+    @close="handleClose"
   >
     <template v-if="hasMilestone" #collapsed>
       <strong class="gl-text-gray-900">{{ activeIssue.milestone.title }}</strong>
     </template>
-    <template>
-      <gl-dropdown
-        ref="dropdown"
-        :text="dropdownText"
-        :header-text="$options.i18n.assignMilestone"
-        block
+    <gl-dropdown
+      ref="dropdown"
+      :text="dropdownText"
+      :header-text="$options.i18n.assignMilestone"
+      block
+      @hide="handleClose"
+    >
+      <gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" />
+      <gl-dropdown-item
+        data-testid="no-milestone-item"
+        :is-check-item="true"
+        :is-checked="!activeIssue.milestone"
+        @click="setMilestone(null)"
       >
-        <gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" />
+        {{ $options.i18n.noMilestone }}
+      </gl-dropdown-item>
+      <gl-dropdown-divider />
+      <gl-loading-icon v-if="$apollo.loading" class="gl-py-4" />
+      <template v-else-if="milestones.length > 0">
         <gl-dropdown-item
-          data-testid="no-milestone-item"
+          v-for="milestone in milestones"
+          :key="milestone.id"
           :is-check-item="true"
-          :is-checked="!activeIssue.milestone"
-          @click="setMilestone(null)"
+          :is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id"
+          data-testid="milestone-item"
+          @click="setMilestone(milestone.id)"
         >
-          {{ $options.i18n.noMilestone }}
+          {{ milestone.title }}
         </gl-dropdown-item>
-        <gl-dropdown-divider />
-        <gl-loading-icon v-if="$apollo.loading" class="gl-py-4" />
-        <template v-else-if="milestones.length > 0">
-          <gl-dropdown-item
-            v-for="milestone in milestones"
-            :key="milestone.id"
-            :is-check-item="true"
-            :is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id"
-            data-testid="milestone-item"
-            @click="setMilestone(milestone.id)"
-          >
-            {{ milestone.title }}
-          </gl-dropdown-item>
-        </template>
-        <gl-dropdown-text v-else data-testid="no-milestones-found">
-          {{ $options.i18n.noMilestonesFound }}
-        </gl-dropdown-text>
-      </gl-dropdown>
-    </template>
+      </template>
+      <gl-dropdown-text v-else data-testid="no-milestones-found">
+        {{ $options.i18n.noMilestonesFound }}
+      </gl-dropdown-text>
+    </gl-dropdown>
   </board-editable-item>
 </template>