1 files changed, 35 insertions, 81 deletions

diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index 1135065b06c..1d0814125e6 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import axios from '../lib/utils/axios_utils';
-import { deprecatedCreateFlash as flash } from '../flash';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
+import toast from '~/vue_shared/plugins/global_toast';
 import initForm from './edit';
 import eventHub from './edit/event_hub';
 
@@ -10,65 +10,63 @@ export default class IntegrationSettingsForm {
     this.$form = $(formSelector);
     this.formActive = false;
 
+    this.vue = null;
+
     // Form Metadata
-    this.canTestService = this.$form.data('canTest');
     this.testEndPoint = this.$form.data('testUrl');
-
-    // Form Child Elements
-    this.$submitBtn = this.$form.find('button[type="submit"]');
-    this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
-    this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
   }
 
   init() {
     // Init Vue component
-    initForm(
+    this.vue = initForm(
       document.querySelector('.js-vue-integration-settings'),
-      document.querySelector('.js-vue-admin-integration-settings'),
+      document.querySelector('.js-vue-default-integration-settings'),
     );
     eventHub.$on('toggle', active => {
       this.formActive = active;
-      this.handleServiceToggle();
+      this.toggleServiceState();
+    });
+    eventHub.$on('testIntegration', () => {
+      this.testIntegration();
+    });
+    eventHub.$on('saveIntegration', () => {
+      this.saveIntegration();
     });
-
-    // Bind Event Listeners
-    this.$submitBtn.on('click', e => this.handleSettingsSave(e));
   }
 
-  handleSettingsSave(e) {
-    // Check if Service is marked active, as if not marked active,
-    // We can skip testing it and directly go ahead to allow form to
-    // be submitted
-    if (!this.formActive) {
-      return;
+  saveIntegration() {
+    // Service was marked active so now we check;
+    // 1) If form contents are valid
+    // 2) If this service can be saved
+    // If both conditions are true, we override form submission
+    // and save the service using provided configuration.
+    if (this.$form.get(0).checkValidity()) {
+      this.$form.submit();
+    } else {
+      eventHub.$emit('validateForm');
+      this.vue.$store.dispatch('setIsSaving', false);
     }
+  }
 
+  testIntegration() {
     // Service was marked active so now we check;
     // 1) If form contents are valid
     // 2) If this service can be tested
     // If both conditions are true, we override form submission
     // and test the service using provided configuration.
     if (this.$form.get(0).checkValidity()) {
-      if (this.canTestService) {
-        e.preventDefault();
-        // eslint-disable-next-line no-jquery/no-serialize
-        this.testSettings(this.$form.serialize());
-      }
+      // eslint-disable-next-line no-jquery/no-serialize
+      this.testSettings(this.$form.serialize());
     } else {
-      e.preventDefault();
       eventHub.$emit('validateForm');
+      this.vue.$store.dispatch('setIsTesting', false);
     }
   }
 
-  handleServiceToggle() {
-    this.toggleServiceState();
-  }
-
   /**
    * Change Form's validation enforcement based on service status (active/inactive)
    */
   toggleServiceState() {
-    this.toggleSubmitBtnLabel();
     if (this.formActive) {
       this.$form.removeAttr('novalidate');
     } else if (!this.$form.attr('novalidate')) {
@@ -77,67 +75,23 @@ export default class IntegrationSettingsForm {
   }
 
   /**
-   * Toggle Submit button label based on Integration status and ability to test service
-   */
-  toggleSubmitBtnLabel() {
-    let btnLabel = __('Save changes');
-
-    if (this.formActive && this.canTestService) {
-      btnLabel = __('Test settings and save changes');
-    }
-
-    this.$submitBtnLabel.text(btnLabel);
-  }
-
-  /**
-   * Toggle Submit button state based on provided boolean value of `saveTestActive`
-   * When enabled, it does two things, and reverts back when disabled
-   *
-   * 1. It shows load spinner on submit button
-   * 2. Makes submit button disabled
-   */
-  toggleSubmitBtnState(saveTestActive) {
-    if (saveTestActive) {
-      this.$submitBtn.disable();
-      this.$submitBtnLoader.removeClass('hidden');
-    } else {
-      this.$submitBtn.enable();
-      this.$submitBtnLoader.addClass('hidden');
-    }
-  }
-
-  /**
    * Test Integration config
    */
   testSettings(formData) {
-    this.toggleSubmitBtnState(true);
-
     return axios
       .put(this.testEndPoint, formData)
       .then(({ data }) => {
         if (data.error) {
-          let flashActions;
-
-          if (data.test_failed) {
-            flashActions = {
-              title: __('Save anyway'),
-              clickHandler: e => {
-                e.preventDefault();
-                this.$form.submit();
-              },
-            };
-          }
-
-          flash(`${data.message} ${data.service_response}`, 'alert', document, flashActions);
+          toast(`${data.message} ${data.service_response}`);
         } else {
-          this.$form.submit();
+          toast(s__('Integrations|Connection successful.'));
         }
-
-        this.toggleSubmitBtnState(false);
       })
       .catch(() => {
-        flash(__('Something went wrong on our end.'));
-        this.toggleSubmitBtnState(false);
+        toast(__('Something went wrong on our end.'));
+      })
+      .finally(() => {
+        this.vue.$store.dispatch('setIsTesting', false);
       });
   }
 }