diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-05 21:08:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-05 21:08:19 +0300 |
commit | aee8d27430f12f9b5bcdbbee4165b9fbc240d3e3 (patch) | |
tree | c67a92fe8fcf5c51545ea1fb00990a32224cbe9b /app/assets/javascripts/integrations | |
parent | 86e1f47cd19e7c164fb0b2c24e28a63ea27ae5ff (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/integrations')
4 files changed, 132 insertions, 21 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue index 8b95b04d93c..dc89e139320 100644 --- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -1,12 +1,15 @@ <script> import eventHub from '../event_hub'; -import { GlToggle } from '@gitlab/ui'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { GlFormGroup, GlToggle } from '@gitlab/ui'; export default { name: 'ActiveToggle', components: { + GlFormGroup, GlToggle, }, + mixins: [glFeatureFlagsMixin()], props: { initialActivated: { type: Boolean, @@ -33,7 +36,17 @@ export default { </script> <template> - <div> + <div v-if="glFeatures.integrationFormRefactor"> + <gl-form-group :label="__('Enable integration')" label-for="service[active]"> + <gl-toggle + v-model="activated" + name="service[active]" + class="gl-display-block gl-line-height-0" + @change="onToggle" + /> + </gl-form-group> + </div> + <div v-else> <div class="form-group row" role="group"> <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label> <div class="col-sm-10 pt-1"> diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index 4ee97993999..29318d6aaa8 100644 --- a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue +++ b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue @@ -1,4 +1,5 @@ <script> +import eventHub from '../event_hub'; import { capitalize, lowerCase, isEmpty } from 'lodash'; import { __, sprintf } from '~/locale'; import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; @@ -54,6 +55,7 @@ export default { data() { return { model: this.value, + validated: false, }; }, computed: { @@ -106,17 +108,35 @@ export default { name: this.fieldName, }; }, + valid() { + return !this.required || !isEmpty(this.model) || !this.validated; + }, }, created() { if (this.isNonEmptyPassword) { this.model = null; } + eventHub.$on('validateForm', this.validateForm); + }, + beforeDestroy() { + eventHub.$off('validateForm', this.validateForm); + }, + methods: { + validateForm() { + this.validated = true; + }, }, }; </script> <template> - <gl-form-group :label="label" :label-for="fieldId" :description="help"> + <gl-form-group + :label="label" + :label-for="fieldId" + :invalid-feedback="__('This field is required.')" + :state="valid" + :description="help" + > <template v-if="isCheckbox"> <input :name="fieldName" type="hidden" value="false" /> <gl-form-checkbox v-model="model" v-bind="sharedProps"> 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 70278e401ce..64e5789764f 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue @@ -1,12 +1,31 @@ <script> -import { GlFormCheckbox, GlFormRadio } from '@gitlab/ui'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { s__ } from '~/locale'; +import { GlFormGroup, GlFormCheckbox, GlFormRadio } from '@gitlab/ui'; + +const commentDetailOptions = [ + { + value: 'standard', + label: s__('Integrations|Standard'), + help: s__('Integrations|Includes commit title and branch'), + }, + { + value: 'all_details', + label: s__('Integrations|All details'), + help: s__( + 'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs', + ), + }, +]; export default { name: 'JiraTriggerFields', components: { + GlFormGroup, GlFormCheckbox, GlFormRadio, }, + mixins: [glFeatureFlagsMixin()], props: { initialTriggerCommit: { type: Boolean, @@ -32,13 +51,71 @@ export default { triggerMergeRequest: this.initialTriggerMergeRequest, enableComments: this.initialEnableComments, commentDetail: this.initialCommentDetail, + commentDetailOptions, }; }, + computed: { + showEnableComments() { + return this.triggerCommit || this.triggerMergeRequest; + }, + }, }; </script> <template> - <div class="form-group row pt-2" role="group"> + <div v-if="glFeatures.integrationFormRefactor"> + <gl-form-group + :label="__('Trigger')" + label-for="service[trigger]" + :description=" + s__( + 'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created.', + ) + " + > + <input name="service[commit_events]" type="hidden" value="false" /> + <gl-form-checkbox v-model="triggerCommit" name="service[commit_events]"> + {{ __('Commit') }} + </gl-form-checkbox> + + <input name="service[merge_requests_events]" type="hidden" value="false" /> + <gl-form-checkbox v-model="triggerMergeRequest" name="service[merge_requests_events]"> + {{ __('Merge request') }} + </gl-form-checkbox> + </gl-form-group> + + <gl-form-group + v-show="showEnableComments" + :label="s__('Integrations|Comment settings:')" + data-testid="comment-settings" + > + <input name="service[comment_on_event_enabled]" type="hidden" value="false" /> + <gl-form-checkbox v-model="enableComments" name="service[comment_on_event_enabled]"> + {{ s__('Integrations|Enable comments') }} + </gl-form-checkbox> + </gl-form-group> + + <gl-form-group + v-show="showEnableComments && enableComments" + :label="s__('Integrations|Comment detail:')" + data-testid="comment-detail" + > + <gl-form-radio + v-for="commentDetailOption in commentDetailOptions" + :key="commentDetailOption.value" + v-model="commentDetail" + :value="commentDetailOption.value" + name="service[comment_detail]" + > + {{ commentDetailOption.label }} + <template #help> + {{ commentDetailOption.help }} + </template> + </gl-form-radio> + </gl-form-group> + </div> + + <div v-else class="form-group row pt-2" role="group"> <label for="service[trigger]" class="col-form-label col-sm-2 pt-0">{{ __('Trigger') }}</label> <div class="col-sm-10"> <label class="weight-normal mb-2"> @@ -76,20 +153,16 @@ export default { <label> {{ s__('Integrations|Comment detail:') }} </label> - <gl-form-radio v-model="commentDetail" value="standard" name="service[comment_detail]"> - {{ s__('Integrations|Standard') }} - <template #help> - {{ s__('Integrations|Includes commit title and branch') }} - </template> - </gl-form-radio> - <gl-form-radio v-model="commentDetail" value="all_details" name="service[comment_detail]"> - {{ s__('Integrations|All details') }} + <gl-form-radio + v-for="commentDetailOption in commentDetailOptions" + :key="commentDetailOption.value" + v-model="commentDetail" + :value="commentDetailOption.value" + name="service[comment_detail]" + > + {{ commentDetailOption.label }} <template #help> - {{ - s__( - 'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs', - ) - }} + {{ commentDetailOption.help }} </template> </gl-form-radio> </div> diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js index 3067f4090b1..8844cbebe85 100644 --- a/app/assets/javascripts/integrations/integration_settings_form.js +++ b/app/assets/javascripts/integrations/integration_settings_form.js @@ -45,10 +45,15 @@ export default class IntegrationSettingsForm { // 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() && this.canTestService) { + if (this.$form.get(0).checkValidity()) { + if (this.canTestService) { + e.preventDefault(); + // eslint-disable-next-line no-jquery/no-serialize + this.testSettings(this.$form.serialize()); + } + } else { e.preventDefault(); - // eslint-disable-next-line no-jquery/no-serialize - this.testSettings(this.$form.serialize()); + eventHub.$emit('validateForm'); } } |