Merge branch 'diff-expand-all-button' into 'master'

Show expand all button on merge request diffs

Closes #51737

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

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

@@ -36,7 +36,7 @@ export default {
   },
   computed: {
     ...mapState('diffs', ['commit', 'showTreeList']),
-    ...mapGetters('diffs', ['isInlineView', 'isParallelView', 'areAllFilesCollapsed']),
+    ...mapGetters('diffs', ['isInlineView', 'isParallelView', 'hasCollapsedFile']),
     comparableDiffs() {
       return this.mergeRequestDiffs.slice(1);
     },
@@ -113,8 +113,8 @@ export default {
         class="inline-parallel-buttons d-none d-md-flex ml-auto"
       >
         <a
-          v-if="areAllFilesCollapsed"
-          class="btn btn-default"
+          v-show="hasCollapsedFile"
+          class="btn btn-default append-right-8"
           @click="expandAllFiles"
         >
           {{ __('Expand all') }}

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

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

changelogs/unreleased/diff-expand-all-button.yml

+---
+title: Show expand all diffs button when a single diff file is collapsed
+merge_request:
+author:
+type: fixed

spec/javascripts/diffs/store/getters_spec.js

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