Show outdated message only for Active MRs

When a merge is in closed or merged state, the outdated message
will not be displayed for the security reports

app/assets/javascripts/mr_popover/constants.js

@@ -3,6 +3,7 @@ import { __ } from '~/locale';
 export const mrStates = {
   merged: 'merged',
   closed: 'closed',
+  open: 'open',
 };
 
 export const humanMRStates = {

changelogs/unreleased/improvement-outdated-security-report.yml

+---
+title: Show security report outdated message for only Active MRs
+merge_request: 23575
+author:
+type: other

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

@@ -319,6 +319,7 @@ export default {
         :can-create-merge-request="mr.canCreateMergeRequest"
         :can-dismiss-vulnerability="mr.canDismissVulnerability"
         :diverged-commits-count="mr.divergedCommitsCount"
+        :mr-state="mr.state"
       />
       <mr-widget-licenses
         v-if="shouldRenderLicenseReport"

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

@@ -10,6 +10,7 @@ import IssueModal from './components/modal.vue';
 import securityReportsMixin from './mixins/security_report_mixin';
 import createStore from './store';
 import { s__, sprintf } from '~/locale';
+import { mrStates } from '~/mr_popover/constants';
 
 export default {
   store: createStore(),
@@ -118,6 +119,11 @@ export default {
       required: false,
       default: 0,
     },
+    mrState: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   componentNames,
   computed: {
@@ -174,6 +180,9 @@ export default {
         s__('Security report is out of date. Retry the pipeline for the target branch.'),
       );
     },
+    isMRActive() {
+      return this.mrState !== mrStates.merged && this.mrState !== mrStates.closed;
+    },
   },
 
   created() {
@@ -285,7 +294,11 @@ export default {
       </a>
     </div>
 
-    <div v-if="isBaseSecurityReportOutOfDate" slot="subHeading" class="text-secondary-700 text-1">
+    <div
+      v-if="isMRActive && isBaseSecurityReportOutOfDate"
+      slot="subHeading"
+      class="text-secondary-700 text-1"
+    >
       <span>{{ subHeadingText }}</span>
     </div>
 

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

@@ -9,6 +9,7 @@ import { mount } from '@vue/test-utils';
 import { waitForMutation } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
 import axios from '~/lib/utils/axios_utils';
+import { mrStates } from '~/mr_popover/constants';
 
 import {
   sastDiffSuccessMock,
@@ -334,28 +335,17 @@ 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',
-      );
-    });
   });
 
   describe('sast reports', () => {
     beforeEach(() => {
       gl.mrWidgetData = gl.mrWidgetData || {};
       gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
-      gl.mrWidgetData.diverged_commits_count = 100;
 
-      mock
-        .onGet(SAST_DIFF_ENDPOINT)
-        .reply(200, { ...sastDiffSuccessMock, base_report_out_of_date: true });
+      mock.onGet(SAST_DIFF_ENDPOINT).reply(200, { ...sastDiffSuccessMock });
 
       createWrapper({
         ...props,
-        divergedCommitsCount: 1,
-        targetBranch: 'master',
         enabledReports: {
           sast: true,
         },
@@ -373,11 +363,73 @@ 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',
-      );
+  describe('Out of date report', () => {
+    const createComponent = (extraProp, done) => {
+      gl.mrWidgetData = gl.mrWidgetData || {};
+      gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
+
+      mock
+        .onGet(SAST_DIFF_ENDPOINT)
+        .reply(200, { ...sastDiffSuccessMock, base_report_out_of_date: true });
+
+      createWrapper({
+        ...props,
+        ...extraProp,
+        targetBranch: 'master',
+        enabledReports: {
+          sast: true,
+        },
+      });
+
+      waitForMutation(wrapper.vm.$store, `sast/${sastTypes.RECEIVE_DIFF_SUCCESS}`)
+        .then(done)
+        .catch(done.fail);
+    };
+
+    describe('with active MR', () => {
+      beforeEach(done => {
+        createComponent({ mrState: mrStates.open }, done);
+      });
+
+      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',
+        );
+      });
+    });
+
+    describe('with active MR and diverged commit', () => {
+      beforeEach(done => {
+        createComponent({ mrState: mrStates.open, divergedCommitsCount: 1 }, done);
+      });
+
+      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',
+        );
+      });
+    });
+
+    describe('with closed MR', () => {
+      beforeEach(done => {
+        createComponent({ mrState: mrStates.closed }, done);
+      });
+
+      it('should not display out of date message', () => {
+        expect(wrapper.vm.$el.textContent).not.toContain('Security report is out of date.');
+      });
+    });
+
+    describe('with merged MR', () => {
+      beforeEach(done => {
+        createComponent({ mrState: mrStates.merged }, done);
+      });
+
+      it('should not display out of date message', () => {
+        expect(wrapper.vm.$el.textContent).not.toContain('Security report is out of date.');
+      });
     });
   });
 });