Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

2 files changed, 241 insertions, 0 deletions

diff --git a/app/assets/javascripts/milestones/components/delete_milestone_modal.vue b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue
new file mode 100644
index 00000000000..34f9fe778ea
--- /dev/null
+++ b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue
@@ -0,0 +1,137 @@
+<script>
+import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+
+import { redirectTo } from '~/lib/utils/url_utility';
+import { __, n__, s__, sprintf } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  components: {
+    GlModal,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    issueCount: {
+      type: Number,
+      required: true,
+    },
+    mergeRequestCount: {
+      type: Number,
+      required: true,
+    },
+    milestoneId: {
+      type: Number,
+      required: true,
+    },
+    milestoneTitle: {
+      type: String,
+      required: true,
+    },
+    milestoneUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    text() {
+      const milestoneTitle = sprintf('<strong>%{milestoneTitle}</strong>', {
+        milestoneTitle: this.milestoneTitle,
+      });
+
+      if (this.issueCount === 0 && this.mergeRequestCount === 0) {
+        return sprintf(
+          s__(`Milestones|
+You’re about to permanently delete the milestone %{milestoneTitle}.
+This milestone is not currently used in any issues or merge requests.`),
+          {
+            milestoneTitle,
+          },
+          false,
+        );
+      }
+
+      return sprintf(
+        s__(`Milestones|
+You’re about to permanently delete the milestone %{milestoneTitle} and remove it from %{issuesWithCount} and %{mergeRequestsWithCount}.
+Once deleted, it cannot be undone or recovered.`),
+        {
+          milestoneTitle,
+          issuesWithCount: n__('%d issue', '%d issues', this.issueCount),
+          mergeRequestsWithCount: n__(
+            '%d merge request',
+            '%d merge requests',
+            this.mergeRequestCount,
+          ),
+        },
+        false,
+      );
+    },
+    title() {
+      return sprintf(s__('Milestones|Delete milestone %{milestoneTitle}?'), {
+        milestoneTitle: this.milestoneTitle,
+      });
+    },
+  },
+  methods: {
+    onSubmit() {
+      eventHub.$emit('deleteMilestoneModal.requestStarted', this.milestoneUrl);
+
+      return axios
+        .delete(this.milestoneUrl)
+        .then((response) => {
+          eventHub.$emit('deleteMilestoneModal.requestFinished', {
+            milestoneUrl: this.milestoneUrl,
+            successful: true,
+          });
+
+          // follow the rediect to milestones overview page
+          redirectTo(response.request.responseURL);
+        })
+        .catch((error) => {
+          eventHub.$emit('deleteMilestoneModal.requestFinished', {
+            milestoneUrl: this.milestoneUrl,
+            successful: false,
+          });
+
+          if (error.response && error.response.status === 404) {
+            createFlash({
+              message: sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
+                milestoneTitle: this.milestoneTitle,
+              }),
+            });
+          } else {
+            createFlash({
+              message: sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
+                milestoneTitle: this.milestoneTitle,
+              }),
+            });
+          }
+          throw error;
+        });
+    },
+  },
+  primaryProps: {
+    text: s__('Milestones|Delete milestone'),
+    attributes: [{ variant: 'danger' }, { category: 'primary' }],
+  },
+  cancelProps: {
+    text: __('Cancel'),
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    modal-id="delete-milestone-modal"
+    :title="title"
+    :action-primary="$options.primaryProps"
+    :action-cancel="$options.cancelProps"
+    @primary="onSubmit"
+  >
+    <p v-safe-html="text"></p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/milestones/components/promote_milestone_modal.vue b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue
new file mode 100644
index 00000000000..b41611001ab
--- /dev/null
+++ b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue
@@ -0,0 +1,104 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { __, s__, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  data() {
+    return {
+      milestoneTitle: '',
+      url: '',
+      groupName: '',
+      currentButton: null,
+      visible: false,
+    };
+  },
+  computed: {
+    title() {
+      return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), {
+        milestoneTitle: this.milestoneTitle,
+      });
+    },
+    text() {
+      return sprintf(
+        s__(`Milestones|Promoting %{milestoneTitle} will make it available for all projects inside %{groupName}.
+        Existing project milestones with the same title will be merged.`),
+        { milestoneTitle: this.milestoneTitle, groupName: this.groupName },
+      );
+    },
+  },
+  mounted() {
+    this.getButtons().forEach((button) => {
+      button.addEventListener('click', this.onPromoteButtonClick);
+      button.removeAttribute('disabled');
+    });
+  },
+  beforeDestroy() {
+    this.getButtons().forEach((button) => {
+      button.removeEventListener('click', this.onPromoteButtonClick);
+    });
+  },
+  methods: {
+    onPromoteButtonClick({ currentTarget }) {
+      const { milestoneTitle, url, groupName } = currentTarget.dataset;
+      currentTarget.setAttribute('disabled', '');
+      this.visible = true;
+      this.milestoneTitle = milestoneTitle;
+      this.url = url;
+      this.groupName = groupName;
+      this.currentButton = currentTarget;
+    },
+    getButtons() {
+      return document.querySelectorAll('.js-promote-project-milestone-button');
+    },
+    onSubmit() {
+      return axios
+        .post(this.url, { params: { format: 'json' } })
+        .then((response) => {
+          visitUrl(response.data.url);
+        })
+        .catch((error) => {
+          createFlash({
+            message: error,
+          });
+        })
+        .finally(() => {
+          this.visible = false;
+        });
+    },
+    onClose() {
+      this.visible = false;
+      if (this.currentButton) {
+        this.currentButton.removeAttribute('disabled');
+      }
+    },
+  },
+  primaryAction: {
+    text: s__('Milestones|Promote Milestone'),
+    attributes: [{ variant: 'warning' }],
+  },
+  cancelAction: {
+    text: __('Cancel'),
+    attributes: [],
+  },
+};
+</script>
+<template>
+  <gl-modal
+    :visible="visible"
+    modal-id="promote-milestone-modal"
+    :action-primary="$options.primaryAction"
+    :action-cancel="$options.cancelAction"
+    :title="title"
+    @primary="onSubmit"
+    @hide="onClose"
+  >
+    <p>{{ text }}</p>
+    <p>{{ s__('Milestones|This action cannot be reversed.') }}</p>
+  </gl-modal>
+</template>