Changed selector names, address code concerns

6 files changed, 159 insertions, 149 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 4f9be4f4f99..eb49a5780bd 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
@@ -22,7 +22,7 @@
     },
     computed: {
       title() {
-        return sprintf(s__('Milestones|Promote %{title} to group milestone?'), { title: this.milestoneTitle });
+        return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), { milestoneTitle: this.milestoneTitle });
       },
       text() {
         return s__(`Milestones|Promoting this milestone will make it available for all projects inside the group.
@@ -35,11 +35,11 @@
         eventHub.$emit('promoteMilestoneModal.requestStarted', this.url);
         return axios.post(this.url)
           .then((response) => {
-            eventHub.$emit('promoteMilestoneModal.requestFinished', { labelUrl: this.url, successful: true });
+            eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: true });
             redirectTo(response.request.responseURL);
           })
           .catch((error) => {
-            eventHub.$emit('promoteMilestoneModal.requestFinished', { labelUrl: this.url, successful: true });
+            eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: false });
             createFlash(error);
           });
       },
@@ -53,11 +53,11 @@
     :footer-primary-button-text="s__('Milestones|Promote Milestone')"
     @submit="onSubmit"
   >
-    <div
+    <template
       slot="title"
     >
       {{ title }}
-    </div>
+    </template>
     {{ text }}
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
index 326673f3a2f..d51b5c221e3 100644
--- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
+++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
@@ -37,16 +37,14 @@ export default () => {
   };
 
   const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
-  for (let i = 0; i < deleteMilestoneButtons.length; i += 1) {
-    const button = deleteMilestoneButtons[i];
+  deleteMilestoneButtons.forEach((button) => {
     button.addEventListener('click', onDeleteButtonClick);
-  }
+  });
 
   eventHub.$once('deleteMilestoneModal.mounted', () => {
-    for (let i = 0; i < deleteMilestoneButtons.length; i += 1) {
-      const button = deleteMilestoneButtons[i];
+    deleteMilestoneButtons.forEach((button) => {
       button.removeAttribute('disabled');
-    }
+    });
   });
 
   return new Vue({
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 ea9adb9fe76..d00f81c9094 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
@@ -5,78 +5,78 @@ import eventHub from './event_hub';
 
 Vue.use(Translate);
 
-const onRequestFinished = ({ milestoneUrl, successful }) => {
-  const button = document.querySelector(`.js-promote-project-milestone[data-url="${milestoneUrl}"]`);
-
-  if (!successful) {
-    button.removeAttribute('disabled');
-  }
-};
+export default () => {
+  const onRequestFinished = ({ milestoneUrl, successful }) => {
+    const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`);
 
-const onRequestStarted = (milestoneUrl) => {
-  const button = document.querySelector(`.js-promote-project-milestone[data-url="${milestoneUrl}"]`);
-  button.setAttribute('disabled', '');
-  eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished);
-};
+    if (!successful) {
+      button.removeAttribute('disabled');
+    }
+  };
 
-const onDeleteButtonClick = (event) => {
-  const button = event.currentTarget;
-  const modalProps = {
-    milestoneTitle: button.dataset.milestoneTitle,
-    url: button.dataset.url,
+  const onRequestStarted = (milestoneUrl) => {
+    const button = document.querySelector(`.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`);
+    button.setAttribute('disabled', '');
+    eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished);
   };
-  eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
-  eventHub.$emit('promoteMilestoneModal.props', modalProps);
-};
 
-const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone');
-promoteMilestoneButtons.forEach((button) => {
-  button.addEventListener('click', onDeleteButtonClick);
-});
+  const onDeleteButtonClick = (event) => {
+    const button = event.currentTarget;
+    const modalProps = {
+      milestoneTitle: button.dataset.milestoneTitle,
+      url: button.dataset.url,
+    };
+    eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
+    eventHub.$emit('promoteMilestoneModal.props', modalProps);
+  };
 
