Refactor manage_via_mr Component

This commit solves https://gitlab.com/gitlab-org/gitlab/-/issues/326249.
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.

app/assets/javascripts/security_configuration/components/configuration_table.vue

 <script>
 import { GlLink, GlTable, GlAlert } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
+import ManageViaMR from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import {
   REPORT_TYPE_SAST,
   REPORT_TYPE_DAST,
@@ -11,8 +12,8 @@ import {
   REPORT_TYPE_API_FUZZING,
   REPORT_TYPE_LICENSE_COMPLIANCE,
 } from '~/vue_shared/security_reports/constants';
-import ManageSast from './manage_sast.vue';
-import { scanners } from './scanners_constants';
+
+import { scanners } from './constants';
 import Upgrade from './upgrade.vue';
 
 const borderClasses = 'gl-border-b-1! gl-border-b-solid! gl-border-gray-100!';
@@ -40,7 +41,7 @@ export default {
     },
     getComponentForItem(item) {
       const COMPONENTS = {
-        [REPORT_TYPE_SAST]: ManageSast,
+        [REPORT_TYPE_SAST]: ManageViaMR,
         [REPORT_TYPE_DAST]: Upgrade,
         [REPORT_TYPE_DAST_PROFILES]: Upgrade,
         [REPORT_TYPE_DEPENDENCY_SCANNING]: Upgrade,
@@ -49,7 +50,6 @@ export default {
         [REPORT_TYPE_API_FUZZING]: Upgrade,
         [REPORT_TYPE_LICENSE_COMPLIANCE]: Upgrade,
       };
-
       return COMPONENTS[item.type];
     },
   },
@@ -95,7 +95,12 @@ export default {
       </template>
 
       <template #cell(manage)="{ item }">
-        <component :is="getComponentForItem(item)" :data-testid="item.type" @error="onError" />
+        <component
+          :is="getComponentForItem(item)"
+          :feature="item"
+          :data-testid="item.type"
+          @error="onError"
+        />
       </template>
     </gl-table>
   </div>

app/assets/javascripts/security_configuration/components/scanners_constants.js → app/assets/javascripts/security_configuration/components/constants.js

 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, s__ } from '~/locale';
 
+import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
 import {
   REPORT_TYPE_SAST,
   REPORT_TYPE_DAST,
@@ -134,3 +135,18 @@ export const scanners = [
     type: REPORT_TYPE_LICENSE_COMPLIANCE,
   },
 ];
+
+export const featureToMutationMap = {
+  [REPORT_TYPE_SAST]: {
+    mutationId: 'configureSast',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSastMutation,
+      variables: {
+        input: {
+          projectPath,
+          configuration: { global: [], pipeline: [], analyzers: [] },
+        },
+      },
+    }),
+  },
+};

app/assets/javascripts/security_configuration/components/manage_sast.vue

