Make code-snippet modal resuable in Security Configuration

This move ConfigurationSnippetModal component out of
API Fuzzing to Security Configuration component
lists to make it reusable

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

@@ -11,16 +11,17 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
+import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
+import { CONFIGURATION_SNIPPET_MODAL_ID } from 'ee/security_configuration/components/constants';
 import { isEmptyValue } from '~/lib/utils/forms';
 import { __, s__ } from '~/locale';
 import { CODE_SNIPPET_SOURCE_API_FUZZING } from '~/pipeline_editor/components/code_snippet_alert/constants';
 import DropdownInput from '../../components/dropdown_input.vue';
 import DynamicFields from '../../components/dynamic_fields.vue';
 import FormInput from '../../components/form_input.vue';
-import { SCAN_MODES, CONFIGURATION_SNIPPET_MODAL_ID } from '../constants';
+import { SCAN_MODES } from '../constants';
 import apiFuzzingCiConfigurationCreate from '../graphql/api_fuzzing_ci_configuration_create.mutation.graphql';
 import { insertTips } from '../utils';
-import ConfigurationSnippetModal from './configuration_snippet_modal.vue';
 
 export default {
   CONFIGURATION_SNIPPET_MODAL_ID,
@@ -336,6 +337,7 @@ export default {
       :ci-yaml-edit-url="ciYamlEditPath"
       :yaml="configurationYamlWithTips"
       :redirect-param="$options.CODE_SNIPPET_SOURCE_API_FUZZING"
+      scan-type="API Fuzzing"
     />
   </form>
 </template>

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

@@ -26,5 +26,3 @@ export const SCAN_MODES = {
     ),
   },
 };
-
-export const CONFIGURATION_SNIPPET_MODAL_ID = 'CONFIGURATION_SNIPPET_MODAL_ID';

ee/app/assets/javascripts/security_configuration/api_fuzzing/components/configuration_snippet_modal.vue → ee/app/assets/javascripts/security_configuration/components/configuration_snippet_modal.vue

@@ -2,8 +2,9 @@
 import { GlModal } from '@gitlab/ui';
 import Clipboard from 'clipboard';
 import { getBaseURL, setUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { sprintf, s__ } from '~/locale';
 import { CODE_SNIPPET_SOURCE_URL_PARAM } from '~/pipeline_editor/components/code_snippet_alert/constants';
-import { CONFIGURATION_SNIPPET_MODAL_ID } from '../constants';
+import { CONFIGURATION_SNIPPET_MODAL_ID } from './constants';
 
 export default {
   CONFIGURATION_SNIPPET_MODAL_ID,
@@ -23,6 +24,17 @@ export default {
       type: String,
       required: true,
     },
+    scanType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    modalTitle() {
+      return sprintf(s__('SecurityConfiguration|Code snippet for the %{scanType} configuration'), {
+        scanType: this.scanType,
+      });
+    },
   },
   methods: {
     show() {
@@ -58,22 +70,22 @@ export default {
   <gl-modal
     ref="modal"
     :action-primary="{
-      text: s__('APIFuzzing|Copy code and open .gitlab-ci.yml file'),
+      text: s__('SecurityConfiguration|Copy code and open .gitlab-ci.yml file'),
       attributes: [{ variant: 'confirm' }, { id: 'copy-yaml-snippet-and-edit-button' }],
     }"
     :action-secondary="{
-      text: s__('APIFuzzing|Copy code only'),
+      text: s__('SecurityConfiguration|Copy code only'),
       attributes: [{ variant: 'default' }, { id: 'copy-yaml-snippet-button' }],
     }"
     :action-cancel="{
       text: __('Cancel'),
     }"
     :modal-id="$options.CONFIGURATION_SNIPPET_MODAL_ID"
-    :title="s__('APIFuzzing|Code snippet for the API Fuzzing configuration')"
+    :title="modalTitle"
     @hide="onHide"
     @primary="copySnippet"
     @secondary="copySnippet(false)"
   >
-    <pre><code data-testid="api-fuzzing-modal-yaml-snippet" v-text="yaml"></code></pre>
+    <pre><code data-testid="configuration-modal-yaml-snippet" v-text="yaml"></code></pre>
   </gl-modal>
 </template>

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

@@ -48,3 +48,5 @@ export const featureToMutationMap = {
     }),
   },
 };
+
+export const CONFIGURATION_SNIPPET_MODAL_ID = 'CONFIGURATION_SNIPPET_MODAL_ID';

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

