diff options
Diffstat (limited to 'app/assets/javascripts/integrations/integration_settings_form.js')
-rw-r--r-- | app/assets/javascripts/integrations/integration_settings_form.js | 116 |
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); }); } } |