146 lines
3.5 KiB
Vue
146 lines
3.5 KiB
Vue
<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: {
|
|
importLabel: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
issuesPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
jiraProjects: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
default: undefined,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectState: null,
|
|
};
|
|
},
|
|
methods: {
|
|
initiateJiraImport(event) {
|
|
event.preventDefault();
|
|
if (this.value) {
|
|
this.hideValidationError();
|
|
this.$emit('initiateJiraImport', this.value);
|
|
} else {
|
|
this.showValidationError();
|
|
}
|
|
},
|
|
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"
|
|
class="mb-2"
|
|
:options="jiraProjects"
|
|
:state="selectState"
|
|
:value="value"
|
|
@change="$emit('input', $event)"
|
|
/>
|
|
</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="importLabel"
|
|
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>
|