diff options
Diffstat (limited to 'app/assets/javascripts/projects/commit/components/form_modal.vue')
-rw-r--r-- | app/assets/javascripts/projects/commit/components/form_modal.vue | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/commit/components/form_modal.vue b/app/assets/javascripts/projects/commit/components/form_modal.vue new file mode 100644 index 00000000000..6411b1ca921 --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/form_modal.vue @@ -0,0 +1,137 @@ +<script> +import { GlModal, GlForm, GlFormCheckbox, GlSprintf, GlFormGroup } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +import eventHub from '../event_hub'; +import csrf from '~/lib/utils/csrf'; +import BranchesDropdown from './branches_dropdown.vue'; + +export default { + components: { + BranchesDropdown, + GlModal, + GlForm, + GlFormCheckbox, + GlSprintf, + GlFormGroup, + }, + inject: { + prependedText: { + default: '', + }, + }, + props: { + i18n: { + type: Object, + required: true, + }, + openModal: { + type: String, + required: true, + }, + modalId: { + type: String, + required: true, + }, + }, + data() { + return { + checked: true, + actionPrimary: { + text: this.i18n.actionPrimaryText, + attributes: [ + { variant: 'success' }, + { category: 'primary' }, + { 'data-testid': 'submit-commit' }, + ], + }, + actionCancel: { + text: this.i18n.actionCancelText, + attributes: [{ 'data-testid': 'cancel-commit' }], + }, + }; + }, + computed: { + ...mapState([ + 'branch', + 'endpoint', + 'pushCode', + 'branchCollaboration', + 'modalTitle', + 'existingBranch', + 'prependedText', + ]), + }, + mounted() { + eventHub.$on(this.openModal, this.show); + }, + methods: { + ...mapActions(['clearModal', 'setBranch', 'setSelectedBranch']), + show() { + this.$root.$emit('bv::show::modal', this.modalId); + }, + handlePrimary() { + this.$refs.form.$el.submit(); + }, + resetModalHandler() { + this.clearModal(); + this.setSelectedBranch(''); + this.checked = true; + }, + }, + csrf, +}; +</script> +<template> + <gl-modal + v-bind="$attrs" + data-testid="modal-commit" + :modal-id="modalId" + size="sm" + :title="modalTitle" + :action-cancel="actionCancel" + :action-primary="actionPrimary" + @hidden="resetModalHandler" + @primary="handlePrimary" + > + <p v-if="prependedText.length" data-testid="prepended-text"> + <gl-sprintf :message="prependedText" /> + </p> + + <gl-form ref="form" :action="endpoint" method="post"> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + + <gl-form-group + :label="i18n.branchLabel" + label-for="start_branch" + data-testid="dropdown-group" + > + <input id="start_branch" type="hidden" name="start_branch" :value="branch" /> + + <branches-dropdown class="gl-w-half" :value="branch" @selectBranch="setBranch" /> + </gl-form-group> + + <gl-form-checkbox + v-if="pushCode" + v-model="checked" + name="create_merge_request" + class="gl-mt-3" + > + <gl-sprintf :message="i18n.startMergeRequest"> + <template #newMergeRequest> + <strong>{{ i18n.newMergeRequest }}</strong> + </template> + </gl-sprintf> + </gl-form-checkbox> + <input v-else type="hidden" name="create_merge_request" value="1" /> + </gl-form> + + <p v-if="!pushCode" class="gl-mb-0 gl-mt-5" data-testid="appended-text"> + <gl-sprintf v-if="branchCollaboration" :message="i18n.existingBranch"> + <template #branchName> + <strong>{{ existingBranch }}</strong> + </template> + </gl-sprintf> + <gl-sprintf v-else :message="i18n.branchInFork" /> + </p> + </gl-modal> +</template> |