From 2f5d264f09309d526bf559f5d7673ed42bc7db27 Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Mon, 7 Oct 2024 13:05:24 +0200
Subject: [PATCH 1/2] Display warning depending on vulnerability quota

Depending on the quota status, display a helpful message
to the end user on the vulnerability report to notify them.
---
 .../project/project_vulnerability_report.vue  | 25 ++++++++++++++-
 .../vulnerability_report_init.js              | 14 +++++++++
 .../javascripts/vulnerabilities/constants.js  | 12 +++++++
 .../project_vulnerability_report_spec.js      | 31 ++++++++++++++++---
 locale/gitlab.pot                             |  9 ++++++
 5 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue b/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
index 417468ee47f8c7..7d99899c5d000b 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
@@ -1,8 +1,10 @@
 <script>
 import { difference } from 'lodash';
+import { GlAlert } from '@gitlab/ui';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { translateScannerNames } from '~/security_configuration/utils';
 import SecurityTrainingPromoBanner from 'ee/security_dashboard/components/project/security_training_promo_banner.vue';
+import { VULNERABILITY_QUOTA } from 'ee/vulnerabilities/constants';
 import VulnerabilityReportTabs from '../shared/vulnerability_report/vulnerability_report_tabs.vue';
 import ProjectPipelineStatus from '../shared/project_pipeline_status.vue';
 import securityScannersQuery from '../../graphql/queries/project_security_scanners.query.graphql';
@@ -17,8 +19,16 @@ export default {
     ProjectPipelineStatus,
     VulnerabilityReportTabs,
     SecurityTrainingPromoBanner,
+    GlAlert,
   },
