Merge branch 'dj-dast-site-form-serializer' into 'master'

Refactor DAST Site Profile Form

See merge request gitlab-org/gitlab!44997

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

@@ -13,6 +13,7 @@ import {
 import * as Sentry from '~/sentry/wrapper';
 import { __, s__ } from '~/locale';
 import { isAbsolute, redirectTo } from '~/lib/utils/url_utility';
+import { serializeFormObject, isEmptyValue } from '~/lib/utils/forms';
 import { fetchPolicies } from '~/lib/graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DastSiteValidation from './dast_site_validation.vue';
@@ -30,9 +31,6 @@ const initField = value => ({
   feedback: null,
 });
 
-const extractFormValues = form =>
-  Object.fromEntries(Object.entries(form).map(([key, { value }]) => [key, value]));
-
 export default {
   name: 'DastSiteProfileForm',
   components: {
@@ -73,7 +71,7 @@ export default {
     return {
       fetchValidationTimeout: null,
       form,
-      initialFormValues: extractFormValues(form),
+      initialFormValues: serializeFormObject(form),
       isFetchingValidationStatus: false,
       isValidatingSite: false,
       isLoading: false,
@@ -121,13 +119,13 @@ export default {
       };
     },
     formTouched() {
-      return !isEqual(extractFormValues(this.form), this.initialFormValues);
+      return !isEqual(serializeFormObject(this.form), this.initialFormValues);
     },
     formHasErrors() {
       return Object.values(this.form).some(({ state }) => state === false);
     },
     someFieldEmpty() {
-      return Object.values(this.form).some(({ value }) => !value);
+      return Object.values(this.form).some(({ value }) => isEmptyValue(value));
     },
     isSubmitDisabled() {
       return (
@@ -295,7 +293,7 @@ export default {
       const variables = {
         fullPath: this.fullPath,
         ...(this.isEdit ? { id: this.siteProfile.id } : {}),
-        ...extractFormValues(this.form),
+        ...serializeFormObject(this.form),
       };
 
       this.$apollo