diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/repo_commit_section.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/repo_commit_section.vue | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue new file mode 100644 index 00000000000..470db2c9650 --- /dev/null +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -0,0 +1,171 @@ +<script> +import { mapGetters, mapState, mapActions } from 'vuex'; +import tooltip from '../../vue_shared/directives/tooltip'; +import icon from '../../vue_shared/components/icon.vue'; +import modal from '../../vue_shared/components/modal.vue'; +import commitFilesList from './commit_sidebar/list.vue'; + +export default { + components: { + modal, + icon, + commitFilesList, + }, + directives: { + tooltip, + }, + data() { + return { + showNewBranchModal: false, + submitCommitsLoading: false, + startNewMR: false, + commitMessage: '', + }; + }, + computed: { + ...mapState([ + 'currentProjectId', + 'currentBranchId', + 'rightPanelCollapsed', + ]), + ...mapGetters([ + 'changedFiles', + ]), + commitButtonDisabled() { + return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length; + }, + commitMessageCount() { + return this.commitMessage.length; + }, + }, + methods: { + ...mapActions([ + 'checkCommitStatus', + 'commitChanges', + 'getTreeData', + 'setPanelCollapsedStatus', + ]), + makeCommit(newBranch = false) { + const createNewBranch = newBranch || this.startNewMR; + + const payload = { + branch: createNewBranch ? `${this.currentBranchId}-${new Date().getTime().toString()}` : this.currentBranchId, + commit_message: this.commitMessage, + actions: this.changedFiles.map(f => ({ + action: f.tempFile ? 'create' : 'update', + file_path: f.path, + content: f.content, + encoding: f.base64 ? 'base64' : 'text', + })), + start_branch: createNewBranch ? this.currentBranchId : undefined, + }; + + this.showNewBranchModal = false; + this.submitCommitsLoading = true; + + this.commitChanges({ payload, newMr: this.startNewMR }) + .then(() => { + this.submitCommitsLoading = false; + this.$store.dispatch('getTreeData', { + projectId: this.currentProjectId, + branch: this.currentBranchId, + endpoint: `/tree/${this.currentBranchId}`, + force: true, + }); + }) + .catch(() => { + this.submitCommitsLoading = false; + }); + }, + tryCommit() { + this.submitCommitsLoading = true; + + this.checkCommitStatus() + .then((branchChanged) => { + if (branchChanged) { + this.showNewBranchModal = true; + } else { + this.makeCommit(); + } + }) + .catch(() => { + this.submitCommitsLoading = false; + }); + }, + toggleCollapsed() { + this.setPanelCollapsedStatus({ + side: 'right', + collapsed: !this.rightPanelCollapsed, + }); + }, + }, +}; +</script> + +<template> +<div class="multi-file-commit-panel-section"> + <modal + v-if="showNewBranchModal" + :primary-button-label="__('Create new branch')" + kind="primary" + :title="__('Branch has changed')" + :text="__('This branch has changed since you started editing. Would you like to create a new branch?')" + @toggle="showNewBranchModal = false" + @submit="makeCommit(true)" + /> + <commit-files-list + title="Staged" + :file-list="changedFiles" + :collapsed="rightPanelCollapsed" + @toggleCollapsed="toggleCollapsed" + /> + <form + class="form-horizontal multi-file-commit-form" + @submit.prevent="tryCommit" + v-if="!rightPanelCollapsed" + > + <div class="multi-file-commit-fieldset"> + <textarea + class="form-control multi-file-commit-message" + name="commit-message" + v-model="commitMessage" + placeholder="Commit message" + > + </textarea> + </div> + <div class="multi-file-commit-fieldset"> + <label + v-tooltip + title="Create a new merge request with these changes" + data-container="body" + data-placement="top" + > + <input + type="checkbox" + v-model="startNewMR" + /> + Merge Request + </label> + <button + type="submit" + :disabled="commitButtonDisabled" + class="btn btn-default btn-sm append-right-10 prepend-left-10" + > + <i + v-if="submitCommitsLoading" + class="js-commit-loading-icon fa fa-spinner fa-spin" + aria-hidden="true" + aria-label="loading" + > + </i> + Commit + </button> + <div + class="multi-file-commit-message-count" + > + {{ commitMessageCount }} + </div> + </div> + </form> +</div> +</template> |