debian-mirror-gitlab/app/assets/javascripts/integrations/integration_settings_form.js

98 lines
2.7 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import axios from '../lib/utils/axios_utils';
2020-11-24 15:15:51 +05:30
import { __, s__ } from '~/locale';
import toast from '~/vue_shared/plugins/global_toast';
2020-04-22 19:07:51 +05:30
import initForm from './edit';
import eventHub from './edit/event_hub';
2017-09-10 17:25:29 +05:30
export default class IntegrationSettingsForm {
constructor(formSelector) {
this.$form = $(formSelector);
2020-04-22 19:07:51 +05:30
this.formActive = false;
2017-09-10 17:25:29 +05:30
2020-11-24 15:15:51 +05:30
this.vue = null;
2017-09-10 17:25:29 +05:30
// Form Metadata
2018-03-27 19:54:05 +05:30
this.testEndPoint = this.$form.data('testUrl');
2017-09-10 17:25:29 +05:30
}
init() {
2020-04-22 19:07:51 +05:30
// Init Vue component
2020-11-24 15:15:51 +05:30
this.vue = initForm(
2020-07-28 23:09:34 +05:30
document.querySelector('.js-vue-integration-settings'),
2020-11-24 15:15:51 +05:30
document.querySelector('.js-vue-default-integration-settings'),
2020-07-28 23:09:34 +05:30
);
2020-04-22 19:07:51 +05:30
eventHub.$on('toggle', active => {
this.formActive = active;
2020-11-24 15:15:51 +05:30
this.toggleServiceState();
});
eventHub.$on('testIntegration', () => {
this.testIntegration();
});
eventHub.$on('saveIntegration', () => {
this.saveIntegration();
2020-04-22 19:07:51 +05:30
});
2017-09-10 17:25:29 +05:30
}
2020-11-24 15:15:51 +05:30
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);
2017-09-10 17:25:29 +05:30
}
2020-11-24 15:15:51 +05:30
}
2017-09-10 17:25:29 +05:30
2020-11-24 15:15:51 +05:30
testIntegration() {
2017-09-10 17:25:29 +05:30
// 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.
2020-06-23 00:09:42 +05:30
if (this.$form.get(0).checkValidity()) {
2020-11-24 15:15:51 +05:30
// eslint-disable-next-line no-jquery/no-serialize
this.testSettings(this.$form.serialize());
2020-06-23 00:09:42 +05:30
} else {
eventHub.$emit('validateForm');
2020-11-24 15:15:51 +05:30
this.vue.$store.dispatch('setIsTesting', false);
2017-09-10 17:25:29 +05:30
}
}
/**
* Change Form's validation enforcement based on service status (active/inactive)
*/
2020-04-22 19:07:51 +05:30
toggleServiceState() {
if (this.formActive) {
2017-09-10 17:25:29 +05:30
this.$form.removeAttr('novalidate');
} else if (!this.$form.attr('novalidate')) {
this.$form.attr('novalidate', 'novalidate');
}
}
/**
* Test Integration config
*/
testSettings(formData) {
2018-12-13 13:39:08 +05:30
return axios
.put(this.testEndPoint, formData)
2018-03-17 18:26:18 +05:30
.then(({ data }) => {
if (data.error) {
2020-11-24 15:15:51 +05:30
toast(`${data.message} ${data.service_response}`);
2018-03-17 18:26:18 +05:30
} else {
2020-11-24 15:15:51 +05:30
toast(s__('Integrations|Connection successful.'));
2018-03-17 18:26:18 +05:30
}
})
.catch(() => {
2020-11-24 15:15:51 +05:30
toast(__('Something went wrong on our end.'));
})
.finally(() => {
this.vue.$store.dispatch('setIsTesting', false);
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
}
}