99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
import $ from 'jquery';
|
|
import axios from '../lib/utils/axios_utils';
|
|
import { __, s__ } from '~/locale';
|
|
import toast from '~/vue_shared/plugins/global_toast';
|
|
import initForm from './edit';
|
|
import eventHub from './edit/event_hub';
|
|
|
|
export default class IntegrationSettingsForm {
|
|
constructor(formSelector) {
|
|
this.$form = $(formSelector);
|
|
this.formActive = false;
|
|
|
|
this.vue = null;
|
|
|
|
// Form Metadata
|
|
this.testEndPoint = this.$form.data('testUrl');
|
|
}
|
|
|
|
init() {
|
|
// Init Vue component
|
|
this.vue = initForm(
|
|
document.querySelector('.js-vue-integration-settings'),
|
|
document.querySelector('.js-vue-default-integration-settings'),
|
|
);
|
|
eventHub.$on('toggle', active => {
|
|
this.formActive = active;
|
|
this.toggleServiceState();
|
|
});
|
|
eventHub.$on('testIntegration', () => {
|
|
this.testIntegration();
|
|
});
|
|
eventHub.$on('saveIntegration', () => {
|
|
this.saveIntegration();
|
|
});
|
|
}
|
|
|
|
saveIntegration() {
|
|
// Save Service if not active and check the following if active;
|
|
// 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.
|
|
const formValid = this.$form.get(0).checkValidity() || this.formActive === false;
|
|
|
|
if (formValid) {
|
|
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()) {
|
|
// eslint-disable-next-line no-jquery/no-serialize
|
|
this.testSettings(this.$form.serialize());
|
|
} else {
|
|
eventHub.$emit('validateForm');
|
|
this.vue.$store.dispatch('setIsTesting', false);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Change Form's validation enforcement based on service status (active/inactive)
|
|
*/
|
|
toggleServiceState() {
|
|
if (this.formActive) {
|
|
this.$form.removeAttr('novalidate');
|
|
} else if (!this.$form.attr('novalidate')) {
|
|
this.$form.attr('novalidate', 'novalidate');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Test Integration config
|
|
*/
|
|
testSettings(formData) {
|
|
return axios
|
|
.put(this.testEndPoint, formData)
|
|
.then(({ data }) => {
|
|
if (data.error) {
|
|
toast(`${data.message} ${data.service_response}`);
|
|
} else {
|
|
toast(s__('Integrations|Connection successful.'));
|
|
}
|
|
})
|
|
.catch(() => {
|
|
toast(__('Something went wrong on our end.'));
|
|
})
|
|
.finally(() => {
|
|
this.vue.$store.dispatch('setIsTesting', false);
|
|
});
|
|
}
|
|
}
|