diff options
Diffstat (limited to 'app/assets/javascripts/merge_conflicts/components')
3 files changed, 43 insertions, 31 deletions
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue index 2c7c8038af5..7649c363daa 100644 --- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue +++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue @@ -1,8 +1,10 @@ <script> import { debounce } from 'lodash'; +import { mapActions } from 'vuex'; import { deprecatedCreateFlash as flash } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; +import { INTERACTIVE_RESOLVE_MODE } from '../constants'; export default { props: { @@ -10,14 +12,6 @@ export default { type: Object, required: true, }, - onCancelDiscardConfirmation: { - type: Function, - required: true, - }, - onAcceptDiscardConfirmation: { - type: Function, - required: true, - }, }, data() { return { @@ -50,6 +44,7 @@ export default { } }, methods: { + ...mapActions(['setFileResolveMode', 'setPromptConfirmationState', 'updateFile']), loadEditor() { const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite'); const DataPromise = axios.get(this.file.content_path); @@ -82,23 +77,24 @@ export default { saveDiffResolution() { this.saved = true; - // This probably be better placed in the data provider - /* eslint-disable vue/no-mutating-props */ - this.file.content = this.editor.getValue(); - this.file.resolveEditChanged = this.file.content !== this.originalContent; - this.file.promptDiscardConfirmation = false; - /* eslint-enable vue/no-mutating-props */ + this.updateFile({ + ...this.file, + content: this.editor.getValue(), + resolveEditChanged: this.file.content !== this.originalContent, + promptDiscardConfirmation: false, + }); }, resetEditorContent() { if (this.fileLoaded) { this.editor.setValue(this.originalContent); } }, - cancelDiscardConfirmation(file) { - this.onCancelDiscardConfirmation(file); - }, acceptDiscardConfirmation(file) { - this.onAcceptDiscardConfirmation(file); + this.setPromptConfirmationState({ file, promptDiscardConfirmation: false }); + this.setFileResolveMode({ file, mode: INTERACTIVE_RESOLVE_MODE }); + }, + cancelDiscardConfirmation(file) { + this.setPromptConfirmationState({ file, promptDiscardConfirmation: false }); }, }, }; diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue index 519fd53af1e..9721481e6be 100644 --- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue +++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue @@ -1,34 +1,41 @@ <script> import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import actionsMixin from '../mixins/line_conflict_actions'; +import { mapActions } from 'vuex'; +import syntaxHighlight from '~/syntax_highlight'; +import { SYNTAX_HIGHLIGHT_CLASS } from '../constants'; import utilsMixin from '../mixins/line_conflict_utils'; export default { directives: { SafeHtml, }, - mixins: [utilsMixin, actionsMixin], + mixins: [utilsMixin], + SYNTAX_HIGHLIGHT_CLASS, props: { file: { type: Object, required: true, }, }, + mounted() { + syntaxHighlight(document.querySelectorAll(`.${SYNTAX_HIGHLIGHT_CLASS}`)); + }, + methods: { + ...mapActions(['handleSelected']), + }, }; </script> <template> - <table class="diff-wrap-lines code code-commit js-syntax-highlight"> - <tr - v-for="line in file.inlineLines" - :key="(line.isHeader ? line.id : line.new_line) + line.richText" - class="line_holder diff-inline" - > + <table :class="['diff-wrap-lines code code-commit', $options.SYNTAX_HIGHLIGHT_CLASS]"> + <!-- Unfortunately there isn't a good key for these sections --> + <!-- eslint-disable vue/require-v-for-key --> + <tr v-for="line in file.inlineLines" class="line_holder diff-inline"> <template v-if="line.isHeader"> <td :class="lineCssClass(line)" class="diff-line-num header"></td> <td :class="lineCssClass(line)" class="diff-line-num header"></td> <td :class="lineCssClass(line)" class="line_content header"> <strong>{{ line.richText }}</strong> - <button class="btn" @click="handleSelected(file, line.id, line.section)"> + <button class="btn" @click="handleSelected({ file, line })"> {{ line.buttonTitle }} </button> </td> diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue index e66f641f70d..7b1d947ccff 100644 --- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue +++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue @@ -1,32 +1,41 @@ <script> import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import actionsMixin from '../mixins/line_conflict_actions'; +import { mapActions } from 'vuex'; +import syntaxHighlight from '~/syntax_highlight'; +import { SYNTAX_HIGHLIGHT_CLASS } from '../constants'; import utilsMixin from '../mixins/line_conflict_utils'; export default { directives: { SafeHtml, }, - mixins: [utilsMixin, actionsMixin], + mixins: [utilsMixin], + SYNTAX_HIGHLIGHT_CLASS, props: { file: { type: Object, required: true, }, }, + mounted() { + syntaxHighlight(document.querySelectorAll(`.${SYNTAX_HIGHLIGHT_CLASS}`)); + }, + methods: { + ...mapActions(['handleSelected']), + }, }; </script> <template> <!-- Unfortunately there isn't a good key for these sections --> <!-- eslint-disable vue/require-v-for-key --> - <table class="diff-wrap-lines code js-syntax-highlight"> + <table :class="['diff-wrap-lines code', $options.SYNTAX_HIGHLIGHT_CLASS]"> <tr v-for="section in file.parallelLines" class="line_holder parallel"> <template v-for="line in section"> <template v-if="line.isHeader"> <td class="diff-line-num header" :class="lineCssClass(line)"></td> <td class="line_content header" :class="lineCssClass(line)"> <strong>{{ line.richText }}</strong> - <button class="btn" @click="handleSelected(file, line.id, line.section)"> + <button class="btn" @click="handleSelected({ file, line })"> {{ line.buttonTitle }} </button> </td> |