Commit 31a72e64 authored by Thomas Randolph's avatar Thomas Randolph Committed by Phil Hughes

Scroll to top of file content when the file is collapsed

parent ffd2b418
......@@ -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"
/>
......
---
title: Scroll to the top of a diff file when it is collapsed
merge_request: 61432
author:
type: changed
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({
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment