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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<script>
import { GlAvatar, GlButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
export default {
name: 'JiraImportForm',
components: {
GlAvatar,
GlButton,
GlFormGroup,
GlFormSelect,
GlLabel,
},
currentUserAvatarUrl: gon.current_user_avatar_url,
currentUsername: gon.current_username,
props: {
issuesPath: {
type: String,
required: true,
},
jiraProjects: {
type: Array,
required: true,
},
},
data() {
return {
selectedOption: null,
selectState: null,
};
},
methods: {
initiateJiraImport(event) {
event.preventDefault();
if (!this.selectedOption) {
this.showValidationError();
} else {
this.hideValidationError();
this.$emit('initiateJiraImport', this.selectedOption);
}
},
hideValidationError() {
this.selectState = null;
},
showValidationError() {
this.selectState = false;
},
},
};
</script>
<template>
<div>
<h3 class="page-title">{{ __('New Jira import') }}</h3>
<hr />
<form @submit="initiateJiraImport">
<gl-form-group
class="row align-items-center"
:invalid-feedback="__('Please select a Jira project')"
:label="__('Import from')"
label-cols-sm="2"
label-for="jira-project-select"
>
<gl-form-select
id="jira-project-select"
v-model="selectedOption"
class="mb-2"
:options="jiraProjects"
:state="selectState"
/>
</gl-form-group>
<gl-form-group
class="row align-items-center"
:label="__('Issue label')"
label-cols-sm="2"
label-for="jira-project-label"
>
<gl-label
id="jira-project-label"
class="mb-2"
background-color="#428BCA"
title="jira-import::KEY-1"
scoped
/>
</gl-form-group>
<hr />
<p class="offset-md-1">
{{
__(
"For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
)
}}
</p>
<gl-form-group
class="row align-items-center mb-1"
:label="__('Title')"
label-cols-sm="2"
label-for="jira-project-title"
>
<p id="jira-project-title" class="mb-2">{{ __('jira.issue.summary') }}</p>
</gl-form-group>
<gl-form-group
class="row align-items-center mb-1"
:label="__('Reporter')"
label-cols-sm="2"
label-for="jira-project-reporter"
>
<gl-avatar
id="jira-project-reporter"
class="mb-2"
:src="$options.currentUserAvatarUrl"
:size="24"
:aria-label="$options.currentUsername"
/>
</gl-form-group>
<gl-form-group
class="row align-items-center mb-1"
:label="__('Description')"
label-cols-sm="2"
label-for="jira-project-description"
>
<p id="jira-project-description" class="mb-2">{{ __('jira.issue.description.content') }}</p>
</gl-form-group>
<div class="footer-block row-content-block d-flex justify-content-between">
<gl-button type="submit" category="primary" variant="success" class="js-no-auto-disable">
{{ __('Next') }}
</gl-button>
<gl-button :href="issuesPath">{{ __('Cancel') }}</gl-button>
</div>
</form>
</div>
</template>
|
