Commit 03054c87 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch 'jdb/hide-dont-remove-collapsed-files' into 'master'

Change toggle file to hide instead of remove

See merge request gitlab-org/gitlab!26181
parents 0e35db54 2e54e4ea
...@@ -179,18 +179,19 @@ export default { ...@@ -179,18 +179,19 @@ export default {
<div v-if="errorMessage" class="diff-viewer"> <div v-if="errorMessage" class="diff-viewer">
<div class="nothing-here-block" v-html="errorMessage"></div> <div class="nothing-here-block" v-html="errorMessage"></div>
</div> </div>
<div v-else-if="isCollapsed" class="nothing-here-block diff-collapsed"> <template v-else>
{{ __('This diff is collapsed.') }} <div v-show="isCollapsed" class="nothing-here-block diff-collapsed">
<a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{ {{ __('This diff is collapsed.') }}
__('Click to expand it.') <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
}}</a> __('Click to expand it.')
</div> }}</a>
<diff-content </div>
v-else <diff-content
:class="{ hidden: isCollapsed || isFileTooLarge }" v-show="!isCollapsed && !isFileTooLarge"
:diff-file="file" :diff-file="file"
:help-page-path="helpPagePath" :help-page-path="helpPagePath"
/> />
</template>
</div> </div>
</template> </template>
</div> </div>
......
---
title: Improved MR toggle file performance by hiding instead of removing
merge_request: 26181
author:
type: performance
...@@ -23,6 +23,9 @@ describe('DiffFile', () => { ...@@ -23,6 +23,9 @@ describe('DiffFile', () => {
vm.$destroy(); vm.$destroy();
}); });
const findDiffContent = () => vm.$el.querySelector('.diff-content');
const isVisible = el => el.style.display !== 'none';
describe('template', () => { describe('template', () => {
it('should render component with file header, file content components', done => { it('should render component with file header, file content components', done => {
const el = vm.$el; const el = vm.$el;
...@@ -69,13 +72,13 @@ describe('DiffFile', () => { ...@@ -69,13 +72,13 @@ describe('DiffFile', () => {
describe('collapsed', () => { describe('collapsed', () => {
it('should not have file content', done => { it('should not have file content', done => {
expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(1); expect(isVisible(findDiffContent())).toBe(true);
expect(vm.isCollapsed).toEqual(false); expect(vm.isCollapsed).toEqual(false);
vm.isCollapsed = true; vm.isCollapsed = true;
vm.file.renderIt = true; vm.file.renderIt = true;
vm.$nextTick(() => { vm.$nextTick(() => {
expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(0); expect(isVisible(findDiffContent())).toBe(false);
done(); done();
}); });
......
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