Added vue based promotion modals for labels and milestones

1 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
new file mode 100644
index 00000000000..4f9be4f4f99
--- /dev/null
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -0,0 +1,64 @@
+<script>
+  import axios from '~/lib/utils/axios_utils';
+  import createFlash from '~/flash';
+  import GlModal from '~/vue_shared/components/gl_modal.vue';
+  import { redirectTo } from '~/lib/utils/url_utility';
+  import { s__, sprintf } from '~/locale';
+  import eventHub from '../event_hub';
+
+  export default {
+    components: {
+      GlModal,
+    },
+    props: {
+      milestoneTitle: {
+        type: String,
+        required: true,
+      },
+      url: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      title() {
+        return sprintf(s__('Milestones|Promote %{title} to group milestone?'), { title: this.milestoneTitle });
+      },
+      text() {
+        return s__(`Milestones|Promoting this milestone will make it available for all projects inside the group.
+        Existing project milestones with the same name will be merged.
+        This action cannot be reversed.`);
+      },
+    },
+    methods: {
+      onSubmit() {
+        eventHub.$emit('promoteMilestoneModal.requestStarted', this.url);
+        return axios.post(this.url)
+          .then((response) => {
+            eventHub.$emit('promoteMilestoneModal.requestFinished', { labelUrl: this.url, successful: true });
+            redirectTo(response.request.responseURL);
+          })
+          .catch((error) => {
+            eventHub.$emit('promoteMilestoneModal.requestFinished', { labelUrl: this.url, successful: true });
+            createFlash(error);
+          });
+      },
+    },
+  };
+</script>
+<template>
+  <gl-modal
+    id="promote-milestone-modal"
+    footer-primary-button-variant="warning"
+    :footer-primary-button-text="s__('Milestones|Promote Milestone')"
+    @submit="onSubmit"
+  >
+    <div
+      slot="title"
+    >
+      {{ title }}
+    </div>
+    {{ text }}
+  </gl-modal>
+</template>
+