Merge branch 'jivl-change-copy-text-promote-milestones-labels' into 'master'

Fix promoting labels and milestones copy text

Closes #44208

See merge request gitlab-org/gitlab-ce!17726

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

@@ -19,15 +19,19 @@
         type: String,
         required: true,
       },
+      groupName: {
+        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.
+        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.
-        This action cannot be reversed.`);
+        This action cannot be reversed.`), { milestoneTitle: this.milestoneTitle, groupName: this.groupName });
       },
     },
     methods: {

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

@@ -74,9 +74,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

@@ -55,6 +55,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

@@ -107,7 +107,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', () => {