Commit 384836c9 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '229293-migrate-to-GlButton-note-form' into 'master'

Migrate to GlButton in note_form

See merge request gitlab-org/gitlab!42221
parents 694c1d4f 2defec23
<script>
/* eslint-disable vue/no-v-html */
import { mapGetters, mapActions, mapState } from 'vuex';
import { GlButton } from '@gitlab/ui';
import { mergeUrlParams } from '~/lib/utils/url_utility';
import eventHub from '../event_hub';
import markdownField from '~/vue_shared/components/markdown/field.vue';
......@@ -16,6 +17,7 @@ export default {
components: {
markdownField,
CommentFieldLayout,
GlButton,
},
mixins: [glFeatureFlagsMixin(), issuableStateMixin, resolvable],
props: {
......@@ -378,61 +380,70 @@ export default {
</template>
</label>
</p>
<div>
<button
<div class="gl-display-sm-flex gl-flex-wrap">
<gl-button
:disabled="isDisabled"
type="button"
class="btn btn-success"
category="primary"
variant="success"
class="gl-mr-3"
data-qa-selector="start_review_button"
@click="handleAddToReview"
>
<template v-if="hasDrafts">{{ __('Add to review') }}</template>
<template v-else>{{ __('Start a review') }}</template>
</button>
<button
</gl-button>
<gl-button
:disabled="isDisabled"
type="button"
class="btn js-comment-button"
category="secondary"
variant="default"
data-qa-selector="comment_now_button"
class="gl-mr-3 js-comment-button"
@click="handleUpdate()"
>
{{ __('Add comment now') }}
</button>
<button
class="btn note-edit-cancel js-close-discussion-note-form"
type="button"
</gl-button>
<gl-button
class="note-edit-cancel js-close-discussion-note-form"
category="secondary"
variant="default"
data-testid="cancelBatchCommentsEnabled"
@click="cancelHandler(true)"
>
{{ __('Cancel') }}
</button>
</gl-button>
</div>
</template>
<template v-else>
<button
:disabled="isDisabled"
type="button"
class="js-vue-issue-save btn btn-success js-comment-button"
data-qa-selector="reply_comment_button"
@click="handleUpdate()"
>
{{ saveButtonTitle }}
</button>
<button
v-if="discussion.resolvable"
class="btn btn-default gl-mr-3 js-comment-resolve-button"
@click.prevent="handleUpdate(true)"
>
{{ resolveButtonTitle }}
</button>
<button
class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
type="button"
data-testid="cancel"
@click="cancelHandler(true)"
>
{{ __('Cancel') }}
</button>
<div class="gl-display-sm-flex gl-flex-wrap">
<gl-button
:disabled="isDisabled"
category="primary"
variant="success"
data-qa-selector="reply_comment_button"
class="gl-mr-3 js-vue-issue-save js-comment-button"
@click="handleUpdate()"
>
{{ saveButtonTitle }}
</gl-button>
<gl-button
v-if="discussion.resolvable"
category="secondary"
variant="default"
class="gl-mr-3 js-comment-resolve-button"
@click.prevent="handleUpdate(true)"
>
{{ resolveButtonTitle }}
</gl-button>
<gl-button
class="note-edit-cancel js-close-discussion-note-form"
category="secondary"
variant="default"
data-testid="cancel"
@click="cancelHandler(true)"
>
{{ __('Cancel') }}
</gl-button>
</div>
</template>
</div>
</form>
......
---
title: Migrate button to gitlab ui in note form
merge_request: 42221
author:
type: changed
......@@ -161,7 +161,7 @@ RSpec.describe 'Merge request > User posts notes', :js do
fill_in 'note[note]', with: 'Some new content'
accept_confirm do
find('.btn-cancel').click
find('[data-testid="cancel"]').click
end
end
expect(find('.js-note-text').text).to eq ''
......
......@@ -4,9 +4,8 @@ import createStore from '~/notes/stores';
import NoteForm from '~/notes/components/note_form.vue';
import batchComments from '~/batch_comments/stores/modules/batch_comments';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import { noteableDataMock, notesDataMock, discussionMock } from '../mock_data';
import { getDraft, updateDraft } from '~/lib/utils/autosave';
import { noteableDataMock, notesDataMock, discussionMock } from '../mock_data';
jest.mock('~/lib/utils/autosave');
......@@ -25,6 +24,8 @@ describe('issue_note_form component', () => {
});
};
const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
beforeEach(() => {
getDraft.mockImplementation((key) => {
if (key === dummyAutosaveKey) {
......@@ -160,8 +161,8 @@ describe('issue_note_form component', () => {
});
await nextTick();
const cancelButton = wrapper.find('[data-testid="cancel"]');
cancelButton.trigger('click');
const cancelButton = findCancelButton();
cancelButton.vm.$emit('click');
await nextTick();
expect(wrapper.emitted().cancelForm).toHaveLength(1);
......@@ -177,7 +178,7 @@ describe('issue_note_form component', () => {
const textarea = wrapper.find('textarea');
textarea.setValue('Foo');
const saveButton = wrapper.find('.js-vue-issue-save');
saveButton.trigger('click');
saveButton.vm.$emit('click');
expect(wrapper.vm.isSubmitting).toBe(true);
});
......@@ -272,7 +273,7 @@ describe('issue_note_form component', () => {
await nextTick();
const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]');
cancelButton.trigger('click');
cancelButton.vm.$emit('click');
expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true);
});
......@@ -302,16 +303,16 @@ describe('issue_note_form component', () => {
expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
});
it('hides actions for commits', () => {
it('hides actions for commits', async () => {
wrapper.setProps({ discussion: { for_commit: true } });
return nextTick(() => {
expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
});
await nextTick();
expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
});
describe('on enter', () => {
it('should start review or add to review when cmd+enter is pressed', () => {
it('should start review or add to review when cmd+enter is pressed', async () => {
const textarea = wrapper.find('textarea');
jest.spyOn(wrapper.vm, 'handleAddToReview');
......@@ -319,9 +320,8 @@ describe('issue_note_form component', () => {
textarea.setValue('Foo');
textarea.trigger('keydown.enter', { metaKey: true });
return nextTick(() => {
expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
});
await nextTick();
expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
});
});
});
......
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