Introduce pipeline graphql feature flag

Introduces the feature flag that will be used in order to
migrate the Pipeline Security Dashboard to GraphQL. When
the feature flag is enabled, the Pipeline Security Dashboard
should not render the Vulnerability list. Future MRs will
add additional logic to display the GraphQL version.

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

@@ -3,6 +3,7 @@ import { GlEmptyState } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import { fetchPolicies } from '~/lib/graphql';
 import { s__ } from '~/locale';
+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';
@@ -14,6 +15,7 @@ export default {
     SecurityReportsSummary,
     SecurityDashboard,
   },
+  mixins: [glFeatureFlagMixin()],
   apollo: {
     securityReportSummary: {
       query: pipelineSecurityReportSummaryQuery,
@@ -75,6 +77,9 @@ export default {
     },
   },
   computed: {
+    shouldShowGraphqlVulnerabilityReport() {
+      return this.glFeatures.pipelineSecurityDashboardGraphql;
+    },
     emptyStateProps() {
       return {
         svgPath: this.emptyStateSvgPath,
@@ -107,6 +112,7 @@ export default {
       class="gl-my-5"
     />
     <security-dashboard
+      v-if="!shouldShowGraphqlVulnerabilityReport"
       :vulnerabilities-endpoint="vulnerabilitiesEndpoint"
       :lock-to-project="{ id: projectId }"
       :pipeline-id="pipelineId"

ee/app/controllers/ee/projects/pipelines_controller.rb

@@ -10,6 +10,7 @@ module EE
         before_action :authorize_read_licenses!, only: [:licenses]
         before_action do
           push_frontend_feature_flag(:usage_data_i_testing_full_code_quality_report_total, project, default_enabled: true)
+          push_frontend_feature_flag(:pipeline_security_dashboard_graphql, project, type: :development, default_enabled: :yaml)
         end
       end
 

ee/config/feature_flags/development/pipeline_security_dashboard_graphql.yml

+---
+name: pipeline_security_dashboard_graphql
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/60138
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/328818
+milestone: '13.12'
+type: development
+group: group::threat insights
+default_enabled: false

ee/spec/features/projects/pipelines/pipeline_spec.rb

@@ -153,6 +153,7 @@ RSpec.describe 'Pipeline', :js do
 
     before do
       stub_licensed_features(sast: true, security_dashboard: true)
+      stub_feature_flags(pipeline_security_dashboard_graphql: false)
     end
 
     context 'with a sast artifact' do

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

@@ -24,6 +24,8 @@ describe('Pipeline Security Dashboard component', () => {
   let store;
   let wrapper;
 
+  const findSecurityDashboard = () => wrapper.findComponent(SecurityDashboard);
+
   const factory = (options) => {
     store = new Vuex.Store({
       modules: {
@@ -85,15 +87,39 @@ describe('Pipeline Security Dashboard component', () => {
     });
 
     it('renders the security dashboard', () => {
-      const dashboard = wrapper.find(SecurityDashboard);
-      expect(dashboard.exists()).toBe(true);
-      expect(dashboard.props()).toMatchObject({
+      expect(findSecurityDashboard().props()).toMatchObject({
         pipelineId,
         vulnerabilitiesEndpoint,
       });
     });
   });
 
+  describe(':pipeline_security_dashboard_graphql feature flag', () => {
+    it('does not show the security layout when the feature flag is on', () => {
+      factory({
+        provide: {
+          glFeatures: {
+            pipelineSecurityDashboardGraphql: true,
+          },
+        },
+      });
+
+      expect(findSecurityDashboard().exists()).toBe(false);
+    });
+
+    it('shows the security layout when the feature flag is off', () => {
+      factory({
+        provide: {
+          glFeatures: {
+            pipelineSecurityDashboardGraphql: false,
+          },
+        },
+      });
+
+      expect(findSecurityDashboard().exists()).toBe(true);
+    });
+  });
+
   describe('with a stubbed dashboard for slot testing', () => {
     beforeEach(() => {
       factory({