Improve language when MR Security Report is outdated

This is an attempt to improve message for an Outdated
security report and also provide direct link to run
a new pipeline for target branch

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -180,6 +180,7 @@ export default class MergeRequestStore {
     this.mergeRequestAddCiConfigPath = data.merge_request_add_ci_config_path;
     this.pipelinesEmptySvgPath = data.pipelines_empty_svg_path;
     this.humanAccess = data.human_access;
+    this.newPipelinePath = data.new_project_pipeline_path;
   }
 
   get isNothingToMergeState() {

app/serializers/merge_request_widget_entity.rb

@@ -64,6 +64,10 @@ class MergeRequestWidgetEntity < Grape::Entity
     merge_request.project.team.human_max_access(current_user&.id)
   end
 
+  expose :new_project_pipeline_path do |merge_request|
+    new_project_pipeline_path(merge_request.project)
+  end
+
   # Rendering and redacting Markdown can be expensive. These links are
   # just nice to have in the merge request widget, so only
   # include them if they are explicitly requested on first load.

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -328,6 +328,8 @@ export default {
         :can-dismiss-vulnerability="mr.canDismissVulnerability"
         :diverged-commits-count="mr.divergedCommitsCount"
         :mr-state="mr.state"
+        :target-branch-tree-path="mr.targetBranchTreePath"
+        :new-pipeline-path="mr.newPipelinePath"
         class="js-security-widget"
       />
       <mr-widget-licenses

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -9,7 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import IssueModal from './components/modal.vue';
 import securityReportsMixin from './mixins/security_report_mixin';
 import createStore from './store';
-import { s__, sprintf } from '~/locale';
+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { mrStates } from '~/mr_popover/constants';
 
 export default {
@@ -20,6 +20,8 @@ export default {
     IssuesList,
     IssueModal,
     Icon,
+    GlSprintf,
+    GlLink,
   },
   mixins: [securityReportsMixin, glFeatureFlagsMixin()],
   props: {
@@ -124,6 +126,16 @@ export default {
       required: false,
       default: null,
     },
+    targetBranchTreePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    newPipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   componentNames,
   computed: {
@@ -164,25 +176,12 @@ export default {
     hasSastReports() {
       return this.enabledReports.sast;
     },
-    subHeadingText() {
-      const isMRBranchOutdated = this.divergedCommitsCount > 0;
-      if (isMRBranchOutdated) {
-        return sprintf(
-          s__(
-            'Security report is out of date. Please incorporate latest changes from %{targetBranchName}',
-          ),
-          {
-            targetBranchName: this.targetBranch,
-          },
-        );
-      }
-      return sprintf(
-        s__('Security report is out of date. Retry the pipeline for the target branch.'),
-      );
-    },
     isMRActive() {
       return this.mrState !== mrStates.merged && this.mrState !== mrStates.closed;
     },
+    isMRBranchOutdated() {
+      return this.divergedCommitsCount > 0;
+    },
   },
 
   created() {
@@ -294,7 +293,36 @@ export default {
 
     <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #subHeading>
       <div class="text-secondary-700 text-1">
-        <span>{{ subHeadingText }}</span>
+        <gl-sprintf
+          v-if="isMRBranchOutdated"
+          :message="
+            __(
+              'Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})',
+            )
+          "
+        >
+          <template #targetBranchName>
+            <gl-link class="text-1" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
+          </template>
+        </gl-sprintf>
+
+        <gl-sprintf
+          v-else
+          :message="
+            __(
+              'Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})',
+            )
+          "
+        >
+          <template #newPipelineLink="{ content }">
+            <gl-link class="text-1" :href="`${newPipelinePath}?ref=${targetBranch}`">{{
+              content
+            }}</gl-link>
+          </template>
+          <template #targetBranchName>
+            <gl-link class="text-1" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
+          </template>
+        </gl-sprintf>
       </div>
     </template>
 

ee/changelogs/unreleased/198015-improve-language-when-mr-security-report-is-outdated.yml

+---
+title: Improve language when MR Security Report is outdated
+merge_request: 26150
+author:
+type: changed

ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -395,7 +395,7 @@ describe('Grouped security reports app', () => {
 
       it('should display out of date message', () => {
         expect(wrapper.vm.$el.textContent).toContain(
-          'Security report is out of date. Retry the pipeline for the target branch',
+          'Security report is out of date. Run a new pipeline for the target branch (master)',
         );
       });
     });
@@ -407,7 +407,7 @@ describe('Grouped security reports app', () => {
 
       it('should display out of date message', () => {
         expect(wrapper.vm.$el.textContent).toContain(
-          'Security report is out of date. Please incorporate latest changes from master',
+          'Security report is out of date. Please update your branch with the latest changes from the target branch (master)',
         );
       });
     });

locale/gitlab.pot

@@ -17201,10 +17201,10 @@ msgstr ""
 msgid "Security dashboard"
 msgstr ""
 
-msgid "Security report is out of date. Please incorporate latest changes from %{targetBranchName}"
+msgid "Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})"
 msgstr ""
 
-msgid "Security report is out of date. Retry the pipeline for the target branch."
+msgid "Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})"
 msgstr ""
 
 msgid "SecurityConfiguration|Configured"

spec/frontend/vue_mr_widget/mock_data.js

@@ -37,6 +37,7 @@ export default {
   target_project_id: 19,
   target_project_full_path: '/group2/project2',
   merge_request_add_ci_config_path: '/group2/project2/new/pipeline',
+  new_project_pipeline_path: '/group2/project2/pipelines/new',
   metrics: {
     merged_by: {
       name: 'Administrator',

spec/javascripts/vue_mr_widget/stores/mr_widget_store_spec.js

@@ -102,5 +102,11 @@ describe('MergeRequestStore', () => {
 
       expect(store.pipelinesEmptySvgPath).toBe('/path/to/svg');
     });
+
+    it('should set newPipelinePath', () => {
+      store.setData({ ...mockData });
+
+      expect(store.newPipelinePath).toBe('/group2/project2/pipelines/new');
+    });
   });
 });

spec/serializers/merge_request_widget_entity_spec.rb

@@ -162,6 +162,13 @@ describe MergeRequestWidgetEntity do
       .to eq('Maintainer')
   end
 
+  it 'has new pipeline path for project' do
+    project.add_maintainer(user)
+
+    expect(subject[:new_project_pipeline_path])
+      .to eq("/#{resource.project.full_path}/pipelines/new")
+  end
+
   describe 'when source project is deleted' do
     let(:project) { create(:project, :repository) }
     let(:forked_project) { fork_project(project) }