Dependency Scanning - MVC to enable within the UI - Frontend [RUN ALL RSPEC] [RUN AS-IF-FOSS]

• Related to:
  • #325694 (closed)
  • #282533 (closed)

Rollout Issue for Feature Flag #326005 (closed)

What does this MR do?

This creates a new component to enable security feature via a merge request created through the API. The new component is used to enable Dependency Scanning when the adequate feature flag is enabled.

How to test this?

1. Enable the sec_dependency_scanning_ui_enable feature flag:

echo "Feature.enable(:sec_dependency_scanning_ui_enable)" | rails c

2. Apply the following patch to mock the mutation client-side:

diff --git a/ee/app/assets/javascripts/security_configuration/graphql/configure_dependency_scanning.mutation.graphql b/ee/app/assets/javascripts/security_configuration/graphql/configure_dependency_scanning.mutation.graphql
index b07105bdcdd..3c2a6e5f653 100644
--- a/ee/app/assets/javascripts/security_configuration/graphql/configure_dependency_scanning.mutation.graphql
+++ b/ee/app/assets/javascripts/security_configuration/graphql/configure_dependency_scanning.mutation.graphql
@@ -1,5 +1,5 @@
 mutation configureDependencyScanning($fullPath: ID!) {
-  configureDependencyScanning(fullPath: $fullPath) {
+  configureDependencyScanning(fullPath: $fullPath) @client {
     successPath
     errors
   }
diff --git a/ee/app/assets/javascripts/security_configuration/graphql/provider.js b/ee/app/assets/javascripts/security_configuration/graphql/provider.js
index ef96b443da8..24f2dc079a3 100644
--- a/ee/app/assets/javascripts/security_configuration/graphql/provider.js
+++ b/ee/app/assets/javascripts/security_configuration/graphql/provider.js
@@ -2,8 +2,20 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 
+const resolvers = {
+  Mutation: {
+    configureDependencyScanning: () => {
+      return {
+        successPath: '',
+        errors: [],
+        __typename: 'ConfigureDependencyScanning',
+      };
+    },
+  },
+};
+
 Vue.use(VueApollo);
 
 export default new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(resolvers),
 });

3. Visit a project's security configuration page at /:namespace/:project/-/security/configuration (the project should have Dependency Scanning disabled).
4. Click on Configure via Merge Request.

Screenshots (strongly suggested)

Before (or feature flag disabled)	Dependency Scanning not enabled	Dependency Scanning enabled

Does this MR meet the acceptance criteria?

Conformity

• 📋 Does this MR need a changelog?
  • I have included a changelog entry.
  • I have not included a changelog entry because _____.
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team