Commit 422dcfde authored by Tim Zallmann's avatar Tim Zallmann Committed by Fatih Acet

Resolve "MR: Reduce the memory footprint of the component tree"

parent 98547133
......@@ -85,6 +85,9 @@ export default {
}
return __('Show latest version');
},
canCurrentUserFork() {
return this.currentUser.canFork === true && this.currentUser.canCreateMergeRequest;
},
},
watch: {
diffViewType() {
......@@ -192,7 +195,7 @@ export default {
v-for="file in diffFiles"
:key="file.newPath"
:file="file"
:current-user="currentUser"
:can-current-user-fork="canCurrentUserFork"
/>
</div>
<no-changes v-else />
......
......@@ -18,8 +18,8 @@ export default {
type: Object,
required: true,
},
currentUser: {
type: Object,
canCurrentUserFork: {
type: Boolean,
required: true,
},
},
......@@ -87,7 +87,7 @@ export default {
class="diff-file file-holder"
>
<diff-file-header
:current-user="currentUser"
:can-current-user-fork="canCurrentUserFork"
:diff-file="file"
:collapsible="true"
:expanded="!isCollapsed"
......
......@@ -39,8 +39,8 @@ export default {
required: false,
default: true,
},
currentUser: {
type: Object,
canCurrentUserFork: {
type: Boolean,
required: true,
},
},
......@@ -228,7 +228,7 @@ export default {
<edit-button
v-if="!diffFile.deletedFile"
:current-user="currentUser"
:can-current-user-fork="canCurrentUserFork"
:edit-path="diffFile.editPath"
:can-modify-blob="diffFile.canModifyBlob"
@showForkMessage="showForkMessage"
......
......@@ -13,12 +13,8 @@ export default {
noteForm,
},
props: {
diffFile: {
type: Object,
required: true,
},
diffLines: {
type: Array,
diffFileHash: {
type: String,
required: true,
},
line: {
......@@ -40,6 +36,7 @@ export default {
noteableData: state => state.notes.noteableData,
diffViewType: state => state.diffs.diffViewType,
}),
...mapGetters('diffs', ['getDiffFileByHash']),
...mapGetters(['isLoggedIn', 'noteableType', 'getNoteableData', 'getNotesDataByProp']),
},
mounted() {
......@@ -68,13 +65,14 @@ export default {
});
},
handleSaveNote(note) {
const selectedDiffFile = this.getDiffFileByHash(this.diffFileHash);
const postData = getNoteFormData({
note,
noteableData: this.noteableData,
noteableType: this.noteableType,
noteTargetLine: this.noteTargetLine,
diffViewType: this.diffViewType,
diffFile: this.diffFile,
diffFile: selectedDiffFile,
linePosition: this.position,
});
......
......@@ -24,8 +24,12 @@ export default {
type: Object,
required: true,
},
diffFile: {
type: Object,
fileHash: {
type: String,
required: true,
},
contextLinesPath: {
type: String,
required: true,
},
diffViewType: {
......@@ -120,14 +124,14 @@ export default {
:class="classNameMap"
>
<diff-line-gutter-content
:file-hash="diffFile.fileHash"
:file-hash="fileHash"
:context-lines-path="contextLinesPath"
:line-type="normalizedLine.type"
:line-code="normalizedLine.lineCode"
:line-position="linePosition"
:line-number="lineNumber"
:meta-data="normalizedLine.metaData"
:show-comment-button="showCommentButton"
:context-lines-path="diffFile.contextLinesPath"
:is-bottom="isBottom"
:is-match-line="isMatchLine"
:is-context-line="isContentLine"
......
......@@ -5,8 +5,8 @@ export default {
type: String,
required: true,
},
currentUser: {
type: Object,
canCurrentUserFork: {
type: Boolean,
required: true,
},
canModifyBlob: {
......@@ -17,12 +17,12 @@ export default {
},
methods: {
handleEditClick(evt) {
if (!this.currentUser || this.canModifyBlob) {
if (!this.canCurrentUserFork || this.canModifyBlob) {
// if we can Edit, do default Edit button behavior
return;
}
if (this.currentUser.canFork && this.currentUser.canCreateMergeRequest) {
if (this.canCurrentUserFork) {
evt.preventDefault();
this.$emit('showForkMessage');
}
......
......@@ -13,12 +13,8 @@ export default {
type: Object,
required: true,
},
diffFile: {
type: Object,
required: true,
},
diffLines: {
type: Array,
diffFileHash: {
type: String,
required: true,
},
lineIndex: {
......@@ -58,10 +54,9 @@ export default {
/>
<diff-line-note-form
v-if="diffLineCommentForms[line.lineCode]"
:diff-file="diffFile"
:diff-lines="diffLines"
:diff-file-hash="diffFileHash"
:line="line"
:note-target-line="diffLines[lineIndex]"
:note-target-line="line"
/>
</div>
</td>
......
......@@ -16,8 +16,12 @@ export default {
DiffTableCell,
},
props: {
diffFile: {
type: Object,
fileHash: {
type: String,
required: true,
},
contextLinesPath: {
type: String,
required: true,
},
line: {
......@@ -50,7 +54,7 @@ export default {
inlineRowId() {
const { lineCode, oldLine, newLine } = this.line;
return lineCode || `${this.diffFile.fileHash}_${oldLine}_${newLine}`;
return lineCode || `${this.fileHash}_${oldLine}_${newLine}`;
},
},
created() {
......@@ -78,7 +82,8 @@ export default {
@mouseout="handleMouseMove"
>
<diff-table-cell
:diff-file="diffFile"
:file-hash="fileHash"
:context-lines-path="contextLinesPath"
:line="line"
:line-type="oldLineType"
:is-bottom="isBottom"
......@@ -87,7 +92,8 @@ export default {
class="diff-line-num old_line"
/>
<diff-table-cell
:diff-file="diffFile"
:file-hash="fileHash"
:context-lines-path="contextLinesPath"
:line="line"
:line-type="newLineType"
:is-bottom="isBottom"
......
......@@ -60,15 +60,15 @@ export default {
v-for="(line, index) in normalizedDiffLines"
>
<inline-diff-table-row
:diff-file="diffFile"
:file-hash="diffFile.fileHash"
:context-lines-path="diffFile.contextLinesPath"
:line="line"
:is-bottom="index + 1 === diffLinesLength"
:key="line.lineCode"
/>
<inline-diff-comment-row
v-if="shouldRenderCommentRow(line)"
:diff-file="diffFile"
:diff-lines="normalizedDiffLines"
:diff-file-hash="diffFile.fileHash"
:line="line"
:line-index="index"
:key="index"
......
......@@ -13,12 +13,8 @@ export default {
type: Object,
required: true,
},
diffFile: {
type: Object,
required: true,
},
diffLines: {
type: Array,
diffFileHash: {
type: String,
required: true,
},
lineIndex: {
......@@ -91,10 +87,9 @@ export default {
<diff-line-note-form
v-if="diffLineCommentForms[leftLineCode] &&
diffLineCommentForms[leftLineCode]"
:diff-file="diffFile"
:diff-lines="diffLines"
:diff-file-hash="diffFileHash"
:line="line.left"
:note-target-line="diffLines[lineIndex].left"
:note-target-line="line.left"
position="left"
/>
</td>
......@@ -112,10 +107,9 @@ export default {
<diff-line-note-form
v-if="diffLineCommentForms[rightLineCode] &&
diffLineCommentForms[rightLineCode] && line.right.type"
:diff-file="diffFile"
:diff-lines="diffLines"
:diff-file-hash="diffFileHash"
:line="line.right"
:note-target-line="diffLines[lineIndex].right"
:note-target-line="line.right"
position="right"
/>
</td>
......
......@@ -19,8 +19,12 @@ export default {
DiffTableCell,
},
props: {
diffFile: {
type: Object,
fileHash: {
type: String,
required: true,
},
contextLinesPath: {
type: String,
required: true,
},
line: {
......@@ -103,7 +107,8 @@ export default {
@mouseout="handleMouseMove"
>
<diff-table-cell
:diff-file="diffFile"
:file-hash="fileHash"
:context-lines-path="contextLinesPath"
:line="line"
:line-type="oldLineType"
:line-position="linePositionLeft"
......@@ -123,7 +128,8 @@ export default {
>
</td>
<diff-table-cell
:diff-file="diffFile"
:file-hash="fileHash"
:context-lines-path="contextLinesPath"
:line="line"
:line-type="newLineType"
:line-position="linePositionRight"
......
......@@ -93,17 +93,17 @@ export default {
v-for="(line, index) in parallelDiffLines"
>
<parallel-diff-table-row
:diff-file="diffFile"
:file-hash="diffFile.fileHash"
:context-lines-path="diffFile.contextLinesPath"
:line="line"
:is-bottom="index + 1 === diffLinesLength"
:key="index"
/>
<parallel-diff-comment-row
v-if="shouldRenderCommentRow(line)"
:key="line.left.lineCode || line.right.lineCode"
:key="`dcr-${index}`"
:line="line"
:diff-file="diffFile"
:diff-lines="parallelDiffLines"
:diff-file-hash="diffFile.fileHash"
:line-index="index"
/>
</template>
......
......@@ -57,4 +57,8 @@ export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) =
) || [];
// prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
export const getDiffFileByHash = state => fileHash =>
state.diffFiles.find(file => file.fileHash === fileHash);
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};
<script>
import { mapState, mapActions } from 'vuex';
import imageDiffHelper from '~/image_diff/helpers/index';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
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';
import { mapState, mapActions } from 'vuex';
import imageDiffHelper from '~/image_diff/helpers/index';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
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,
export default {
components: {
DiffFileHeader,
SkeletonLoadingContainer,
},
props: {
discussion: {
type: Object,
required: true,
},
props: {
discussion: {
type: Object,
required: true,
},
},
data() {
return {
error: false,
};
},
computed: {
...mapState({
noteableData: state => state.notes.noteableData,
}),
hasTruncatedDiffLines() {
return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
},
data() {
return {
error: false,
};
isDiscussionsExpanded() {
return true; // TODO: @fatihacet - Fix this.
},
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;
},
diffFileClass() {
const { text } = this.diffFile;
return text ? 'text-file' : 'js-image-file';
},
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() {
if (this.discussion.truncatedDiffLines) {
return this.discussion.truncatedDiffLines.map(line =>
trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
);
}
return [];
},
isCollapsed() {
return this.diffFile.collapsed || false;
},
isImageDiff() {
return !this.diffFile.text;
},
diffFileClass() {
const { text } = this.diffFile;
return text ? 'text-file' : 'js-image-file';
},
diffFile() {
return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
},
mounted() {
if (this.isImageDiff) {
const canCreateNote = false;
const renderCommentBadge = true;
imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
} else if (!this.hasTruncatedDiffLines) {
this.fetchDiff();
imageDiffHtml() {
return this.discussion.imageDiffHtml;
},
userColorScheme() {
return window.gon.user_color_scheme;
},
normalizedDiffLines() {
if (this.discussion.truncatedDiffLines) {
return this.discussion.truncatedDiffLines.map(line =>
trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
);
}
return [];
},
},
mounted() {
if (this.isImageDiff) {
const canCreateNote = false;
const renderCommentBadge = true;
imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
} else if (!this.hasTruncatedDiffLines) {
this.fetchDiff();
}
},
methods: {
...mapActions(['fetchDiscussionDiffLines']),
rowTag(html) {
return html.outerHTML ? 'tr' : 'template';
},
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;
});
},
fetchDiff() {
this.error = false;
this.fetchDiscussionDiffLines(this.discussion)
.then(this.highlight)
.catch(() => {
this.error = true;
});
},
};
},
};
</script>
<template>
......@@ -99,7 +95,7 @@
>
<diff-file-header
:diff-file="diffFile"
:current-user="currentUser"
:can-current-user-fork="false"
:discussions-expanded="isDiscussionsExpanded"
:expanded="!isCollapsed"
/>
......
......@@ -24,7 +24,7 @@ describe('diff_file_header', () => {
const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file, { deep: true });
props = {
diffFile,
currentUser: {},
canCurrentUserFork: false,
};
});
......
......@@ -11,7 +11,7 @@ describe('DiffFile', () => {
beforeEach(() => {
vm = createComponentWithStore(Vue.extend(DiffFileComponent), store, {
file: getDiffFileMock(),
currentUser: {},
canCurrentUserFork: false,
}).$mount();
});
......
......@@ -15,7 +15,7 @@ describe('DiffLineNoteForm', () => {
diffLines = diffFile.highlightedDiffLines;
component = createComponentWithStore(Vue.extend(DiffLineNoteForm), store, {
diffFile,
diffFileHash: diffFile.fileHash,
diffLines,
line: diffLines[0],
noteTargetLine: diffLines[0],
......
......@@ -184,4 +184,23 @@ describe('Diffs Module Getters', () => {
).toEqual(0);
});
});
describe('getDiffFileByHash', () => {
it('returns file by hash', () => {
const fileA = {
fileHash: '123',
};
const fileB = {
fileHash: '456',
};
localState.diffFiles = [fileA, fileB];
expect(getters.getDiffFileByHash(localState)('456')).toEqual(fileB);
});
it('returns null if no matching file is found', () => {
localState.diffFiles = [];
expect(getters.getDiffFileByHash(localState)('123')).toBeUndefined();
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment