diff options
Diffstat (limited to 'app/assets/javascripts/integrations')
8 files changed, 49 insertions, 107 deletions
diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index b90658fb13c..004601bc0a3 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -1,7 +1,5 @@ import { s__, __ } from '~/locale'; -export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm'; - export const integrationLevels = { GROUP: 'group', INSTANCE: 'instance', @@ -26,5 +24,3 @@ export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection s export const settingsTabTitle = __('Settings'); export const overridesTabTitle = s__('Integrations|Projects using custom settings'); - -export const INTEGRATION_FORM_SELECTOR = '.js-integration-settings-form'; diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index 4b0579a5beb..b4ceec22822 100644 --- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue +++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue @@ -9,8 +9,6 @@ import { } from '@gitlab/ui'; import { capitalize, lowerCase, isEmpty } from 'lodash'; import { mapGetters } from 'vuex'; -import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants'; -import eventHub from '../event_hub'; export default { name: 'DynamicField', @@ -70,11 +68,15 @@ export default { required: false, default: null, }, + isValidated: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { model: this.value, - validated: false, }; }, computed: { @@ -123,22 +125,13 @@ export default { }; }, valid() { - return !this.required || !isEmpty(this.model) || this.isNonEmptyPassword || !this.validated; + return !this.required || !isEmpty(this.model) || this.isNonEmptyPassword || !this.isValidated; }, }, created() { if (this.isNonEmptyPassword) { this.model = null; } - eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, - beforeDestroy() { - eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, - methods: { - validateForm() { - this.validated = true; - }, }, helpHtmlConfig: { ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index c3cc35adfa5..007a384f41e 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -5,16 +5,13 @@ import * as Sentry from '@sentry/browser'; import { mapState, mapActions, mapGetters } from 'vuex'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { - VALIDATE_INTEGRATION_FORM_EVENT, I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE, I18N_DEFAULT_ERROR_MESSAGE, I18N_SUCCESSFUL_CONNECTION_MESSAGE, - INTEGRATION_FORM_SELECTOR, integrationLevels, } from '~/integrations/constants'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; import csrf from '~/lib/utils/csrf'; -import eventHub from '../event_hub'; import { testIntegrationSettings } from '../api'; import ActiveCheckbox from './active_checkbox.vue'; import ConfirmationModal from './confirmation_modal.vue'; @@ -57,6 +54,7 @@ export default { isTesting: false, isSaving: false, isResetting: false, + isValidated: false, }; }, computed: { @@ -83,54 +81,38 @@ export default { disableButtons() { return Boolean(this.isSaving || this.isResetting || this.isTesting); }, - useVueForm() { - return this.glFeatures?.vueIntegrationForm; + form() { + return this.$refs.integrationForm.$el; }, - formContainerProps() { - return this.useVueForm - ? { - ref: 'integrationForm', - method: 'post', - class: 'gl-mb-3 gl-show-field-errors integration-settings-form', - action: this.propsSource.formPath, - novalidate: !this.integrationActive, - } - : {}; - }, - formContainer() { - return this.useVueForm ? GlForm : 'div'; - }, - }, - mounted() { - this.form = this.useVueForm - ? this.$refs.integrationForm.$el - : document.querySelector(INTEGRATION_FORM_SELECTOR); }, methods: { - ...mapActions(['setOverride', 'fetchResetIntegration', 'requestJiraIssueTypes']), + ...mapActions(['setOverride', 'requestJiraIssueTypes']), + setIsValidated() { + this.isValidated = true; + }, onSaveClick() { this.isSaving = true; if (this.integrationActive && !this.form.checkValidity()) { this.isSaving = false; - eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); + this.setIsValidated(); return; } this.form.submit(); }, onTestClick() { - this.isTesting = true; - if (!this.form.checkValidity()) { - eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); + this.setIsValidated(); return; } + this.isTesting = true; + testIntegrationSettings(this.propsSource.testPath, this.getFormData()) .then(({ data: { error, message = I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE } }) => { if (error) { - eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); + this.setIsValidated(); this.$toast.show(message); return; } @@ -169,16 +151,6 @@ export default { }, onToggleIntegrationState(integrationActive) { this.integrationActive = integrationActive; - if (!this.form || this.useVueForm) { - return; - } - - // If integration will be active, enable form validation. - if (integrationActive) { - this.form.removeAttribute('novalidate'); - } else { - this.form.setAttribute('novalidate', true); - } }, }, helpHtmlConfig: { @@ -191,17 +163,21 @@ export default { </script> <template> - <component :is="formContainer" v-bind="formContainerProps"> - <template v-if="useVueForm"> - <input type="hidden" name="_method" value="put" /> - <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> - <input - type="hidden" - name="redirect_to" - :value="propsSource.redirectTo" - data-testid="redirect-to-field" - /> - </template> + <gl-form + ref="integrationForm" + method="post" + class="gl-mb-3 gl-show-field-errors integration-settings-form" + :action="propsSource.formPath" + :novalidate="!integrationActive" + > + <input type="hidden" name="_method" value="put" /> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + <input + type="hidden" + name="redirect_to" + :value="propsSource.redirectTo" + data-testid="redirect-to-field" + /> <override-dropdown v-if="defaultState !== null" @@ -227,6 +203,7 @@ export default { v-if="isJira" :key="`${currentKey}-jira-trigger-fields`" v-bind="propsSource.triggerFieldsProps" + :is-validated="isValidated" /> <trigger-fields v-else-if="propsSource.triggerEvents.length" @@ -238,11 +215,13 @@ export default { v-for="field in propsSource.fields" :key="`${currentKey}-${field.name}`" v-bind="field" + :is-validated="isValidated" /> <jira-issues-fields v-if="isJira && !isInstanceOrGroupLevel" :key="`${currentKey}-jira-issues-fields`" v-bind="propsSource.jiraIssuesProps" + :is-validated="isValidated" @request-jira-issue-types="onRequestJiraIssueTypes" /> @@ -311,5 +290,5 @@ export default { </div> </div> </div> - </component> + </gl-form> </template> diff --git a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue index 99498501f6c..7f2f7620a86 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue @@ -1,9 +1,7 @@ <script> import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui'; import { mapGetters } from 'vuex'; -import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants'; import { s__, __ } from '~/locale'; -import eventHub from '../event_hub'; import JiraUpgradeCta from './jira_upgrade_cta.vue'; export default { @@ -64,29 +62,22 @@ export default { required: false, default: '', }, + isValidated: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { enableJiraIssues: this.initialEnableJiraIssues, projectKey: this.initialProjectKey, - validated: false, }; }, computed: { ...mapGetters(['isInheriting']), validProjectKey() { - return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated; - }, - }, - created() { - eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, - beforeDestroy() { - eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, - methods: { - validateForm() { - this.validated = true; + return !this.enableJiraIssues || Boolean(this.projectKey) || !this.isValidated; }, }, i18n: { diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue index 249a3e105b1..df5946b814a 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue @@ -9,9 +9,7 @@ import { } from '@gitlab/ui'; import { mapGetters } from 'vuex'; import { helpPagePath } from '~/helpers/help_page_helper'; -import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants'; import { s__ } from '~/locale'; -import eventHub from '../event_hub'; const commentDetailOptions = [ { @@ -92,10 +90,14 @@ export default { required: false, default: '', }, + isValidated: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { - validated: false, triggerCommit: this.initialTriggerCommit, triggerMergeRequest: this.initialTriggerMergeRequest, enableComments: this.initialEnableComments, @@ -115,19 +117,10 @@ export default { return this.triggerCommit || this.triggerMergeRequest; }, validIssueTransitionId() { - return !this.validated || Boolean(this.jiraIssueTransitionId); + return !this.isValidated || Boolean(this.jiraIssueTransitionId); }, }, - created() { - eventHub.$on(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, - beforeDestroy() { - eventHub.$off(VALIDATE_INTEGRATION_FORM_EVENT, this.validateForm); - }, methods: { - validateForm() { - this.validated = true; - }, showCustomIssueTransitions(currentOption) { return ( this.jiraIssueTransitionAutomatic === ISSUE_TRANSITION_CUSTOM && diff --git a/app/assets/javascripts/integrations/edit/event_hub.js b/app/assets/javascripts/integrations/edit/event_hub.js deleted file mode 100644 index e31806ad199..00000000000 --- a/app/assets/javascripts/integrations/edit/event_hub.js +++ /dev/null @@ -1,3 +0,0 @@ -import createEventHub from '~/helpers/event_hub_factory'; - -export default createEventHub(); diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js index 1398b710d1d..d31d3eb9d82 100644 --- a/app/assets/javascripts/integrations/edit/store/actions.js +++ b/app/assets/javascripts/integrations/edit/store/actions.js @@ -1,10 +1,8 @@ import { - VALIDATE_INTEGRATION_FORM_EVENT, I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE, I18N_DEFAULT_ERROR_MESSAGE, } from '~/integrations/constants'; import { testIntegrationSettings } from '../api'; -import eventHub from '../event_hub'; import * as types from './mutation_types'; export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override); @@ -19,7 +17,6 @@ export const requestJiraIssueTypes = ({ commit, dispatch, getters }, formData) = data: { issuetypes, error, message = I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE }, }) => { if (error || !issuetypes?.length) { - eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); throw new Error(message); } diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js index ddf6bef7554..eb74b0b1c73 100644 --- a/app/assets/javascripts/integrations/edit/store/mutation_types.js +++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js @@ -1,9 +1,5 @@ export const SET_OVERRIDE = 'SET_OVERRIDE'; -export const SET_IS_RESETTING = 'SET_IS_RESETTING'; export const SET_IS_LOADING_JIRA_ISSUE_TYPES = 'SET_IS_LOADING_JIRA_ISSUE_TYPES'; export const SET_JIRA_ISSUE_TYPES_ERROR_MESSAGE = 'SET_JIRA_ISSUE_TYPES_ERROR_MESSAGE'; export const SET_JIRA_ISSUE_TYPES = 'SET_JIRA_ISSUE_TYPES'; - -export const REQUEST_RESET_INTEGRATION = 'REQUEST_RESET_INTEGRATION'; -export const RECEIVE_RESET_INTEGRATION_ERROR = 'RECEIVE_RESET_INTEGRATION_ERROR'; |