-<script>
-import { GlButton } from '@gitlab/ui';
-import { redirectTo } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
-import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
-
-export default {
-  components: {
-    GlButton,
-  },
-  inject: {
-    projectPath: {
-      from: 'projectPath',
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  methods: {
-    async mutate() {
-      this.isLoading = true;
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: configureSastMutation,
-          variables: {
-            input: {
-              projectPath: this.projectPath,
-              configuration: { global: [], pipeline: [], analyzers: [] },
-            },
-          },
-        });
-        const { errors, successPath } = data.configureSast;
-
-        if (errors.length > 0) {
-          throw new Error(errors[0]);
-        }
-
-        if (!successPath) {
-          throw new Error(s__('SecurityConfiguration|SAST merge request creation mutation failed'));
-        }
-
-        redirectTo(successPath);
-      } catch (e) {
-        this.$emit('error', e.message);
-        this.isLoading = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button :loading="isLoading" variant="success" category="secondary" @click="mutate">{{
-    s__('SecurityConfiguration|Configure via merge request')
-  }}</gl-button>
-</template>

app/assets/javascripts/security_configuration/components/upgrade.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { UPGRADE_CTA } from './scanners_constants';
+import { UPGRADE_CTA } from './constants';
 
 export default {
   components: {

ee/app/assets/javascripts/security_configuration/components/manage_via_mr.vue → app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue

 <script>
 import { GlButton } from '@gitlab/ui';
+import { featureToMutationMap } from 'ee_else_ce/security_configuration/components/constants';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
-import apolloProvider from '../graphql/provider';
-import { featureToMutationMap } from './constants';
+import apolloProvider from '../provider';
 
 export default {
   apolloProvider,
   components: {
     GlButton,
   },
-  inject: {
-    projectPath: {
-      from: 'projectPath',
-      default: '',
-    },
-  },
+  inject: ['projectPath'],
   props: {
     feature: {
       type: Object,
@@ -36,13 +31,9 @@ export default {
     async mutate() {
       this.isLoading = true;
       try {
-        const { data } = await this.$apollo.mutate({
-          mutation: this.featureSettings.mutation,
-          variables: {
-            fullPath: this.projectPath,
-          },
-        });
-        const { errors, successPath } = data[this.featureSettings.type];
+        const mutation = this.featureSettings;
+        const { data } = await this.$apollo.mutate(mutation.getMutationPayload(this.projectPath));
+        const { errors, successPath } = data[mutation.mutationId];
 
         if (errors.length > 0) {
           throw new Error(errors[0]);

ee/app/assets/javascripts/security_configuration/components/app.vue

@@ -2,7 +2,7 @@
 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { s__, __ } from '~/locale';
-import { scanners } from '~/security_configuration/components/scanners_constants';
+import { scanners } from '~/security_configuration/components/constants';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AutoFixSettings from './auto_fix_settings.vue';

ee/app/assets/javascripts/security_configuration/components/constants.js

 import { s__ } from '~/locale';
+import { featureToMutationMap as featureToMutationMapCE } from '~/security_configuration/components/constants';
 import {
   REPORT_TYPE_DEPENDENCY_SCANNING,
   REPORT_TYPE_SECRET_DETECTION,
@@ -23,12 +24,21 @@ export const CUSTOM_VALUE_MESSAGE = s__(
 );
 
 export const featureToMutationMap = {
+  ...featureToMutationMapCE,
   [REPORT_TYPE_DEPENDENCY_SCANNING]: {
-    type: 'configureDependencyScanning',
-    mutation: configureDependencyScanningMutation,
+    mutationId: 'configureDependencyScanning',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureDependencyScanningMutation,
+      variables: {
+        fullPath: projectPath,
+      },
+    }),
   },
   [REPORT_TYPE_SECRET_DETECTION]: {
-    type: 'configureSecretDetection',
-    mutation: configureSecretDetectionMutation,
+    mutationId: 'configureSecretDetection',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSecretDetectionMutation,
+      variables: { fullPath: projectPath },
+    }),
   },
 };

ee/app/assets/javascripts/security_configuration/components/manage_feature.vue

 <script>
 import { propsUnion } from '~/vue_shared/components/lib/utils/props_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import {
   REPORT_TYPE_DAST_PROFILES,
   REPORT_TYPE_DEPENDENCY_SCANNING,
@@ -8,7 +9,6 @@ import {
 } from '~/vue_shared/security_reports/constants';
 import ManageDastProfiles from './manage_dast_profiles.vue';
 import ManageGeneric from './manage_generic.vue';
-import ManageViaMr from './manage_via_mr.vue';
 
 const scannerComponentMap = {
   [REPORT_TYPE_DAST_PROFILES]: ManageDastProfiles,

ee/app/assets/javascripts/security_configuration/index.js

@@ -18,6 +18,7 @@ export const initSecurityConfiguration = (el) => {
     containerScanningHelpPath,
     dependencyScanningHelpPath,
     toggleAutofixSettingEndpoint,
+    projectPath,
     gitlabCiHistoryPath,
   } = el.dataset;
 
@@ -26,6 +27,9 @@ export const initSecurityConfiguration = (el) => {
     components: {
       SecurityConfigurationApp,
     },
+    provide: {
+      projectPath,
+    },
     render(createElement) {
       return createElement(SecurityConfigurationApp, {
         props: {

ee/app/views/projects/security/configuration/show.html.haml

@@ -6,6 +6,7 @@
 - else
   #js-security-configuration{ data: { **@configuration.to_html_data_attribute,
     auto_fix_help_path: '/',
+    project_path: @project.full_path,
     toggle_autofix_setting_endpoint: 'configuration/auto_fix',
     container_scanning_help_path: help_page_path('user/application_security/container_scanning/index'),
     dependency_scanning_help_path: help_page_path('user/application_security/dependency_scanning/index') } }

ee/spec/frontend/security_configuration/components/app_spec.js

@@ -5,7 +5,7 @@ import SecurityConfigurationApp from 'ee/security_configuration/components/app.v
 import ConfigurationTable from 'ee/security_configuration/components/configuration_table.vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import stubChildren from 'helpers/stub_children';
-import { scanners } from '~/security_configuration/components/scanners_constants';
+import { scanners } from '~/security_configuration/components/constants';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { generateFeatures } from './helpers';
 

ee/spec/frontend/security_configuration/components/helpers.js

-import { scanners } from '~/security_configuration/components/scanners_constants';
+import { scanners } from '~/security_configuration/components/constants';
 
 export const generateFeatures = (n, overrides = {}) => {
   return [...Array(n).keys()].map((i) => ({

ee/spec/frontend/security_configuration/components/manage_feature_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import ManageDastProfiles from 'ee/security_configuration/components/manage_dast_profiles.vue';
 import ManageFeature from 'ee/security_configuration/components/manage_feature.vue';
 import ManageGeneric from 'ee/security_configuration/components/manage_generic.vue';
-import ManageViaMr from 'ee/security_configuration/components/manage_via_mr.vue';
+import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import {
   REPORT_TYPE_DAST_PROFILES,
   REPORT_TYPE_DEPENDENCY_SCANNING,

ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js

@@ -10,9 +10,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
 import { makeEntities, makeSastCiConfiguration } from '../../helpers';
 
-jest.mock('~/lib/utils/url_utility', () => ({
-  redirectTo: jest.fn(),
-}));
+jest.mock('~/lib/utils/url_utility');
 
 const projectPath = 'group/project';
 const sastAnalyzersDocumentationPath = '/help/sast/analyzers';

locale/gitlab.pot

@@ -28067,9 +28067,6 @@ msgstr ""
 msgid "SecurityConfiguration|Configure via Merge Request"
 msgstr ""
 
-msgid "SecurityConfiguration|Configure via merge request"
-msgstr ""
-
 msgid "SecurityConfiguration|Could not retrieve configuration data. Please refresh the page, or try again later."
 msgstr ""
 
@@ -28106,9 +28103,6 @@ msgstr ""
 msgid "SecurityConfiguration|SAST Configuration"
 msgstr ""
 
-msgid "SecurityConfiguration|SAST merge request creation mutation failed"
-msgstr ""
-
 msgid "SecurityConfiguration|Security Control"
 msgstr ""
 

spec/frontend/security_configuration/configuration_table_spec.js

 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ConfigurationTable from '~/security_configuration/components/configuration_table.vue';
-import { scanners, UPGRADE_CTA } from '~/security_configuration/components/scanners_constants';
+import { scanners, UPGRADE_CTA } from '~/security_configuration/components/constants';
 
 import {
   REPORT_TYPE_SAST,
@@ -12,7 +12,13 @@ describe('Configuration Table Component', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = extendedWrapper(mount(ConfigurationTable, {}));
+    wrapper = extendedWrapper(
+      mount(ConfigurationTable, {
+        provide: {
+          projectPath: 'testProjectPath',
+        },
+      }),
+    );
   };
 
   const findHelpLinks = () => wrapper.findAll('[data-testid="help-link"]');
@@ -30,8 +36,10 @@ describe('Configuration Table Component', () => {
       expect(wrapper.text()).toContain(scanner.name);
       expect(wrapper.text()).toContain(scanner.description);
       if (scanner.type === REPORT_TYPE_SAST) {
-        expect(wrapper.findByTestId(scanner.type).text()).toBe('Configure via merge request');
-      } else if (scanner.type !== REPORT_TYPE_SECRET_DETECTION) {
+        expect(wrapper.findByTestId(scanner.type).text()).toBe('Configure via Merge Request');
+      } else if (scanner.type === REPORT_TYPE_SECRET_DETECTION) {
+        expect(wrapper.findByTestId(scanner.type).exists()).toBe(false);
+      } else {
         expect(wrapper.findByTestId(scanner.type).text()).toMatchInterpolatedText(UPGRADE_CTA);
       }
     });

spec/frontend/security_configuration/manage_sast_spec.js

-import { GlButton } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import { redirectTo } from '~/lib/utils/url_utility';
-import ManageSast from '~/security_configuration/components/manage_sast.vue';
-import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
-
-jest.mock('~/lib/utils/url_utility', () => ({
-  redirectTo: jest.fn(),
-}));
-
-Vue.use(VueApollo);
-
-describe('Manage Sast Component', () => {
-  let wrapper;
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  const successHandler = async () => {
-    return {
-      data: {
-        configureSast: {
-          successPath: 'testSuccessPath',
-          errors: [],
-          __typename: 'ConfigureSastPayload',
-        },
-      },
-    };
-  };
-
-  const noSuccessPathHandler = async () => {
-    return {
-      data: {
-        configureSast: {
-          successPath: '',
-          errors: [],
-          __typename: 'ConfigureSastPayload',
-        },
-      },
-    };
-  };
-
-  const errorHandler = async () => {
-    return {
-      data: {
-        configureSast: {
-          successPath: 'testSuccessPath',
-          errors: ['foo'],
-          __typename: 'ConfigureSastPayload',
-        },
-      },
-    };
-  };
-
-  const pendingHandler = () => new Promise(() => {});
-
-  function createMockApolloProvider(handler) {
-    const requestHandlers = [[configureSastMutation, handler]];
-
-    return createMockApollo(requestHandlers);
-  }
-
-  function createComponent(options = {}) {
-    const { mockApollo } = options;
-    wrapper = extendedWrapper(
-      mount(ManageSast, {
-        apolloProvider: mockApollo,
-      }),
-    );
-  }
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('should render Button with correct text', () => {
-    createComponent();
-    expect(findButton().text()).toContain('Configure via merge request');
-  });
-
-  describe('given a successful response', () => {
-    beforeEach(() => {
-      const mockApollo = createMockApolloProvider(successHandler);
-      createComponent({ mockApollo });
-    });
-
-    it('should call redirect helper with correct value', async () => {
-      await wrapper.trigger('click');
-      await waitForPromises();
-      expect(redirectTo).toHaveBeenCalledTimes(1);
-      expect(redirectTo).toHaveBeenCalledWith('testSuccessPath');
-      // This is done for UX reasons. If the loading prop is set to false
-      // on success, then there's a period where the button is clickable
-      // again. Instead, we want the button to display a loading indicator
-      // for the remainder of the lifetime of the page (i.e., until the
-      // browser can start painting the new page it's been redirected to).
-      expect(findButton().props().loading).toBe(true);
-    });
-  });
-
-  describe('given a pending response', () => {
-    beforeEach(() => {
-      const mockApollo = createMockApolloProvider(pendingHandler);
-      createComponent({ mockApollo });
-    });
-
-    it('renders spinner correctly', async () => {
-      expect(findButton().props('loading')).toBe(false);
-      await wrapper.trigger('click');
-      await waitForPromises();
-      expect(findButton().props('loading')).toBe(true);
-    });
-  });
-
-  describe.each`
-    handler                 | message
-    ${noSuccessPathHandler} | ${'SAST merge request creation mutation failed'}
-    ${errorHandler}         | ${'foo'}
-  `('given an error response', ({ handler, message }) => {
-    beforeEach(() => {
-      const mockApollo = createMockApolloProvider(handler);
-      createComponent({ mockApollo });
-    });
-
-    it('should catch and emit error', async () => {
-      await wrapper.trigger('click');
-      await waitForPromises();
-      expect(wrapper.emitted('error')).toEqual([[message]]);
-      expect(findButton().props('loading')).toBe(false);
-    });
-  });
-});

spec/frontend/security_configuration/upgrade_spec.js

 import { mount } from '@vue/test-utils';
-import { UPGRADE_CTA } from '~/security_configuration/components/scanners_constants';
+import { UPGRADE_CTA } from '~/security_configuration/components/constants';
 import Upgrade from '~/security_configuration/components/upgrade.vue';
 
 const TEST_URL = 'http://www.example.test';

ee/spec/frontend/security_configuration/components/manage_via_mr_spec.js → spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js

@@ -2,13 +2,13 @@ import { GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import ManageViaMr from 'ee/security_configuration/components/manage_via_mr.vue';
 import configureDependencyScanningMutation from 'ee/security_configuration/graphql/configure_dependency_scanning.mutation.graphql';
 import configureSecretDetectionMutation from 'ee/security_configuration/graphql/configure_secret_detection.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { redirectTo } from '~/lib/utils/url_utility';
+import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import {
   REPORT_TYPE_DEPENDENCY_SCANNING,
   REPORT_TYPE_SECRET_DETECTION,
@@ -23,15 +23,12 @@ describe('ManageViaMr component', () => {
   let wrapper;
 
   const findButton = () => wrapper.findComponent(GlButton);
-
   describe.each`
-    featureName              | featureType                        | mutation                               | mutationType
+    featureName              | featureType                        | mutation                               | mutationId
     ${'Dependency Scanning'} | ${REPORT_TYPE_DEPENDENCY_SCANNING} | ${configureDependencyScanningMutation} | ${'configureDependencyScanning'}
     ${'Secret Detection'}    | ${REPORT_TYPE_SECRET_DETECTION}    | ${configureSecretDetectionMutation}    | ${'configureSecretDetection'}
-  `('$featureType', ({ featureName, featureType, mutation, mutationType }) => {
-    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(
-      mutationType,
-    );
+  `('$featureType', ({ featureName, mutation, featureType, mutationId }) => {
+    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(mutationId);
     const successHandler = async () => buildConfigureSecurityFeatureMock();
     const noSuccessPathHandler = async () =>
       buildConfigureSecurityFeatureMock({
@@ -53,11 +50,14 @@ describe('ManageViaMr component', () => {
       wrapper = extendedWrapper(
         mount(ManageViaMr, {
           apolloProvider: mockApollo,
+          provide: {
+            projectPath: 'testProjectPath',
+          },
           propsData: {
             feature: {
               name: featureName,
-              configured: isFeatureConfigured,
               type: featureType,
+              configured: isFeatureConfigured,
             },
           },
         }),