Commit d63f3ea7 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'refactor/56367-extract-resolve-with-issue-button-component' into 'master'

Extract ResolveWithIssueButton from NoteableDiscussion component

Closes #56367

See merge request gitlab-org/gitlab-ce!25093
parents 15528c75 a26cd123
<script>
import Icon from '~/vue_shared/components/icon.vue';
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
export default {
name: 'ResolveWithIssueButton',
components: {
Icon,
GlButton,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
url: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="btn-group" role="group">
<gl-button
v-gl-tooltip
:href="url"
:title="s__('MergeRequests|Resolve this discussion in a new issue')"
class="new-issue-for-discussion discussion-create-issue-btn"
>
<icon name="issue-new" />
</gl-button>
</div>
</template>
...@@ -25,6 +25,7 @@ import noteable from '../mixins/noteable'; ...@@ -25,6 +25,7 @@ import noteable from '../mixins/noteable';
import resolvable from '../mixins/resolvable'; import resolvable from '../mixins/resolvable';
import discussionNavigation from '../mixins/discussion_navigation'; import discussionNavigation from '../mixins/discussion_navigation';
import ReplyPlaceholder from './discussion_reply_placeholder.vue'; import ReplyPlaceholder from './discussion_reply_placeholder.vue';
import ResolveWithIssueButton from './discussion_resolve_with_issue_button.vue';
import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue'; import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -44,6 +45,7 @@ export default { ...@@ -44,6 +45,7 @@ export default {
ReplyPlaceholder, ReplyPlaceholder,
placeholderNote, placeholderNote,
placeholderSystemNote, placeholderSystemNote,
ResolveWithIssueButton,
systemNote, systemNote,
TimelineEntryItem, TimelineEntryItem,
}, },
...@@ -234,6 +236,9 @@ export default { ...@@ -234,6 +236,9 @@ export default {
url: this.discussion.discussion_path, url: this.discussion.discussion_path,
}; };
}, },
resolveWithIssuePath() {
return !this.discussionResolved && this.discussion.resolve_with_issue_path;
},
}, },
watch: { watch: {
isReplying() { isReplying() {
...@@ -487,16 +492,10 @@ Please check your network connection and try again.`; ...@@ -487,16 +492,10 @@ Please check your network connection and try again.`;
class="btn-group discussion-actions ml-sm-2" class="btn-group discussion-actions ml-sm-2"
role="group" role="group"
> >
<div v-if="!discussionResolved" class="btn-group" role="group"> <resolve-with-issue-button
<a v-if="resolveWithIssuePath"
v-gl-tooltip :url="resolveWithIssuePath"
:href="discussion.resolve_with_issue_path" />
:title="s__('MergeRequests|Resolve this discussion in a new issue')"
class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
>
<icon name="issue-new" />
</a>
</div>
<jump-to-next-discussion-button <jump-to-next-discussion-button
v-if="shouldShowJumpToNextDiscussion" v-if="shouldShowJumpToNextDiscussion"
@onClick="jumpToNextDiscussion" @onClick="jumpToNextDiscussion"
......
---
title: Extracted ResolveWithIssueButton to its own component
merge_request: 25093
author: Martin Hobert
type: other
import { GlButton } from '@gitlab/ui';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { TEST_HOST } from 'spec/test_constants';
const localVue = createLocalVue();
describe('ResolveWithIssueButton', () => {
let wrapper;
const url = `${TEST_HOST}/hello-world/`;
beforeEach(() => {
wrapper = shallowMount(ResolveWithIssueButton, {
localVue,
sync: false,
propsData: {
url,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('it should have a link with the provided link property as href', () => {
const button = wrapper.find(GlButton);
expect(button.attributes().href).toBe(url);
});
});
...@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue'; import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import '~/behaviors/markdown/render_gfm'; import '~/behaviors/markdown/render_gfm';
import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data'; import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
import mockDiffFile from '../../diffs/mock_data/diff_file'; import mockDiffFile from '../../diffs/mock_data/diff_file';
...@@ -238,4 +239,42 @@ describe('noteable_discussion component', () => { ...@@ -238,4 +239,42 @@ describe('noteable_discussion component', () => {
}); });
}); });
}); });
describe('for resolved discussion', () => {
beforeEach(() => {
const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
wrapper.setProps({ discussion });
});
it('does not display a button to resolve with issue', () => {
const button = wrapper.find(ResolveWithIssueButton);
expect(button.exists()).toBe(false);
});
});
describe('for unresolved discussion', () => {
beforeEach(done => {
const discussion = {
...getJSONFixture(discussionWithTwoUnresolvedNotes)[0],
expanded: true,
};
discussion.notes = discussion.notes.map(note => ({
...note,
resolved: false,
}));
wrapper.setProps({ discussion });
wrapper.vm
.$nextTick()
.then(done)
.catch(done.fail);
});
it('displays a button to resolve with issue', () => {
const button = wrapper.find(ResolveWithIssueButton);
expect(button.exists()).toBe(true);
});
});
}); });
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