diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/commit')
| -rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue | 167 | ||||
| -rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/commit/commit_section.vue | 164 |
2 files changed, 331 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> diff --git a/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_section.vue new file mode 100644 index 00000000000..9cbf60b1c8f --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_section.vue @@ -0,0 +1,164 @@ +<script> +import { __, s__, sprintf } from '~/locale'; +import { + COMMIT_ACTION_CREATE, + COMMIT_ACTION_UPDATE, + COMMIT_FAILURE, + COMMIT_SUCCESS, + COMMIT_SUCCESS_WITH_REDIRECT, +} from '../../constants'; +import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql'; +import updateCurrentBranchMutation from '../../graphql/mutations/client/update_current_branch.mutation.graphql'; +import updateLastCommitBranchMutation from '../../graphql/mutations/client/update_last_commit_branch.mutation.graphql'; +import updatePipelineEtag from '../../graphql/mutations/client/update_pipeline_etag.mutation.graphql'; +import getCurrentBranch from '../../graphql/queries/client/current_branch.query.graphql'; + +import CommitForm from './commit_form.vue'; + +export default { + alertTexts: { + [COMMIT_FAILURE]: s__('Pipelines|The GitLab CI configuration could not be updated.'), + [COMMIT_SUCCESS]: __('Your changes have been successfully committed.'), + }, + i18n: { + defaultCommitMessage: __('Update %{sourcePath} file'), + }, + components: { + CommitForm, + }, + inject: ['projectFullPath', 'ciConfigPath'], + props: { + ciFileContent: { + type: String, + required: true, + }, + commitSha: { + type: String, + required: false, + default: '', + }, + hasUnsavedChanges: { + type: Boolean, + required: true, + }, + isNewCiConfigFile: { + type: Boolean, + required: false, + default: false, + }, + scrollToCommitForm: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + commit: {}, + isSaving: false, + }; + }, + apollo: { + currentBranch: { + query: getCurrentBranch, + update(data) { + return data.workBranches.current.name; + }, + }, + }, + computed: { + action() { + return this.isNewCiConfigFile ? COMMIT_ACTION_CREATE : COMMIT_ACTION_UPDATE; + }, + defaultCommitMessage() { + return sprintf(this.$options.i18n.defaultCommitMessage, { sourcePath: this.ciConfigPath }); + }, + }, + methods: { + async onCommitSubmit({ message, sourceBranch, openMergeRequest }) { + this.isSaving = true; + + try { + const { + data: { + commitCreate: { errors, commitPipelinePath: pipelineEtag }, + }, + } = await this.$apollo.mutate({ + mutation: commitCIFile, + variables: { + action: this.action, + projectPath: this.projectFullPath, + branch: sourceBranch, + startBranch: this.currentBranch, + message, + filePath: this.ciConfigPath, + content: this.ciFileContent, + lastCommitId: this.commitSha, + }, + }); + + if (pipelineEtag) { + this.updatePipelineEtag(pipelineEtag); + } + + if (errors?.length) { + this.$emit('showError', { type: COMMIT_FAILURE, reasons: errors }); + } else { + const params = openMergeRequest + ? { + type: COMMIT_SUCCESS_WITH_REDIRECT, + params: { + sourceBranch, + targetBranch: this.currentBranch, + }, + } + : { type: COMMIT_SUCCESS }; + + this.$emit('commit', { + ...params, + }); + + this.updateLastCommitBranch(sourceBranch); + this.updateCurrentBranch(sourceBranch); + + if (this.currentBranch === sourceBranch) { + this.$emit('updateCommitSha'); + } + } + } catch (error) { + this.$emit('showError', { type: COMMIT_FAILURE, reasons: [error?.message] }); + } finally { + this.isSaving = false; + } + }, + updateCurrentBranch(currentBranch) { + this.$apollo.mutate({ + mutation: updateCurrentBranchMutation, + variables: { currentBranch }, + }); + }, + updateLastCommitBranch(lastCommitBranch) { + this.$apollo.mutate({ + mutation: updateLastCommitBranchMutation, + variables: { lastCommitBranch }, + }); + }, + updatePipelineEtag(pipelineEtag) { + this.$apollo.mutate({ mutation: updatePipelineEtag, variables: { pipelineEtag } }); + }, + }, +}; +</script> + +<template> + <commit-form + :current-branch="currentBranch" + :default-message="defaultCommitMessage" + :has-unsaved-changes="hasUnsavedChanges" + :is-new-ci-config-file="isNewCiConfigFile" + :is-saving="isSaving" + :scroll-to-commit-form="scrollToCommitForm" + v-on="$listeners" + @submit="onCommitSubmit" + /> +</template> |