Merge branch 'tor/feature/collapse-file-scroll-to-top' into 'master'

Scroll to top of file content when the file is collapsed

See merge request gitlab-org/gitlab!61432

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

@@ -5,6 +5,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
 import { diffViewerErrors } from '~/ide/constants';
+import { scrollToElement } from '~/lib/utils/common_utils';
 import { sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import notesEventHub from '../../notes/event_hub';
@@ -233,15 +234,20 @@ export default {
         eventHub.$emit(event);
       });
     },
-    handleToggle() {
-      const currentCollapsedFlag = this.isCollapsed;
+    handleToggle({ viaUserInteraction = false } = {}) {
+      const collapsingNow = !this.isCollapsed;
+      const contentElement = this.$el.querySelector(`#diff-content-${this.file.file_hash}`);
 
       this.setFileCollapsedByUser({
         filePath: this.file.file_path,
-        collapsed: !currentCollapsedFlag,
+        collapsed: collapsingNow,
       });
 
-      if (!this.hasDiff && currentCollapsedFlag) {
+      if (collapsingNow && viaUserInteraction && contentElement) {
+        scrollToElement(contentElement, { duration: 1 });
+      }
+
+      if (!this.hasDiff && !collapsingNow) {
         this.requestDiff();
       }
     },
@@ -300,7 +306,7 @@ export default {
       :codequality-diff="codequalityDiffForFile"
       class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100"
       :class="hasBodyClasses.header"
-      @toggleFile="handleToggle"
+      @toggleFile="handleToggle({ viaUserInteraction: true })"
       @showForkMessage="showForkMessage"
     />
 

changelogs/unreleased/tor-feature-collapse-file-scroll-to-top.yml

+---
+title: Scroll to the top of a diff file when it is collapsed
+merge_request: 61432
+author:
+type: changed

spec/frontend/diffs/components/diff_file_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DiffContentComponent from '~/diffs/components/diff_content.vue';
@@ -16,11 +17,14 @@ import createDiffsStore from '~/diffs/store/modules';
 
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
+import { scrollToElement } from '~/lib/utils/common_utils';
 import httpStatus from '~/lib/utils/http_status';
 import createNotesStore from '~/notes/stores/modules';
 import diffFileMockDataReadable from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
+jest.mock('~/lib/utils/common_utils');
+
 function changeViewer(store, index, { automaticallyCollapsed, manuallyCollapsed, name }) {
   const file = store.state.diffs.diffFiles[index];
   const newViewer = {
@@ -355,6 +359,49 @@ describe('DiffFile', () => {
         });
       });
 
+      describe('scoll-to-top of file after collapse', () => {
+        beforeEach(() => {
+          jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {});
+        });
+
+        it("scrolls to the top when the file is open, the users initiates the collapse, and there's a content block to scroll to", async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).toHaveBeenCalled();
+        });
+
+        it('does not scroll when the content block is missing', async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+          findDiffContentArea(wrapper).element.remove();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+
+        it("does not scroll if the user doesn't initiate the file collapse", async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+
+          wrapper.vm.handleToggle();
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+
+        it('does not scroll if the file is already collapsed', async () => {
+          makeFileManuallyCollapsed(store);
+          await nextTick();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+      });
+
       describe('fetch collapsed diff', () => {
         const prepFile = async (inlineLines, parallelLines, readableText) => {
           forceHasDiff({