Add latest changes from gitlab-org/gitlab@master

3 files changed, 45 insertions, 1 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 87e9f818f96..e4f6e931ec0 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -27,6 +27,7 @@ export const settingsTabTitle = __('Settings');
 export const overridesTabTitle = s__('Integrations|Projects using custom settings');
 
 export const integrationFormSections = {
+  CONFIGURATION: 'configuration',
   CONNECTION: 'connection',
   JIRA_TRIGGER: 'jira_trigger',
   JIRA_ISSUES: 'jira_issues',
@@ -34,6 +35,7 @@ export const integrationFormSections = {
 };
 
 export const integrationFormSectionComponents = {
+  [integrationFormSections.CONFIGURATION]: 'IntegrationSectionConfiguration',
   [integrationFormSections.CONNECTION]: 'IntegrationSectionConnection',
   [integrationFormSections.JIRA_TRIGGER]: 'IntegrationSectionJiraTrigger',
   [integrationFormSections.JIRA_ISSUES]: 'IntegrationSectionJiraIssues',
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index f751dc6c7a1..9307d7c2d3d 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -37,6 +37,10 @@ export default {
     DynamicField,
     ConfirmationModal,
     ResetConfirmationModal,
+    IntegrationSectionConfiguration: () =>
+      import(
+        /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue'
+      ),
     IntegrationSectionConnection: () =>
       import(
         /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue'
@@ -197,7 +201,7 @@ export default {
   <gl-form
     ref="integrationForm"
     method="post"
-    class="gl-mb-3 gl-show-field-errors integration-settings-form"
+    class="gl-mt-6 gl-mb-3 gl-show-field-errors integration-settings-form"
     :action="propsSource.formPath"
     :novalidate="!integrationActive"
   >
diff --git a/app/assets/javascripts/integrations/edit/components/sections/configuration.vue b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue
new file mode 100644
index 00000000000..9e1ad24ae9f
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue
@@ -0,0 +1,38 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import DynamicField from '../dynamic_field.vue';
+
+export default {
+  name: 'IntegrationSectionConfiguration',
+  components: {
+    DynamicField,
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isValidated: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters(['currentKey']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <dynamic-field
+      v-for="field in fields"
+      :key="`${currentKey}-${field.name}`"
+      v-bind="field"
+      :is-validated="isValidated"
+    />
+  </div>
+</template>