Resolve "MR: Reduce the memory footprint of the component tree"
This commit is contained in:
parent
98547133db
commit
422dcfde03
|
@ -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 () => {};
|
||||
|
|
|
@ -1,94 +1,90 @@
|
|||
<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;
|
||||
},
|
||||
mounted() {
|
||||
if (this.isImageDiff) {
|
||||
const canCreateNote = false;
|
||||
const renderCommentBadge = true;
|
||||
imageDiffHelper.initImageDiff(this.$refs.fileHolder, canCreateNote, renderCommentBadge);
|
||||
} else if (!this.hasTruncatedDiffLines) {
|
||||
this.fetchDiff();
|
||||
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;
|
||||
},
|
||||
userColorScheme() {
|
||||
return window.gon.user_color_scheme;
|
||||
},
|
||||
normalizedDiffLines() {
|
||||
if (this.discussion.truncatedDiffLines) {
|
||||
return this.discussion.truncatedDiffLines.map(line =>
|
||||
trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
|
||||
);
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
},
|
||||
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';
|
||||
},
|
||||
};
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue