1 files changed, 29 insertions, 11 deletions
diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index a2ba581d429..2ae1342a558 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -1,28 +1,46 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import ActiveToggle from './components/active_toggle.vue';
+import IntegrationForm from './components/integration_form.vue';
 
 export default el => {
   if (!el) {
     return null;
   }
 
-  const { showActive: showActiveStr, activated: activatedStr, disabled: disabledStr } = el.dataset;
-  const showActive = parseBoolean(showActiveStr);
-  const activated = parseBoolean(activatedStr);
-  const disabled = parseBoolean(disabledStr);
-
-  if (!showActive) {
-    return null;
+  function parseBooleanInData(data) {
+    const result = {};
+    Object.entries(data).forEach(([key, value]) => {
+      result[key] = parseBoolean(value);
+    });
+    return result;
   }
 
+  const { type, commentDetail, triggerEvents, ...booleanAttributes } = el.dataset;
+  const {
+    showActive,
+    activated,
+    commitEvents,
+    mergeRequestEvents,
+    enableComments,
+  } = parseBooleanInData(booleanAttributes);
+
   return new Vue({
     el,
     render(createElement) {
-      return createElement(ActiveToggle, {
+      return createElement(IntegrationForm, {
         props: {
-          initialActivated: activated,
-          disabled,
+          activeToggleProps: {
+            initialActivated: activated,
+          },
+          showActive,
+          type,
+          triggerFieldsProps: {
+            initialTriggerCommit: commitEvents,
+            initialTriggerMergeRequest: mergeRequestEvents,
+            initialEnableComments: enableComments,
+            initialCommentDetail: commentDetail,
+          },
+          triggerEvents: JSON.parse(triggerEvents),
         },
       });
     },