Commit 0eae96df authored by Jannik Lehmann's avatar Jannik Lehmann Committed by Miguel Rincon

Replace window.confirm with GlModal for board setting sidebar

This commit replaces window.confirm dialog with
a GlModal for the reset of the board setting sidebar.

Changelog: changed
parent 66cb0631
<script>
import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui';
import { GlButton, GlDrawer, GlLabel, GlModal, GlModalDirective } from '@gitlab/ui';
import { MountingPortal } from 'portal-vue';
import { mapActions, mapState, mapGetters } from 'vuex';
import { LIST, ListType, ListTypeTitles } from '~/boards/constants';
......@@ -11,8 +11,14 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
export default {
listSettingsText: __('List settings'),
i18n: {
modalAction: __('Remove list'),
modalCopy: __('Are you sure you want to remove this list?'),
modalCancel: __('Cancel'),
},
components: {
GlButton,
GlModal,
GlDrawer,
GlLabel,
MountingPortal,
......@@ -21,6 +27,9 @@ export default {
BoardSettingsListTypes: () =>
import('ee_component/boards/components/board_settings_list_types.vue'),
},
directives: {
GlModal: GlModalDirective,
},
mixins: [glFeatureFlagMixin(), Tracking.mixin()],
inject: ['canAdminList', 'scopedLabelsAvailable'],
inheritAttrs: false,
......@@ -29,6 +38,7 @@ export default {
ListType,
};
},
modalId: 'board-settings-sidebar-modal',
computed: {
...mapGetters(['isSidebarOpen', 'isEpicBoard']),
...mapState(['activeId', 'sidebarType', 'boardLists']),
......@@ -59,16 +69,16 @@ export default {
},
methods: {
...mapActions(['unsetActiveId', 'removeList']),
handleModalPrimary() {
this.deleteBoard();
},
showScopedLabels(label) {
return this.scopedLabelsAvailable && isScopedLabel(label);
},
deleteBoard() {
// eslint-disable-next-line no-alert
if (window.confirm(__('Are you sure you want to remove this list?'))) {
this.track('click_button', { label: 'remove_list' });
this.removeList(this.activeId);
this.unsetActiveId();
}
},
},
};
......@@ -92,11 +102,10 @@ export default {
<template #header>
<div v-if="canAdminList && activeList.id" class="gl-mt-3">
<gl-button
v-gl-modal="$options.modalId"
variant="danger"
category="secondary"
size="small"
data-testid="remove-list"
@click.stop="deleteBoard"
>{{ __('Remove list') }}
</gl-button>
</div>
......@@ -122,5 +131,21 @@ export default {
/>
</template>
</gl-drawer>
<gl-modal
:modal-id="$options.modalId"
:title="$options.i18n.modalAction"
size="sm"
:action-primary="{
text: $options.i18n.modalAction,
attributes: [{ variant: 'danger' }],
}"
:action-secondary="{
text: $options.i18n.modalCancel,
attributes: [{ variant: 'default' }],
}"
@primary="handleModalPrimary"
>
<p>{{ $options.i18n.modalCopy }}</p>
</gl-modal>
</mounting-portal>
</template>
......@@ -153,7 +153,11 @@ RSpec.describe 'epic boards', :js do
click_button 'List settings'
end
accept_confirm { click_button 'Remove list' }
click_button 'Remove list'
page.within('.modal') do
click_button('Remove list', match: :first)
end
expect(page).not_to have_content(label.name)
end
......
......@@ -583,7 +583,11 @@ RSpec.describe 'Project issue boards', :js do
end
page.within(find('.js-board-settings-sidebar')) do
accept_confirm { find('[data-testid="remove-list"]').click }
click_button 'Remove list'
end
page.within('.modal') do
click_button 'Remove list'
end
end
......
import { GlDrawer, GlLabel } from '@gitlab/ui';
import { GlDrawer, GlLabel, GlModal, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { MountingPortal } from 'portal-vue';
import Vue from 'vue';
import Vuex from 'vuex';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { stubComponent } from 'helpers/stub_component';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
......@@ -20,8 +21,7 @@ describe('BoardSettingsSidebar', () => {
const labelTitle = mockLabelList.label.title;
const labelColor = mockLabelList.label.color;
const listId = mockLabelList.id;
const findRemoveButton = () => wrapper.findByTestId('remove-list');
const modalID = 'board-settings-sidebar-modal';
const createComponent = ({
canAdminList = false,
......@@ -46,6 +46,9 @@ describe('BoardSettingsSidebar', () => {
canAdminList,
scopedLabelsAvailable: false,
},
directives: {
GlModal: createMockDirective(),
},
stubs: {
GlDrawer: stubComponent(GlDrawer, {
template: '<div><slot name="header"></slot><slot></slot></div>',
......@@ -56,6 +59,8 @@ describe('BoardSettingsSidebar', () => {
};
const findLabel = () => wrapper.find(GlLabel);
const findDrawer = () => wrapper.find(GlDrawer);
const findModal = () => wrapper.find(GlModal);
const findRemoveButton = () => wrapper.find(GlButton);
afterEach(() => {
jest.restoreAllMocks();
......@@ -161,5 +166,16 @@ describe('BoardSettingsSidebar', () => {
expect(findRemoveButton().exists()).toBe(true);
});
it('has the correct ID on the button', () => {
createComponent({ canAdminList: true, activeId: listId, list: mockLabelList });
const binding = getBinding(findRemoveButton().element, 'gl-modal');
expect(binding.value).toBe(modalID);
});
it('has the correct ID on the modal', () => {
createComponent({ canAdminList: true, activeId: listId, list: mockLabelList });
expect(findModal().props('modalId')).toBe(modalID);
});
});
});
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