Fix promoting labels and milestones copy text

app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue

 <script>
-  import axios from '~/lib/utils/axios_utils';
-  import createFlash from '~/flash';
-  import GlModal from '~/vue_shared/components/gl_modal.vue';
-  import { s__, sprintf } from '~/locale';
-  import { visitUrl } from '~/lib/utils/url_utility';
-  import eventHub from '../event_hub';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
+import eventHub from '../event_hub';
 
-  export default {
-    components: {
-      GlModal,
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    milestoneTitle: {
+      type: String,
+      required: true,
     },
-    props: {
-      milestoneTitle: {
-        type: String,
-        required: true,
-      },
-      url: {
-        type: String,
-        required: true,
-      },
+    url: {
+      type: String,
+      required: true,
     },
-    computed: {
-      title() {
-        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.
-        Existing project milestones with the same title will be merged.
-        This action cannot be reversed.`);
-      },
+    groupName: {
+      type: String,
+      required: true,
     },
-    methods: {
-      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);
+  },
+  computed: {
+    title() {
+      return sprintf(s__('Milestones|Promote %{milestoneTitle} to group milestone?'), {
+        milestoneTitle: this.milestoneTitle,
+      });
+    },
+    text() {
+      const milestonePromotion = sprintf(
+        s__(`Milestones|Promoting %{milestone} will make it available for all projects inside %{groupName}.
+          Existing project milestones with the same name will be merged. `),
+        {
+          milestone: this.milestoneTitle,
+          groupName: this.groupName,
+        },
+      );
+      const missingFeatureWarn = sprintf(
+        s__(`Milestones|Group milestones are currently %{linkStart} missing features such as burndown charts. %{linkEnd}
+          You will not have these features once you've promoted a project milestone.
+          They will be available in future releases.`),
+        {
+          linkStart: `<a href="https://docs.gitlab.com/ee/user/project/milestones/"
+              target="_blank" rel="noopener noreferrer">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+      const finalWarning = s__('Milestones|This action cannot be reversed.');
+
+      return sprintf(
+        s__(
+          `Milestones|<p>%{milestonePromotion}</p>
+          <p>%{missingFeatureWarn}</p>%{finalWarning}`,
+        ),
+        {
+          milestonePromotion,
+          missingFeatureWarn,
+          finalWarning,
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    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);
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <gl-modal
@@ -58,7 +101,10 @@
     >
       {{ title }}
     </template>
-    {{ text }}
+    <div
+      v-html="text"
+    >
+    </div>
   </gl-modal>
 </template>
 

app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js

@@ -25,6 +25,7 @@ export default () => {
     const modalProps = {
       milestoneTitle: button.dataset.milestoneTitle,
       url: button.dataset.url,
+      groupName: button.dataset.groupName,
     };
     eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted);
     eventHub.$emit('promoteMilestoneModal.props', modalProps);
@@ -54,6 +55,7 @@ export default () => {
         return {
           modalProps: {
             milestoneTitle: '',
+            groupName: '',
             url: '',
           },
         };

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

 <script>
+  import _ from 'underscore';
   import axios from '~/lib/utils/axios_utils';
   import createFlash from '~/flash';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
@@ -27,19 +28,26 @@
         type: String,
         required: true,
       },
+      groupName: {
+        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 title will be merged. This action cannot be reversed.`);
+        return sprintf(s__(`Labels|Promoting %{labelTitle} will make it available for all projects inside %{groupName}. 
+        Existing project labels with the same title will be merged. This action cannot be reversed.`), {
+          labelTitle: this.labelTitle,
+          groupName: this.groupName,
+        });
       },
       title() {
         const label = `<span
           class="label color-label"
           style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${this.labelTitle}</span>`;
+        >${_.escape(this.labelTitle)}</span>`;
 
-        return sprintf(s__('Labels|Promote label %{labelTitle} to Group Label?'), {
+        return sprintf(s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'), {
           labelTitle: label,
         }, false);
       },
@@ -69,6 +77,7 @@
   >
     <div
       slot="title"
+      class="modal-title-with-label"
       v-html="title"
     >
       {{ title }}

app/assets/javascripts/pages/projects/labels/index/index.js

@@ -30,6 +30,7 @@ const initLabelIndex = () => {
       labelColor: button.dataset.labelColor,
       labelTextColor: button.dataset.labelTextColor,
       url: button.dataset.url,
+      groupName: button.dataset.groupName,
     };
     eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
     eventHub.$emit('promoteLabelModal.props', modalProps);
@@ -62,6 +63,7 @@ const initLabelIndex = () => {
             labelColor: '',
             labelTextColor: '',
             url: '',
+            groupName: '',
           },
         };
       },

app/assets/stylesheets/framework/modal.scss

@@ -4,9 +4,15 @@
 
   .page-title,
   .modal-title {
+    .modal-title-with-label span {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
+      vertical-align: middle;
     }
   }
 

app/controllers/projects/labels_controller.rb

@@ -112,7 +112,7 @@ class Projects::LabelsController < Projects::ApplicationController
     begin
       return render_404 unless promote_service.execute(@label)
 
-      flash[:notice] = "#{@label.title} promoted to group label."
+      flash[:notice] = "#{@label.title} promoted to <a href=\"#{group_labels_path(@project.group)}\">group label</a>.".html_safe
       respond_to do |format|
         format.html do
           redirect_to(project_labels_path(@project), status: 303)

app/controllers/projects/milestones_controller.rb

@@ -75,9 +75,9 @@ class Projects::MilestonesController < Projects::ApplicationController
   end
 
   def promote
-    Milestones::PromoteService.new(project, current_user).execute(milestone)
+    promoted_milestone = Milestones::PromoteService.new(project, current_user).execute(milestone)
 
-    flash[:notice] = "#{milestone.title} promoted to group milestone"
+    flash[:notice] = "#{milestone.title} promoted to <a href=\"#{group_milestone_path(project.group, promoted_milestone.iid)}\">group milestone</a>.".html_safe
     respond_to do |format|
       format.html do
         redirect_to project_milestones_path(project)

app/views/projects/milestones/show.html.haml

@@ -30,6 +30,7 @@
           %button.js-promote-project-milestone-button.btn.btn-grouped{ data: { toggle: 'modal',
             target: '#promote-milestone-modal',
             milestone_title: @milestone.title,
+            group_name: @project.group.name,
             url: promote_project_milestone_path(@milestone.project, @milestone),
             container: 'body' },
             disabled: true,

app/views/shared/_label.html.haml

@@ -60,6 +60,7 @@
                 label_title: label.title,
                 label_color: label.color,
                 label_text_color: label.text_color,
+                group_name: label.project.group.name,
                 target: '#promote-label-modal',
                 container: 'body',
                 toggle: 'modal' } }

app/views/shared/milestones/_milestone.html.haml

@@ -56,6 +56,7 @@
               type: 'button',
               data: { url: promote_project_milestone_path(milestone.project, milestone),
                       milestone_title: milestone.title,
+                      group_name: @project.group.name,
                       target: '#promote-milestone-modal',
                       container: 'body',
                       toggle: 'modal' } }

changelogs/unreleased/jivl-change-copy-text-promote-milestones-labels.yml

+---
+title: Correct copy text for the promote milestone and label modals
+merge_request: 17726
+author:
+type: fixed

spec/controllers/projects/milestones_controller_spec.rb

@@ -98,7 +98,7 @@ describe Projects::MilestonesController do
       it 'shows group milestone' do
         post :promote, namespace_id: project.namespace.id, project_id: project.id, id: milestone.iid
 
-        expect(flash[:notice]).to eq("#{milestone.title} promoted to group milestone")
+        expect(flash[:notice]).to eq("#{milestone.title} promoted to <a href=\"#{group_milestone_path(project.group, milestone.iid)}\">group milestone</a>.")
         expect(response).to redirect_to(project_milestones_path(project))
       end
     end

spec/javascripts/pages/labels/components/promote_label_modal_spec.js

@@ -12,6 +12,7 @@ describe('Promote label modal', () => {
     labelColor: '#5cb85c',
     labelTextColor: '#ffffff',
     url: `${gl.TEST_HOST}/dummy/promote/labels`,
+    groupName: 'group',
   };
 
   describe('Modal title and description', () => {
@@ -24,7 +25,7 @@ describe('Promote label modal', () => {
     });
 
     it('contains the proper description', () => {
-      expect(vm.text).toContain('Promoting this label will make it available for all projects inside the group');
+      expect(vm.text).toContain(`Promoting ${labelMockData.labelTitle} will make it available for all projects inside ${labelMockData.groupName}`);
     });
 
     it('contains a label span with the color', () => {

spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js

@@ -10,6 +10,7 @@ describe('Promote milestone modal', () => {
   const milestoneMockData = {
     milestoneTitle: 'v1.0',
     url: `${gl.TEST_HOST}/dummy/promote/milestones`,
+    groupName: 'group',
   };
 
   describe('Modal title and description', () => {
@@ -22,7 +23,7 @@ describe('Promote milestone modal', () => {
     });
 
     it('contains the proper description', () => {
-      expect(vm.text).toContain('Promoting this milestone will make it available for all projects inside the group.');
+      expect(vm.text).toContain(`Promoting ${milestoneMockData.milestoneTitle} will make it available for all projects inside ${milestoneMockData.groupName}.`);
     });
 
     it('contains the correct title', () => {