Refactor DAST Site Profile form

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

 <script>
 import { GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { initFormField } from 'ee/security_configuration/utils';
+import { serializeFormObject } from '~/lib/utils/forms';
 import validation from '~/vue_shared/directives/validation';
 
 export default {
@@ -28,6 +29,11 @@ export default {
       required: false,
       default: false,
     },
+    isEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     const {
@@ -40,8 +46,6 @@ export default {
       passwordField = 'password',
     } = this.value.fields;
 
-    const isEditMode = Object.keys(this.value.fields).length > 0;
-
     return {
       form: {
         state: false,
@@ -49,23 +53,28 @@ export default {
           enabled: initFormField({ value: enabled, skipValidation: true }),
           url: initFormField({ value: url }),
           username: initFormField({ value: username }),
-          password: isEditMode
+          password: this.isEditMode
             ? initFormField({ value: password, required: false, skipValidation: true })
             : initFormField({ value: password }),
           usernameField: initFormField({ value: usernameField }),
           passwordField: initFormField({ value: passwordField }),
         },
       },
-      isEditMode,
-      isSensitiveFieldRequired: !isEditMode,
+      isSensitiveFieldRequired: !this.isEditMode,
     };
   },
   watch: {
     form: { handler: 'emitUpdate', immediate: true, deep: true },
   },
+  created() {
+    this.emitUpdate();
+  },
   methods: {
     emitUpdate() {
-      this.$emit('input', this.form);
+      this.$emit('input', {
+        fields: serializeFormObject(this.form.fields),
+        state: this.form.state,
+      });
     },
   },
 };

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

@@ -160,7 +160,7 @@ export default {
         .map((url) => url.trim());
     },
     serializedAuthFields() {
-      const authFields = serializeFormObject(this.authSection.fields);
+      const authFields = this.authSection.fields;
       // not to send password value if unchanged
       if (authFields.password === REDACTED_PASSWORD) {
         delete authFields.password;
@@ -178,7 +178,8 @@ export default {
     onSubmit() {
       const isAuthEnabled =
         this.glFeatures.securityDastSiteProfilesAdditionalFields &&
-        this.authSection.fields.enabled.value;
+        this.authSection.fields.enabled &&
+        !this.isTargetAPI;
 
       this.form.showValidation = true;
 
@@ -420,6 +421,7 @@ export default {
       v-model="authSection"
       :disabled="isPolicyProfile"
       :show-validation="form.showValidation"
+      :is-edit-mode="isEdit"
     />
 
     <hr class="gl-border-gray-100" />

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

@@ -64,7 +64,7 @@ describe('DastSiteAuthSection', () => {
       'makes the component emit an "input" event when changed',
       async (enabled) => {
         await setAuthentication({ enabled });
-        expect(getLatestInputEventPayload().fields.enabled.value).toBe(enabled);
+        expect(getLatestInputEventPayload().fields.enabled).toBe(enabled);
       },
     );
   });
@@ -89,13 +89,13 @@ describe('DastSiteAuthSection', () => {
         expect(findByNameAttribute(inputFieldName).exists()).toBe(true);
       });
 
-      it('makes the component emit an "input" event when its value changes', () => {
+      it('makes the component emit an "input" event when its value changes', async () => {
         const input = findByNameAttribute(inputFieldName);
         const newValue = 'foo';
 
-        input.setValue(newValue);
+        await input.setValue(newValue);
 
-        expect(getLatestInputEventPayload().fields[inputFieldName].value).toBe(newValue);
+        expect(getLatestInputEventPayload().fields[inputFieldName]).toBe(newValue);
       });
     });
 
@@ -112,13 +112,13 @@ describe('DastSiteAuthSection', () => {
         expect(getLatestInputEventPayload().state).toBe(true);
       });
 
-      it('is valid once all fields have been entered correctly', () => {
+      it('is valid once all fields have been entered correctly', async () => {
         Object.entries(inputFieldsWithValues).forEach(([inputFieldName, inputFieldValue]) => {
           const input = findByNameAttribute(inputFieldName);
           input.setValue(inputFieldValue);
           input.trigger('blur');
         });
-
+        await wrapper.vm.$nextTick();
         expect(getLatestInputEventPayload().state).toBe(true);
       });
     });