diff options
Diffstat (limited to 'app/assets/javascripts/jira_import/components/jira_import_form.vue')
-rw-r--r-- | app/assets/javascripts/jira_import/components/jira_import_form.vue | 54 |
1 files changed, 48 insertions, 6 deletions
diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue index 4de04efe1b0..0146f564260 100644 --- a/app/assets/javascripts/jira_import/components/jira_import_form.vue +++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue @@ -1,17 +1,50 @@ <script> -import { GlAvatar, GlNewButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui'; +import { GlAvatar, GlButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui'; export default { name: 'JiraImportForm', components: { GlAvatar, - GlNewButton, + 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> @@ -19,14 +52,21 @@ export default { <div> <h3 class="page-title">{{ __('New Jira import') }}</h3> <hr /> - <form> + <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" /> + <gl-form-select + id="jira-project-select" + v-model="selectedOption" + class="mb-2" + :options="jiraProjects" + :state="selectState" + /> </gl-form-group> <gl-form-group @@ -86,8 +126,10 @@ export default { </gl-form-group> <div class="footer-block row-content-block d-flex justify-content-between"> - <gl-new-button category="primary" variant="success">{{ __('Next') }}</gl-new-button> - <gl-new-button>{{ __('Cancel') }}</gl-new-button> + <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> |