Merge branch '208407-remove-empty-string-for-severity' into 'master'

Use v-if instead of passing empty string for severity

See merge request gitlab-org/gitlab!53218

ee/app/assets/javascripts/environments/components/environment_alert.vue

@@ -53,7 +53,7 @@ export default {
       return this.alert?.prometheusAlert?.humanizedText;
     },
     severity() {
-      return this.alert?.severity || '';
+      return this.alert?.severity;
     },
   },
   classes: [
@@ -71,7 +71,7 @@ export default {
   <div v-if="alert" :class="$options.classes" data-testid="alert">
     <gl-sprintf :message="$options.translations.alertText">
       <template #severity>
-        <severity-badge :severity="severity" class="gl-display-inline" />
+        <severity-badge v-if="severity" :severity="severity" class="gl-display-inline" />
       </template>
       <template #startedAt>
         <span v-gl-tooltip :title="tooltipTitle(alert.startedAt)">

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

@@ -43,9 +43,6 @@ export default {
   computed: {
     ...mapState(['dashboardType']),
     ...mapState('vulnerabilities', ['selectedVulnerabilities']),
-    severity() {
-      return this.vulnerability.severity || ' ';
-    },
     vulnerabilityIdentifier() {
       return getPrimaryIdentifier(this.vulnerability.identifiers, 'external_type');
     },
@@ -126,7 +123,11 @@ export default {
     <div class="table-section section-15">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Severity') }}</div>
       <div class="table-mobile-content">
-        <severity-badge :severity="severity" class="text-right text-md-left" />
+        <severity-badge
+          v-if="vulnerability.severity"
+          :severity="vulnerability.severity"
+          class="text-right text-md-left"
+        />
       </div>
     </div>
 

ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue

@@ -22,7 +22,7 @@ export default {
       return Object.keys(SEVERITY_CLASS_NAME_MAP).includes(this.severityKey);
     },
     severityKey() {
-      return this.severity.toLowerCase();
+      return this.severity?.toLowerCase();
     },
     className() {
       return SEVERITY_CLASS_NAME_MAP[this.severityKey];

ee/spec/frontend/environments/environment_alert_spec.js

@@ -23,6 +23,8 @@ describe('Environment Alert', () => {
     });
   };
 
+  const findSeverityBadge = () => wrapper.find(SeverityBadge);
+
   beforeEach(() => {
     factory();
   });
@@ -59,14 +61,17 @@ describe('Environment Alert', () => {
       expect(link.attributes('href')).toBe('/alert/details');
     });
 
-    it('should show a severity badge', () => {
-      expect(wrapper.find(SeverityBadge).props('severity')).toBe('CRITICAL');
+    it('should show a severity badge with the correct severity', () => {
+      const badge = findSeverityBadge();
+      expect(badge.exists()).toBe(true);
+      expect(badge.props('severity')).toBe('CRITICAL');
     });
   });
 
   describe('has no alert', () => {
     it('should display nothing', () => {
       expect(wrapper.find('[data-testid="alert"]').exists()).toBe(false);
+      expect(findSeverityBadge().exists()).toBe(false);
     });
   });
 });

ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -6,6 +6,7 @@ import { VULNERABILITY_MODAL_ID } from 'ee/vue_shared/security_reports/component
 import createStore from 'ee/security_dashboard/store';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { trimText } from 'helpers/text_helper';
+import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
@@ -41,6 +42,7 @@ describe('Security Dashboard Table Row', () => {
   const findAllIssueCreated = () => wrapper.findAll('[data-testid="issues-icon"]');
   const hasSelectedClass = () => wrapper.classes('gl-bg-blue-50');
   const findCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findSeverityBadge = () => wrapper.find(SeverityBadge);
 
   describe('when loading', () => {
     beforeEach(() => {
@@ -51,9 +53,8 @@ describe('Security Dashboard Table Row', () => {
       expect(findLoader().exists()).toBeTruthy();
     });
 
-    it('should render a ` ` for severity', () => {
-      expect(wrapper.vm.severity).toEqual(' ');
-      expect(findContent(0).text()).toEqual('');
+    it('should not render the severity', () => {
+      expect(findSeverityBadge().exists()).toBe(false);
     });
 
     it('should render a `` for the report type and scanner', () => {
@@ -78,7 +79,7 @@ describe('Security Dashboard Table Row', () => {
     });
 
     it('should render the severity', () => {
-      expect(findContent(0).text().toLowerCase()).toContain(vulnerability.severity);
+      expect(findSeverityBadge().text().toLowerCase()).toBe(vulnerability.severity);
     });
 
     it('should render the identifier cell', () => {