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 {
-    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"
     />

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