Update ActiveToggle and JiraTriggerFields

- When feature flag is enabled, change the components'
layout from column (label on the left of input) to linear
(following GitLab UI - label above input).
- Refactor Jira radio options to DRY up code.
- Use more GitLab UI elements

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

 <script>
 import eventHub from '../event_hub';
-import { GlToggle } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { GlFormGroup, GlToggle } from '@gitlab/ui';
 
 export default {
   name: 'ActiveToggle',
   components: {
+    GlFormGroup,
     GlToggle,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     initialActivated: {
       type: Boolean,
@@ -33,7 +36,12 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div v-if="glFeatures.integrationFormRefactor">
+    <gl-form-group :label="__('Enable integration')" label-for="service[active]">
+      <gl-toggle v-model="activated" name="service[active]" @change="onToggle" />
+    </gl-form-group>
+  </div>
+  <div v-else>
     <div class="form-group row" role="group">
       <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label>
       <div class="col-sm-10 pt-1">

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

 <script>
-import { GlFormCheckbox, GlFormRadio } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { s__ } from '~/locale';
+import { GlFormGroup, GlFormCheckbox, GlFormRadio } from '@gitlab/ui';
+
+const commentDetailOptions = [
+  {
+    value: 'standard',
+    label: s__('Integrations|Standard'),
+    help: s__('Integrations|Includes commit title and branch'),
+  },
+  {
+    value: 'all_details',
+    label: s__('Integrations|All details'),
+    help: s__(
+      'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs',
+    ),
+  },
+];
 
 export default {
   name: 'JiraTriggerFields',
   components: {
+    GlFormGroup,
     GlFormCheckbox,
     GlFormRadio,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     initialTriggerCommit: {
       type: Boolean,
@@ -32,13 +51,71 @@ export default {
       triggerMergeRequest: this.initialTriggerMergeRequest,
       enableComments: this.initialEnableComments,
       commentDetail: this.initialCommentDetail,
+      commentDetailOptions,
     };
   },
+  computed: {
+    showEnableComments() {
+      return this.triggerCommit || this.triggerMergeRequest;
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="form-group row pt-2" role="group">
+  <div v-if="glFeatures.integrationFormRefactor">
+    <gl-form-group
+      :label="__('Trigger')"
+      label-for="service[trigger]"
+      :description="
+        s__(
+          'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created.',
+        )
+      "
+    >
+      <input name="service[commit_events]" type="hidden" value="false" />
+      <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]">
+        {{ __('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]">
+        {{ __('Merge request') }}
+      </gl-form-checkbox>
+    </gl-form-group>
+
+    <gl-form-group
+      v-show="showEnableComments"
+      :label="s__('Integrations|Comment settings:')"
+      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]">
+        {{ s__('Integrations|Enable comments') }}
+      </gl-form-checkbox>
+    </gl-form-group>
+
+    <gl-form-group
+      v-show="showEnableComments && enableComments"
+      :label="s__('Integrations|Comment detail:')"
+      data-testid="comment-detail"
+    >
+      <gl-form-radio
+        v-for="commentDetailOption in commentDetailOptions"
+        :key="commentDetailOption.value"
+        v-model="commentDetail"
+        :value="commentDetailOption.value"
+        name="service[comment_detail]"
+      >
+        {{ commentDetailOption.label }}
+        <template #help>
+          {{ commentDetailOption.help }}
+        </template>
+      </gl-form-radio>
+    </gl-form-group>
+  </div>
+
+  <div v-else class="form-group row pt-2" role="group">
     <label for="service[trigger]" class="col-form-label col-sm-2 pt-0">{{ __('Trigger') }}</label>
     <div class="col-sm-10">
       <label class="weight-normal mb-2">
@@ -76,20 +153,16 @@ export default {
           <label>
             {{ s__('Integrations|Comment detail:') }}
           </label>
-          <gl-form-radio v-model="commentDetail" value="standard" name="service[comment_detail]">
-            {{ s__('Integrations|Standard') }}
-            <template #help>
-              {{ s__('Integrations|Includes commit title and branch') }}
-            </template>
-          </gl-form-radio>
-          <gl-form-radio v-model="commentDetail" value="all_details" name="service[comment_detail]">
-            {{ s__('Integrations|All details') }}
+          <gl-form-radio
+            v-for="commentDetailOption in commentDetailOptions"
+            :key="commentDetailOption.value"
+            v-model="commentDetail"
+            :value="commentDetailOption.value"
+            name="service[comment_detail]"
+          >
+            {{ commentDetailOption.label }}
             <template #help>
-              {{
-                s__(
-                  'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs',
-                )
-              }}
+              {{ commentDetailOption.help }}
             </template>
           </gl-form-radio>
         </div>

app/controllers/projects/services_controller.rb

@@ -11,6 +11,9 @@ class Projects::ServicesController < Projects::ApplicationController
   before_action :web_hook_logs, only: [:edit, :update]
   before_action :set_deprecation_notice_for_prometheus_service, only: [:edit, :update]
   before_action :redirect_deprecated_prometheus_service, only: [:update]
+  before_action only: :edit do
+    push_frontend_feature_flag(:integration_form_refactor)
+  end
 
   respond_to :html