Commit 59e704c8 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'feature/highlight-collapsed-diff-files' into 'master'

Re-enable highlighting collapsed diff files

See merge request gitlab-org/gitlab!42343
parents 91c0aa62 51bc062f
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { escape } from 'lodash';
import { GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { __, sprintf } from '~/locale';
import { sprintf } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import { hasDiff } from '~/helpers/diffs_helper';
import eventHub from '../../notes/event_hub';
import DiffFileHeader from './diff_file_header.vue';
import DiffContent from './diff_content.vue';
import { diffViewerErrors } from '~/ide/constants';
import { GENERIC_ERROR, DIFF_FILE } from '../i18n';
export default {
components: {
DiffFileHeader,
DiffContent,
GlButton,
GlLoadingIcon,
},
directives: {
SafeHtml,
},
mixins: [glFeatureFlagsMixin()],
i18n: {
genericError: GENERIC_ERROR,
...DIFF_FILE,
},
props: {
file: {
type: Object,
......@@ -53,7 +59,7 @@ export default {
...mapGetters('diffs', ['getDiffFileDiscussions']),
viewBlobLink() {
return sprintf(
__('You can %{linkStart}view the blob%{linkEnd} instead.'),
this.$options.i18n.blobView,
{
linkStart: `<a href="${escape(this.file.view_path)}">`,
linkEnd: '</a>',
......@@ -75,9 +81,7 @@ export default {
},
forkMessage() {
return sprintf(
__(
"You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
),
this.$options.i18n.editInFork,
{
tag_start: '<span class="js-file-fork-suggestion-section-action">',
tag_end: '</span>',
......@@ -148,7 +152,7 @@ export default {
})
.catch(() => {
this.isLoadingCollapsedDiff = false;
createFlash(__('Something went wrong on our end. Please try again!'));
createFlash(this.$options.i18n.genericError);
});
},
showForkMessage() {
......@@ -188,14 +192,14 @@ export default {
<a
:href="file.fork_path"
class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
>{{ __('Fork') }}</a
>{{ $options.i18n.fork }}</a
>
<button
class="js-cancel-fork-suggestion-button btn btn-grouped"
type="button"
@click="hideForkMessage"
>
{{ __('Cancel') }}
{{ $options.i18n.cancel }}
</button>
</div>
<gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
......@@ -205,11 +209,17 @@ export default {
<div v-safe-html="errorMessage" class="nothing-here-block"></div>
</div>
<template v-else>
<div v-show="isCollapsed" class="nothing-here-block diff-collapsed">
{{ __('This diff is collapsed.') }}
<a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
__('Click to expand it.')
}}</a>
<div v-show="isCollapsed" class="gl-p-7 gl-text-center collapsed-file-warning">
<p class="gl-mb-8 gl-mt-5">
{{ $options.i18n.collapsed }}
</p>
<gl-button
class="gl-alert-action gl-mb-5"
data-testid="expandButton"
@click="handleToggle"
>
{{ $options.i18n.expand }}
</gl-button>
</div>
<diff-content
v-show="!isCollapsed && !isFileTooLarge"
......
import { __ } from '~/locale';
export const GENERIC_ERROR = __('Something went wrong on our end. Please try again!');
export const DIFF_FILE = {
blobView: __('You can %{linkStart}view the blob%{linkEnd} instead.'),
editInFork: __(
"You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
),
fork: __('Fork'),
cancel: __('Cancel'),
collapsed: __('This file is collapsed.'),
expand: __('Expand file'),
};
---
title: 'Expand the visible highlight for collapsed diffs (re: !41393)'
merge_request: 42343
author:
type: other
......@@ -10357,6 +10357,9 @@ msgstr ""
msgid "Expand dropdown"
msgstr ""
msgid "Expand file"
msgstr ""
msgid "Expand milestones"
msgstr ""
......@@ -25739,6 +25742,9 @@ msgstr ""
msgid "This field is required."
msgstr ""
msgid "This file is collapsed."
msgstr ""
msgid "This group"
msgstr ""
......
......@@ -17,11 +17,11 @@ RSpec.describe 'User expands diff', :js do
it 'allows user to expand diff' do
page.within find('[id="19763941ab80e8c09871c0a425f0560d9053bcb3"]') do
click_link 'Click to expand it.'
find('[data-testid="expandButton"]').click
wait_for_requests
expect(page).not_to have_content('Click to expand it.')
expect(page).not_to have_content('Expand File')
expect(page).to have_selector('.code')
end
end
......
......@@ -90,8 +90,8 @@ describe('DiffFile', () => {
vm.isCollapsed = true;
vm.$nextTick(() => {
expect(vm.$el.innerText).toContain('This diff is collapsed');
expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
expect(vm.$el.innerText).toContain('This file is collapsed.');
expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
done();
});
......@@ -102,8 +102,8 @@ describe('DiffFile', () => {
vm.isCollapsed = true;
vm.$nextTick(() => {
expect(vm.$el.innerText).toContain('This diff is collapsed');
expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
expect(vm.$el.innerText).toContain('This file is collapsed.');
expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
done();
});
......@@ -121,8 +121,8 @@ describe('DiffFile', () => {
vm.isCollapsed = true;
vm.$nextTick(() => {
expect(vm.$el.innerText).toContain('This diff is collapsed');
expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
expect(vm.$el.innerText).toContain('This file is collapsed.');
expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
done();
});
......@@ -135,7 +135,7 @@ describe('DiffFile', () => {
vm.file.viewer.name = diffViewerModes.renamed;
vm.$nextTick(() => {
expect(vm.$el.innerText).not.toContain('This diff is collapsed');
expect(vm.$el.innerText).not.toContain('This file is collapsed.');
done();
});
......@@ -148,7 +148,7 @@ describe('DiffFile', () => {
vm.file.viewer.name = diffViewerModes.mode_changed;
vm.$nextTick(() => {
expect(vm.$el.innerText).not.toContain('This diff is collapsed');
expect(vm.$el.innerText).not.toContain('This file is collapsed.');
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