Apply code review feedback

* Add conditional rendering if configuration provided
* Support enable/disable checkbox

ee/app/assets/javascripts/security_configuration/sast/components/analyzer_configuration.vue

 <script>
-import { cloneDeep } from 'lodash';
 import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
 import DynamicFields from './dynamic_fields.vue';
 import { isValidAnalyzerEntity } from './utils';
 
-
 export default {
   components: {
     GlFormGroup,
@@ -15,11 +13,6 @@ export default {
     prop: 'entity',
     event: 'input',
   },
-  data() {
-    return {
-      configurationEntities: cloneDeep(this.entity.configuration),
-    };
-  },  
   props: {
     // SastCiConfigurationAnalyzersEntity from GraphQL endpoint
     entity: {
@@ -28,15 +21,20 @@ export default {
       validator: isValidAnalyzerEntity,
     },
   },
+  computed: {
+    hasConfiguration() {
+      return this.entity.configuration?.length > 0;
+    },
+  },
   methods: {
     onToggle(value) {
       const entity = { ...this.entity, enabled: value };
       this.$emit('input', entity);
     },
-    onConfigurationUpdate(value) {
-      const entity = { ...this.entity, configuration: formEntities}
-      this.$emit('input', entity)
-    }
+    onConfigurationUpdate(configuration) {
+      const entity = { ...this.entity, configuration };
+      this.$emit('input', entity);
+    },
   },
 };
 </script>
@@ -46,8 +44,14 @@ export default {
     <gl-form-checkbox :id="entity.name" :checked="entity.enabled" @input="onToggle">
       <span class="gl-font-weight-bold">{{ entity.label }}</span>
       <span v-if="entity.description" class="gl-text-gray-500">({{ entity.description }})</span>
-    </gl-form-checkbox>    
+    </gl-form-checkbox>
 
-    <dynamic-fields v-model="configurationEntities" @input="onConfigurationUpdate" />
+    <dynamic-fields
+      v-if="hasConfiguration"
+      :disabled="!entity.enabled"
+      class="gl-ml-6"
+      :entities="entity.configuration"
+      @input="onConfigurationUpdate"
+    />
   </gl-form-group>
 </template>

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

@@ -6,18 +6,11 @@ import { __, s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import DynamicFields from './dynamic_fields.vue';
-// START TODO: Only for debugging
-import AnalyzerConfiguration from './analyzer_configuration.vue';
-// END TODO
 import { isValidConfigurationEntity } from './utils';
-import analyzer_configurationVue from './analyzer_configuration.vue';
 
 export default {
   components: {
     DynamicFields,
-    // START TODO: Only for debugging
-    AnalyzerConfiguration,
-    // END TODO
     GlAlert,
     GlButton,
   },
@@ -41,17 +34,6 @@ export default {
   data() {
     return {
       formEntities: cloneDeep(this.entities),
-      // START TODO: Only for debugging
-      analyzerEntity: {
-        name: 'name',
-        label: 'label',
-        description: 'description',
-        enabled: true,
-        configuration: [{
-          defaultValue:'def', description: 'desc', field:'foo', type: 'string', value:'val', label: 'label'
-        }]
-      },
-      // END TODO
       hasSubmissionError: false,
       isSubmitting: false,
     };
@@ -99,10 +81,6 @@ export default {
   <form @submit.prevent="onSubmit">
     <dynamic-fields v-model="formEntities" />
 
-    <!-- START TODO: Only for debugging -->
-    <analyzer-configuration v-model="analyzerEntity" />
-    <!-- END TODO -->
-
     <hr />
 
     <gl-alert v-if="hasSubmissionError" class="gl-mb-5" variant="danger" :dismissible="false">{{

ee/app/assets/javascripts/security_configuration/sast/components/dynamic_fields.vue

 <script>
+import { GlFormGroup } from '@gitlab/ui';
 import FormInput from './form_input.vue';
 import { isValidConfigurationEntity } from './utils';
 
 export default {
   components: {
+    GlFormGroup,
     FormInput,
   },
   model: {
@@ -47,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <gl-form-group>
     <component
       :is="componentForEntity(entity)"
       v-for="entity in entities"
@@ -56,5 +58,5 @@ export default {
       v-bind="entity"
       @input="onInput(entity.field, $event)"
     />
-  </div>
+  </gl-form-group>
 </template>

ee/spec/frontend/security_configuration/sast/components/analyzer_configuration_spec.js

 import { mount } from '@vue/test-utils';
 import AnalyzerConfiguration from 'ee/security_configuration/sast/components/analyzer_configuration.vue';
+import DynamicFields from 'ee/security_configuration/sast/components/dynamic_fields.vue';
 
 describe('AnalyzerConfiguration component', () => {
   let wrapper;
@@ -66,4 +67,49 @@ describe('AnalyzerConfiguration component', () => {
       });
     });
   });
+
+  describe('configuration form', () => {
+    describe('when there are no SastCiConfigurationEntity', () => {
+      beforeEach(() => {
+        createComponent({
+          props: { entity },
+        });
+      });
+
+      it('does not render the nested dynamic forms', () => {
+        expect(wrapper.find(DynamicFields).exists()).toBe(false);
+      });
+    });
+
+    describe('when there are one or more SastCiConfigurationEntity', () => {
+      const analyzerEntity = {
+        ...entity,
+        enabled: false,
+        configuration: [
+          {
+            defaultValue: 'defaultVal',
+            description: 'desc',
+            field: 'field',
+            type: 'string',
+            value: 'val',
+            label: 'label',
+          },
+        ],
+      };
+
+      beforeEach(() => {
+        createComponent({
+          props: { entity: analyzerEntity },
+        });
+      });
+
+      it('it renders the nested dynamic forms', () => {
+        expect(wrapper.find(DynamicFields).exists()).toBe(true);
+      });
+
+      it('passes the disabled prop to dynamic fields component', () => {
+        expect(wrapper.find(DynamicFields).vm.$attrs.disabled).toBe(!analyzerEntity.enabled);
+      });
+    });
+  });
 });