Wrap disabled form groups in a disabled parent

- instead of disabling form groups individually,
  this wraps them in a parent form group and
  conditionally disables that.
- update tests

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

@@ -274,7 +274,8 @@ export default {
       </ul>
     </gl-alert>
 
-    <gl-form-group :disabled="isPolicyProfile" :label="s__('DastProfiles|Profile name')">
+    <gl-form-group data-testid="dast-scanner-parent-group" :disabled="isPolicyProfile">
+      <gl-form-group :label="s__('DastProfiles|Profile name')">
         <gl-form-input
           v-model="form.profileName.value"
           class="mw-460"
@@ -285,7 +286,7 @@ export default {
 
       <hr class="gl-border-gray-100" />
 
-    <gl-form-group :disabled="isPolicyProfile">
+      <gl-form-group>
         <template #label>
           {{ s__('DastProfiles|Scan mode') }}
           <tooltip-icon :title="i18n.tooltips.scanMode" />
@@ -301,7 +302,6 @@ export default {
       <div class="row">
         <gl-form-group
           class="col-md-6 mb-0"
-        :disabled="isPolicyProfile"
           :state="form.spiderTimeout.state"
           :invalid-feedback="form.spiderTimeout.feedback"
         >
@@ -329,7 +329,6 @@ export default {
 
         <gl-form-group
           class="col-md-6 mb-0"
-        :disabled="isPolicyProfile"
           :state="form.targetTimeout.state"
           :invalid-feedback="form.targetTimeout.feedback"
         >
@@ -359,7 +358,7 @@ export default {
       <hr class="gl-border-gray-100" />
 
       <div class="row">
-      <gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
+        <gl-form-group class="col-md-6 mb-0">
           <template #label>
             {{ s__('DastProfiles|AJAX spider') }}
             <tooltip-icon :title="i18n.tooltips.ajaxSpider" />
@@ -369,7 +368,7 @@ export default {
           }}</gl-form-checkbox>
         </gl-form-group>
 
-      <gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
+        <gl-form-group class="col-md-6 mb-0">
           <template #label>
             {{ s__('DastProfiles|Debug messages') }}
             <tooltip-icon :title="i18n.tooltips.debugMessage" />
@@ -379,6 +378,7 @@ export default {
           }}</gl-form-checkbox>
         </gl-form-group>
       </div>
+    </gl-form-group>
 
     <hr class="gl-border-gray-100" />
 

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

@@ -82,7 +82,8 @@ export default {
 
 <template>
   <section>
-    <gl-form-group :disabled="disabled" :label="s__('DastProfiles|Authentication')">
+    <gl-form-group data-testid="dast-site-auth-parent-group" :disabled="disabled">
+      <gl-form-group :label="s__('DastProfiles|Authentication')">
         <gl-form-checkbox v-model="form.fields.enabled.value" data-testid="auth-enable-checkbox">{{
           s__('DastProfiles|Enable Authentication')
         }}</gl-form-checkbox>
@@ -90,7 +91,6 @@ export default {
       <div v-if="form.fields.enabled.value" data-testid="auth-form">
         <div class="row">
           <gl-form-group
-          :disabled="disabled"
             :label="s__('DastProfiles|Authentication URL')"
             :invalid-feedback="form.fields.url.feedback"
             class="col-md-6"
@@ -107,7 +107,6 @@ export default {
         </div>
         <div class="row">
           <gl-form-group
-          :disabled="disabled"
             :label="s__('DastProfiles|Username')"
             :invalid-feedback="form.fields.username.feedback"
             class="col-md-6"
@@ -123,7 +122,6 @@ export default {
             />
           </gl-form-group>
           <gl-form-group
-          :disabled="disabled"
             :label="s__('DastProfiles|Password')"
             :invalid-feedback="form.fields.password.feedback"
             class="col-md-6"
@@ -142,7 +140,6 @@ export default {
         </div>
         <div class="row">
           <gl-form-group
-          :disabled="disabled"
             :label="s__('DastProfiles|Username form field')"
             :invalid-feedback="form.fields.usernameField.feedback"
             class="col-md-6"
@@ -157,7 +154,6 @@ export default {
             />
           </gl-form-group>
           <gl-form-group
-          :disabled="disabled"
             :label="s__('DastProfiles|Password form field')"
             :invalid-feedback="form.fields.passwordField.feedback"
             class="col-md-6"
@@ -173,5 +169,6 @@ export default {
           </gl-form-group>
         </div>
       </div>
+    </gl-form-group>
   </section>
 </template>

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

@@ -274,8 +274,8 @@ export default {
       </ul>
     </gl-alert>
 
+    <gl-form-group data-testid="dast-site-parent-group" :disabled="isPolicyProfile">
       <gl-form-group
-      :disabled="isPolicyProfile"
         :label="s__('DastProfiles|Profile name')"
         :invalid-feedback="form.fields.profileName.feedback"
       >
@@ -294,7 +294,6 @@ export default {
       <hr class="gl-border-gray-100" />
 
       <gl-form-group
-      :disabled="isPolicyProfile"
         data-testid="target-url-input-group"
         :invalid-feedback="form.fields.targetUrl.feedback"
         :label="s__('DastProfiles|Target URL')"
@@ -313,7 +312,6 @@ export default {
 
       <div v-if="glFeatures.securityDastSiteProfilesAdditionalFields" class="row">
         <gl-form-group
-        :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Excluded URLs (Optional)')"
           :invalid-feedback="form.fields.excludedUrls.feedback"
           class="col-md-6"
@@ -338,11 +336,7 @@ export default {
           }}</gl-form-text>
         </gl-form-group>
 
-      <gl-form-group
-        :disabled="isPolicyProfile"
-        :invalid-feedback="form.fields.requestHeaders.feedback"
-        class="col-md-6"
-      >
+        <gl-form-group :invalid-feedback="form.fields.requestHeaders.feedback" class="col-md-6">
           <template #label>
             {{ i18n.requestHeaders.label }}
             <tooltip-icon :title="i18n.requestHeaders.tooltip" />
@@ -363,6 +357,7 @@ export default {
           }}</gl-form-text>
         </gl-form-group>
       </div>
+    </gl-form-group>
 
     <dast-site-auth-section
       v-if="glFeatures.securityDastSiteProfilesAdditionalFields"

ee/spec/frontend/security_configuration/dast_scanner_profiles_form/components/dast_scanner_profiles_form_spec.js

-import { GlForm, GlFormGroup, GlModal } from '@gitlab/ui';
+import { GlForm, GlModal } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
 import merge from 'lodash/merge';
@@ -40,7 +40,7 @@ describe('DAST Scanner Profile', () => {
   const withinComponent = () => within(wrapper.element);
   const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"`);
 
-  const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
+  const findParentFormGroup = () => findByTestId('dast-scanner-parent-group');
   const findForm = () => wrapper.find(GlForm);
   const findProfileNameInput = () => findByTestId('profile-name-input');
   const findSpiderTimeoutInput = () => findByTestId('spider-timeout-input');
@@ -294,9 +294,7 @@ describe('DAST Scanner Profile', () => {
     });
 
     it('should enable all form groups', () => {
-      expect(
-        findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
-      ).toBe(true);
+      expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
     });
 
     it('should show the policy profile alert', () => {
@@ -318,9 +316,7 @@ describe('DAST Scanner Profile', () => {
     });
 
     it('should disable all form groups', () => {
-      expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
-        true,
-      );
+      expect(findParentFormGroup().attributes('disabled')).toBe('true');
     });
 
     it('should disable the save button', () => {

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

-import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
+import { GlFormCheckbox } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import DastSiteAuthSection from 'ee/security_configuration/dast_site_profiles_form/components/dast_site_auth_section.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -25,7 +25,7 @@ describe('DastSiteAuthSection', () => {
     wrapper.destroy();
   });
 
-  const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
+  const findParentFormGroup = () => wrapper.findByTestId('dast-site-auth-parent-group');
   const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
   const findAuthForm = () => wrapper.findByTestId('auth-form');
   const findAuthCheckbox = () => wrapper.find(GlFormCheckbox);
@@ -121,18 +121,14 @@ describe('DastSiteAuthSection', () => {
     describe('when profile does not come from a policy', () => {
       it('should enable all form groups', () => {
         createComponent({ mountFn: shallowMount, fields: { enabled: true } });
-        expect(
-          findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
-        ).toBe(true);
+        expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
       });
     });
 
     describe('when profile does comes from a policy', () => {
       it('should disable all form groups', () => {
         createComponent({ mountFn: shallowMount, disabled: true, fields: { enabled: true } });
-        expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
-          true,
-        );
+        expect(findParentFormGroup().attributes('disabled')).toBe('true');
       });
     });
   });

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

-import { GlForm, GlFormGroup, GlModal } from '@gitlab/ui';
+import { GlForm, GlModal } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import merge from 'lodash/merge';
@@ -46,7 +46,7 @@ describe('DastSiteProfileForm', () => {
   const withinComponent = () => within(wrapper.element);
 
   const findForm = () => wrapper.findComponent(GlForm);
-  const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
+  const findParentFormGroup = () => wrapper.findByTestId('dast-site-parent-group');
   const findAuthSection = () => wrapper.findComponent(DastSiteAuthSection);
   const findCancelModal = () => wrapper.findComponent(GlModal);
   const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
@@ -346,9 +346,7 @@ describe('DastSiteProfileForm', () => {
     });
 
     it('should enable all form groups', () => {
-      expect(
-        findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
-      ).toBe(true);
+      expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
     });
 
     it('should show the policy profile alert', () => {
@@ -370,9 +368,7 @@ describe('DastSiteProfileForm', () => {
     });
 
     it('should disable all form groups', () => {
-      expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
-        true,
-      );
+      expect(findParentFormGroup().attributes('disabled')).toBe('true');
     });
 
     it('should disable the save button', () => {