1 files changed, 15 insertions, 2 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
index 8b95b04d93c..dc89e139320 100644
--- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue
+++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
@@ -1,12 +1,15 @@
 <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,17 @@ 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]"
+        class="gl-display-block gl-line-height-0"
+        @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">