Fix expand all button not working

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51737

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

@@ -125,9 +125,9 @@ export default {
         >
           {{ __('Show latest version') }}
         </gl-button>
-        <a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
+        <gl-button v-show="hasCollapsedFile" class="append-right-8" @click="expandAllFiles">
           {{ __('Expand all') }}
-        </a>
+        </gl-button>
         <settings-dropdown />
       </div>
     </div>

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

@@ -73,13 +73,23 @@ export default {
       if (!newVal && oldVal && !this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       }
+
+      this.setFileCollapsed({ filePath: this.file.file_path, collapsed: newVal });
+    },
+    'file.viewer.collapsed': function setIsCollapsed(newVal) {
+      this.isCollapsed = newVal;
     },
   },
   created() {
     eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.handleLoadCollapsedDiff);
   },
   methods: {
-    ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff', 'setRenderIt']),
+    ...mapActions('diffs', [
+      'loadCollapsedDiff',
+      'assignDiscussionsToDiff',
+      'setRenderIt',
+      'setFileCollapsed',
+    ]),
     handleToggle() {
       if (!this.hasDiffLines) {
         this.handleLoadCollapsedDiff();

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

@@ -344,5 +344,8 @@ export const toggleFullDiff = ({ dispatch, getters, state }, filePath) => {
   }
 };
 
+export const setFileCollapsed = ({ commit }, { filePath, collapsed }) =>
+  commit(types.SET_FILE_COLLAPSED, { filePath, collapsed });
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -27,3 +27,4 @@ export const TOGGLE_FILE_FINDER_VISIBLE = 'TOGGLE_FILE_FINDER_VISIBLE';
 export const REQUEST_FULL_DIFF = 'REQUEST_FULL_DIFF';
 export const RECEIVE_FULL_DIFF_SUCCESS = 'RECEIVE_FULL_DIFF_SUCCESS';
 export const RECEIVE_FULL_DIFF_ERROR = 'RECEIVE_FULL_DIFF_ERROR';
+export const SET_FILE_COLLAPSED = 'SET_FILE_COLLAPSED';

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

@@ -104,7 +104,10 @@ export default {
   [types.EXPAND_ALL_FILES](state) {
     state.diffFiles = state.diffFiles.map(file => ({
       ...file,
+      viewer: {
+        ...file.viewer,
         collapsed: false,
+      },
     }));
   },
 
@@ -300,4 +303,11 @@ export default {
       }),
     });
   },
+  [types.SET_FILE_COLLAPSED](state, { filePath, collapsed }) {
+    const file = state.diffFiles.find(f => f.file_path === filePath);
+
+    if (file && file.viewer) {
+      file.viewer.collapsed = collapsed;
+    }
+  },
 };

spec/features/merge_request/user_views_diffs_spec.rb

@@ -34,6 +34,16 @@ describe 'User views diffs', :js do
     expect(page).not_to have_selector('.mr-loading-status .loading', visible: true)
   end
 
+  it 'expands all diffs' do
+    first('#a5cc2925ca8258af241be7e5b0381edf30266302 .js-file-title').click
+
+    expect(page).to have_button('Expand all')
+
+    click_button 'Expand all'
+
+    expect(page).not_to have_button('Expand all')
+  end
+
   context 'when in the inline view' do
     include_examples 'unfold diffs'
   end

spec/javascripts/diffs/components/diff_file_spec.js

@@ -109,6 +109,31 @@ describe('DiffFile', () => {
           done();
         });
       });
+
+      it('should update store state', done => {
+        spyOn(vm.$store, 'dispatch');
+
+        vm.isCollapsed = true;
+
+        vm.$nextTick(() => {
+          expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/setFileCollapsed', {
+            filePath: vm.file.file_path,
+            collapsed: true,
+          });
+
+          done();
+        });
+      });
+
+      it('updates local state when changing file state', done => {
+        vm.file.viewer.collapsed = true;
+
+        vm.$nextTick(() => {
+          expect(vm.isCollapsed).toBe(true);
+
+          done();
+        });
+      });
     });
   });
 

spec/javascripts/diffs/store/actions_spec.js

@@ -35,6 +35,7 @@ import actions, {
   receiveFullDiffError,
   fetchFullDiff,
   toggleFullDiff,
+  setFileCollapsed,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -977,4 +978,17 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('setFileCollapsed', () => {
+    it('commits SET_FILE_COLLAPSED', done => {
+      testAction(
+        setFileCollapsed,
+        { filePath: 'test', collapsed: true },
+        null,
+        [{ type: types.SET_FILE_COLLAPSED, payload: { filePath: 'test', collapsed: true } }],
+        [],
+        done,
+      );
+    });
+  });
 });

spec/javascripts/diffs/store/mutations_spec.js

@@ -58,13 +58,15 @@ describe('DiffsStoreMutations', () => {
   describe('EXPAND_ALL_FILES', () => {
     it('should change the collapsed prop from diffFiles', () => {
       const diffFile = {
+        viewer: {
           collapsed: true,
+        },
       };
       const state = { expandAllFiles: true, diffFiles: [diffFile] };
 
       mutations[types.EXPAND_ALL_FILES](state);
 
-      expect(state.diffFiles[0].collapsed).toEqual(false);
+      expect(state.diffFiles[0].viewer.collapsed).toEqual(false);
     });
   });
 
@@ -742,4 +744,16 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].isShowingFullFile).toBe(true);
     });
   });
+
+  describe('SET_FILE_COLLAPSED', () => {
+    it('sets collapsed', () => {
+      const state = {
+        diffFiles: [{ file_path: 'test', viewer: { collapsed: false } }],
+      };
+
+      mutations[types.SET_FILE_COLLAPSED](state, { filePath: 'test', collapsed: true });
+
+      expect(state.diffFiles[0].viewer.collapsed).toBe(true);
+    });
+  });
 });