Merge branch '207373-add-vulnerable-projects-to-instance-level' into 'master'

Add Project Security Status Table to Instance Level

See merge request gitlab-org/gitlab!29324

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

 <script>
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import InstanceSecurityVulnerabilities from './first_class_instance_security_dashboard_vulnerabilities.vue';
+import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
 
 export default {
   components: {
     SecurityDashboardLayout,
     InstanceSecurityVulnerabilities,
+    VulnerabilitySeverity,
   },
   props: {
     dashboardDocumentation: {
@@ -16,6 +18,10 @@ export default {
       type: String,
       required: true,
     },
+    vulnerableProjectsEndpoint: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -26,5 +32,8 @@ export default {
       :dashboard-documentation="dashboardDocumentation"
       :empty-state-svg-path="emptyStateSvgPath"
     />
+    <template #aside>
+      <vulnerability-severity :endpoint="vulnerableProjectsEndpoint" />
+    </template>
   </security-dashboard-layout>
 </template>

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -49,6 +49,7 @@ export default (
     props.vulnerableProjectsEndpoint = el.dataset.vulnerableProjectsEndpoint;
   } else if (dashboardType === DASHBOARD_TYPES.INSTANCE) {
     component = FirstClassInstanceSecurityDashboard;
+    props.vulnerableProjectsEndpoint = el.dataset.vulnerableProjectsEndpoint;
   }
 
   const router = createRouter();

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

 import { shallowMount } from '@vue/test-utils';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import FirstClassInstanceDashboard from 'ee/security_dashboard/components/first_class_instance_security_dashboard.vue';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
+import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
 
-describe('First Class Group Dashboard Component', () => {
+describe('First Class Instance Dashboard Component', () => {
   let wrapper;
 
   const dashboardDocumentation = 'dashboard-documentation';
   const emptyStateSvgPath = 'empty-state-path';
+  const vulnerableProjectsEndpoint = '/vulnerable/projects';
 
-  const findGroupVulnerabilities = () => wrapper.find(FirstClassInstanceVulnerabilities);
+  const findInstanceVulnerabilities = () => wrapper.find(FirstClassInstanceVulnerabilities);
+  const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
 
   const createWrapper = () => {
     return shallowMount(FirstClassInstanceDashboard, {
       propsData: {
         dashboardDocumentation,
         emptyStateSvgPath,
+        vulnerableProjectsEndpoint,
+      },
+      stubs: {
+        SecurityDashboardLayout,
       },
     });
   };
@@ -28,9 +36,13 @@ describe('First Class Group Dashboard Component', () => {
   });
 
   it('should render correctly', () => {
-    expect(findGroupVulnerabilities().props()).toEqual({
+    expect(findInstanceVulnerabilities().props()).toEqual({
       dashboardDocumentation,
       emptyStateSvgPath,
     });
   });
+
+  it('displays the vulnerability severity in an aside', () => {
+    expect(findVulnerabilitySeverity().exists()).toBe(true);
+  });
 });