Display message if MR Security report is outdated

When the last pipeline for the target branch hadn't detected some
security issues, maybe due to jobs failed or artifacts expired, the
MR security report should be considered outdated and the pipeline needs
to be re-run. It also handles the edge case when target branch has
received more commits and the current branch needs to be updated.

app/assets/javascripts/reports/components/report_section.vue

@@ -165,21 +165,23 @@ export default {
 <template>
   <section class="media-section">
     <div class="media">
-      <status-icon :status="statusIconName" :size="24" />
-      <div class="media-body d-flex flex-align-self-center">
-        <span class="js-code-text code-text">
+      <status-icon :status="statusIconName" :size="24" class="align-self-center" />
+      <div class="media-body d-flex flex-align-self-center align-items-center">
+        <div class="js-code-text code-text">
+          <div>
             {{ headerText }}
             <slot :name="slotName"></slot>
-
             <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
-        </span>
+          </div>
+          <slot name="subHeading"></slot>
+        </div>
 
         <slot name="actionButtons"></slot>
 
         <button
           v-if="isCollapsible"
           type="button"
-          class="js-collapse-btn btn float-right btn-sm align-self-start qa-expand-report-button"
+          class="js-collapse-btn btn float-right btn-sm align-self-center qa-expand-report-button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}

changelogs/unreleased/4913-frontend-outdated-security-report.yml

+---
+title: Display in MR if security report is outdated
+merge_request: 20954
+author:
+type: other

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

@@ -274,6 +274,7 @@ export default {
         v-if="shouldRenderSecurityReport"
         :head-blob-path="mr.headBlobPath"
         :source-branch="mr.sourceBranch"
+        :target-branch="mr.targetBranch"
         :base-blob-path="mr.baseBlobPath"
         :enabled-reports="mr.enabledSecurityReports"
         :sast-head-path="mr.sast.head_path"

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

@@ -9,6 +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';
 
 export default {
   store: createStore(),
@@ -40,6 +41,11 @@ export default {
       required: false,
       default: null,
     },
+    targetBranch: {
+      type: String,
+      required: false,
+      default: null,
+    },
     sastHeadPath: {
       type: String,
       required: false,
@@ -169,6 +175,7 @@ export default {
       'sastContainerStatusIcon',
       'dastStatusIcon',
       'dependencyScanningStatusIcon',
+      'isBaseSecurityReportOutOfDate',
     ]),
     ...mapGetters('sast', ['groupedSastText', 'sastStatusIcon']),
     securityTab() {
@@ -191,6 +198,25 @@ export default {
     hasSastReports() {
       return this.hasReportsType('sast');
     },
+    subHeadingText() {
+      const mrDivergedCommitsCount =
+        (gl && gl.mrWidgetData && gl.mrWidgetData.diverged_commits_count) || 0;
+      const isMRBranchOutdated = mrDivergedCommitsCount > 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.'),
+      );
+    },
   },
 
   created() {
@@ -358,6 +384,10 @@ export default {
       </a>
     </div>
 
+    <div v-if="isBaseSecurityReportOutOfDate" slot="subHeading" class="text-secondary-700 text-1">
+      <span>{{ subHeadingText }}</span>
+    </div>
+
     <div slot="body" class="mr-widget-grouped-section report-block">
       <template v-if="hasSastReports">
         <summary-row

ee/app/assets/javascripts/vue_shared/security_reports/store/getters.js

@@ -130,5 +130,11 @@ export const anyReportHasIssues = state =>
   state.sastContainer.newIssues.length > 0 ||
   state.dependencyScanning.newIssues.length > 0;
 
+export const isBaseSecurityReportOutOfDate = state =>
+  state.sast.baseReportOutofDate ||
+  state.dast.baseReportOutofDate ||
+  state.sastContainer.baseReportOutofDate ||
+  state.dependencyScanning.baseReportOutofDate;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/mutations.js

@@ -61,11 +61,13 @@ export default {
 
   [types.RECEIVE_DIFF_SUCCESS](state, { diff, enrichData }) {
     const { added, fixed, existing } = parseDiff(diff, enrichData);
+    const baseReportOutofDate = diff.base_report_out_of_date || false;
 
     state.isLoading = false;
     state.newIssues = added;
     state.resolvedIssues = fixed;
     state.allIssues = existing;
+    state.baseReportOutofDate = baseReportOutofDate;
   },
 
   [types.RECEIVE_DIFF_ERROR](state) {

ee/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/state.js

@@ -11,4 +11,5 @@ export default () => ({
   newIssues: [],
   resolvedIssues: [],
   allIssues: [],
+  baseReportOutofDate: false,
 });

ee/app/assets/javascripts/vue_shared/security_reports/store/mutations.js

@@ -108,11 +108,13 @@ export default {
 
   [types.RECEIVE_SAST_CONTAINER_DIFF_SUCCESS](state, { diff, enrichData }) {
     const { added, fixed, existing } = parseDiff(diff, enrichData);
+    const baseReportOutofDate = diff.base_report_out_of_date || false;
 
     Vue.set(state.sastContainer, 'isLoading', false);
     Vue.set(state.sastContainer, 'newIssues', added);
     Vue.set(state.sastContainer, 'resolvedIssues', fixed);
     Vue.set(state.sastContainer, 'allIssues', existing);
+    Vue.set(state.sastContainer, 'baseReportOutofDate', baseReportOutofDate);
   },
 
   [types.RECEIVE_SAST_CONTAINER_DIFF_ERROR](state) {
@@ -164,11 +166,13 @@ export default {
 
   [types.RECEIVE_DAST_DIFF_SUCCESS](state, { diff, enrichData }) {
     const { added, fixed, existing } = parseDiff(diff, enrichData);
+    const baseReportOutofDate = diff.base_report_out_of_date || false;
 
     Vue.set(state.dast, 'isLoading', false);
     Vue.set(state.dast, 'newIssues', added);
     Vue.set(state.dast, 'resolvedIssues', fixed);
     Vue.set(state.dast, 'allIssues', existing);
+    Vue.set(state.dast, 'baseReportOutofDate', baseReportOutofDate);
   },
 
   [types.RECEIVE_DAST_DIFF_ERROR](state) {
@@ -251,11 +255,13 @@ export default {
 
   [types.RECEIVE_DEPENDENCY_SCANNING_DIFF_SUCCESS](state, { diff, enrichData }) {
     const { added, fixed, existing } = parseDiff(diff, enrichData);
+    const baseReportOutofDate = diff.base_report_out_of_date || false;
 
     Vue.set(state.dependencyScanning, 'isLoading', false);
     Vue.set(state.dependencyScanning, 'newIssues', added);
     Vue.set(state.dependencyScanning, 'resolvedIssues', fixed);
     Vue.set(state.dependencyScanning, 'allIssues', existing);
+    Vue.set(state.dependencyScanning, 'baseReportOutofDate', baseReportOutofDate);
   },
 
   [types.RECEIVE_DEPENDENCY_SCANNING_DIFF_ERROR](state) {

ee/app/assets/javascripts/vue_shared/security_reports/store/state.js

@@ -28,6 +28,7 @@ export default () => ({
 
     newIssues: [],
     resolvedIssues: [],
+    baseReportOutofDate: false,
   },
   dast: {
     paths: {
@@ -41,6 +42,7 @@ export default () => ({
 
     newIssues: [],
     resolvedIssues: [],
+    baseReportOutofDate: false,
   },
 
   dependencyScanning: {
@@ -56,6 +58,7 @@ export default () => ({
     newIssues: [],
     resolvedIssues: [],
     allIssues: [],
+    baseReportOutofDate: false,
   },
 
   modal: {

ee/spec/frontend/vue_shared/security_reports/store/getters_spec.js

@@ -13,6 +13,7 @@ import {
   dependencyScanningStatusIcon,
   anyReportHasError,
   summaryCounts,
+  isBaseSecurityReportOutOfDate,
 } from 'ee/vue_shared/security_reports/store/getters';
 
 const BASE_PATH = 'fake/base/path.json';
@@ -530,4 +531,15 @@ describe('Security reports getters', () => {
       expect(noBaseInAllReports(state)).toEqual(false);
     });
   });
+
+  describe('isBaseSecurityReportOutOfDate', () => {
+    it('returns false when none reports are out of date', () => {
+      expect(isBaseSecurityReportOutOfDate(state)).toEqual(false);
+    });
+
+    it('returns true when any of the reports is out of date', () => {
+      state.dast.baseReportOutofDate = true;
+      expect(isBaseSecurityReportOutOfDate(state)).toEqual(true);
+    });
+  });
 });

ee/spec/frontend/vue_shared/security_reports/store/modules/sast/mutations_spec.js

@@ -197,6 +197,7 @@ describe('sast module mutations', () => {
           ],
           fixed: [createIssue({ cve: 'CVE-4' }), createIssue({ cve: 'CVE-5' })],
           existing: [createIssue({ cve: 'CVE-6' })],
+          base_report_out_of_date: true,
         },
       };
       state.isLoading = true;
@@ -207,6 +208,10 @@ describe('sast module mutations', () => {
       expect(state.isLoading).toBe(false);
     });
 
+    it('should set the `baseReportOutofDate` status to `false`', () => {
+      expect(state.baseReportOutofDate).toBe(true);
+    });
+
     it('should have the relevant `new` issues', () => {
       expect(state.newIssues.length).toBe(3);
     });

ee/spec/frontend/vue_shared/security_reports/store/mutations_spec.js

@@ -816,6 +816,7 @@ describe('security reports mutations', () => {
           { name: 'added vuln 2', report_type: 'container_scanning' },
         ],
         fixed: [{ name: 'fixed vuln 1', report_type: 'container_scanning' }],
+        base_report_out_of_date: true,
       },
     };
 
@@ -827,6 +828,10 @@ describe('security reports mutations', () => {
       expect(stateCopy.sastContainer.isLoading).toBe(false);
     });
 
+    it('should set baseReportOutofDate to true', () => {
+      expect(stateCopy.sastContainer.baseReportOutofDate).toBe(true);
+    });
+
     it('should parse and set the added vulnerabilities', () => {
       reports.diff.added.forEach((vuln, i) => {
         expect(stateCopy.sastContainer.newIssues[i]).toEqual(
@@ -885,6 +890,7 @@ describe('security reports mutations', () => {
           ],
           fixed: [{ name: 'fixed vuln 1', report_type: 'dependency_scanning' }],
           existing: [{ name: 'existing vuln 1', report_type: 'dependency_scanning' }],
+          base_report_out_of_date: true,
         },
       };
       mutations[types.RECEIVE_DEPENDENCY_SCANNING_DIFF_SUCCESS](stateCopy, reports);
@@ -894,6 +900,10 @@ describe('security reports mutations', () => {
       expect(stateCopy.dependencyScanning.isLoading).toBe(false);
     });
 
+    it('should set baseReportOutofDate to true', () => {
+      expect(stateCopy.dependencyScanning.baseReportOutofDate).toBe(true);
+    });
+
     it('should parse and set the added vulnerabilities', () => {
       reports.diff.added.forEach((vuln, i) => {
         expect(stateCopy.dependencyScanning.newIssues[i]).toEqual(
@@ -952,6 +962,7 @@ describe('security reports mutations', () => {
           ],
           fixed: [{ name: 'fixed vuln 1', report_type: 'dast' }],
           existing: [{ name: 'existing vuln 1', report_type: 'dast' }],
+          base_report_out_of_date: true,
         },
       };
       mutations[types.RECEIVE_DAST_DIFF_SUCCESS](stateCopy, reports);
@@ -961,6 +972,10 @@ describe('security reports mutations', () => {
       expect(stateCopy.dast.isLoading).toBe(false);
     });
 
+    it('should set baseReportOutofDate to true', () => {
+      expect(stateCopy.dast.baseReportOutofDate).toBe(true);
+    });
+
     it('should parse and set the added vulnerabilities', () => {
       reports.diff.added.forEach((vuln, i) => {
         expect(stateCopy.dast.newIssues[i]).toEqual(

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

@@ -478,6 +478,7 @@ describe('Grouped security reports app', () => {
         mock.onGet(dastEndpoint).reply(200, {
           added: [dockerReport.vulnerabilities[0]],
           fixed: [dockerReport.vulnerabilities[1], dockerReport.vulnerabilities[2]],
+          base_report_out_of_date: true,
         });
 
         mock.onGet('vulnerability_feedback_path.json').reply(200, []);
@@ -527,6 +528,12 @@ describe('Grouped security reports app', () => {
             'DAST detected 1 new, and 2 fixed vulnerabilities',
           );
         });
+
+        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',
+          );
+        });
       });
     });
 
@@ -545,6 +552,7 @@ describe('Grouped security reports app', () => {
         canCreateIssue: true,
         canCreateMergeRequest: true,
         canDismissVulnerability: true,
+        targetBranch: 'master',
       };
       const provide = {
         glFeatures: {
@@ -555,11 +563,13 @@ describe('Grouped security reports app', () => {
       beforeEach(() => {
         gl.mrWidgetData = gl.mrWidgetData || {};
         gl.mrWidgetData.sast_comparison_path = sastEndpoint;
+        gl.mrWidgetData.diverged_commits_count = 100;
 
         mock.onGet(sastEndpoint).reply(200, {
           added: [dockerReport.vulnerabilities[0]],
           fixed: [dockerReport.vulnerabilities[1], dockerReport.vulnerabilities[2]],
           existing: [dockerReport.vulnerabilities[2]],
+          base_report_out_of_date: true,
         });
 
         mock.onGet('vulnerability_feedback_path.json').reply(200, []);
@@ -609,6 +619,12 @@ describe('Grouped security reports app', () => {
             'SAST detected 1 new, and 2 fixed vulnerabilities',
           );
         });
+
+        it('should display out of date message for Outdated MR ', () => {
+          expect(wrapper.vm.$el.textContent).toContain(
+            'Security report is out of date. Please incorporate latest changes from master',
+          );
+        });
       });
     });
   });

locale/gitlab.pot

@@ -16100,6 +16100,12 @@ msgstr ""
 msgid "Security dashboard"
 msgstr ""
 
+msgid "Security report is out of date. Please incorporate latest changes from %{targetBranchName}"
+msgstr ""
+
+msgid "Security report is out of date. Retry the pipeline for the target branch."
+msgstr ""
+
 msgid "SecurityConfiguration|Configured"
 msgstr ""