diff options
Diffstat (limited to 'app/assets/javascripts/integrations')
6 files changed, 254 insertions, 23 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue index 2b0aa2586e4..8b95b04d93c 100644 --- a/app/assets/javascripts/integrations/edit/components/active_toggle.vue +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -12,10 +12,6 @@ export default { type: Boolean, required: true, }, - disabled: { - type: Boolean, - required: true, - }, }, data() { return { @@ -41,12 +37,7 @@ export default { <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"> - <gl-toggle - v-model="activated" - :disabled="disabled" - name="service[active]" - @change="onToggle" - /> + <gl-toggle v-model="activated" name="service[active]" @change="onToggle" /> </div> </div> </div> diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue new file mode 100644 index 00000000000..fbe58c30b13 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -0,0 +1,50 @@ +<script> +import ActiveToggle from './active_toggle.vue'; +import JiraTriggerFields from './jira_trigger_fields.vue'; +import TriggerFields from './trigger_fields.vue'; + +export default { + name: 'IntegrationForm', + components: { + ActiveToggle, + JiraTriggerFields, + TriggerFields, + }, + props: { + activeToggleProps: { + type: Object, + required: true, + }, + showActive: { + type: Boolean, + required: true, + }, + triggerFieldsProps: { + type: Object, + required: true, + }, + triggerEvents: { + type: Array, + required: false, + default: () => [], + }, + type: { + type: String, + required: true, + }, + }, + computed: { + isJira() { + return this.type === 'jira'; + }, + }, +}; +</script> + +<template> + <div> + <active-toggle v-if="showActive" v-bind="activeToggleProps" /> + <jira-trigger-fields v-if="isJira" v-bind="triggerFieldsProps" /> + <trigger-fields v-else-if="triggerEvents.length" :events="triggerEvents" :type="type" /> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue new file mode 100644 index 00000000000..70278e401ce --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue @@ -0,0 +1,99 @@ +<script> +import { GlFormCheckbox, GlFormRadio } from '@gitlab/ui'; + +export default { + name: 'JiraTriggerFields', + components: { + GlFormCheckbox, + GlFormRadio, + }, + props: { + initialTriggerCommit: { + type: Boolean, + required: true, + }, + initialTriggerMergeRequest: { + type: Boolean, + required: true, + }, + initialEnableComments: { + type: Boolean, + required: true, + }, + initialCommentDetail: { + type: String, + required: false, + default: 'standard', + }, + }, + data() { + return { + triggerCommit: this.initialTriggerCommit, + triggerMergeRequest: this.initialTriggerMergeRequest, + enableComments: this.initialEnableComments, + commentDetail: this.initialCommentDetail, + }; + }, +}; +</script> + +<template> + <div 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"> + {{ + s__( + 'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created.', + ) + }} + </label> + + <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> + + <div + v-show="triggerCommit || triggerMergeRequest" + class="mt-4" + data-testid="comment-settings" + > + <label> + {{ s__('Integrations|Comment settings:') }} + </label> + <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> + + <div v-show="enableComments" class="mt-4" data-testid="comment-detail"> + <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') }} + <template #help> + {{ + s__( + 'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs', + ) + }} + </template> + </gl-form-radio> + </div> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue new file mode 100644 index 00000000000..531490ae40c --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/trigger_fields.vue @@ -0,0 +1,73 @@ +<script> +import { startCase } from 'lodash'; +import { __ } from '~/locale'; +import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; + +const typeWithPlaceholder = { + SLACK: 'slack', + MATTERMOST: 'mattermost', +}; + +const placeholderForType = { + [typeWithPlaceholder.SLACK]: __('Slack channels (e.g. general, development)'), + [typeWithPlaceholder.MATTERMOST]: __('Channel handle (e.g. town-square)'), +}; + +export default { + name: 'TriggerFields', + components: { + GlFormGroup, + GlFormCheckbox, + GlFormInput, + }, + props: { + events: { + type: Array, + required: false, + default: null, + }, + type: { + type: String, + required: true, + }, + }, + computed: { + placeholder() { + return placeholderForType[this.type]; + }, + }, + methods: { + checkboxName(name) { + return `service[${name}]`; + }, + fieldName(name) { + return `service[${name}]`; + }, + startCase, + }, +}; +</script> + +<template> + <gl-form-group + class="gl-pt-3" + :label="__('Trigger')" + label-for="trigger-fields" + data-testid="trigger-fields-group" + > + <div id="trigger-fields" class="gl-pt-3"> + <gl-form-group v-for="event in events" :key="event.title" :description="event.description"> + <input :name="checkboxName(event.name)" type="hidden" value="false" /> + <gl-form-checkbox v-model="event.value" :name="checkboxName(event.name)"> + {{ startCase(event.title) }} + </gl-form-checkbox> + <gl-form-input + v-if="event.field" + v-model="event.field.value" + :name="fieldName(event.field.name)" + :placeholder="placeholder" + /> + </gl-form-group> + </div> + </gl-form-group> +</template> diff --git a/app/assets/javascripts/integrations/edit/event_hub.js b/app/assets/javascripts/integrations/edit/event_hub.js index 0948c2e5352..e31806ad199 100644 --- a/app/assets/javascripts/integrations/edit/event_hub.js +++ b/app/assets/javascripts/integrations/edit/event_hub.js @@ -1,3 +1,3 @@ -import Vue from 'vue'; +import createEventHub from '~/helpers/event_hub_factory'; -export default new Vue(); +export default createEventHub(); diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index a2ba581d429..2ae1342a558 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -1,28 +1,46 @@ import Vue from 'vue'; import { parseBoolean } from '~/lib/utils/common_utils'; -import ActiveToggle from './components/active_toggle.vue'; +import IntegrationForm from './components/integration_form.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; + function parseBooleanInData(data) { + const result = {}; + Object.entries(data).forEach(([key, value]) => { + result[key] = parseBoolean(value); + }); + return result; } + const { type, commentDetail, triggerEvents, ...booleanAttributes } = el.dataset; + const { + showActive, + activated, + commitEvents, + mergeRequestEvents, + enableComments, + } = parseBooleanInData(booleanAttributes); + return new Vue({ el, render(createElement) { - return createElement(ActiveToggle, { + return createElement(IntegrationForm, { props: { - initialActivated: activated, - disabled, + activeToggleProps: { + initialActivated: activated, + }, + showActive, + type, + triggerFieldsProps: { + initialTriggerCommit: commitEvents, + initialTriggerMergeRequest: mergeRequestEvents, + initialEnableComments: enableComments, + initialCommentDetail: commentDetail, + }, + triggerEvents: JSON.parse(triggerEvents), }, }); }, |