Commit ee280ed2 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Peter Hegman

Replace `window.confirm` with `GlModal` confirmation

When canceling a MR comment

Changelog: changed
parent ec60abcf
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form'; import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue'; import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
import { import {
...@@ -177,16 +178,16 @@ export default { ...@@ -177,16 +178,16 @@ export default {
'saveDiffDiscussion', 'saveDiffDiscussion',
'setSuggestPopoverDismissed', 'setSuggestPopoverDismissed',
]), ]),
handleCancelCommentForm(shouldConfirm, isDirty) { async handleCancelCommentForm(shouldConfirm, isDirty) {
if (shouldConfirm && isDirty) { if (shouldConfirm && isDirty) {
const msg = s__('Notes|Are you sure you want to cancel creating this comment?'); const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
// eslint-disable-next-line no-alert const confirmed = await confirmAction(msg);
if (!window.confirm(msg)) {
if (!confirmed) {
return; return;
} }
} }
this.cancelCommentForm({ this.cancelCommentForm({
lineCode: this.line.line_code, lineCode: this.line.line_code,
fileHash: this.diffFileHash, fileHash: this.diffFileHash,
......
import Vue from 'vue'; import Vue from 'vue';
export function confirmViaGlModal(message, element) { export function confirmAction(message, { primaryBtnVariant, primaryBtnText } = {}) {
return new Promise((resolve) => { return new Promise((resolve) => {
let confirmed = false; let confirmed = false;
const props = {};
const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
if (confirmBtnVariant) {
props.primaryVariant = confirmBtnVariant;
}
const screenReaderText =
element.querySelector('.gl-sr-only')?.textContent ||
element.querySelector('.sr-only')?.textContent ||
element.getAttribute('aria-label');
if (screenReaderText) {
props.primaryText = screenReaderText;
}
const component = new Vue({ const component = new Vue({
components: { components: {
ConfirmModal: () => import('./confirm_modal.vue'), ConfirmModal: () => import('./confirm_modal.vue'),
...@@ -28,7 +12,10 @@ export function confirmViaGlModal(message, element) { ...@@ -28,7 +12,10 @@ export function confirmViaGlModal(message, element) {
return h( return h(
'confirm-modal', 'confirm-modal',
{ {
props, props: {
primaryVariant: primaryBtnVariant,
primaryText: primaryBtnText,
},
on: { on: {
confirmed() { confirmed() {
confirmed = true; confirmed = true;
...@@ -45,3 +32,24 @@ export function confirmViaGlModal(message, element) { ...@@ -45,3 +32,24 @@ export function confirmViaGlModal(message, element) {
}).$mount(); }).$mount();
}); });
} }
export function confirmViaGlModal(message, element) {
const primaryBtnConfig = {};
const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
if (confirmBtnVariant) {
primaryBtnConfig.primaryBtnVariant = confirmBtnVariant;
}
const screenReaderText =
element.querySelector('.gl-sr-only')?.textContent ||
element.querySelector('.sr-only')?.textContent ||
element.getAttribute('aria-label');
if (screenReaderText) {
primaryBtnConfig.primaryBtnText = screenReaderText;
}
return confirmAction(message, primaryBtnConfig);
}
...@@ -238,8 +238,10 @@ RSpec.describe 'Merge request > User posts diff notes', :js do ...@@ -238,8 +238,10 @@ RSpec.describe 'Merge request > User posts diff notes', :js do
def should_allow_dismissing_a_comment(line_holder, diff_side = nil) def should_allow_dismissing_a_comment(line_holder, diff_side = nil)
write_comment_on_line(line_holder, diff_side) write_comment_on_line(line_holder, diff_side)
accept_confirm do find('.js-close-discussion-note-form').click
find('.js-close-discussion-note-form').click
page.within('.modal') do
click_button 'OK'
end end
assert_comment_dismissal(line_holder) assert_comment_dismissal(line_holder)
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue'; import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
import { createStore } from '~/mr_notes/stores'; import { createStore } from '~/mr_notes/stores';
import NoteForm from '~/notes/components/note_form.vue'; import NoteForm from '~/notes/components/note_form.vue';
import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
import { noteableDataMock } from '../../notes/mock_data'; import { noteableDataMock } from '../../notes/mock_data';
import diffFileMockData from '../mock_data/diff_file'; import diffFileMockData from '../mock_data/diff_file';
jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
return {
confirmAction: jest.fn(),
};
});
describe('DiffLineNoteForm', () => { describe('DiffLineNoteForm', () => {
let wrapper; let wrapper;
let diffFile; let diffFile;
...@@ -36,49 +44,56 @@ describe('DiffLineNoteForm', () => { ...@@ -36,49 +44,56 @@ describe('DiffLineNoteForm', () => {
}); });
}; };
const findNoteForm = () => wrapper.findComponent(NoteForm);
describe('methods', () => { describe('methods', () => {
beforeEach(() => { beforeEach(() => {
wrapper = createComponent(); wrapper = createComponent();
}); });
describe('handleCancelCommentForm', () => { describe('handleCancelCommentForm', () => {
afterEach(() => {
confirmAction.mockReset();
});
it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => { it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
jest.spyOn(window, 'confirm').mockReturnValue(false); confirmAction.mockResolvedValueOnce(false);
wrapper.vm.handleCancelCommentForm(true, true); findNoteForm().vm.$emit('cancelForm', true, true);
expect(window.confirm).toHaveBeenCalled(); expect(confirmAction).toHaveBeenCalled();
}); });
it('should ask for confirmation when one of the params false', () => { it('should not ask for confirmation when one of the params false', () => {
jest.spyOn(window, 'confirm').mockReturnValue(false); confirmAction.mockResolvedValueOnce(false);
wrapper.vm.handleCancelCommentForm(true, false); findNoteForm().vm.$emit('cancelForm', true, false);
expect(window.confirm).not.toHaveBeenCalled(); expect(confirmAction).not.toHaveBeenCalled();
wrapper.vm.handleCancelCommentForm(false, true); findNoteForm().vm.$emit('cancelForm', false, true);
expect(window.confirm).not.toHaveBeenCalled(); expect(confirmAction).not.toHaveBeenCalled();
}); });
it('should call cancelCommentForm with lineCode', (done) => { it('should call cancelCommentForm with lineCode', async () => {
jest.spyOn(window, 'confirm').mockImplementation(() => {}); confirmAction.mockResolvedValueOnce(true);
jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {});
jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {});
wrapper.vm.handleCancelCommentForm();
expect(window.confirm).not.toHaveBeenCalled(); findNoteForm().vm.$emit('cancelForm', true, true);
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({ await nextTick();
lineCode: diffLines[1].line_code,
fileHash: wrapper.vm.diffFileHash, expect(confirmAction).toHaveBeenCalled();
});
expect(wrapper.vm.resetAutoSave).toHaveBeenCalled(); await nextTick();
done(); expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({
lineCode: diffLines[1].line_code,
fileHash: wrapper.vm.diffFileHash,
}); });
expect(wrapper.vm.resetAutoSave).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