diff options
Diffstat (limited to 'app/assets/javascripts/integrations/edit')
4 files changed, 131 insertions, 69 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index d86e6326f64..1e58b604bf7 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlBadge, GlButton, GlForm } from '@gitlab/ui'; +import { GlAlert, GlForm } from '@gitlab/ui'; import axios from 'axios'; import * as Sentry from '@sentry/browser'; import { mapState, mapActions, mapGetters } from 'vuex'; @@ -10,8 +10,6 @@ import { I18N_DEFAULT_ERROR_MESSAGE, I18N_SUCCESSFUL_CONNECTION_MESSAGE, INTEGRATION_FORM_TYPE_SLACK, - integrationFormSectionComponents, - billingPlanNames, } from '~/integrations/constants'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; import csrf from '~/lib/utils/csrf'; @@ -21,6 +19,7 @@ import ActiveCheckbox from './active_checkbox.vue'; import DynamicField from './dynamic_field.vue'; import OverrideDropdown from './override_dropdown.vue'; import TriggerFields from './trigger_fields.vue'; +import IntegrationFormSection from './integration_forms/section.vue'; import IntegrationFormActions from './integration_form_actions.vue'; export default { @@ -31,29 +30,8 @@ export default { TriggerFields, DynamicField, IntegrationFormActions, - IntegrationSectionConfiguration: () => - import( - /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue' - ), - IntegrationSectionConnection: () => - import( - /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue' - ), - IntegrationSectionJiraIssues: () => - import( - /* webpackChunkName: 'integrationSectionJiraIssues' */ '~/integrations/edit/components/sections/jira_issues.vue' - ), - IntegrationSectionJiraTrigger: () => - import( - /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue' - ), - IntegrationSectionTrigger: () => - import( - /* webpackChunkName: 'integrationSectionTrigger' */ '~/integrations/edit/components/sections/trigger.vue' - ), + IntegrationFormSection, GlAlert, - GlBadge, - GlButton, GlForm, }, directives: { @@ -120,9 +98,6 @@ export default { }, methods: { ...mapActions(['setOverride', 'requestJiraIssueTypes']), - fieldsForSection(section) { - return this.propsSource.fields.filter((field) => field.section === section.type); - }, form() { return this.$refs.integrationForm.$el; }, @@ -189,23 +164,21 @@ export default { this.isResetting = false; }); }, - onRequestJiraIssueTypes() { - this.requestJiraIssueTypes(this.getFormData()); - }, getFormData() { return new FormData(this.form()); }, onToggleIntegrationState(integrationActive) { this.integrationActive = integrationActive; }, + onRequestJiraIssueTypes() { + this.requestJiraIssueTypes(this.getFormData()); + }, }, helpHtmlConfig: { ADD_TAGS: ['use'], // to support icon SVGs FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes }, csrf, - integrationFormSectionComponents, - billingPlanNames, slackUpgradeInfo: { title: s__( `SlackIntegration|Update to the latest version of GitLab for Slack to get notifications`, @@ -280,42 +253,15 @@ export default { </div> <template v-if="hasSections"> - <div + <integration-form-section v-for="(section, index) in customState.sections" :key="section.type" + :section="section" + :is-validated="isValidated" :class="{ 'gl-border-b gl-pb-3 gl-mb-6': index !== customState.sections.length - 1 }" - data-testid="integration-section" - > - <section class="gl-lg-display-flex"> - <div class="gl-flex-basis-third gl-mr-4"> - <h4 class="gl-mt-0"> - {{ section.title - }}<gl-badge - v-if="section.plan" - :href="propsSource.aboutPricingUrl" - target="_blank" - rel="noopener noreferrer" - variant="tier" - icon="license" - class="gl-ml-3" - > - {{ $options.billingPlanNames[section.plan] }} - </gl-badge> - </h4> - <p v-safe-html="section.description"></p> - </div> - - <div class="gl-flex-basis-two-thirds"> - <component - :is="$options.integrationFormSectionComponents[section.type]" - :fields="fieldsForSection(section)" - :is-validated="isValidated" - @toggle-integration-active="onToggleIntegrationState" - @request-jira-issue-types="onRequestJiraIssueTypes" - /> - </div> - </section> - </div> + @toggle-integration-active="onToggleIntegrationState" + @request-jira-issue-types="onRequestJiraIssueTypes" + /> </template> <section v-if="hasFieldsWithoutSection" class="gl-lg-display-flex gl-justify-content-end"> diff --git a/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue new file mode 100644 index 00000000000..ce39954735a --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue @@ -0,0 +1,90 @@ +<script> +import { GlBadge } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import { integrationFormSectionComponents, billingPlanNames } from '~/integrations/constants'; + +export default { + name: 'IntegrationFormSection', + components: { + GlBadge, + IntegrationSectionConfiguration: () => + import( + /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue' + ), + IntegrationSectionConnection: () => + import( + /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue' + ), + IntegrationSectionJiraIssues: () => + import( + /* webpackChunkName: 'integrationSectionJiraIssues' */ '~/integrations/edit/components/sections/jira_issues.vue' + ), + IntegrationSectionJiraTrigger: () => + import( + /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue' + ), + IntegrationSectionTrigger: () => + import( + /* webpackChunkName: 'integrationSectionTrigger' */ '~/integrations/edit/components/sections/trigger.vue' + ), + }, + directives: { + SafeHtml, + }, + props: { + section: { + type: Object, + required: true, + }, + isValidated: { + type: Boolean, + required: true, + }, + }, + computed: { + ...mapGetters(['propsSource']), + }, + methods: { + fieldsForSection(section) { + return this.propsSource.fields.filter((field) => field.section === section.type); + }, + }, + billingPlanNames, + integrationFormSectionComponents, +}; +</script> +<template> + <section class="gl-lg-display-flex"> + <div class="gl-flex-basis-third gl-mr-4"> + <h4 class="gl-mt-0"> + {{ section.title + }}<gl-badge + v-if="section.plan" + :href="propsSource.aboutPricingUrl" + target="_blank" + rel="noopener noreferrer" + variant="tier" + icon="license" + class="gl-ml-3" + > + {{ $options.billingPlanNames[section.plan] }} + </gl-badge> + </h4> + <p v-safe-html="section.description"></p> + </div> + + <div + v-if="$options.integrationFormSectionComponents[section.type]" + class="gl-flex-basis-two-thirds" + > + <component + :is="$options.integrationFormSectionComponents[section.type]" + :fields="fieldsForSection(section)" + :is-validated="isValidated" + @toggle-integration-active="$emit('toggle-integration-active', $event)" + @request-jira-issue-types="$emit('request-jira-issue-types', $event)" + /> + </div> + </section> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/sections/trigger.vue b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue index 9af5070d4cf..00546671aa7 100644 --- a/app/assets/javascripts/integrations/edit/components/sections/trigger.vue +++ b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue @@ -15,11 +15,12 @@ export default { </script> <template> - <div> + <div data-testid="trigger-fields-group"> <trigger-field v-for="event in propsSource.triggerEvents" :key="`${currentKey}-trigger-fields-${event.name}`" :event="event" + :type="propsSource.type" class="gl-mb-3" /> </div> diff --git a/app/assets/javascripts/integrations/edit/components/trigger_field.vue b/app/assets/javascripts/integrations/edit/components/trigger_field.vue index dc5ae2f3a3d..57753c61587 100644 --- a/app/assets/javascripts/integrations/edit/components/trigger_field.vue +++ b/app/assets/javascripts/integrations/edit/components/trigger_field.vue @@ -1,13 +1,17 @@ <script> -import { GlFormCheckbox } from '@gitlab/ui'; +import { GlFormCheckbox, GlFormInput } from '@gitlab/ui'; import { mapGetters } from 'vuex'; -import { integrationTriggerEventTitles } from '~/integrations/constants'; +import { + placeholderForType, + integrationTriggerEventTitles, +} from 'any_else_ce/integrations/constants'; export default { name: 'TriggerField', components: { GlFormCheckbox, + GlFormInput, }, props: { event: { @@ -15,10 +19,15 @@ export default { required: false, default: () => ({}), }, + type: { + type: String, + required: true, + }, }, data() { return { value: false, + fieldValue: this.event.field?.value, }; }, computed: { @@ -26,9 +35,15 @@ export default { name() { return `service[${this.event.name}]`; }, + fieldName() { + return `service[${this.event.field?.name}]`; + }, title() { return integrationTriggerEventTitles[this.event.name]; }, + defaultPlaceholder() { + return placeholderForType[this.type]; + }, }, mounted() { this.value = this.event.value || false; @@ -42,5 +57,15 @@ export default { <gl-form-checkbox v-model="value" :disabled="isInheriting"> {{ title }} </gl-form-checkbox> + <div class="gl-ml-6"> + <gl-form-input + v-if="event.field" + v-show="value" + v-model="fieldValue" + :name="fieldName" + :placeholder="event.field.placeholder || defaultPlaceholder" + :readonly="isInheriting" + /> + </div> </div> </template> |