Update schema for DAST site profile form

Update excluded-urls input field schema
from string to [string]

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

@@ -24,6 +24,7 @@ import DastSiteAuthSection from './dast_site_auth_section.vue';
 
 const MAX_CHAR_LIMIT_EXCLUDED_URLS = 2048;
 const MAX_CHAR_LIMIT_REQUEST_HEADERS = 2048;
+const EXCLUDED_URLS_SEPARATOR = ',';
 
 export default {
   name: 'DastSiteProfileForm',
@@ -63,7 +64,7 @@ export default {
     },
   },
   data() {
-    const { name = '', targetUrl = '', excludedUrls = '', requestHeaders = '', auth = {} } =
+    const { name = '', targetUrl = '', excludedUrls = [], requestHeaders = '', auth = {} } =
       this.siteProfile || {};
 
     const form = {
@@ -72,7 +73,11 @@ export default {
       fields: {
         profileName: initFormField({ value: name }),
         targetUrl: initFormField({ value: targetUrl }),
-        excludedUrls: initFormField({ value: excludedUrls, required: false, skipValidation: true }),
+        excludedUrls: initFormField({
+          value: excludedUrls.join(EXCLUDED_URLS_SEPARATOR),
+          required: false,
+          skipValidation: true,
+        }),
         requestHeaders: initFormField({
           value: requestHeaders,
           required: false,
@@ -150,6 +155,9 @@ export default {
     }
   },
   methods: {
+    parseExcludedUrls(input) {
+      return input.value.split(EXCLUDED_URLS_SEPARATOR).map((url) => url.trim());
+    },
     onSubmit() {
       const isAuthEnabled =
         this.glFeatures.securityDastSiteProfilesAdditionalFields &&
@@ -165,13 +173,18 @@ export default {
       this.hideErrors();
       const { errorMessage } = this.i18n;
 
+      const { profileName, targetUrl, ...additionalFields } = serializeFormObject(this.form.fields);
+
       const variables = {
         input: {
           fullPath: this.fullPath,
           ...(this.isEdit ? { id: this.siteProfile.id } : {}),
-          ...serializeFormObject(this.form.fields),
+          profileName,
+          targetUrl,
           ...(this.glFeatures.securityDastSiteProfilesAdditionalFields && {
+            ...additionalFields,
             auth: serializeFormObject(this.authSection.fields),
+            excludedUrls: this.parseExcludedUrls(this.form.fields.excludedUrls),
           }),
         },
       };

ee/app/views/projects/security/dast_site_profiles/edit.html.haml

@@ -6,6 +6,6 @@
 .js-dast-site-profile-form{ data: { full_path: @project.path_with_namespace,
 profiles_library_path: project_security_configuration_dast_profiles_path(@project, anchor: 'site-profiles'),
 site_profile: { id: @site_profile.to_global_id.to_s, name: @site_profile.name, target_url: @site_profile.dast_site.url,
-excluded_urls: 'https://example.com/logout', request_headers: 'new-header',
+excluded_urls: ['https://example.com/logout', 'https://example.com/send_mail'], request_headers: 'new-header',
 auth: { enabled: true, url: 'https://example.com', username: 'admin', usernameField: 'username', passwordField: 'password' }, referenced_in_security_policies: @site_profile.referenced_in_security_policies}.to_json,
 on_demand_scans_path: new_project_on_demand_scan_path(@project) } }

ee/spec/frontend/on_demand_scans/mocks/mock_data.js

@@ -51,7 +51,7 @@ export const siteProfiles = [
       username: 'admin',
       password: 'password',
     },
-    excludedUrls: 'https://foo.com/logout,https://foo.com/send_mail',
+    excludedUrls: ['https://foo.com/logout', 'https://foo.com/send_mail'],
     requestHeaders: 'log-identifier: dast-active-scan',
     referencedInSecurityPolicies: [],
   },
@@ -65,7 +65,7 @@ export const siteProfiles = [
     auth: {
       enabled: false,
     },
-    excludedUrls: 'https://bar.com/logout',
+    excludedUrls: ['https://bar.com/logout'],
     requestHeaders: 'auth: gitlab-dast',
     referencedInSecurityPolicies: [],
   },

ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_profile_form_spec.js

@@ -24,7 +24,7 @@ const profilesLibraryPath = `${TEST_HOST}/${fullPath}/-/security/configuration/d
 const onDemandScansPath = `${TEST_HOST}/${fullPath}/-/on_demand_scans`;
 const profileName = 'My DAST site profile';
 const targetUrl = 'http://example.com';
-const excludedUrls = 'http://example.com/logout';
+const excludedUrls = 'https://foo.com/logout, https://foo.com/send_mail';
 const requestHeaders = 'my-new-header=something';
 
 const defaultProps = {
@@ -224,10 +224,10 @@ describe('DastSiteProfileForm', () => {
             input: {
               profileName,
               targetUrl,
-              excludedUrls,
               requestHeaders,
               fullPath,
               auth: siteProfileOne.auth,
+              excludedUrls: siteProfileOne.excludedUrls,
               ...mutationVars,
             },
           });
@@ -319,21 +319,55 @@ describe('DastSiteProfileForm', () => {
   });
 
   describe('when feature flag is off', () => {
-    beforeEach(() => {
-      createFullComponent({
+    const mountOpts = {
       provide: {
         glFeatures: {
           securityDastSiteProfilesAdditionalFields: false,
         },
       },
-      });
-    });
+    };
+
+    const fillAndSubmitForm = async () => {
+      await setFieldValue(findProfileNameInput(), profileName);
+      await setFieldValue(findTargetUrlInput(), targetUrl);
+      submitForm();
+    };
 
     it('should not render additional fields', () => {
+      createFullComponent(mountOpts);
+
       expect(findAuthSection().exists()).toBe(false);
       expect(findExcludedUrlsInput().exists()).toBe(false);
       expect(findRequestHeadersInput().exists()).toBe(false);
     });
+
+    describe.each`
+      title                  | siteProfile       | mutationVars                 | mutationKind
+      ${'New site profile'}  | ${null}           | ${{}}                        | ${'dastSiteProfileCreate'}
+      ${'Edit site profile'} | ${siteProfileOne} | ${{ id: siteProfileOne.id }} | ${'dastSiteProfileUpdate'}
+    `('$title', ({ siteProfile, mutationVars, mutationKind }) => {
+      beforeEach(() => {
+        createFullComponent({
+          propsData: {
+            siteProfile,
+          },
+          ...mountOpts,
+        });
+        fillAndSubmitForm();
+      });
+
+      it('form submission triggers correct GraphQL mutation', async () => {
+        await fillAndSubmitForm();
+        expect(requestHandlers[mutationKind]).toHaveBeenCalledWith({
+          input: {
+            profileName,
+            targetUrl,
+            fullPath,
+            ...mutationVars,
+          },
+        });
+      });
+    });
   });
 
   describe('when profile does not come from a policy', () => {