Refactor manage via mr component to be shared through CE and EE [RUN AS-IF-FOSS]

What does this MR do?

This MR solves #326249 (closed)

The security Configuration Table for CE and EE has been refactored. Both of those tables support the ability to enable scanners via Merge Request. Previously this was handled separately leading to duplicate code. This MR introduces a shared component manage_via_mr.vue which takes in mutations as props and handles them for CE and EE and can be easily reused since we are planning to enable more Scanners via MR in the future.

Disclaimer

This MR was merged before !59001 (merged) It was reverted since it broke master. This was because of a test failing when it was ran in FOSS_ONLY mode. More Details here #328830 (closed)

To run the mentioned test:

FOSS_ONLY=1 yarn run jest spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js

How to reproduce

CE

For the CE configuration Table we currently only support to enable SAST via MR.

1. start gdk in CE
2. go to any Project
3. Security & Compliance -> Configuration
4. Click Enable via Merge Request in the SAST row

EE

For the EE configuration Table we will support to enable Dependency Scanning and Secret Detection via MR for now. The Backend work for this is in progress, the Frontend Features are therefore hidden behind feature-flags.

1. Enable the sec_secret_detection_ui_enable feature flag.

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

2. Enable the secDependencyScanningUiEnable feature flag.

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

3. apply this patch to mock the mutations

diff --git a/app/assets/javascripts/vue_shared/security_configuration/provider.js b/app/assets/javascripts/vue_shared/security_configuration/provider.js
index ef96b443da8..e46c3f7ee33 100644
--- a/app/assets/javascripts/vue_shared/security_configuration/provider.js
+++ b/app/assets/javascripts/vue_shared/security_configuration/provider.js
@@ -2,8 +2,27 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';

+const resolvers = {
+  Mutation: {
+    configureSecretDetection: () => {
+      return {
+        successPath: '/success',
+        errors: [],
+        __typename: 'configureSecretDetection',
+      };
+    },
+    configureDependencyScanning: () => {
+      return {
+        successPath: '/success',
+        errors: [],
+        __typename: 'configureDependencyScanning',
+      };
+    },
+  },
+};
+
 Vue.use(VueApollo);

 export default new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(resolvers),
 });
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/configure_secret_detection.mutation.graphql b/ee/app/assets/javascripts/security_configuration/graphql/configure_secret_detection.mutation.graphql
index 2fd4b0982df..1d8cbee288a 100644
--- a/ee/app/assets/javascripts/security_configuration/graphql/configure_secret_detection.mutation.graphql
+++ b/ee/app/assets/javascripts/security_configuration/graphql/configure_secret_detection.mutation.graphql
@@ -1,5 +1,5 @@
 mutation configureSecretDetection($fullPath: ID!) {
-  configureSecretDetection(fullPath: $fullPath) {
+  configureSecretDetection(fullPath: $fullPath) @client {
     successPath
     errors
   }

4. go to any Project Security & Compliance -> Configuration
5. Click the enable via Merge Request Buttons, they should redirect you to /success

Screenshots (strongly suggested)

• no visual changes

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 this is a refactoring without visual changes.
• [-] 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