1 files changed, 90 insertions, 0 deletions
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>