Add latest changes from gitlab-org/gitlab@master

2 files changed, 67 insertions, 113 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
index f80ab8c3b0b..ecde11aff40 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -1,28 +1,22 @@
 <script>
+import { GlModal } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
-import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
   },
-  props: {
-    milestoneTitle: {
-      type: String,
-      required: true,
-    },
-    url: {
-      type: String,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
+  data() {
+    return {
+      milestoneTitle: '',
+      url: '',
+      groupName: '',
+      currentButton: null,
+      visible: false,
+    };
   },
   computed: {
     title() {
@@ -38,42 +32,71 @@ export default {
       );
     },
   },
+  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() {
-      eventHub.$emit('promoteMilestoneModal.requestStarted', this.url);
       return axios
         .post(this.url, { params: { format: 'json' } })
         .then((response) => {
-          eventHub.$emit('promoteMilestoneModal.requestFinished', {
-            milestoneUrl: this.url,
-            successful: true,
-          });
           visitUrl(response.data.url);
         })
         .catch((error) => {
-          eventHub.$emit('promoteMilestoneModal.requestFinished', {
-            milestoneUrl: this.url,
-            successful: false,
-          });
           createFlash(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: s__('Cancel'),
+    attributes: [],
   },
 };
 </script>
 <template>
   <gl-modal
-    id="promote-milestone-modal"
-    :footer-primary-button-text="s__('Milestones|Promote Milestone')"
-    footer-primary-button-variant="warning"
-    @submit="onSubmit"
+    :visible="visible"
+    modal-id="promote-milestone-modal"
+    :action-primary="$options.primaryAction"
+    :action-cancel="$options.cancelAction"
+    :title="title"
+    @primary="onSubmit"
+    @hide="onClose"
   >
-    <template #title>
-      {{ title }}
-    </template>
-    <div>
-      <p>{{ text }}</p>
-      <p>{{ s__('Milestones|This action cannot be reversed.') }}</p>
-    </div>
+    <p>{{ text }}</p>
+    <p>{{ s__('Milestones|This action cannot be reversed.') }}</p>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
index 39e40b86442..5472b8c684f 100644
--- a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
+++ b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js
@@ -1,88 +1,19 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import PromoteMilestoneModal from './components/promote_milestone_modal.vue';
-import eventHub from './event_hub';
 
 Vue.use(Translate);
 
 export default () => {
-  const onRequestFinished = ({ milestoneUrl, successful }) => {
-    const button = document.querySelector(
-      `.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`,
-    );
-
-    if (!successful) {
-      button.removeAttribute('disabled');
-    }
-  };
-
-  const onRequestStarted = (milestoneUrl) => {
-    const button = document.querySelector(
-      `.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`,
-    );
-    button.setAttribute('disabled', '');
-    eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished);
-  };
-
-  const onDeleteButtonClick = (event) => {
-    const button = event.currentTarget;
-    const modalProps = {
-      milestoneTitle: button.dataset.milestoneTitle,
-      url: button.dataset.url,
-      groupName: button.dataset.groupName,
-    };
-    eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
-    eventHub.$emit('promoteMilestoneModal.props', modalProps);
-  };
-
-  const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button');
-  promoteMilestoneButtons.forEach((button) => {
-    button.addEventListener('click', onDeleteButtonClick);
-  });
-
-  eventHub.$once('promoteMilestoneModal.mounted', () => {
-    promoteMilestoneButtons.forEach((button) => {
-      button.removeAttribute('disabled');
-    });
-  });
-
   const promoteMilestoneModal = document.getElementById('promote-milestone-modal');
-  let promoteMilestoneComponent;
-
-  if (promoteMilestoneModal) {
-    promoteMilestoneComponent = new Vue({
-      el: promoteMilestoneModal,
-      components: {
-        PromoteMilestoneModal,
-      },
-      data() {
-        return {
-          modalProps: {
-            milestoneTitle: '',
-            groupName: '',
-            url: '',
-          },
-        };
-      },
-      mounted() {
-        eventHub.$on('promoteMilestoneModal.props', this.setModalProps);
-        eventHub.$emit('promoteMilestoneModal.mounted');
-      },
-      beforeDestroy() {
-        eventHub.$off('promoteMilestoneModal.props', this.setModalProps);
-      },
-      methods: {
-        setModalProps(modalProps) {
-          this.modalProps = modalProps;
-        },
-      },
-      render(createElement) {
-        return createElement('promote-milestone-modal', {
-          props: this.modalProps,
-        });
-      },
-    });
+  if (!promoteMilestoneModal) {
+    return null;
   }
 
-  return promoteMilestoneComponent;
+  return new Vue({
+    el: promoteMilestoneModal,
+    render(createElement) {
+      return createElement(PromoteMilestoneModal);
+    },
+  });
 };