diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue new file mode 100644 index 0000000000000000000000000000000000000000..2b0aa2586e4e190f6673b9153bf70de1054e4afa --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -0,0 +1,53 @@ + + + diff --git a/app/assets/javascripts/integrations/edit/event_hub.js b/app/assets/javascripts/integrations/edit/event_hub.js new file mode 100644 index 0000000000000000000000000000000000000000..0948c2e53524a736a55c060600868ce89ee7687a --- /dev/null +++ b/app/assets/javascripts/integrations/edit/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a2ba581d4293221ae8f43a4933a11d79e4ceba55 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/index.js @@ -0,0 +1,30 @@ +import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import ActiveToggle from './components/active_toggle.vue'; + +export default el => { + if (!el) { + return null; + } + + const { showActive: showActiveStr, activated: activatedStr, disabled: disabledStr } = el.dataset; + const showActive = parseBoolean(showActiveStr); + const activated = parseBoolean(activatedStr); + const disabled = parseBoolean(disabledStr); + + if (!showActive) { + return null; + } + + return new Vue({ + el, + render(createElement) { + return createElement(ActiveToggle, { + props: { + initialActivated: activated, + disabled, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js index 1c9b94ade8ac902183db67f08aecfcb2579ac9a3..3067f4090b1854a47ec9f343cf08292a4394a3af 100644 --- a/app/assets/javascripts/integrations/integration_settings_form.js +++ b/app/assets/javascripts/integrations/integration_settings_form.js @@ -2,28 +2,33 @@ import $ from 'jquery'; import axios from '../lib/utils/axios_utils'; import flash from '../flash'; import { __ } from '~/locale'; +import initForm from './edit'; +import eventHub from './edit/event_hub'; export default class IntegrationSettingsForm { constructor(formSelector) { this.$form = $(formSelector); + this.formActive = false; // Form Metadata this.canTestService = this.$form.data('canTest'); this.testEndPoint = this.$form.data('testUrl'); // Form Child Elements - this.$serviceToggle = this.$form.find('#service_active'); 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() { - // Initialize View - this.toggleServiceState(this.$serviceToggle.is(':checked')); + // Init Vue component + initForm(document.querySelector('.js-vue-integration-settings')); + eventHub.$on('toggle', active => { + this.formActive = active; + this.handleServiceToggle(); + }); // Bind Event Listeners - this.$serviceToggle.on('change', e => this.handleServiceToggle(e)); this.$submitBtn.on('click', e => this.handleSettingsSave(e)); } @@ -31,7 +36,7 @@ export default class IntegrationSettingsForm { // 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.$serviceToggle.is(':checked')) { + if (!this.formActive) { return; } @@ -47,16 +52,16 @@ export default class IntegrationSettingsForm { } } - handleServiceToggle(e) { - this.toggleServiceState($(e.currentTarget).is(':checked')); + handleServiceToggle() { + this.toggleServiceState(); } /** * Change Form's validation enforcement based on service status (active/inactive) */ - toggleServiceState(serviceActive) { - this.toggleSubmitBtnLabel(serviceActive); - if (serviceActive) { + toggleServiceState() { + this.toggleSubmitBtnLabel(); + if (this.formActive) { this.$form.removeAttr('novalidate'); } else if (!this.$form.attr('novalidate')) { this.$form.attr('novalidate', 'novalidate'); @@ -66,10 +71,10 @@ export default class IntegrationSettingsForm { /** * Toggle Submit button label based on Integration status and ability to test service */ - toggleSubmitBtnLabel(serviceActive) { + toggleSubmitBtnLabel() { let btnLabel = __('Save changes'); - if (serviceActive && this.canTestService) { + if (this.formActive && this.canTestService) { btnLabel = __('Test settings and save changes'); } diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 9cb592ceedbe1f310f5cd312fdec323f879a5a8c..f82b3554cac6fe269e9ec03e0f0068f9440df56b 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -39,13 +39,18 @@ export default { required: false, default: true, }, + showSpinner: { + type: Boolean, + required: false, + default: true, + }, }, computed: { toggleChevronClass() { return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down'; }, noteTimestampLink() { - return `#note_${this.noteId}`; + return this.noteId ? `#note_${this.noteId}` : undefined; }, hasAuthor() { return this.author && Object.keys(this.author).length; @@ -60,7 +65,9 @@ export default { this.$emit('toggleHandler'); }, updateTargetNoteHash() { - this.setTargetNoteHash(this.noteTimestampLink); + if (this.$store) { + this.setTargetNoteHash(this.noteTimestampLink); + } }, }, }; @@ -101,16 +108,20 @@ export default { +