-eventHub.$once('promoteMilestoneModal.mounted', () => {
+  const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button');
   promoteMilestoneButtons.forEach((button) => {
-    button.removeAttribute('disabled');
+    button.addEventListener('click', onDeleteButtonClick);
   });
-});
 
-export default () => {
-  const promoteMilestoneComponent = new Vue({
-    el: '#promote-milestone-modal',
-    components: {
-      PromoteMilestoneModal,
-    },
-    data() {
-      return {
-        modalProps: {
-          milestoneTitle: '',
-          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,
-      });
-    },
+  eventHub.$once('promoteMilestoneModal.mounted', () => {
+    promoteMilestoneButtons.forEach((button) => {
+      button.removeAttribute('disabled');
+    });
   });
 
   const promoteMilestoneModal = document.getElementById('promote-milestone-modal');
-  let withMilestone;
-  if (promoteMilestoneModal != null) {
-    withMilestone = promoteMilestoneComponent;
+  let promoteMilestoneComponent;
+
+  if (promoteMilestoneModal) {
+    promoteMilestoneComponent = new Vue({
+      el: promoteMilestoneModal,
+      components: {
+        PromoteMilestoneModal,
+      },
+      data() {
+        return {
+          modalProps: {
+            milestoneTitle: '',
+            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,
+        });
+      },
+    });
   }
-  return withMilestone;
+
+  return promoteMilestoneComponent;
 };
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index 93fe5284d1b..a48784f08a4 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -3,7 +3,7 @@
   import createFlash from '~/flash';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
   import { redirectTo } from '~/lib/utils/url_utility';
-  import { s__ } from '~/locale';
+  import { s__, sprintf } from '~/locale';
   import eventHub from '../event_hub';
 
   export default {
@@ -23,12 +23,26 @@
         type: String,
         required: true,
       },
+      labelTextColor: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       text() {
         return s__(`Milestones|Promoting this label will make it available for all projects inside the group. 
         Existing project labels with the same name will be merged. This action cannot be reversed.`);
       },
+      title() {
+        const label = `<span
+          class="label color-label"
+          style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
+        >${this.labelTitle}</span>`;
+
+        return sprintf(s__('Labels|Promote label %{labelTitle} to Group Label?'), {
+          labelTitle: label,
+        }, false);
+      },
     },
     methods: {
       onSubmit() {
@@ -55,15 +69,9 @@
   >
     <div
       slot="title"
+      v-html="title"
     >
-      {{ s__('Labels|Promote label') }}
-      <span
-        class="label color-label"
-        :style="{ backgroundColor: labelColor }"
-      >
-        {{ labelTitle }}
-      </span>
-      {{ s__('Labels|to Group Label?') }}
+      {{ title }}
     </div>
 
     {{ text }}
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
index 32a8db7e989..2abcbfab1ed 100644
--- a/app/assets/javascripts/pages/projects/labels/index/index.js
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -6,84 +6,86 @@ import PromoteLabelModal from '../components/promote_label_modal.vue';
 
 Vue.use(Translate);
 
-const onRequestFinished = ({ labelUrl, successful }) => {
-  const button = document.querySelector(`.js-promote-project-label[data-url="${labelUrl}"]`);
+const initLabelIndex = () => {
+  initLabels();
 
-  if (!successful) {
-    button.removeAttribute('disabled');
-  }
-};
+  const onRequestFinished = ({ labelUrl, successful }) => {
+    const button = document.querySelector(`.js-promote-project-label-button[data-url="${labelUrl}"]`);
 
-const onRequestStarted = (labelUrl) => {
-  const button = document.querySelector(`.js-promote-project-label[data-url="${labelUrl}"]`);
-  button.setAttribute('disabled', '');
-  eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished);
-};
+    if (!successful) {
+      button.removeAttribute('disabled');
+    }
+  };
 
-const onDeleteButtonClick = (event) => {
-  const button = event.currentTarget;
-  const modalProps = {
-    labelTitle: button.dataset.labelTitle,
-    labelColor: button.dataset.labelColor,
-    url: button.dataset.url,
+  const onRequestStarted = (labelUrl) => {
+    const button = document.querySelector(`.js-promote-project-label-button[data-url="${labelUrl}"]`);
+    button.setAttribute('disabled', '');
+    eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished);
   };
-  eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
-  eventHub.$emit('promoteLabelModal.props', modalProps);
-};
 
-const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label');
-promoteLabelButtons.forEach((button) => {
-  button.addEventListener('click', onDeleteButtonClick);
-});
+  const onDeleteButtonClick = (event) => {
+    const button = event.currentTarget;
+    const modalProps = {
+      labelTitle: button.dataset.labelTitle,
+      labelColor: button.dataset.labelColor,
+      labelTextColor: button.dataset.labelTextColor,
+      url: button.dataset.url,
+    };
+    eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
+    eventHub.$emit('promoteLabelModal.props', modalProps);
+  };
 
-eventHub.$once('promoteLabelModal.mounted', () => {
+  const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button');
   promoteLabelButtons.forEach((button) => {
-    button.removeAttribute('disabled');
+    button.addEventListener('click', onDeleteButtonClick);
   });
-});
-
-const initLabelIndex = () => {
-  initLabels();
 
-  const promoteLabelModalComponent = new Vue({
-    el: '#promote-label-modal',
-    components: {
-      PromoteLabelModal,
-    },
-    data() {
-      return {
-        modalProps: {
-          labelTitle: '',
-          labelColor: '',
-          url: '',
-        },
-      };
-    },
-    mounted() {
-      eventHub.$on('promoteLabelModal.props', this.setModalProps);
-      eventHub.$emit('promoteLabelModal.mounted');
-    },
-    beforeDestroy() {
-      eventHub.$off('promoteLabelModal.props', this.setModalProps);
-    },
-    methods: {
-      setModalProps(modalProps) {
-        this.modalProps = modalProps;
-      },
-    },
-    render(createElement) {
-      return createElement('promote-label-modal', {
-        props: this.modalProps,
-      });
-    },
+  eventHub.$once('promoteLabelModal.mounted', () => {
+    promoteLabelButtons.forEach((button) => {
+      button.removeAttribute('disabled');
+    });
   });
 
   const promoteLabelModal = document.getElementById('promote-label-modal');
-  let withLabel;
-  if (promoteLabelModal != null) {
-    withLabel = promoteLabelModalComponent;
+  let promoteLabelModalComponent;
+
+  if (promoteLabelModal) {
+    promoteLabelModalComponent = new Vue({
+      el: promoteLabelModal,
+      components: {
+        PromoteLabelModal,
+      },
+      data() {
+        return {
+          modalProps: {
+            labelTitle: '',
+            labelColor: '',
+            labelTextColor: '',
+            url: '',
+          },
+        };
+      },
+      mounted() {
+        eventHub.$on('promoteLabelModal.props', this.setModalProps);
+        eventHub.$emit('promoteLabelModal.mounted');
+      },
+      beforeDestroy() {
+        eventHub.$off('promoteLabelModal.props', this.setModalProps);
+      },
+      methods: {
+        setModalProps(modalProps) {
+          this.modalProps = modalProps;
+        },
+      },
+      render(createElement) {
+        return createElement('promote-label-modal', {
+          props: this.modalProps,
+        });
+      },
+    });
   }
-  return withLabel;
+
+  return promoteLabelModalComponent;
 };
 
 document.addEventListener('DOMContentLoaded', initLabelIndex);
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 25cdc66ec0d..48b981dd31f 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -4,13 +4,15 @@
 
   .page-title,
   .modal-title {
-    margin-top: 0;
-
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
     }
   }
+
+  .page-title {
+    margin-top: 0;
+  }
 }
 
 .modal-body {