diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue new file mode 100644 index 00000000000..4775836fcc6 --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue @@ -0,0 +1,167 @@ +<script> +import { + GlButton, + GlForm, + GlFormCheckbox, + GlFormInput, + GlFormGroup, + GlFormTextarea, + GlSprintf, +} from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlButton, + GlForm, + GlFormCheckbox, + GlFormInput, + GlFormGroup, + GlFormTextarea, + GlSprintf, + }, + props: { + currentBranch: { + type: String, + required: false, + default: '', + }, + defaultMessage: { + type: String, + required: false, + default: '', + }, + hasUnsavedChanges: { + type: Boolean, + required: true, + }, + isNewCiConfigFile: { + type: Boolean, + required: true, + }, + isSaving: { + type: Boolean, + required: false, + default: false, + }, + scrollToCommitForm: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + message: this.defaultMessage, + openMergeRequest: false, + sourceBranch: this.currentBranch, + }; + }, + computed: { + isCommitFormFilledOut() { + return this.message && this.sourceBranch; + }, + isCurrentBranchSourceBranch() { + return this.sourceBranch === this.currentBranch; + }, + isSubmitDisabled() { + return !this.isCommitFormFilledOut || (!this.hasUnsavedChanges && !this.isNewCiConfigFile); + }, + }, + watch: { + scrollToCommitForm(flag) { + if (flag) { + this.scrollIntoView(); + } + }, + }, + methods: { + onSubmit() { + this.$emit('submit', { + message: this.message, + sourceBranch: this.sourceBranch, + openMergeRequest: this.openMergeRequest, + }); + }, + onReset() { + this.$emit('resetContent'); + }, + scrollIntoView() { + this.$el.scrollIntoView({ behavior: 'smooth' }); + this.$emit('scrolled-to-commit-form'); + }, + }, + i18n: { + commitMessage: __('Commit message'), + sourceBranch: __('Branch'), + startMergeRequest: __('Start a %{new_merge_request} with these changes'), + newMergeRequest: __('new merge request'), + commitChanges: __('Commit changes'), + resetContent: __('Reset'), + }, +}; +</script> + +<template> + <div> + <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset"> + <gl-form-group + id="commit-group" + :label="$options.i18n.commitMessage" + label-cols-sm="2" + label-for="commit-message" + > + <gl-form-textarea + id="commit-message" + v-model="message" + class="gl-font-monospace!" + required + :placeholder="defaultMessage" + /> + </gl-form-group> + <gl-form-group + id="source-branch-group" + :label="$options.i18n.sourceBranch" + label-cols-sm="2" + label-for="source-branch-field" + > + <gl-form-input + id="source-branch-field" + v-model="sourceBranch" + class="gl-font-monospace!" + required + data-qa-selector="source_branch_field" + /> + <gl-form-checkbox + v-if="!isCurrentBranchSourceBranch" + v-model="openMergeRequest" + data-testid="new-mr-checkbox" + data-qa-selector="new_mr_checkbox" + class="gl-mt-3" + > + <gl-sprintf :message="$options.i18n.startMergeRequest"> + <template #new_merge_request> + <strong>{{ $options.i18n.newMergeRequest }}</strong> + </template> + </gl-sprintf> + </gl-form-checkbox> + </gl-form-group> + <div class="gl-display-flex gl-py-5 gl-border-t-gray-100 gl-border-t-solid gl-border-t-1"> + <gl-button + type="submit" + class="js-no-auto-disable gl-mr-3" + category="primary" + variant="confirm" + data-qa-selector="commit_changes_button" + :disabled="isSubmitDisabled" + :loading="isSaving" + > + {{ $options.i18n.commitChanges }} + </gl-button> + <gl-button type="reset" category="secondary" class="gl-mr-3"> + {{ $options.i18n.resetContent }} + </gl-button> + </div> + </gl-form> + </div> +</template> |