Merge branch '300756-create-feature-flag' into 'master'

Introduce pipeline graphql feature flag [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!60138

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({