-  inject: ['fullPath', 'pipeline', 'sbomPipeline', 'hasVulnerabilities', 'hideThirdPartyOffers'],
+  inject: [
+    'fullPath',
+    'pipeline',
+    'sbomPipeline',
+    'hasVulnerabilities',
+    'hideThirdPartyOffers',
+    'vulnerabilityQuota',
+  ],
   data() {
     return {
       scannerAlertDismissed: false,
@@ -43,6 +53,9 @@ export default {
     },
   },
   computed: {
+    quotaWarning() {
+      return VULNERABILITY_QUOTA[this.vulnerabilityQuota];
+    },
     isReportConfigured() {
       // A report is configured when either a pipeline generated a security report, or when
       // vulnerabilities are added through the new vulnerability page or API. There are 3 cases:
@@ -100,6 +113,16 @@ export default {
       @dismiss="dismissScannerAlert"
     />
 
+    <gl-alert
+      v-if="quotaWarning"
+      title="Warning"
+      variant="warning"
+      class="gl-mt-5"
+      :dismissible="false"
+    >
+      {{ quotaWarning }}
+    </gl-alert>
+
     <security-training-promo-banner v-if="shouldShowPromoBanner" class="gl-mt-5" />
 
     <vulnerability-report-tabs>
diff --git a/ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js b/ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js
index 095f6b8f9d0b55..53fd2f17775d26 100644
--- a/ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js
+++ b/ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js
@@ -65,6 +65,9 @@ export default (el, dashboardType) => {
     newVulnerabilityPath,
     dismissalDescriptions,
     hideThirdPartyOffers,
+    vulnerabilityQuotaCritical,
+    vulnerabilityQuotaEnforced,
+    vulnerabilityQuotaFull,
   } = el.dataset;
 
   if (isUnavailable) {
@@ -78,6 +81,16 @@ export default (el, dashboardType) => {
     });
   }
 
+  let vulnerabilityQuota;
+
+  if (vulnerabilityQuotaFull !== 'false') {
+    vulnerabilityQuota = 'full';
+  } else if (vulnerabilityQuotaEnforced !== 'false') {
+    vulnerabilityQuota = 'enforced';
+  } else if (vulnerabilityQuotaCritical !== 'false') {
+    vulnerabilityQuota = 'critical';
+  }
+
   const provide = {
     dashboardType,
     noVulnerabilitiesSvgPath,
@@ -90,6 +103,7 @@ export default (el, dashboardType) => {
     vulnerabilitiesExportEndpoint,
     groupFullPath,
     projectFullPath,
+    vulnerabilityQuota,
     fullPath: projectFullPath || groupFullPath,
     canAdminVulnerability: parseBoolean(canAdminVulnerability),
     hasVulnerabilities: parseBoolean(hasVulnerabilities),
diff --git a/ee/app/assets/javascripts/vulnerabilities/constants.js b/ee/app/assets/javascripts/vulnerabilities/constants.js
index 53d533d0b8c7ef..ea7087efd53b20 100644
--- a/ee/app/assets/javascripts/vulnerabilities/constants.js
+++ b/ee/app/assets/javascripts/vulnerabilities/constants.js
@@ -142,3 +142,15 @@ export const VULNERABILITY_TAB_NAMES = Object.freeze({
 export const VULNERABILITY_TAB_INDEX_TO_NAME = {
   1: CODE_FLOW_TAB_URL,
 };
+
+export const VULNERABILITY_QUOTA = {
+  critical: s__(
+    'SecurityReports|This project is reaching the maximum number of vulnerabilities it can contain.',
+  ),
+  enforced: s__(
+    'SecurityReports|This project has reached the maximum number of vulnerabilities it can contain. New vulnerabilities will not be created.',
+  ),
+  full: s__(
+    "SecurityReports|This project has reached the maximum number of vulnerabilities it can contain and some of the vulnerabilities couldn't be ingested.",
+  ),
+};
diff --git a/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js b/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
index 54387facabb6f5..6390b9b4225408 100644
--- a/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
@@ -1,8 +1,7 @@
 import Vue, { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-
 import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
+import { GlAlert } from '@gitlab/ui';
 import SecurityTrainingPromoBanner from 'ee/security_dashboard/components/project/security_training_promo_banner.vue';
 import ProjectVulnerabilityReport from 'ee/security_dashboard/components/project/project_vulnerability_report.vue';
 import ReportNotConfiguredProject from 'ee/security_dashboard/components/project/report_not_configured_project.vue';
@@ -12,10 +11,12 @@ import ProjectPipelineStatus from 'ee/security_dashboard/components/shared/proje
 import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 import securityScannersQuery from 'ee/security_dashboard/graphql/queries/project_security_scanners.query.graphql';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { VULNERABILITY_QUOTA } from 'ee/vulnerabilities/constants';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { SCANNER_NAMES_MAP } from '~/security_configuration/constants';
 
 Vue.use(VueApollo);
@@ -45,8 +46,9 @@ describe('Project vulnerability report app component', () => {
     hasVulnerabilities = true,
     securityScanners,
     hideThirdPartyOffers = false,
+    vulnerabilityQuota,
   } = {}) => {
-    wrapper = shallowMount(ProjectVulnerabilityReport, {
+    wrapper = shallowMountExtended(ProjectVulnerabilityReport, {
       router,
       apolloProvider: createMockApollo([
         [securityScannersQuery, securityScannersHandler(securityScanners)],
@@ -58,6 +60,7 @@ describe('Project vulnerability report app component', () => {
         hasVulnerabilities,
         dashboardType: DASHBOARD_TYPES.PROJECT,
         hideThirdPartyOffers,
+        vulnerabilityQuota,
       },
       stubs: {
         VulnerabilityReportTabs,
@@ -96,6 +99,26 @@ describe('Project vulnerability report app component', () => {
     );
   });
 
+  describe('quota warning', () => {
+    const findQuotaWarning = () => wrapper.findComponent(GlAlert);
+
+    it.each`
+      quotaStatus
+      ${'enforced'}
+      ${'critical'}
+      ${'full'}
+    `('displays a warning message when quota status is $quotaStatus', ({ quotaStatus }) => {
+      createWrapper({ vulnerabilityQuota: quotaStatus });
+      expect(findQuotaWarning().exists()).toBe(true);
+      expect(wrapper.findByText(VULNERABILITY_QUOTA[quotaStatus]).exists()).toBe(true);
+    });
+
+    it('displays no warning message when the vulnerability quota status is not provided', () => {
+      createWrapper({ vulnerabilityQuota: '' });
+      expect(findQuotaWarning().exists()).toBe(false);
+    });
+  });
+
   describe('project pipeline status component', () => {
     it('shows the component if there is a pipeline', () => {
       createWrapper();
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b70923dd0c5e01..a4853638b2d7c2 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -50641,6 +50641,15 @@ msgstr ""
 msgid "SecurityReports|These vulnerabilities were detected in external sources. They are not necessarily tied to your GitLab project. For example, running containers, URLs, and so on."
 msgstr ""
 
+msgid "SecurityReports|This project has reached the maximum number of vulnerabilities it can contain and some of the vulnerabilities couldn't be ingested."
+msgstr ""
+
+msgid "SecurityReports|This project has reached the maximum number of vulnerabilities it can contain. New vulnerabilities will not be created."
+msgstr ""
+
+msgid "SecurityReports|This project is reaching the maximum number of vulnerabilities it can contain."
+msgstr ""
+
 msgid "SecurityReports|This selection is required."
 msgstr ""
 
-- 
GitLab


From 7af6ec237ec7145b7227cb640bdbf62fecc9780a Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Thu, 10 Oct 2024 10:14:58 +0200
Subject: [PATCH 2/2] Move constant closer to the source

---
 .../project/project_vulnerability_report.vue  | 14 +++++++++++-
 .../javascripts/vulnerabilities/constants.js  | 12 ----------
 .../project_vulnerability_report_spec.js      | 22 ++++++++++---------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue b/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
index 7d99899c5d000b..0fba7d5a33634e 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue
@@ -1,16 +1,28 @@
 <script>
 import { difference } from 'lodash';
 import { GlAlert } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { translateScannerNames } from '~/security_configuration/utils';
 import SecurityTrainingPromoBanner from 'ee/security_dashboard/components/project/security_training_promo_banner.vue';
-import { VULNERABILITY_QUOTA } from 'ee/vulnerabilities/constants';
 import VulnerabilityReportTabs from '../shared/vulnerability_report/vulnerability_report_tabs.vue';
 import ProjectPipelineStatus from '../shared/project_pipeline_status.vue';
 import securityScannersQuery from '../../graphql/queries/project_security_scanners.query.graphql';
 import ReportNotConfiguredProject from './report_not_configured_project.vue';
 import SecurityScannerAlert from './security_scanner_alert.vue';
 
+const VULNERABILITY_QUOTA = {
+  critical: s__(
+    'SecurityReports|This project is reaching the maximum number of vulnerabilities it can contain.',
+  ),
+  enforced: s__(
+    'SecurityReports|This project has reached the maximum number of vulnerabilities it can contain. New vulnerabilities will not be created.',
+  ),
+  full: s__(
+    "SecurityReports|This project has reached the maximum number of vulnerabilities it can contain and some of the vulnerabilities couldn't be ingested.",
+  ),
+};
+
 export default {
   components: {
     ReportNotConfiguredProject,
diff --git a/ee/app/assets/javascripts/vulnerabilities/constants.js b/ee/app/assets/javascripts/vulnerabilities/constants.js
index ea7087efd53b20..53d533d0b8c7ef 100644
--- a/ee/app/assets/javascripts/vulnerabilities/constants.js
+++ b/ee/app/assets/javascripts/vulnerabilities/constants.js
@@ -142,15 +142,3 @@ export const VULNERABILITY_TAB_NAMES = Object.freeze({
 export const VULNERABILITY_TAB_INDEX_TO_NAME = {
   1: CODE_FLOW_TAB_URL,
 };
-
-export const VULNERABILITY_QUOTA = {
-  critical: s__(
-    'SecurityReports|This project is reaching the maximum number of vulnerabilities it can contain.',
-  ),
-  enforced: s__(
-    'SecurityReports|This project has reached the maximum number of vulnerabilities it can contain. New vulnerabilities will not be created.',
-  ),
-  full: s__(
-    "SecurityReports|This project has reached the maximum number of vulnerabilities it can contain and some of the vulnerabilities couldn't be ingested.",
-  ),
-};
diff --git a/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js b/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
index 6390b9b4225408..9144c78d968f08 100644
--- a/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js
@@ -11,7 +11,6 @@ import ProjectPipelineStatus from 'ee/security_dashboard/components/shared/proje
 import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 import securityScannersQuery from 'ee/security_dashboard/graphql/queries/project_security_scanners.query.graphql';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
-import { VULNERABILITY_QUOTA } from 'ee/vulnerabilities/constants';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -103,15 +102,18 @@ describe('Project vulnerability report app component', () => {
     const findQuotaWarning = () => wrapper.findComponent(GlAlert);
 
     it.each`
-      quotaStatus
-      ${'enforced'}
-      ${'critical'}
-      ${'full'}
-    `('displays a warning message when quota status is $quotaStatus', ({ quotaStatus }) => {
-      createWrapper({ vulnerabilityQuota: quotaStatus });
-      expect(findQuotaWarning().exists()).toBe(true);
-      expect(wrapper.findByText(VULNERABILITY_QUOTA[quotaStatus]).exists()).toBe(true);
-    });
+      quotaStatus   | expectedMessage
+      ${'enforced'} | ${'This project has reached the maximum number of vulnerabilities it can contain. New vulnerabilities will not be created.'}
+      ${'critical'} | ${'This project is reaching the maximum number of vulnerabilities it can contain.'}
+      ${'full'}     | ${"This project has reached the maximum number of vulnerabilities it can contain and some of the vulnerabilities couldn't be ingested."}
+    `(
+      'displays a warning message when quota status is $quotaStatus',
+      ({ quotaStatus, expectedMessage }) => {
+        createWrapper({ vulnerabilityQuota: quotaStatus });
+        expect(findQuotaWarning().exists()).toBe(true);
+        expect(wrapper.findByText(expectedMessage).exists()).toBe(true);
+      },
+    );
 
     it('displays no warning message when the vulnerability quota status is not provided', () => {
       createWrapper({ vulnerabilityQuota: '' });
-- 
GitLab