Merge branch '48964-mr-reduce-the-memory-footprint-of-the-component-tree' into 'master'

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

Closes #48964

See merge request gitlab-org/gitlab-ce!20448

app/assets/javascripts/diffs/components/app.vue

@@ -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 />

app/assets/javascripts/diffs/components/diff_file.vue

@@ -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"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -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"

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -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,
       });
 

app/assets/javascripts/diffs/components/diff_table_cell.vue

@@ -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"

app/assets/javascripts/diffs/components/edit_button.vue

@@ -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');
       }

app/assets/javascripts/diffs/components/inline_diff_comment_row.vue

@@ -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>

app/assets/javascripts/diffs/components/inline_diff_table_row.vue

@@ -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"

app/assets/javascripts/diffs/components/inline_diff_view.vue

@@ -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"

app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue

@@ -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>

app/assets/javascripts/diffs/components/parallel_diff_table_row.vue

@@ -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"

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -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>

app/assets/javascripts/diffs/store/getters.js

@@ -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 () => {};

app/assets/javascripts/notes/components/diff_with_note.vue

 <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 {
+export default {
   components: {
     DiffFileHeader,
     SkeletonLoadingContainer,
@@ -27,8 +27,7 @@
       noteableData: state => state.notes.noteableData,
     }),
     hasTruncatedDiffLines() {
-        return this.discussion.truncatedDiffLines &&
-          this.discussion.truncatedDiffLines.length !== 0;
+      return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
     },
     isDiscussionsExpanded() {
       return true; // TODO: @fatihacet - Fix this.
@@ -49,9 +48,6 @@
     imageDiffHtml() {
       return this.discussion.imageDiffHtml;
     },
-      currentUser() {
-        return this.noteableData.current_user;
-      },
     userColorScheme() {
       return window.gon.user_color_scheme;
     },
@@ -88,7 +84,7 @@
         });
     },
   },
-  };
+};
 </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"
     />

spec/javascripts/diffs/components/diff_file_header_spec.js

@@ -24,7 +24,7 @@ describe('diff_file_header', () => {
     const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file, { deep: true });
     props = {
       diffFile,
-      currentUser: {},
+      canCurrentUserFork: false,
     };
   });
 

spec/javascripts/diffs/components/diff_file_spec.js

@@ -11,7 +11,7 @@ describe('DiffFile', () => {
   beforeEach(() => {
     vm = createComponentWithStore(Vue.extend(DiffFileComponent), store, {
       file: getDiffFileMock(),
-      currentUser: {},
+      canCurrentUserFork: false,
     }).$mount();
   });
 

spec/javascripts/diffs/components/diff_line_note_form_spec.js

@@ -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],

spec/javascripts/diffs/store/getters_spec.js

@@ -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();
+    });
+  });
 });