Merge branch '16047-highlight-auto-collapsed-diffs-in-merge-request-diffs' into 'master'

Update diff file `collapsed` value to more accurate `automaticallyCollapsed`

See merge request gitlab-org/gitlab!43296

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

@@ -44,7 +44,7 @@ export default {
     return {
       isLoadingCollapsedDiff: false,
       forkMessageVisible: false,
-      isCollapsed: this.file.viewer.collapsed || false,
+      isCollapsed: this.file.viewer.automaticallyCollapsed || false,
     };
   },
   computed: {
@@ -96,16 +96,16 @@ export default {
     },
     'file.file_hash': {
       handler: function watchFileHash() {
-        if (this.viewDiffsFileByFile && this.file.viewer.collapsed) {
+        if (this.viewDiffsFileByFile && this.file.viewer.automaticallyCollapsed) {
           this.isCollapsed = false;
           this.handleLoadCollapsedDiff();
         } else {
-          this.isCollapsed = this.file.viewer.collapsed || false;
+          this.isCollapsed = this.file.viewer.automaticallyCollapsed || false;
         }
       },
       immediate: true,
     },
-    'file.viewer.collapsed': function setIsCollapsed(newVal) {
+    'file.viewer.automaticallyCollapsed': function setIsCollapsed(newVal) {
       if (!this.viewDiffsFileByFile) {
         this.isCollapsed = newVal;
       }

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

@@ -330,7 +330,7 @@ export default {
             </gl-dropdown-item>
           </template>
 
-          <template v-if="!diffFile.viewer.collapsed">
+          <template v-if="!diffFile.viewer.automaticallyCollapsed">
             <gl-dropdown-divider
               v-if="!diffFile.is_fully_expanded || diffHasDiscussions(diffFile)"
             />

app/assets/javascripts/diffs/diff_file.js

@@ -18,9 +18,21 @@ function fileSymlinkInformation(file, fileList) {
   );
 }
 
+function collapsed(file) {
+  const viewer = file.viewer || {};
+
+  return {
+    automaticallyCollapsed: viewer.automaticallyCollapsed || viewer.collapsed || false,
+  };
+}
+
 export function prepareRawDiffFile({ file, allFiles }) {
   Object.assign(file, {
     brokenSymlink: fileSymlinkInformation(file, allFiles),
+    viewer: {
+      ...file.viewer,
+      ...collapsed(file),
+    },
   });
 
   return file;

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

@@ -236,7 +236,7 @@ export const renderFileForDiscussionId = ({ commit, rootState, state }, discussi
         commit(types.RENDER_FILE, file);
       }
 
-      if (file.viewer.collapsed) {
+      if (file.viewer.automaticallyCollapsed) {
         eventHub.$emit(`loadCollapsedDiff/${file.file_hash}`);
         scrollToElement(document.getElementById(file.file_hash));
       } else {
@@ -252,7 +252,8 @@ export const startRenderDiffsQueue = ({ state, commit }) => {
       const nextFile = state.diffFiles.find(
         file =>
           !file.renderIt &&
-          (file.viewer && (!file.viewer.collapsed || file.viewer.name !== diffViewerModes.text)),
+          (file.viewer &&
+            (!file.viewer.automaticallyCollapsed || file.viewer.name !== diffViewerModes.text)),
       );
 
       if (nextFile) {
@@ -631,7 +632,7 @@ export function switchToFullDiffFromRenamedFile({ commit, dispatch, state }, { d
         filePath: diffFile.file_path,
         viewer: {
           ...diffFile.alternate_viewer,
-          collapsed: false,
+          automaticallyCollapsed: false,
         },
       });
       commit(types.SET_CURRENT_VIEW_DIFF_FILE_LINES, { filePath: diffFile.file_path, lines });

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

@@ -9,7 +9,7 @@ export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW
 export const isInlineView = state => state.diffViewType === INLINE_DIFF_VIEW_TYPE;
 
 export const hasCollapsedFile = state =>
-  state.diffFiles.some(file => file.viewer && file.viewer.collapsed);
+  state.diffFiles.some(file => file.viewer && file.viewer.automaticallyCollapsed);
 
 export const commitId = state => (state.commit && state.commit.id ? state.commit.id : null);
 

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

@@ -172,7 +172,7 @@ export default {
     state.diffFiles.forEach(file => {
       Object.assign(file, {
         viewer: Object.assign(file.viewer, {
-          collapsed: false,
+          automaticallyCollapsed: false,
         }),
       });
     });
@@ -355,7 +355,7 @@ export default {
     const file = state.diffFiles.find(f => f.file_path === filePath);
 
     if (file && file.viewer) {
-      file.viewer.collapsed = collapsed;
+      file.viewer.automaticallyCollapsed = collapsed;
     }
   },
   [types.SET_HIDDEN_VIEW_DIFF_FILE_LINES](state, { filePath, lines }) {

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

@@ -76,7 +76,7 @@ export default {
       :discussion-path="discussion.discussion_path"
       :diff-file="discussion.diff_file"
       :can-current-user-fork="false"
-      :expanded="!discussion.diff_file.viewer.collapsed"
+      :expanded="!discussion.diff_file.viewer.automaticallyCollapsed"
     />
     <div v-if="isTextFile" class="diff-content">
       <table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">

spec/frontend/diffs/components/app_spec.js

@@ -699,7 +699,7 @@ describe('diffs/components/app', () => {
       describe('collapsed files', () => {
         it('should render the collapsed files warning if there are any collapsed files', () => {
           createComponent({}, ({ state }) => {
-            state.diffs.diffFiles = [{ viewer: { collapsed: true } }];
+            state.diffs.diffFiles = [{ viewer: { automaticallyCollapsed: true } }];
           });
 
           expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true);
@@ -707,7 +707,7 @@ describe('diffs/components/app', () => {
 
         it('should not render the collapsed files warning if the user has dismissed the alert already', async () => {
           createComponent({}, ({ state }) => {
-            state.diffs.diffFiles = [{ viewer: { collapsed: true } }];
+            state.diffs.diffFiles = [{ viewer: { automaticallyCollapsed: true } }];
           });
 
           expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true);

spec/frontend/diffs/components/diff_file_spec.js

@@ -181,7 +181,7 @@ describe('DiffFile', () => {
       });
 
       it('updates local state when changing file state', done => {
-        vm.file.viewer.collapsed = true;
+        vm.file.viewer.automaticallyCollapsed = true;
 
         vm.$nextTick(() => {
           expect(vm.isCollapsed).toBe(true);

spec/frontend/diffs/mock_data/diff_file.js

@@ -27,7 +27,7 @@ export default {
   viewer: {
     name: 'text',
     error: null,
-    collapsed: false,
+    automaticallyCollapsed: false,
   },
   added_lines: 2,
   removed_lines: 0,

spec/frontend/diffs/mock_data/diff_file_unreadable.js

@@ -26,7 +26,7 @@ export default {
   viewer: {
     name: 'text',
     error: null,
-    collapsed: false,
+    automaticallyCollapsed: false,
   },
   added_lines: 0,
   removed_lines: 0,

spec/frontend/diffs/store/actions_spec.js

@@ -483,14 +483,14 @@ describe('DiffsStoreActions', () => {
             id: 1,
             renderIt: false,
             viewer: {
-              collapsed: false,
+              automaticallyCollapsed: false,
             },
           },
           {
             id: 2,
             renderIt: false,
             viewer: {
-              collapsed: false,
+              automaticallyCollapsed: false,
             },
           },
         ],
@@ -967,7 +967,7 @@ describe('DiffsStoreActions', () => {
         {
           file_hash: 'HASH',
           viewer: {
-            collapsed,
+            automaticallyCollapsed: collapsed,
           },
           renderIt,
         },
@@ -1167,7 +1167,7 @@ describe('DiffsStoreActions', () => {
       file_hash: 'testhash',
       alternate_viewer: { name: updatedViewerName },
     };
-    const updatedViewer = { name: updatedViewerName, collapsed: false };
+    const updatedViewer = { name: updatedViewerName, automaticallyCollapsed: false };
     const testData = [{ rich_text: 'test' }, { rich_text: 'file2' }];
     let renamedFile;
     let mock;

spec/frontend/diffs/store/getters_spec.js

@@ -51,13 +51,19 @@ describe('Diffs Module Getters', () => {
 
   describe('hasCollapsedFile', () => {
     it('returns true when all files are collapsed', () => {
-      localState.diffFiles = [{ viewer: { collapsed: true } }, { viewer: { collapsed: true } }];
+      localState.diffFiles = [
+        { viewer: { automaticallyCollapsed: true } },
+        { viewer: { automaticallyCollapsed: true } },
+      ];
 
       expect(getters.hasCollapsedFile(localState)).toEqual(true);
     });
 
     it('returns true when at least one file is collapsed', () => {
-      localState.diffFiles = [{ viewer: { collapsed: false } }, { viewer: { collapsed: true } }];
+      localState.diffFiles = [
+        { viewer: { automaticallyCollapsed: false } },
+        { viewer: { automaticallyCollapsed: true } },
+      ];
 
       expect(getters.hasCollapsedFile(localState)).toEqual(true);
     });

spec/frontend/diffs/store/mutations_spec.js

@@ -130,14 +130,14 @@ describe('DiffsStoreMutations', () => {
     it('should change the collapsed prop from diffFiles', () => {
       const diffFile = {
         viewer: {
-          collapsed: true,
+          automaticallyCollapsed: true,
         },
       };
       const state = { expandAllFiles: true, diffFiles: [diffFile] };
 
       mutations[types.EXPAND_ALL_FILES](state);
 
-      expect(state.diffFiles[0].viewer.collapsed).toEqual(false);
+      expect(state.diffFiles[0].viewer.automaticallyCollapsed).toEqual(false);
     });
   });
 
@@ -933,12 +933,12 @@ describe('DiffsStoreMutations', () => {
   describe('SET_FILE_COLLAPSED', () => {
     it('sets collapsed', () => {
       const state = {
-        diffFiles: [{ file_path: 'test', viewer: { collapsed: false } }],
+        diffFiles: [{ file_path: 'test', viewer: { automaticallyCollapsed: false } }],
       };
 
       mutations[types.SET_FILE_COLLAPSED](state, { filePath: 'test', collapsed: true });
 
-      expect(state.diffFiles[0].viewer.collapsed).toBe(true);
+      expect(state.diffFiles[0].viewer.automaticallyCollapsed).toBe(true);
     });
   });