Merge branch '213821-add-project-severity-status' into 'master'

Add vulnerable projects table

See merge request gitlab-org/gitlab!29158

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

 <script>
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import GroupSecurityVulnerabilities from './first_class_group_security_dashboard_vulnerabilities.vue';
+import VulnerabilitySeverity from './vulnerability_severity.vue';
 
 export default {
   components: {
     SecurityDashboardLayout,
     GroupSecurityVulnerabilities,
+    VulnerabilitySeverity,
   },
   props: {
     dashboardDocumentation: {
@@ -20,6 +22,10 @@ export default {
       type: String,
       required: true,
     },
+    vulnerableProjectsEndpoint: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -31,5 +37,8 @@ export default {
       :empty-state-svg-path="emptyStateSvgPath"
       :group-full-path="groupFullPath"
     />
+    <template #aside>
+      <vulnerability-severity :endpoint="vulnerableProjectsEndpoint" />
+    </template>
   </security-dashboard-layout>
 </template>

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

@@ -4,6 +4,10 @@ import createDefaultClient from '~/lib/graphql';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import FirstClassProjectSecurityDashboard from './components/first_class_project_security_dashboard.vue';
 import FirstClassGroupSecurityDashboard from './components/first_class_group_security_dashboard.vue';
+import createStore from './store';
+import createRouter from './store/router';
+import projectsPlugin from './store/plugins/projects';
+import syncWithRouter from './store/plugins/sync_with_router';
 
 const isRequired = message => {
   throw new Error(message);
@@ -40,10 +44,16 @@ export default (
   } else if (dashboardType === DASHBOARD_TYPES.GROUP) {
     component = FirstClassGroupSecurityDashboard;
     props.groupFullPath = el.dataset.groupFullPath;
+    props.vulnerableProjectsEndpoint = el.dataset.vulnerableProjectsEndpoint;
   }
 
+  const router = createRouter();
+  const store = createStore({ dashboardType, plugins: [projectsPlugin, syncWithRouter(router)] });
+
   return new Vue({
     el,
+    store,
+    router,
     apolloProvider,
     render(createElement) {
       return createElement(component, { props });

ee/app/controllers/groups/security/dashboard_controller.rb

@@ -3,7 +3,7 @@ class Groups::Security::DashboardController < Groups::ApplicationController
   layout 'group'
 
   before_action only: [:show] do
-    push_frontend_feature_flag(:first_class_vulnerabilities, default: false)
+    push_frontend_feature_flag(:first_class_vulnerabilities)
   end
 
   def show

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

 import { shallowMount } from '@vue/test-utils';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import FirstClassGroupDashboard from 'ee/security_dashboard/components/first_class_group_security_dashboard.vue';
 import FirstClassGroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
+import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
 
 describe('First Class Group Dashboard Component', () => {
   let wrapper;
@@ -8,8 +10,10 @@ describe('First Class Group Dashboard Component', () => {
   const dashboardDocumentation = 'dashboard-documentation';
   const emptyStateSvgPath = 'empty-state-path';
   const groupFullPath = 'group-full-path';
+  const vulnerableProjectsEndpoint = '/vulnerable/projects';
 
   const findGroupVulnerabilities = () => wrapper.find(FirstClassGroupVulnerabilities);
+  const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
 
   const createWrapper = () => {
     return shallowMount(FirstClassGroupDashboard, {
@@ -17,6 +21,10 @@ describe('First Class Group Dashboard Component', () => {
         dashboardDocumentation,
         emptyStateSvgPath,
         groupFullPath,
+        vulnerableProjectsEndpoint,
+      },
+      stubs: {
+        SecurityDashboardLayout,
       },
     });
   };
@@ -36,4 +44,8 @@ describe('First Class Group Dashboard Component', () => {
       groupFullPath,
     });
   });
+
+  it('displays the vulnerability severity in an aside', () => {
+    expect(findVulnerabilitySeverity().exists()).toBe(true);
+  });
 });