diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /app/assets/javascripts/merge_conflicts/components | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'app/assets/javascripts/merge_conflicts/components')
6 files changed, 222 insertions, 174 deletions
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js deleted file mode 100644 index 6eaabbb3519..00000000000 --- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js +++ /dev/null @@ -1,115 +0,0 @@ -// This is a true violation of @gitlab/no-runtime-template-compiler, as it relies on -// app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml -// for its template. -/* eslint-disable no-param-reassign, @gitlab/no-runtime-template-compiler */ - -import { debounce } from 'lodash'; -import Vue from 'vue'; -import { deprecatedCreateFlash as flash } from '~/flash'; -import axios from '~/lib/utils/axios_utils'; -import { __ } from '~/locale'; - -((global) => { - global.mergeConflicts = global.mergeConflicts || {}; - - global.mergeConflicts.diffFileEditor = Vue.extend({ - props: { - file: { - type: Object, - required: true, - }, - onCancelDiscardConfirmation: { - type: Function, - required: true, - }, - onAcceptDiscardConfirmation: { - type: Function, - required: true, - }, - }, - data() { - return { - saved: false, - fileLoaded: false, - originalContent: '', - }; - }, - computed: { - classObject() { - return { - saved: this.saved, - }; - }, - }, - watch: { - 'file.showEditor': function showEditorWatcher(val) { - this.resetEditorContent(); - - if (!val || this.fileLoaded) { - return; - } - - this.loadEditor(); - }, - }, - mounted() { - if (this.file.loadEditor) { - this.loadEditor(); - } - }, - methods: { - loadEditor() { - const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite'); - const DataPromise = axios.get(this.file.content_path); - - Promise.all([EditorPromise, DataPromise]) - .then( - ([ - { default: EditorLite }, - { - data: { content, new_path: path }, - }, - ]) => { - const contentEl = this.$el.querySelector('.editor'); - - this.originalContent = content; - this.fileLoaded = true; - - this.editor = new EditorLite().createInstance({ - el: contentEl, - blobPath: path, - blobContent: content, - }); - this.editor.onDidChangeModelContent( - debounce(this.saveDiffResolution.bind(this), 250), - ); - }, - ) - .catch(() => { - flash(__('An error occurred while loading the file')); - }); - }, - 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 */ - }, - resetEditorContent() { - if (this.fileLoaded) { - this.editor.setValue(this.originalContent); - } - }, - cancelDiscardConfirmation(file) { - this.onCancelDiscardConfirmation(file); - }, - acceptDiscardConfirmation(file) { - this.onAcceptDiscardConfirmation(file); - }, - }, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue new file mode 100644 index 00000000000..2c7c8038af5 --- /dev/null +++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue @@ -0,0 +1,128 @@ +<script> +import { debounce } from 'lodash'; +import { deprecatedCreateFlash as flash } from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { __ } from '~/locale'; + +export default { + props: { + file: { + type: Object, + required: true, + }, + onCancelDiscardConfirmation: { + type: Function, + required: true, + }, + onAcceptDiscardConfirmation: { + type: Function, + required: true, + }, + }, + data() { + return { + saved: false, + fileLoaded: false, + originalContent: '', + }; + }, + computed: { + classObject() { + return { + saved: this.saved, + }; + }, + }, + watch: { + 'file.showEditor': function showEditorWatcher(val) { + this.resetEditorContent(); + + if (!val || this.fileLoaded) { + return; + } + + this.loadEditor(); + }, + }, + mounted() { + if (this.file.loadEditor) { + this.loadEditor(); + } + }, + methods: { + loadEditor() { + const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite'); + const DataPromise = axios.get(this.file.content_path); + + Promise.all([EditorPromise, DataPromise]) + .then( + ([ + { default: EditorLite }, + { + data: { content, new_path: path }, + }, + ]) => { + const contentEl = this.$el.querySelector('.editor'); + + this.originalContent = content; + this.fileLoaded = true; + + this.editor = new EditorLite().createInstance({ + el: contentEl, + blobPath: path, + blobContent: content, + }); + this.editor.onDidChangeModelContent(debounce(this.saveDiffResolution.bind(this), 250)); + }, + ) + .catch(() => { + flash(__('An error occurred while loading the file')); + }); + }, + 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 */ + }, + resetEditorContent() { + if (this.fileLoaded) { + this.editor.setValue(this.originalContent); + } + }, + cancelDiscardConfirmation(file) { + this.onCancelDiscardConfirmation(file); + }, + acceptDiscardConfirmation(file) { + this.onAcceptDiscardConfirmation(file); + }, + }, +}; +</script> +<template> + <div v-show="file.showEditor" class="diff-editor-wrap"> + <div v-if="file.promptDiscardConfirmation" class="discard-changes-alert-wrap"> + <div class="discard-changes-alert"> + {{ __('Are you sure you want to discard your changes?') }} + <div class="discard-actions"> + <button + class="btn btn-sm btn-danger-secondary gl-button" + @click="acceptDiscardConfirmation(file)" + > + {{ __('Discard changes') }} + </button> + <button class="btn btn-default btn-sm gl-button" @click="cancelDiscardConfirmation(file)"> + {{ __('Cancel') }} + </button> + </div> + </div> + </div> + <div :class="classObject" class="editor-wrap"> + <div class="editor" style="height: 350px" data-editor-loading="true"></div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js deleted file mode 100644 index 47214e288ae..00000000000 --- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js +++ /dev/null @@ -1,22 +0,0 @@ -// This is a true violation of @gitlab/no-runtime-template-compiler, as it relies on -// app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml -// for its template. -/* eslint-disable no-param-reassign, @gitlab/no-runtime-template-compiler */ - -import Vue from 'vue'; -import actionsMixin from '../mixins/line_conflict_actions'; -import utilsMixin from '../mixins/line_conflict_utils'; - -((global) => { - global.mergeConflicts = global.mergeConflicts || {}; - - global.mergeConflicts.inlineConflictLines = Vue.extend({ - mixins: [utilsMixin, actionsMixin], - props: { - file: { - type: Object, - required: true, - }, - }, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue new file mode 100644 index 00000000000..519fd53af1e --- /dev/null +++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue @@ -0,0 +1,47 @@ +<script> +import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import actionsMixin from '../mixins/line_conflict_actions'; +import utilsMixin from '../mixins/line_conflict_utils'; + +export default { + directives: { + SafeHtml, + }, + mixins: [utilsMixin, actionsMixin], + props: { + file: { + type: Object, + required: true, + }, + }, +}; +</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" + > + <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)"> + {{ line.buttonTitle }} + </button> + </td> + </template> + <template v-else> + <td :class="lineCssClass(line)" class="diff-line-num new_line"> + <a>{{ line.new_line }}</a> + </td> + <td :class="lineCssClass(line)" class="diff-line-num old_line"> + <a>{{ line.old_line }}</a> + </td> + <td v-safe-html="line.richText" :class="lineCssClass(line)" class="line_content"></td> + </template> + </tr> + </table> +</template> diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js deleted file mode 100644 index 1d5946cd78a..00000000000 --- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js +++ /dev/null @@ -1,37 +0,0 @@ -/* eslint-disable no-param-reassign */ - -import Vue from 'vue'; -import actionsMixin from '../mixins/line_conflict_actions'; -import utilsMixin from '../mixins/line_conflict_utils'; - -((global) => { - global.mergeConflicts = global.mergeConflicts || {}; - - global.mergeConflicts.parallelConflictLines = Vue.extend({ - mixins: [utilsMixin, actionsMixin], - props: { - file: { - type: Object, - required: true, - }, - }, - // This is a true violation of @gitlab/no-runtime-template-compiler, as it - // has a template string. - // eslint-disable-next-line @gitlab/no-runtime-template-compiler - template: ` - <table class="diff-wrap-lines code js-syntax-highlight"> - <tr class="line_holder parallel" v-for="section in file.parallelLines"> - <template v-for="line in section"> - <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td> - <td class="line_content header" :class="lineCssClass(line)" v-if="line.isHeader"> - <strong>{{line.richText}}</strong> - <button class="btn" @click="handleSelected(file, line.id, line.section)">{{line.buttonTitle}}</button> - </td> - <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td> - <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td> - </template> - </tr> - </table> - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue new file mode 100644 index 00000000000..e66f641f70d --- /dev/null +++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue @@ -0,0 +1,47 @@ +<script> +import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import actionsMixin from '../mixins/line_conflict_actions'; +import utilsMixin from '../mixins/line_conflict_utils'; + +export default { + directives: { + SafeHtml, + }, + mixins: [utilsMixin, actionsMixin], + props: { + file: { + type: Object, + required: true, + }, + }, +}; +</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"> + <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)"> + {{ line.buttonTitle }} + </button> + </td> + </template> + <template v-else> + <td class="diff-line-num old_line" :class="lineCssClass(line)"> + {{ line.lineNumber }} + </td> + <td + v-safe-html="line.richText" + class="line_content parallel" + :class="lineCssClass(line)" + ></td> + </template> + </template> + </tr> + </table> +</template> |