diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/diff_with_note.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/diff_with_note.vue | 125 |
1 files changed, 95 insertions, 30 deletions
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index cafb28910eb..d321f2ce15e 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -1,13 +1,15 @@ <script> -import $ from 'jquery'; -import syntaxHighlight from '~/syntax_highlight'; +import { mapState, mapActions } from 'vuex'; import imageDiffHelper from '~/image_diff/helpers/index'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; -import DiffFileHeader from './diff_file_header.vue'; +import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; +import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import { trimFirstCharOfLineContent } from '~/diffs/store/utils'; export default { components: { DiffFileHeader, + SkeletonLoadingContainer, }, props: { discussion: { @@ -15,7 +17,24 @@ export default { required: true, }, }, + data() { + return { + error: false, + }; + }, computed: { + ...mapState({ + noteableData: state => state.notes.noteableData, + }), + hasTruncatedDiffLines() { + return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0; + }, + isDiscussionsExpanded() { + return true; // TODO: @fatihacet - Fix this. + }, + isCollapsed() { + return this.diffFile.collapsed || false; + }, isImageDiff() { return !this.diffFile.text; }, @@ -23,36 +42,46 @@ export default { const { text } = this.diffFile; return text ? 'text-file' : 'js-image-file'; }, - diffRows() { - return $(this.discussion.truncatedDiffLines); - }, diffFile() { - return convertObjectPropsToCamelCase(this.discussion.diffFile); + return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true }); }, imageDiffHtml() { return this.discussion.imageDiffHtml; }, + currentUser() { + return this.noteableData.current_user; + }, + userColorScheme() { + return window.gon.user_color_scheme; + }, + normalizedDiffLines() { + const lines = this.discussion.truncatedDiffLines || []; + + return lines.map(line => trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line))); + }, }, mounted() { if (this.isImageDiff) { const canCreateNote = false; const renderCommentBadge = true; - imageDiffHelper.initImageDiff( - this.$refs.fileHolder, - canCreateNote, - renderCommentBadge, - ); - } else { - const fileHolder = $(this.$refs.fileHolder); - this.$nextTick(() => { - syntaxHighlight(fileHolder); - }); + imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge); + } else if (!this.hasTruncatedDiffLines) { + this.fetchDiff(); } }, methods: { + ...mapActions(['fetchDiscussionDiffLines']), rowTag(html) { return html.outerHTML ? 'tr' : 'template'; }, + fetchDiff() { + this.error = false; + this.fetchDiscussionDiffLines(this.discussion) + .then(this.highlight) + .catch(() => { + this.error = true; + }); + }, }, }; </script> @@ -63,23 +92,59 @@ export default { :class="diffFileClass" class="diff-file file-holder" > - <div class="js-file-title file-title file-title-flex-parent"> - <diff-file-header - :diff-file="diffFile" - /> - </div> + <diff-file-header + :diff-file="diffFile" + :current-user="currentUser" + :discussions-expanded="isDiscussionsExpanded" + :expanded="!isCollapsed" + /> <div v-if="diffFile.text" - class="diff-content code js-syntax-highlight" + :class="userColorScheme" + class="diff-content code" > <table> - <component - v-for="(html, index) in diffRows" - :is="rowTag(html)" - :class="html.className" - :key="index" - v-html="html.outerHTML" - /> + <tr + v-for="line in normalizedDiffLines" + :key="line.lineCode" + class="line_holder" + > + <td class="diff-line-num old_line">{{ line.oldLine }}</td> + <td class="diff-line-num new_line">{{ line.newLine }}</td> + <td + :class="line.type" + class="line_content" + v-html="line.richText" + > + </td> + </tr> + <tr + v-if="!hasTruncatedDiffLines" + class="line_holder line-holder-placeholder" + > + <td class="old_line diff-line-num"></td> + <td class="new_line diff-line-num"></td> + <td + v-if="error" + class="js-error-lazy-load-diff diff-loading-error-block" + > + Unable to load the diff + <button + class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button" + @click="fetchDiff" + > + Try again + </button> + </td> + <td + v-else + class="line_content js-success-lazy-load" + > + <span></span> + <skeleton-loading-container /> + <span></span> + </td> + </tr> <tr class="notes_holder"> <td class="notes_line" |