1 files changed, 32 insertions, 38 deletions
diff --git a/app/assets/javascripts/projects/settings_service_desk/index.js b/app/assets/javascripts/projects/settings_service_desk/index.js
index 8f9828dd73d..f842ffaaa2b 100644
--- a/app/assets/javascripts/projects/settings_service_desk/index.js
+++ b/app/assets/javascripts/projects/settings_service_desk/index.js
@@ -3,43 +3,37 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import ServiceDeskRoot from './components/service_desk_root.vue';
 
 export default () => {
-  const serviceDeskRootElement = document.querySelector('.js-service-desk-setting-root');
-  if (serviceDeskRootElement) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: serviceDeskRootElement,
-      components: {
-        ServiceDeskRoot,
-      },
-      data() {
-        const { dataset } = serviceDeskRootElement;
-        return {
-          initialIsEnabled: parseBoolean(dataset.enabled),
-          endpoint: dataset.endpoint,
-          incomingEmail: dataset.incomingEmail,
-          customEmail: dataset.customEmail,
-          customEmailEnabled: parseBoolean(dataset.customEmailEnabled),
-          selectedTemplate: dataset.selectedTemplate,
-          outgoingName: dataset.outgoingName,
-          projectKey: dataset.projectKey,
-          templates: JSON.parse(dataset.templates),
-        };
-      },
-      render(createElement) {
-        return createElement('service-desk-root', {
-          props: {
-            initialIsEnabled: this.initialIsEnabled,
-            endpoint: this.endpoint,
-            incomingEmail: this.incomingEmail,
-            customEmail: this.customEmail,
-            customEmailEnabled: this.customEmailEnabled,
-            selectedTemplate: this.selectedTemplate,
-            outgoingName: this.outgoingName,
-            projectKey: this.projectKey,
-            templates: this.templates,
-          },
-        });
-      },
-    });
+  const el = document.querySelector('.js-service-desk-setting-root');
+
+  if (!el) {
+    return false;
   }
+
+  const {
+    customEmail,
+    customEmailEnabled,
+    enabled,
+    endpoint,
+    incomingEmail,
+    outgoingName,
+    projectKey,
+    selectedTemplate,
+    templates,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      customEmail,
+      customEmailEnabled: parseBoolean(customEmailEnabled),
+      endpoint,
+      initialIncomingEmail: incomingEmail,
+      initialIsEnabled: parseBoolean(enabled),
+      outgoingName,
+      projectKey,
+      selectedTemplate,
+      templates: JSON.parse(templates),
+    },
+    render: (createElement) => createElement(ServiceDeskRoot),
+  });
 };