diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 03:15:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 03:15:27 +0300 |
commit | d52f8933ea07f083dfc05d4bed50d4de8baf8dd9 (patch) | |
tree | 6cf2d2b4180ddd59c2f6dedabc272cc6f40ea81d /app/assets/javascripts/integrations | |
parent | 0f6fb8a8c9ccad0d0f4b8c5e2f72aa50d35a0d0d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/integrations')
3 files changed, 101 insertions, 3 deletions
diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index 7daa6433fb8..edc355fdc8d 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -25,3 +25,11 @@ 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 integrationFormSections = { + CONNECTION: 'connection', +}; + +export const integrationFormSectionComponents = { + [integrationFormSections.CONNECTION]: 'IntegrationSectionConnection', +}; diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index f955cc1b432..872b8d0b2b7 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -10,6 +10,7 @@ import { I18N_DEFAULT_ERROR_MESSAGE, I18N_SUCCESSFUL_CONNECTION_MESSAGE, integrationLevels, + integrationFormSectionComponents, } from '~/integrations/constants'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; import csrf from '~/lib/utils/csrf'; @@ -34,6 +35,10 @@ export default { DynamicField, ConfirmationModal, ResetConfirmationModal, + IntegrationSectionConnection: () => + import( + /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue' + ), GlButton, GlForm, }, @@ -80,9 +85,23 @@ export default { disableButtons() { return Boolean(this.isSaving || this.isResetting || this.isTesting); }, + sectionsEnabled() { + return this.glFeatures.integrationFormSections; + }, + hasSections() { + return this.sectionsEnabled && this.customState.sections.length !== 0; + }, + fieldsWithoutSection() { + return this.sectionsEnabled + ? this.propsSource.fields.filter((field) => !field.section) + : this.propsSource.fields; + }, }, methods: { ...mapActions(['setOverride', 'requestJiraIssueTypes']), + fieldsForSection(section) { + return this.propsSource.fields.filter((field) => field.section === section.type); + }, form() { return this.$refs.integrationForm.$el; }, @@ -158,6 +177,7 @@ export default { FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes }, csrf, + integrationFormSectionComponents, }; </script> @@ -186,15 +206,40 @@ export default { @change="setOverride" /> + <template v-if="hasSections"> + <div + v-for="section in customState.sections" + :key="section.type" + class="gl-border-b gl-mb-5" + data-testid="integration-section" + > + <div class="row"> + <div class="col-lg-4"> + <h4 class="gl-mt-0">{{ section.title }}</h4> + <p v-safe-html="section.description"></p> + </div> + + <div class="col-lg-8"> + <component + :is="$options.integrationFormSectionComponents[section.type]" + :fields="fieldsForSection(section)" + :is-validated="isValidated" + @toggle-integration-active="onToggleIntegrationState" + /> + </div> + </div> + </div> + </template> + <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-8"> <!-- helpHtml is trusted input --> - <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div> + <div v-if="helpHtml && !hasSections" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div> <active-checkbox - v-if="propsSource.showActive" + v-if="propsSource.showActive && !hasSections" :key="`${currentKey}-active-checkbox`" @toggle-integration-active="onToggleIntegrationState" /> @@ -211,7 +256,7 @@ export default { :type="propsSource.type" /> <dynamic-field - v-for="field in propsSource.fields" + v-for="field in fieldsWithoutSection" :key="`${currentKey}-${field.name}`" v-bind="field" :is-validated="isValidated" diff --git a/app/assets/javascripts/integrations/edit/components/sections/connection.vue b/app/assets/javascripts/integrations/edit/components/sections/connection.vue new file mode 100644 index 00000000000..364e9324e43 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/sections/connection.vue @@ -0,0 +1,45 @@ +<script> +import { mapGetters } from 'vuex'; + +import ActiveCheckbox from '../active_checkbox.vue'; +import DynamicField from '../dynamic_field.vue'; + +export default { + name: 'IntegrationSectionConnection', + components: { + ActiveCheckbox, + DynamicField, + }, + props: { + fields: { + type: Array, + required: false, + default: () => [], + }, + isValidated: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + ...mapGetters(['currentKey', 'propsSource']), + }, +}; +</script> + +<template> + <div> + <active-checkbox + v-if="propsSource.showActive" + :key="`${currentKey}-active-checkbox`" + @toggle-integration-active="$emit('toggle-integration-active', $event)" + /> + <dynamic-field + v-for="field in fields" + :key="`${currentKey}-${field.name}`" + v-bind="field" + :is-validated="isValidated" + /> + </div> +</template> |