1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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>
|
