Skip to content

G
gitlab-ce
Commit bf1e9fb8 authored by Mark Florian's avatar Mark Florian
Browse files
Options

Merge branch '229692-remove-deprecated-modal' into 'master' 

Remove DeprecatedModal2 component

See merge request gitlab-org/gitlab!51922
parents f67b65e4 20fd3ae3
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 378 deletions
app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue deleted 100644 → 0
View file @ f67b65e4
<script>
import $ from 'jquery';
import { GlButton } from '@gitlab/ui';
const buttonVariants = ['danger', 'primary', 'success', 'warning'];
const sizeVariants = ['sm', 'md', 'lg', 'xl'];
export default {
name: 'DeprecatedModal2', // use GlModal instead
components: {
GlButton,
},
props: {
id: {
type: String,
required: false,
default: null,
},
modalSize: {
type: String,
required: false,
default: 'md',
validator: (value) => sizeVariants.includes(value),
},
headerTitleText: {
type: String,
required: false,
default: '',
},
footerPrimaryButtonVariant: {
type: String,
required: false,
default: 'primary',
validator: (value) => buttonVariants.includes(value),
},
footerPrimaryButtonText: {
type: String,
required: false,
default: '',
},
},
computed: {
modalSizeClass() {
return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
},
},
mounted() {
$(this.$el).on('shown.bs.modal', this.opened).on('hidden.bs.modal', this.closed);
},
beforeDestroy() {
$(this.$el).off('shown.bs.modal', this.opened).off('hidden.bs.modal', this.closed);
},
methods: {
emitCancel(event) {
this.$emit('cancel', event);
},
emitSubmit(event) {
this.$emit('submit', event);
},
opened() {
this.$emit('open');
},
closed() {
this.$emit('closed');
},
},
};
</script>
<template>
<div :id="id" class="modal fade" tabindex="-1" role="dialog">
<div :class="modalSizeClass" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header gl-pr-4">
<slot name="header">
<h4 class="modal-title">
<slot name="title"> {{ headerTitleText }} </slot>
</h4>
<gl-button
:aria-label="s__('Modal|Close')"
variant="default"
category="tertiary"
size="small"
icon="close"
class="js-modal-close-action"
data-dismiss="modal"
@click="emitCancel($event)"
/>
</slot>
</div>
<div class="modal-body"><slot></slot></div>
<div class="modal-footer">
<slot name="footer">
<gl-button
class="js-modal-cancel-action qa-modal-cancel-button"
data-dismiss="modal"
@click="emitCancel($event)"
>
{{ s__('Modal|Cancel') }}
</gl-button>
<gl-button
:class="`btn-${footerPrimaryButtonVariant}`"
class="js-modal-primary-action qa-modal-primary-button"
data-dismiss="modal"
@click="emitSubmit($event)"
>
{{ footerPrimaryButtonText }}
</gl-button>
</slot>
</div>
</div>
</div>
</div>
</template>
locale/gitlab.pot
View file @ bf1e9fb8
......@@ -18469,9 +18469,6 @@ msgstr ""
msgid "ModalButton|Add projects"
msgstr ""
msgid "Modal|Cancel"
msgstr ""
msgid "Modal|Close"
msgstr ""
......
spec/frontend/vue_shared/components/deprecated_modal_2_spec.js deleted 100644 → 0
View file @ f67b65e4
import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
const modalComponent = Vue.extend(DeprecatedModal2);
describe('DeprecatedModal2', () => {
let vm;
afterEach(() => {
vm.$destroy();
});
describe('props', () => {
describe('with id', () => {
const props = {
id: 'my-modal',
};
beforeEach(() => {
vm = mountComponent(modalComponent, props);
});
it('assigns the id to the modal', () => {
expect(vm.$el.id).toBe(props.id);
});
});
describe('without id', () => {
beforeEach(() => {
vm = mountComponent(modalComponent, {});
});
it('does not add an id attribute to the modal', () => {
expect(vm.$el.hasAttribute('id')).toBe(false);
});
});
describe('with headerTitleText', () => {
const props = {
headerTitleText: 'my title text',
};
beforeEach(() => {
vm = mountComponent(modalComponent, props);
});
it('sets the modal title', () => {
const modalTitle = vm.$el.querySelector('.modal-title');
expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText);
});
});
describe('with footerPrimaryButtonVariant', () => {
const props = {
footerPrimaryButtonVariant: 'danger',
};
beforeEach(() => {
vm = mountComponent(modalComponent, props);
});
it('sets the primary button class', () => {
const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type');
expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`);
});
});
describe('with footerPrimaryButtonText', () => {
const props = {
footerPrimaryButtonText: 'my button text',
};
beforeEach(() => {
vm = mountComponent(modalComponent, props);
});
it('sets the primary button text', () => {
const primaryButton = vm.$el.querySelector('.js-modal-primary-action .gl-button-text');
expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText);
});
});
});
it('works with data-toggle="modal"', () => {
setFixtures(`
<button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
<div id="modal-container"></div>
`);
const modalContainer = document.getElementById('modal-container');
const modalButton = document.getElementById('modal-button');
vm = mountComponent(
modalComponent,
{
id: 'my-modal',
},
modalContainer,
);
const modalElement = document.getElementById('my-modal');
modalButton.click();
expect(modalElement).not.toHaveClass('show');
// let the modal fade in
jest.runOnlyPendingTimers();
expect(modalElement).toHaveClass('show');
});
describe('methods', () => {
const dummyEvent = 'not really an event';
beforeEach(() => {
vm = mountComponent(modalComponent, {});
jest.spyOn(vm, '$emit').mockImplementation(() => {});
});
describe('emitCancel', () => {
it('emits a cancel event', () => {
vm.emitCancel(dummyEvent);
expect(vm.$emit).toHaveBeenCalledWith('cancel', dummyEvent);
});
});
describe('emitSubmit', () => {
it('emits a submit event', () => {
vm.emitSubmit(dummyEvent);
expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent);
});
});
describe('opened', () => {
it('emits a open event', () => {
vm.opened();
expect(vm.$emit).toHaveBeenCalledWith('open');
});
});
describe('closed', () => {
it('emits a closed event', () => {
vm.closed();
expect(vm.$emit).toHaveBeenCalledWith('closed');
});
});
});
describe('slots', () => {
const slotContent = 'this should go into the slot';
const modalWithSlot = (slot) => {
return Vue.extend({
components: {
DeprecatedModal2,
},
render: (h) =>
h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]),
});
};
describe('default slot', () => {
beforeEach(() => {
vm = mountComponent(modalWithSlot());
});
it('sets the modal body', () => {
const modalBody = vm.$el.querySelector('.modal-body');
expect(modalBody.innerHTML).toBe(slotContent);
});
});
describe('header slot', () => {
beforeEach(() => {
vm = mountComponent(modalWithSlot('header'));
});
it('sets the modal header', () => {
const modalHeader = vm.$el.querySelector('.modal-header');
expect(modalHeader.innerHTML).toBe(slotContent);
});
});
describe('title slot', () => {
beforeEach(() => {
vm = mountComponent(modalWithSlot('title'));
});
it('sets the modal title', () => {
const modalTitle = vm.$el.querySelector('.modal-title');
expect(modalTitle.innerHTML).toBe(slotContent);
});
});
describe('footer slot', () => {
beforeEach(() => {
vm = mountComponent(modalWithSlot('footer'));
});
it('sets the modal footer', () => {
const modalFooter = vm.$el.querySelector('.modal-footer');
expect(modalFooter.innerHTML).toBe(slotContent);
});
});
});
describe('handling sizes', () => {
it('should render modal-sm', () => {
vm = mountComponent(modalComponent, {
modalSize: 'sm',
});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true);
});
it('should render modal-lg', () => {
vm = mountComponent(modalComponent, {
modalSize: 'lg',
});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
});
it('should render modal-xl', () => {
vm = mountComponent(modalComponent, {
modalSize: 'xl',
});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true);
});
it('should not add modal size classes when md size is passed', () => {
vm = mountComponent(modalComponent, {
modalSize: 'md',
});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false);
});
it('should not add modal size classes by default', () => {
vm = mountComponent(modalComponent, {});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false);
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false);
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7