Disable form fields when not overriding

Apply to all form components

app/assets/javascripts/integrations/edit/components/active_toggle.vue

 <script>
+import { mapGetters } from 'vuex';
 import eventHub from '../event_hub';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { GlFormGroup, GlToggle } from '@gitlab/ui';
@@ -21,6 +22,9 @@ export default {
       activated: this.initialActivated,
     };
   },
+  computed: {
+    ...mapGetters(['disableForm']),
+  },
   mounted() {
     // Initialize view
     this.$nextTick(() => {
@@ -42,6 +46,7 @@ export default {
         v-model="activated"
         name="service[active]"
         class="gl-display-block gl-line-height-0"
+        :disabled="disableForm"
         @change="onToggle"
       />
     </gl-form-group>

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

 <script>
+import { mapGetters } from 'vuex';
 import eventHub from '../event_hub';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { __, sprintf } from '~/locale';
@@ -59,6 +60,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['disableForm']),
     isCheckbox() {
       return this.type === 'checkbox';
     },
@@ -107,6 +109,7 @@ export default {
         id: this.fieldId,
         name: this.fieldName,
         state: this.valid,
+        disabled: this.disableForm,
       };
     },
     valid() {

app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue

 <script>
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import { GlFormGroup, GlFormCheckbox, GlFormRadio } from '@gitlab/ui';
 
@@ -55,6 +56,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['disableForm']),
     showEnableComments() {
       return this.triggerCommit || this.triggerMergeRequest;
     },
@@ -74,12 +76,20 @@ export default {
       "
     >
       <input name="service[commit_events]" type="hidden" value="false" />
-      <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]">
+      <gl-form-checkbox
+        v-model="triggerCommit"
+        name="service[commit_events]"
+        :disabled="disableForm"
+      >
         {{ __('Commit') }}
       </gl-form-checkbox>
 
       <input name="service[merge_requests_events]" type="hidden" value="false" />
-      <gl-form-checkbox v-model="triggerMergeRequest" name="service[merge_requests_events]">
+      <gl-form-checkbox
+        v-model="triggerMergeRequest"
+        name="service[merge_requests_events]"
+        :disabled="disableForm"
+      >
         {{ __('Merge request') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -90,7 +100,11 @@ export default {
       data-testid="comment-settings"
     >
       <input name="service[comment_on_event_enabled]" type="hidden" value="false" />
-      <gl-form-checkbox v-model="enableComments" name="service[comment_on_event_enabled]">
+      <gl-form-checkbox
+        v-model="enableComments"
+        name="service[comment_on_event_enabled]"
+        :disabled="disableForm"
+      >
         {{ s__('Integrations|Enable comments') }}
       </gl-form-checkbox>
     </gl-form-group>
@@ -106,6 +120,7 @@ export default {
         v-model="commentDetail"
         :value="commentDetailOption.value"
         name="service[comment_detail]"
+        :disabled="disableForm"
       >
         {{ commentDetailOption.label }}
         <template #help>

app/assets/javascripts/integrations/edit/components/trigger_fields.vue

 <script>
+import { mapGetters } from 'vuex';
 import { startCase } from 'lodash';
 import { __ } from '~/locale';
 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
@@ -32,6 +33,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(['disableForm']),
     placeholder() {
       return placeholderForType[this.type];
     },
@@ -58,7 +60,11 @@ export default {
     <div id="trigger-fields" class="gl-pt-3">
       <gl-form-group v-for="event in events" :key="event.title" :description="event.description">
         <input :name="checkboxName(event.name)" type="hidden" value="false" />
-        <gl-form-checkbox v-model="event.value" :name="checkboxName(event.name)">
+        <gl-form-checkbox
+          v-model="event.value"
+          :name="checkboxName(event.name)"
+          :disabled="disableForm"
+        >
           {{ startCase(event.title) }}
         </gl-form-checkbox>
         <gl-form-input
@@ -66,6 +72,7 @@ export default {
           v-model="event.field.value"
           :name="fieldName(event.field.name)"
           :placeholder="placeholder"
+          :disabled="disableForm"
         />
       </gl-form-group>
     </div>