diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-02-25 19:38:29 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-02-25 19:38:29 +0300 |
commit | d63f3ea7da1fefbb9374b0b4b077f08b8a44d2f6 (patch) | |
tree | fe9392cc965315c22039b44dde720a6c9112e437 | |
parent | 15528c75549cc1be6cb0201556ea591953279e84 (diff) | |
parent | a26cd1235a6eda5fc32fb4fba2f32489536096e5 (diff) |
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
5 files changed, 118 insertions, 10 deletions
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue new file mode 100644 index 00000000000..e413398696a --- /dev/null +++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue @@ -0,0 +1,34 @@ +<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> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 2d6fd8b116f..3894dc8c677 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -25,6 +25,7 @@ import noteable from '../mixins/noteable'; import resolvable from '../mixins/resolvable'; import discussionNavigation from '../mixins/discussion_navigation'; 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 eventHub from '../event_hub'; @@ -44,6 +45,7 @@ export default { ReplyPlaceholder, placeholderNote, placeholderSystemNote, + ResolveWithIssueButton, systemNote, TimelineEntryItem, }, @@ -234,6 +236,9 @@ export default { url: this.discussion.discussion_path, }; }, + resolveWithIssuePath() { + return !this.discussionResolved && this.discussion.resolve_with_issue_path; + }, }, watch: { isReplying() { @@ -487,16 +492,10 @@ Please check your network connection and try again.`; class="btn-group discussion-actions ml-sm-2" role="group" > - <div v-if="!discussionResolved" class="btn-group" role="group"> - <a - v-gl-tooltip - :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> + <resolve-with-issue-button + v-if="resolveWithIssuePath" + :url="resolveWithIssuePath" + /> <jump-to-next-discussion-button v-if="shouldShowJumpToNextDiscussion" @onClick="jumpToNextDiscussion" diff --git a/changelogs/unreleased/refactor-56367-extract-resolve-with-issue-button-component.yml b/changelogs/unreleased/refactor-56367-extract-resolve-with-issue-button-component.yml new file mode 100644 index 00000000000..082075506c0 --- /dev/null +++ b/changelogs/unreleased/refactor-56367-extract-resolve-with-issue-button-component.yml @@ -0,0 +1,5 @@ +--- +title: Extracted ResolveWithIssueButton to its own component +merge_request: 25093 +author: Martin Hobert +type: other diff --git a/spec/javascripts/notes/components/discussion_resolve_with_issue_button_spec.js b/spec/javascripts/notes/components/discussion_resolve_with_issue_button_spec.js new file mode 100644 index 00000000000..b2a91c9919a --- /dev/null +++ b/spec/javascripts/notes/components/discussion_resolve_with_issue_button_spec.js @@ -0,0 +1,31 @@ +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); + }); +}); diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index 2eae22e095f..2b93fb9fb45 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import createStore from '~/notes/stores'; import noteableDiscussion from '~/notes/components/noteable_discussion.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 { noteableDataMock, discussionMock, notesDataMock } from '../mock_data'; import mockDiffFile from '../../diffs/mock_data/diff_file'; @@ -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); + }); + }); }); |