@@ -2,11 +2,9 @@ import { GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { merge } from 'lodash';
 import ConfigurationForm from 'ee/security_configuration/api_fuzzing/components/configuration_form.vue';
-import ConfigurationSnippetModal from 'ee/security_configuration/api_fuzzing/components/configuration_snippet_modal.vue';
-import {
-  SCAN_MODES,
-  CONFIGURATION_SNIPPET_MODAL_ID,
-} from 'ee/security_configuration/api_fuzzing/constants';
+import { SCAN_MODES } from 'ee/security_configuration/api_fuzzing/constants';
+import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
+import { CONFIGURATION_SNIPPET_MODAL_ID } from 'ee/security_configuration/components/constants';
 import DropdownInput from 'ee/security_configuration/components/dropdown_input.vue';
 import DynamicFields from 'ee/security_configuration/components/dynamic_fields.vue';
 import FormInput from 'ee/security_configuration/components/form_input.vue';
@@ -253,6 +251,7 @@ include:
 variables:
 - FOO: bar`,
         redirectParam: CODE_SNIPPET_SOURCE_API_FUZZING,
+        scanType: 'API Fuzzing',
       });
     });
 

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_snippet_modal_spec.js → ee/spec/frontend/security_configuration/components/configuration_snippet_modal_spec.js

@@ -2,10 +2,10 @@ import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Clipboard from 'clipboard';
 import { merge } from 'lodash';
-import ConfigurationSnippetModal from 'ee/security_configuration/api_fuzzing/components/configuration_snippet_modal.vue';
+import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { createApiFuzzingConfigurationMutationResponse } from '../mock_data';
+import { createApiFuzzingConfigurationMutationResponse } from '../api_fuzzing/mock_data';
 
 jest.mock('clipboard', () =>
   jest.fn().mockImplementation(() => ({
@@ -15,6 +15,7 @@ jest.mock('clipboard', () =>
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
   joinPaths: jest.fn(),
+  setUrlFragment: jest.fn(),
   getBaseURL: jest.fn().mockReturnValue('http://gitlab.local/'),
   setUrlParams: jest.requireActual('~/lib/utils/url_utility').setUrlParams,
 }));
@@ -25,11 +26,11 @@ const {
 } = createApiFuzzingConfigurationMutationResponse.data.apiFuzzingCiConfigurationCreate;
 const redirectParam = 'foo';
 
-describe('EE - ApiFuzzingConfigurationSnippetModal', () => {
+describe('EE - SecurityConfigurationSnippetModal', () => {
   let wrapper;
 
   const findModal = () => wrapper.find(GlModal);
-  const findYamlSnippet = () => wrapper.findByTestId('api-fuzzing-modal-yaml-snippet');
+  const findYamlSnippet = () => wrapper.findByTestId('configuration-modal-yaml-snippet');
 
   const createWrapper = (options) => {
     wrapper = extendedWrapper(
@@ -41,6 +42,7 @@ describe('EE - ApiFuzzingConfigurationSnippetModal', () => {
               ciYamlEditUrl: gitlabCiYamlEditPath,
               yaml: configurationYaml,
               redirectParam,
+              scanType: 'API Fuzzing',
             },
             attrs: {
               static: true,

locale/gitlab.pot

@@ -1543,18 +1543,9 @@ msgstr ""
 msgid "APIFuzzing|Code snippet could not be generated. Try again later."
 msgstr ""
 
-msgid "APIFuzzing|Code snippet for the API Fuzzing configuration"
-msgstr ""
-
 msgid "APIFuzzing|Configure HTTP basic authentication values. Other authentication methods are supported. %{linkStart}Learn more%{linkEnd}."
 msgstr ""
 
-msgid "APIFuzzing|Copy code and open .gitlab-ci.yml file"
-msgstr ""
-
-msgid "APIFuzzing|Copy code only"
-msgstr ""
-
 msgid "APIFuzzing|Customize common API fuzzing settings to suit your requirements. For details of more advanced configuration options, see the %{docsLinkStart}GitLab API Fuzzing documentation%{docsLinkEnd}."
 msgstr ""
 
@@ -28979,6 +28970,9 @@ msgstr ""
 msgid "SecurityConfiguration|By default, all analyzers are applied in order to cover all languages across your project, and only run if the language is detected in the Merge Request."
 msgstr ""
 
+msgid "SecurityConfiguration|Code snippet for the %{scanType} configuration"
+msgstr ""
+
 msgid "SecurityConfiguration|Compliance"
 msgstr ""
 
@@ -28994,6 +28988,12 @@ msgstr ""
 msgid "SecurityConfiguration|Configure via Merge Request"
 msgstr ""
 
+msgid "SecurityConfiguration|Copy code and open .gitlab-ci.yml file"
+msgstr ""
+
+msgid "SecurityConfiguration|Copy code only"
+msgstr ""
+
 msgid "SecurityConfiguration|Could not retrieve configuration data. Please refresh the page, or try again later."
 msgstr ""