1 files changed, 13 insertions, 9 deletions

diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js
index 792e7d8e85e..9c9e3edbeb8 100644
--- a/app/assets/javascripts/integrations/edit/index.js
+++ b/app/assets/javascripts/integrations/edit/index.js
@@ -85,35 +85,39 @@ function parseDatasetToProps(data) {
   };
 }
 
-export default (el, defaultEl) => {
-  if (!el) {
+export default function initIntegrationSettingsForm(formSelector) {
+  const customSettingsEl = document.querySelector('.js-vue-integration-settings');
+  const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings');
+
+  if (!customSettingsEl) {
     return null;
   }
 
-  const props = parseDatasetToProps(el.dataset);
+  const customSettingsProps = parseDatasetToProps(customSettingsEl.dataset);
   const initialState = {
     defaultState: null,
-    customState: props,
+    customState: customSettingsProps,
   };
-  if (defaultEl) {
-    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultEl.dataset));
+  if (defaultSettingsEl) {
+    initialState.defaultState = Object.freeze(parseDatasetToProps(defaultSettingsEl.dataset));
   }
 
   // Here, we capture the "helpHtml", so we can pass it to the Vue component
   // to position it where ever it wants.
   // Because this node is a _child_ of `el`, it will be removed when the Vue component is mounted,
   // so we don't need to manually remove it.
-  const helpHtml = el.querySelector('.js-integration-help-html')?.innerHTML;
+  const helpHtml = customSettingsEl.querySelector('.js-integration-help-html')?.innerHTML;
 
   return new Vue({
-    el,
+    el: customSettingsEl,
     store: createStore(initialState),
     render(createElement) {
       return createElement(IntegrationForm, {
         props: {
           helpHtml,
+          formSelector,
         },
       });
     },
   });
-};
+}