Commit 5e721595 authored by Tom Quirk's avatar Tom Quirk

Remove jquery from integration settings form

parent b51e7099
import $ from 'jquery';
import { delay } from 'lodash'; import { delay } from 'lodash';
import { __, s__ } from '~/locale'; import { __, s__ } from '~/locale';
import toast from '~/vue_shared/plugins/global_toast'; import toast from '~/vue_shared/plugins/global_toast';
...@@ -8,13 +7,13 @@ import eventHub from './edit/event_hub'; ...@@ -8,13 +7,13 @@ import eventHub from './edit/event_hub';
export default class IntegrationSettingsForm { export default class IntegrationSettingsForm {
constructor(formSelector) { constructor(formSelector) {
this.$form = $(formSelector); this.$form = document.querySelector(formSelector);
this.formActive = false; this.formActive = false;
this.vue = null; this.vue = null;
// Form Metadata // Form Metadata
this.testEndPoint = this.$form.data('testUrl'); this.testEndPoint = this.$form.dataset.testUrl;
} }
init() { init() {
...@@ -34,8 +33,7 @@ export default class IntegrationSettingsForm { ...@@ -34,8 +33,7 @@ export default class IntegrationSettingsForm {
this.saveIntegration(); this.saveIntegration();
}); });
eventHub.$on('getJiraIssueTypes', () => { eventHub.$on('getJiraIssueTypes', () => {
// eslint-disable-next-line no-jquery/no-serialize this.getJiraIssueTypes(new FormData(this.$form));
this.getJiraIssueTypes(this.$form.serialize());
}); });
eventHub.$emit('formInitialized'); eventHub.$emit('formInitialized');
...@@ -47,11 +45,11 @@ export default class IntegrationSettingsForm { ...@@ -47,11 +45,11 @@ export default class IntegrationSettingsForm {
// 2) If this service can be saved // 2) If this service can be saved
// If both conditions are true, we override form submission // If both conditions are true, we override form submission
// and save the service using provided configuration. // and save the service using provided configuration.
const formValid = this.$form.get(0).checkValidity() || this.formActive === false; const formValid = this.$form.checkValidity() || this.formActive === false;
if (formValid) { if (formValid) {
delay(() => { delay(() => {
this.$form.trigger('submit'); this.$form.submit();
}, 100); }, 100);
} else { } else {
eventHub.$emit('validateForm'); eventHub.$emit('validateForm');
...@@ -65,9 +63,8 @@ export default class IntegrationSettingsForm { ...@@ -65,9 +63,8 @@ export default class IntegrationSettingsForm {
// 2) If this service can be tested // 2) If this service can be tested
// If both conditions are true, we override form submission // If both conditions are true, we override form submission
// and test the service using provided configuration. // and test the service using provided configuration.
if (this.$form.get(0).checkValidity()) { if (this.$form.checkValidity()) {
// eslint-disable-next-line no-jquery/no-serialize this.testSettings(new FormData(this.$form));
this.testSettings(this.$form.serialize());
} else { } else {
eventHub.$emit('validateForm'); eventHub.$emit('validateForm');
this.vue.$store.dispatch('setIsTesting', false); this.vue.$store.dispatch('setIsTesting', false);
...@@ -79,9 +76,9 @@ export default class IntegrationSettingsForm { ...@@ -79,9 +76,9 @@ export default class IntegrationSettingsForm {
*/ */
toggleServiceState() { toggleServiceState() {
if (this.formActive) { if (this.formActive) {
this.$form.removeAttr('novalidate'); this.$form.removeAttribute('novalidate');
} else if (!this.$form.attr('novalidate')) { } else if (!this.$form.getAttribute('novalidate')) {
this.$form.attr('novalidate', 'novalidate'); this.$form.setAttribute('novalidate', 'novalidate');
} }
} }
......
...@@ -23,7 +23,7 @@ describe('IntegrationSettingsForm', () => { ...@@ -23,7 +23,7 @@ describe('IntegrationSettingsForm', () => {
it('should initialize form element refs on class object', () => { it('should initialize form element refs on class object', () => {
// Form Reference // Form Reference
expect(integrationSettingsForm.$form).toBeDefined(); expect(integrationSettingsForm.$form).toBeDefined();
expect(integrationSettingsForm.$form.prop('nodeName')).toEqual('FORM'); expect(integrationSettingsForm.$form.nodeName).toBe('FORM');
expect(integrationSettingsForm.formActive).toBeDefined(); expect(integrationSettingsForm.formActive).toBeDefined();
}); });
...@@ -43,14 +43,14 @@ describe('IntegrationSettingsForm', () => { ...@@ -43,14 +43,14 @@ describe('IntegrationSettingsForm', () => {
integrationSettingsForm.formActive = true; integrationSettingsForm.formActive = true;
integrationSettingsForm.toggleServiceState(); integrationSettingsForm.toggleServiceState();
expect(integrationSettingsForm.$form.attr('novalidate')).not.toBeDefined(); expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBe(null);
}); });
it('should set `novalidate` attribute to form when called with `false`', () => { it('should set `novalidate` attribute to form when called with `false`', () => {
integrationSettingsForm.formActive = false; integrationSettingsForm.formActive = false;
integrationSettingsForm.toggleServiceState(); integrationSettingsForm.toggleServiceState();
expect(integrationSettingsForm.$form.attr('novalidate')).toBeDefined(); expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBeDefined();
}); });
}); });
...@@ -67,8 +67,7 @@ describe('IntegrationSettingsForm', () => { ...@@ -67,8 +67,7 @@ describe('IntegrationSettingsForm', () => {
integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
integrationSettingsForm.init(); integrationSettingsForm.init();
// eslint-disable-next-line no-jquery/no-serialize formData = new FormData(integrationSettingsForm.$form);
formData = integrationSettingsForm.$form.serialize();
}); });
afterEach(() => { afterEach(() => {
...@@ -145,8 +144,7 @@ describe('IntegrationSettingsForm', () => { ...@@ -145,8 +144,7 @@ describe('IntegrationSettingsForm', () => {
integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
integrationSettingsForm.init(); integrationSettingsForm.init();
// eslint-disable-next-line no-jquery/no-serialize formData = new FormData(integrationSettingsForm.$form);
formData = integrationSettingsForm.$form.serialize();
}); });
afterEach(() => { afterEach(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment