Rearrange discussion resolve buttons & update button display
- next-discuss button is always show unless there is only 1 discussion - regroup buttons arrangements
This commit is contained in:
parent
ae68c7ea14
commit
4bf0434359
7 changed files with 54 additions and 22 deletions
|
@ -39,20 +39,27 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="discussion-with-resolve-btn">
|
<div class="discussion-with-resolve-btn clearfix">
|
||||||
<reply-placeholder class="qa-discussion-reply" @onClick="$emit('showReplyForm')" />
|
<reply-placeholder class="qa-discussion-reply" @onClick="$emit('showReplyForm')" />
|
||||||
|
|
||||||
|
<div class="btn-group discussion-actions" role="group">
|
||||||
<resolve-discussion-button
|
<resolve-discussion-button
|
||||||
v-if="discussion.resolvable"
|
v-if="discussion.resolvable"
|
||||||
:is-resolving="isResolving"
|
:is-resolving="isResolving"
|
||||||
:button-title="resolveButtonTitle"
|
:button-title="resolveButtonTitle"
|
||||||
@onClick="$emit('resolve')"
|
@onClick="$emit('resolve')"
|
||||||
/>
|
/>
|
||||||
<div v-if="discussion.resolvable" class="btn-group discussion-actions ml-sm-2" role="group">
|
<resolve-with-issue-button
|
||||||
<resolve-with-issue-button v-if="resolveWithIssuePath" :url="resolveWithIssuePath" />
|
v-if="discussion.resolvable && resolveWithIssuePath"
|
||||||
<jump-to-next-discussion-button
|
:url="resolveWithIssuePath"
|
||||||
v-if="shouldShowJumpToNextDiscussion"
|
|
||||||
@onClick="$emit('jumpToNextDiscussion')"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="discussion.resolvable && shouldShowJumpToNextDiscussion"
|
||||||
|
class="btn-group discussion-actions ml-sm-2"
|
||||||
|
>
|
||||||
|
<jump-to-next-discussion-button @onClick="$emit('jumpToNextDiscussion')" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -126,10 +126,7 @@ export default {
|
||||||
return this.discussion.resolved_by_push ? __('Automatically resolved') : __('Resolved');
|
return this.discussion.resolved_by_push ? __('Automatically resolved') : __('Resolved');
|
||||||
},
|
},
|
||||||
shouldShowJumpToNextDiscussion() {
|
shouldShowJumpToNextDiscussion() {
|
||||||
return this.showJumpToNextDiscussion(
|
return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion');
|
||||||
this.discussion.id,
|
|
||||||
this.discussionsByDiffOrder ? 'diff' : 'discussion',
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
shouldRenderDiffs() {
|
shouldRenderDiffs() {
|
||||||
return this.discussion.diff_discussion && this.renderDiffFile;
|
return this.discussion.diff_discussion && this.renderDiffFile;
|
||||||
|
|
|
@ -61,15 +61,13 @@ export const unresolvedDiscussionsCount = state => state.unresolvedDiscussionsCo
|
||||||
export const resolvableDiscussionsCount = state => state.resolvableDiscussionsCount;
|
export const resolvableDiscussionsCount = state => state.resolvableDiscussionsCount;
|
||||||
export const hasUnresolvedDiscussions = state => state.hasUnresolvedDiscussions;
|
export const hasUnresolvedDiscussions = state => state.hasUnresolvedDiscussions;
|
||||||
|
|
||||||
export const showJumpToNextDiscussion = (state, getters) => (discussionId, mode = 'discussion') => {
|
export const showJumpToNextDiscussion = (state, getters) => (mode = 'discussion') => {
|
||||||
const orderedDiffs =
|
const orderedDiffs =
|
||||||
mode !== 'discussion'
|
mode !== 'discussion'
|
||||||
? getters.unresolvedDiscussionsIdsByDiff
|
? getters.unresolvedDiscussionsIdsByDiff
|
||||||
: getters.unresolvedDiscussionsIdsByDate;
|
: getters.unresolvedDiscussionsIdsByDate;
|
||||||
|
|
||||||
const indexOf = orderedDiffs.indexOf(discussionId);
|
return orderedDiffs.length > 1;
|
||||||
|
|
||||||
return indexOf !== -1 && indexOf < orderedDiffs.length - 1;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const isDiscussionResolved = (state, getters) => discussionId =>
|
export const isDiscussionResolved = (state, getters) => discussionId =>
|
||||||
|
|
|
@ -657,6 +657,10 @@ $note-form-margin-left: 72px;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-group > .discussion-create-issue-btn {
|
||||||
|
margin-left: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Improve discussion reply buttons layout and how jump to next discussion button
|
||||||
|
appears
|
||||||
|
merge_request: 29779
|
||||||
|
author:
|
||||||
|
type: changed
|
|
@ -362,14 +362,14 @@ describe 'Merge request > User resolves diff notes and discussions', :js do
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'shows jump to next discussion button except on last discussion' do
|
it 'shows jump to next discussion button on all discussions' do
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
all_discussion_replies = page.all('.discussion-reply-holder')
|
all_discussion_replies = page.all('.discussion-reply-holder')
|
||||||
|
|
||||||
expect(all_discussion_replies.count).to eq(2)
|
expect(all_discussion_replies.count).to eq(2)
|
||||||
expect(all_discussion_replies.first.all('.discussion-next-btn').count).to eq(1)
|
expect(all_discussion_replies.first.all('.discussion-next-btn').count).to eq(1)
|
||||||
expect(all_discussion_replies.last.all('.discussion-next-btn').count).to eq(0)
|
expect(all_discussion_replies.last.all('.discussion-next-btn').count).to eq(1)
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'displays next discussion even if hidden' do
|
it 'displays next discussion even if hidden' do
|
||||||
|
|
|
@ -32,6 +32,26 @@ describe('Getters Notes Store', () => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('showJumpToNextDiscussion', () => {
|
||||||
|
it('should return true if there are 2 or more unresolved discussions', () => {
|
||||||
|
const localGetters = {
|
||||||
|
unresolvedDiscussionsIdsByDate: ['123', '456'],
|
||||||
|
allResolvableDiscussions: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getters.showJumpToNextDiscussion(state, localGetters)()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return false if there are 1 or less unresolved discussions', () => {
|
||||||
|
const localGetters = {
|
||||||
|
unresolvedDiscussionsIdsByDate: ['123'],
|
||||||
|
allResolvableDiscussions: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getters.showJumpToNextDiscussion(state, localGetters)()).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('discussions', () => {
|
describe('discussions', () => {
|
||||||
it('should return all discussions in the store', () => {
|
it('should return all discussions in the store', () => {
|
||||||
expect(getters.discussions(state)).toEqual([individualNote]);
|
expect(getters.discussions(state)).toEqual([individualNote]);
|
||||||
|
|
Loading…
Reference in a new issue