Enable vulnerability report when feature flag is on

This tiny MR enables the vulnerability report when the
pipeline_security_dashboard_graphql feature flag is turned on.
A follow up MR will add the logic and the query to fetch the
vulnerabilities inside the vulnerability report when the dashboard
type is pipeline.

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

@@ -7,6 +7,7 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import pipelineSecurityReportSummaryQuery from '../graphql/queries/pipeline_security_report_summary.query.graphql';
 import SecurityDashboard from './security_dashboard_vuex.vue';
 import SecurityReportsSummary from './security_reports_summary.vue';
+import VulnerabilityReport from './vulnerability_report.vue';
 
 export default {
   name: 'PipelineSecurityDashboard',
@@ -14,6 +15,7 @@ export default {
     GlEmptyState,
     SecurityReportsSummary,
     SecurityDashboard,
+    VulnerabilityReport,
   },
   mixins: [glFeatureFlagMixin()],
   apollo: {
@@ -123,5 +125,6 @@ export default {
         <gl-empty-state v-bind="emptyStateProps" />
       </template>
     </security-dashboard>
+    <vulnerability-report v-else />
   </div>
 </template>

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

@@ -98,6 +98,12 @@ export default {
     isProject() {
       return this.dashboardType === DASHBOARD_TYPES.PROJECT;
     },
+    isPipeline() {
+      return this.dashboardType === DASHBOARD_TYPES.PIPELINE;
+    },
+    shouldShowSurvey() {
+      return !this.isPipeline;
+    },
     isDashboardConfigured() {
       return this.isProject
         ? Boolean(this.pipeline?.id)
@@ -125,7 +131,7 @@ export default {
   <div>
     <gl-loading-icon v-if="!projectsWereFetched" size="lg" class="gl-mt-6" />
     <template v-else-if="!isDashboardConfigured">
-      <survey-request-banner class="gl-mt-5" />
+      <survey-request-banner v-if="shouldShowSurvey" class="gl-mt-5" />
       <dashboard-not-configured-group v-if="isGroup" />
       <dashboard-not-configured-instance v-else-if="isInstance" />
       <dashboard-not-configured-project v-else-if="isProject" />

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

@@ -37,6 +37,9 @@ export default () => {
     store: createDashboardStore({
       dashboardType: DASHBOARD_TYPES.PIPELINE,
     }),
+    provide: {
+      dashboardType: DASHBOARD_TYPES.PIPELINE,
+    },
     render(createElement) {
       return createElement(PipelineSecurityDashboard, {
         props: {

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

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import PipelineSecurityDashboard from 'ee/security_dashboard/components/pipeline_security_dashboard.vue';
 import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 import SecurityReportsSummary from 'ee/security_dashboard/components/security_reports_summary.vue';
+import VulnerabilityReport from 'ee/security_dashboard/components/vulnerability_report.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,6 +26,7 @@ describe('Pipeline Security Dashboard component', () => {
   let wrapper;
 
   const findSecurityDashboard = () => wrapper.findComponent(SecurityDashboard);
+  const findVulnerabilityReport = () => wrapper.findComponent(VulnerabilityReport);
 
   const factory = (options) => {
     store = new Vuex.Store({
@@ -95,27 +97,23 @@ describe('Pipeline Security Dashboard component', () => {
   });
 
   describe(':pipeline_security_dashboard_graphql feature flag', () => {
-    it('does not show the security layout when the feature flag is on', () => {
+    const factoryWithFeatureFlag = (value) =>
       factory({
         provide: {
           glFeatures: {
-            pipelineSecurityDashboardGraphql: true,
+            pipelineSecurityDashboardGraphql: value,
           },
         },
       });
 
+    it('does not show the security layout when the feature flag is on but the vulnerability report', () => {
+      factoryWithFeatureFlag(true);
       expect(findSecurityDashboard().exists()).toBe(false);
+      expect(findVulnerabilityReport().exists()).toBe(true);
     });
 
     it('shows the security layout when the feature flag is off', () => {
-      factory({
-        provide: {
-          glFeatures: {
-            pipelineSecurityDashboardGraphql: false,
-          },
-        },
-      });
-
+      factoryWithFeatureFlag(false);
       expect(findSecurityDashboard().exists()).toBe(true);
     });
   });