diff options
Diffstat (limited to 'app/assets/javascripts/integrations/edit/components')
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/active_checkbox.vue (renamed from app/assets/javascripts/integrations/edit/components/active_toggle.vue) | 30 | ||||
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/dynamic_field.vue | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/integration_form.vue | 59 | ||||
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue | 7 | ||||
| -rw-r--r-- | app/assets/javascripts/integrations/edit/components/override_dropdown.vue | 39 |
5 files changed, 99 insertions, 37 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue index e6a96600539..6698984d02f 100644 --- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue +++ b/app/assets/javascripts/integrations/edit/components/active_checkbox.vue @@ -1,36 +1,31 @@ <script> import { mapGetters } from 'vuex'; -import { GlFormGroup, GlToggle } from '@gitlab/ui'; +import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui'; import eventHub from '../event_hub'; export default { - name: 'ActiveToggle', + name: 'ActiveCheckbox', components: { GlFormGroup, - GlToggle, - }, - props: { - initialActivated: { - type: Boolean, - required: true, - }, + GlFormCheckbox, }, data() { return { - activated: this.initialActivated, + activated: false, }; }, computed: { - ...mapGetters(['isInheriting']), + ...mapGetters(['isInheriting', 'propsSource']), }, mounted() { + this.activated = this.propsSource.initialActivated; // Initialize view this.$nextTick(() => { - this.onToggle(this.activated); + this.onChange(this.activated); }); }, methods: { - onToggle(e) { + onChange(e) { eventHub.$emit('toggle', e); }, }, @@ -39,12 +34,15 @@ export default { <template> <gl-form-group :label="__('Enable integration')" label-for="service[active]"> - <gl-toggle + <input name="service[active]" type="hidden" :value="activated || false" /> + <gl-form-checkbox v-model="activated" name="service[active]" class="gl-display-block gl-line-height-0" :disabled="isInheriting" - @change="onToggle" - /> + @change="onChange" + > + {{ __('Active') }} + </gl-form-checkbox> </gl-form-group> </template> diff --git a/app/assets/javascripts/integrations/edit/components/dynamic_field.vue b/app/assets/javascripts/integrations/edit/components/dynamic_field.vue index 090381b8da4..9dde1ed1055 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> +/* eslint-disable vue/no-v-html */ import { mapGetters } from 'vuex'; import { capitalize, lowerCase, isEmpty } from 'lodash'; import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index 5088664c3bd..0460ed6791e 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,9 +1,11 @@ <script> import { mapState, mapActions, mapGetters } from 'vuex'; +import { GlButton } from '@gitlab/ui'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import eventHub from '../event_hub'; import OverrideDropdown from './override_dropdown.vue'; -import ActiveToggle from './active_toggle.vue'; +import ActiveCheckbox from './active_checkbox.vue'; import JiraTriggerFields from './jira_trigger_fields.vue'; import JiraIssuesFields from './jira_issues_fields.vue'; import TriggerFields from './trigger_fields.vue'; @@ -13,16 +15,20 @@ export default { name: 'IntegrationForm', components: { OverrideDropdown, - ActiveToggle, + ActiveCheckbox, JiraTriggerFields, JiraIssuesFields, TriggerFields, DynamicField, + GlButton, }, mixins: [glFeatureFlagsMixin()], computed: { - ...mapGetters(['currentKey', 'propsSource']), - ...mapState(['adminState', 'override']), + ...mapGetters(['currentKey', 'propsSource', 'isSavingOrTesting']), + ...mapState(['defaultState', 'override', 'isSaving', 'isTesting']), + isEditable() { + return this.propsSource.editable; + }, isJira() { return this.propsSource.type === 'jira'; }, @@ -31,7 +37,15 @@ export default { }, }, methods: { - ...mapActions(['setOverride']), + ...mapActions(['setOverride', 'setIsSaving', 'setIsTesting']), + onSaveClick() { + this.setIsSaving(true); + eventHub.$emit('saveIntegration'); + }, + onTestClick() { + this.setIsTesting(true); + eventHub.$emit('testIntegration'); + }, }, }; </script> @@ -39,16 +53,13 @@ export default { <template> <div> <override-dropdown - v-if="adminState !== null" - :inherit-from-id="adminState.id" + v-if="defaultState !== null" + :inherit-from-id="defaultState.id" :override="override" + :learn-more-path="propsSource.learnMorePath" @change="setOverride" /> - <active-toggle - v-if="propsSource.showActive" - :key="`${currentKey}-active-toggle`" - v-bind="propsSource.activeToggleProps" - /> + <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" /> <jira-trigger-fields v-if="isJira" :key="`${currentKey}-jira-trigger-fields`" @@ -70,5 +81,29 @@ export default { :key="`${currentKey}-jira-issues-fields`" v-bind="propsSource.jiraIssuesProps" /> + <div v-if="isEditable" class="footer-block row-content-block"> + <gl-button + category="primary" + variant="success" + type="submit" + :loading="isSaving" + :disabled="isSavingOrTesting" + data-qa-selector="save_changes_button" + @click.prevent="onSaveClick" + > + {{ __('Save changes') }} + </gl-button> + <gl-button + v-if="propsSource.canTest" + :loading="isTesting" + :disabled="isSavingOrTesting" + :href="propsSource.testPath" + @click.prevent="onTestClick" + > + {{ __('Test settings') }} + </gl-button> + + <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button> + </div> </div> </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 5a1f86718b0..1baa2b440b0 100644 --- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue +++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue @@ -37,6 +37,11 @@ export default { required: false, default: null, }, + gitlabIssuesEnabled: { + type: Boolean, + required: false, + default: true, + }, upgradePlanPath: { type: String, required: false, @@ -133,7 +138,7 @@ export default { :disabled="!enableJiraIssues" /> </gl-form-group> - <p> + <p v-if="gitlabIssuesEnabled"> <gl-sprintf :message=" s__( diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue index accfc26974c..c31dada8d2f 100644 --- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue +++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue @@ -1,6 +1,8 @@ <script> -import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; import { s__ } from '~/locale'; +import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants'; const dropdownOptions = [ { @@ -17,14 +19,20 @@ export default { dropdownOptions, name: 'OverrideDropdown', components: { - GlNewDropdown, - GlNewDropdownItem, + GlDropdown, + GlDropdownItem, + GlLink, }, props: { inheritFromId: { type: Number, required: true, }, + learnMorePath: { + type: String, + required: false, + default: null, + }, override: { type: Boolean, required: true, @@ -35,6 +43,16 @@ export default { selected: dropdownOptions.find(x => x.value === this.override), }; }, + computed: { + ...mapState(['defaultState']), + description() { + const level = this.defaultState.integrationLevel; + + return ( + overrideDropdownDescriptions[level] || overrideDropdownDescriptions[defaultIntegrationLevel] + ); + }, + }, methods: { onClick(option) { this.selected = option; @@ -48,16 +66,21 @@ export default { <div class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-py-4 gl-mt-5 gl-mb-6 gl-border-t-1 gl-border-t-solid gl-border-b-1 gl-border-b-solid gl-border-gray-100" > - <span>{{ s__('Integrations|Default settings are inherited from the instance level.') }}</span> + <span + >{{ description }} + <gl-link v-if="learnMorePath" :href="learnMorePath" target="_blank">{{ + __('Learn more') + }}</gl-link> + </span> <input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" /> - <gl-new-dropdown :text="selected.text"> - <gl-new-dropdown-item + <gl-dropdown :text="selected.text"> + <gl-dropdown-item v-for="option in $options.dropdownOptions" :key="option.value" @click="onClick(option)" > {{ option.text }} - </gl-new-dropdown-item> - </gl-new-dropdown> + </gl-dropdown-item> + </gl-dropdown> </div> </template> |