Commit bf22eb61 authored by Winnie Hellmann's avatar Winnie Hellmann 🌴

Rename popup-dialog to modal

parent 0cdc840b
<script>
import { s__ } from '../../locale';
import tooltip from '../../vue_shared/directives/tooltip';
import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
import modal from '../../vue_shared/components/modal.vue';
import eventHub from '../event_hub';
import { COMMON_STR } from '../constants';
import Icon from '../../vue_shared/components/icon.vue';
......@@ -9,7 +9,7 @@ import Icon from '../../vue_shared/components/icon.vue';
export default {
components: {
Icon,
PopupDialog,
modal,
},
directives: {
tooltip,
......@@ -27,7 +27,7 @@ export default {
},
data() {
return {
dialogStatus: false,
modalStatus: false,
};
},
computed: {
......@@ -43,10 +43,10 @@ export default {
},
methods: {
onLeaveGroup() {
this.dialogStatus = true;
this.modalStatus = true;
},
leaveGroup(leaveConfirmed) {
this.dialogStatus = false;
this.modalStatus = false;
if (leaveConfirmed) {
eventHub.$emit('leaveGroup', this.group, this.parentGroup);
}
......@@ -82,8 +82,8 @@ export default {
class="fa fa-sign-out"
aria-hidden="true"/>
</a>
<popup-dialog
v-show="dialogStatus"
<modal
v-show="modalStatus"
:primary-button-label="__('Leave')"
kind="warning"
:title="__('Are you sure?')"
......
<script>
import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
import modal from '../../../vue_shared/components/modal.vue';
import { __, s__, sprintf } from '../../../locale';
import csrf from '../../../lib/utils/csrf';
......@@ -26,7 +26,7 @@
};
},
components: {
popupDialog,
modal,
},
computed: {
csrfToken() {
......@@ -89,7 +89,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
<template>
<div>
<popup-dialog
<modal
v-if="isOpen"
:title="s__('Profiles|Delete your account?')"
:text="text"
......@@ -134,7 +134,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
</form>
</template>
</popup-dialog>
</modal>
<button
type="button"
......
<script>
import { mapActions } from 'vuex';
import { __ } from '../../../locale';
import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
import modal from '../../../vue_shared/components/modal.vue';
export default {
props: {
......@@ -20,7 +20,7 @@
};
},
components: {
popupDialog,
modal,
},
methods: {
...mapActions([
......@@ -68,7 +68,7 @@
</script>
<template>
<popup-dialog
<modal
:title="modalTitle"
:primary-button-label="buttonLabel"
kind="success"
......@@ -94,5 +94,5 @@
</div>
</fieldset>
</form>
</popup-dialog>
</modal>
</template>
......@@ -2,12 +2,12 @@
import { mapGetters, mapState, mapActions } from 'vuex';
import tooltip from '../../vue_shared/directives/tooltip';
import icon from '../../vue_shared/components/icon.vue';
import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
import modal from '../../vue_shared/components/modal.vue';
import commitFilesList from './commit_sidebar/list.vue';
export default {
components: {
PopupDialog,
modal,
icon,
commitFilesList,
},
......@@ -16,7 +16,7 @@ export default {
},
data() {
return {
showNewBranchDialog: false,
showNewBranchModal: false,
submitCommitsLoading: false,
startNewMR: false,
commitMessage: '',
......@@ -58,7 +58,7 @@ export default {
start_branch: createNewBranch ? this.currentBranch : undefined,
};
this.showNewBranchDialog = false;
this.showNewBranchModal = false;
this.submitCommitsLoading = true;
this.commitChanges({ payload, newMr: this.startNewMR })
......@@ -76,7 +76,7 @@ export default {
this.checkCommitStatus()
.then((branchChanged) => {
if (branchChanged) {
this.showNewBranchDialog = true;
this.showNewBranchModal = true;
} else {
this.makeCommit();
}
......@@ -99,13 +99,13 @@ export default {
'is-collapsed': collapsed,
}"
>
<popup-dialog
v-if="showNewBranchDialog"
<modal
v-if="showNewBranchModal"
:primary-button-label="__('Create new branch')"
kind="primary"
:title="__('Branch has changed')"
:text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
@toggle="showNewBranchDialog = false"
@toggle="showNewBranchModal = false"
@submit="makeCommit(true)"
/>
<button
......
<script>
import { mapGetters, mapActions, mapState } from 'vuex';
import popupDialog from '../../vue_shared/components/popup_dialog.vue';
import modal from '../../vue_shared/components/modal.vue';
export default {
components: {
popupDialog,
modal,
},
computed: {
...mapState([
......@@ -43,7 +43,7 @@ export default {
{{buttonLabel}}
</span>
</button>
<popup-dialog
<modal
v-if="discardPopupOpen"
class="text-left"
:primary-button-label="__('Discard changes')"
......
<script>
export default {
name: 'popup-dialog',
name: 'modal',
props: {
title: {
......@@ -75,7 +75,7 @@ export default {
<template>
<div class="modal-open">
<div
class="modal popup-dialog"
class="modal show"
role="dialog"
tabindex="-1"
>
......
<script>
import PopupDialog from './popup_dialog.vue';
import modal from './modal.vue';
export default {
name: 'recaptcha-dialog',
......@@ -20,7 +20,7 @@ export default {
},
components: {
PopupDialog,
modal,
},
methods: {
......@@ -65,7 +65,7 @@ export default {
</script>
<template>
<popup-dialog
<modal
kind="warning"
class="recaptcha-dialog js-recaptcha-dialog"
:hide-footer="true"
......@@ -81,5 +81,5 @@ export default {
v-html="html"
></div>
</div>
</popup-dialog>
</modal>
</template>
......@@ -44,8 +44,15 @@ body.modal-open {
}
}
.modal.popup-dialog {
display: block;
.modal {
background-color: $black-transparent;
z-index: 2100;
@media (min-width: $screen-md-min) {
.modal-dialog {
margin: 30px auto;
}
}
}
.recaptcha-dialog .recaptcha-form {
......
.modal.popup-dialog {
display: block;
background-color: $black-transparent;
z-index: 2100;
@media (min-width: $screen-md-min) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
}
.project-refs-form,
.project-refs-target-form {
display: inline-block;
......
......@@ -25,7 +25,7 @@ describe 'Profile account page', :js do
fill_in 'password', with: '12345678'
page.within '.popup-dialog' do
page.within '.modal' do
click_button 'Delete account'
end
......@@ -38,7 +38,7 @@ describe 'Profile account page', :js do
fill_in 'password', with: 'testing123'
page.within '.popup-dialog' do
page.within '.modal' do
click_button 'Delete account'
end
......
......@@ -20,7 +20,7 @@ feature 'Multi-file editor new directory', :js do
click_link('New directory')
page.within('.popup-dialog') do
page.within('.modal') do
find('.form-control').set('foldername')
click_button('Create directory')
......
......@@ -20,7 +20,7 @@ feature 'Multi-file editor new file', :js do
click_link('New file')
page.within('.popup-dialog') do
page.within('.modal') do
find('.form-control').set('filename')
click_button('Create file')
......
......@@ -36,27 +36,27 @@ describe('ItemActionsComponent', () => {
describe('methods', () => {
describe('onLeaveGroup', () => {
it('should change `dialogStatus` prop to `true` which shows confirmation dialog', () => {
expect(vm.dialogStatus).toBeFalsy();
it('should change `modalStatus` prop to `true` which shows confirmation dialog', () => {
expect(vm.modalStatus).toBeFalsy();
vm.onLeaveGroup();
expect(vm.dialogStatus).toBeTruthy();
expect(vm.modalStatus).toBeTruthy();
});
});
describe('leaveGroup', () => {
it('should change `dialogStatus` prop to `false` and emit `leaveGroup` event with required params when called with `leaveConfirmed` as `true`', () => {
it('should change `modalStatus` prop to `false` and emit `leaveGroup` event with required params when called with `leaveConfirmed` as `true`', () => {
spyOn(eventHub, '$emit');
vm.dialogStatus = true;
vm.modalStatus = true;
vm.leaveGroup(true);
expect(vm.dialogStatus).toBeFalsy();
expect(vm.modalStatus).toBeFalsy();
expect(eventHub.$emit).toHaveBeenCalledWith('leaveGroup', vm.group, vm.parentGroup);
});
it('should change `dialogStatus` prop to `false` and should NOT emit `leaveGroup` event when called with `leaveConfirmed` as `false`', () => {
it('should change `modalStatus` prop to `false` and should NOT emit `leaveGroup` event when called with `leaveConfirmed` as `false`', () => {
spyOn(eventHub, '$emit');
vm.dialogStatus = true;
vm.modalStatus = true;
vm.leaveGroup(false);
expect(vm.dialogStatus).toBeFalsy();
expect(vm.modalStatus).toBeFalsy();
expect(eventHub.$emit).not.toHaveBeenCalled();
});
});
......@@ -99,9 +99,9 @@ describe('ItemActionsComponent', () => {
newVm.$destroy();
});
it('should show modal dialog when `dialogStatus` is set to `true`', () => {
vm.dialogStatus = true;
const modalDialogEl = vm.$el.querySelector('.modal.popup-dialog');
it('should show modal dialog when `modalStatus` is set to `true`', () => {
vm.modalStatus = true;
const modalDialogEl = vm.$el.querySelector('.modal');
expect(modalDialogEl).toBeDefined();
expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?');
expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave');
......
import Vue from 'vue';
import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
import modal from '~/vue_shared/components/modal.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('PopupDialog', () => {
describe('Modal', () => {
it('does not render a primary button if no primaryButtonLabel', () => {
const popupDialog = Vue.extend(PopupDialog);
const vm = mountComponent(popupDialog);
const modalComponent = Vue.extend(modal);
const vm = mountComponent(modalComponent);
expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
});
......
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