1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue b/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue
new file mode 100644
index 00000000000..1fff089eab4
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/milestone/milestone_dropdown.vue
@@ -0,0 +1,115 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { TYPE_MILESTONE } from '~/graphql_shared/constants';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { IssuableType, WorkspaceType } from '~/issues/constants';
+import { __ } from '~/locale';
+import { IssuableAttributeType } from '../../constants';
+import SidebarDropdown from '../sidebar_dropdown.vue';
+
+const noMilestone = {
+  id: 0,
+  title: __('No milestone'),
+};
+
+const placeholderMilestone = {
+  id: -1,
+  title: __('Select milestone'),
+};
+
+export default {
+  issuableAttribute: IssuableAttributeType.Milestone,
+  components: {
+    GlDropdownItem,
+    SidebarDropdown,
+  },
+  props: {
+    attrWorkspacePath: {
+      required: true,
+      type: String,
+    },
+    canAdminMilestone: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    issuableType: {
+      type: String,
+      required: true,
+      validator(value) {
+        return [IssuableType.Issue, IssuableType.MergeRequest].includes(value);
+      },
+    },
+    inputName: {
+      type: String,
+      required: false,
+      default: 'update[milestone_id]',
+    },
+    milestoneId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    milestoneTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    projectMilestonesPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    workspaceType: {
+      type: String,
+      required: true,
+      validator(value) {
+        return [WorkspaceType.group, WorkspaceType.project].includes(value);
+      },
+    },
+  },
+  data() {
+    return {
+      milestone: this.milestoneId
+        ? { id: convertToGraphQLId(TYPE_MILESTONE, this.milestoneId), title: this.milestoneTitle }
+        : placeholderMilestone,
+    };
+  },
+  computed: {
+    footerItemText() {
+      return this.canAdminMilestone ? __('Manage milestones') : __('View milestones');
+    },
+    value() {
+      return this.milestone.id === placeholderMilestone.id
+        ? undefined
+        : getIdFromGraphQLId(this.milestone.id);
+    },
+  },
+  methods: {
+    handleChange(milestone) {
+      this.milestone = milestone.id === null ? noMilestone : milestone;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <input type="hidden" :name="inputName" :value="value" />
+    <sidebar-dropdown
+      :attr-workspace-path="attrWorkspacePath"
+      :current-attribute="milestone"
+      :issuable-attribute="$options.issuableAttribute"
+      :issuable-type="issuableType"
+      :workspace-type="workspaceType"
+      data-qa-selector="issuable_milestone_dropdown"
+      @change="handleChange"
+    >
+      <template #footer>
+        <gl-dropdown-item v-if="projectMilestonesPath" :href="projectMilestonesPath">
+          {{ footerItemText }}
+        </gl-dropdown-item>
+      </template>
+    </sidebar-dropdown>
+  </div>
+</template>