Skip to content

G
gitlab-ce
Commit 0cce1aa5 authored by Diana Zubova's avatar Diana Zubova Committed by Simon Knox
Browse files
Options

Refactor invite_modal_base 

Use actions intead of modal-footer
parent c5d2cca7
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 83 deletions
app/assets/javascripts/invite_members/components/invite_modal_base.vue
View file @ 0cce1aa5
......@@ -7,7 +7,6 @@ import {
GlDatepicker,
GlLink,
GlSprintf,
GlButton,
GlFormInput,
} from '@gitlab/ui';
import { sprintf } from '~/locale';
......@@ -41,7 +40,6 @@ export default {
GlDropdown,
GlDropdownItem,
GlSprintf,
GlButton,
GlFormInput,
ContentTransition,
},
......@@ -104,6 +102,11 @@ export default {
required: false,
default: INVITE_BUTTON_TEXT,
},
cancelButtonText: {
type: String,
required: false,
default: CANCEL_BUTTON_TEXT,
},
currentSlot: {
type: String,
required: false,
......@@ -114,6 +117,11 @@ export default {
required: false,
default: () => [],
},
preventCancelDefault: {
type: Boolean,
required: false,
default: false,
},
},
data() {
// Be sure to check out reset!
......@@ -141,6 +149,22 @@ export default {
contentSlots() {
return [...DEFAULT_SLOTS, ...(this.extraSlots || [])];
},
actionPrimary() {
return {
text: this.submitButtonText,
attributes: {
variant: 'confirm',
disabled: this.submitDisabled,
loading: this.isLoading,
'data-qa-selector': 'invite_button',
},
};
},
actionCancel() {
return {
text: this.cancelButtonText,
};
},
},
watch: {
selectedAccessLevel: {
......@@ -151,7 +175,7 @@ export default {
},
},
methods: {
reset() {
onReset() {
// This component isn't necessarily disposed,
// so we might need to reset it's state.
this.selectedAccessLevel = this.defaultAccessLevel;
......@@ -159,14 +183,23 @@ export default {
this.$emit('reset');
},
closeModal() {
this.reset();
this.$refs.modal.hide();
onCloseModal(e) {
if (this.preventCancelDefault) {
e.preventDefault();
} else {
this.onReset();
this.$refs.modal.hide();
}
this.$emit('cancel');
},
changeSelectedItem(item) {
this.selectedAccessLevel = item;
},
submit() {
onSubmit(e) {
// We never want to hide when submitting
e.preventDefault();
this.$emit('submit', {
accessLevel: this.selectedAccessLevel,
expiresAt: this.selectedDate,
......@@ -192,9 +225,11 @@ export default {
size="sm"
:title="modalTitle"
:header-close-label="$options.HEADER_CLOSE_LABEL"
@hidden="reset"
@close="reset"
@hide="reset"
:action-primary="actionPrimary"
:action-cancel="actionCancel"
@primary="onSubmit"
@cancel="onCloseModal"
@hidden="onReset"
>
<content-transition
class="gl-display-grid"
......@@ -282,22 +317,5 @@ export default {
<slot :name="key"></slot>
</template>
</content-transition>
<template #modal-footer>
<slot name="cancel-button">
<gl-button data-testid="cancel-button" @click="closeModal">
{{ $options.CANCEL_BUTTON_TEXT }}
</gl-button>
</slot>
<gl-button
:disabled="submitDisabled"
:loading="isLoading"
variant="confirm"
data-qa-selector="invite_button"
data-testid="invite-button"
@click="submit"
>
{{ submitButtonText }}
</gl-button>
</template>
</gl-modal>
</template>
ee/app/assets/javascripts/invite_members/components/invite_modal_base.vue
View file @ 0cce1aa5
<script>
import { GlLink, GlButton } from '@gitlab/ui';
import { GlLink } from '@gitlab/ui';
import { partition, isString } from 'lodash';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
......@@ -30,7 +30,6 @@ const EXTRA_SLOTS = [
export default {
components: {
GlLink,
GlButton,
InviteModalBase,
},
mixins: [glFeatureFlagsMixin()],
......@@ -59,6 +58,11 @@ export default {
required: false,
default: null,
},
submitDisabled: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -80,6 +84,14 @@ export default {
showOverageModal() {
return this.hasOverage && this.enabledOverageCheck;
},
submitDisabledEE() {
if (this.showOverageModal) {
return false;
}
// Use CE default
return this.submitDisabled;
},
enabledOverageCheck() {
return this.glFeatures.overageMembersModal;
},
......@@ -95,13 +107,16 @@ export default {
modalTitleOverride() {
return this.showOverageModal ? OVERAGE_MODAL_TITLE : this.modalTitle;
},
submitButtonText() {
overageModalButtons() {
if (this.showOverageModal) {
return OVERAGE_MODAL_CONTINUE_BUTTON;
return {
submit: OVERAGE_MODAL_CONTINUE_BUTTON,
cancel: OVERAGE_MODAL_BACK_BUTTON,
};
}
// Use CE default
return undefined;
return {};
},
},
methods: {
......@@ -153,9 +168,6 @@ export default {
this.$emit('submit', { accessLevel: args.accessLevel, expiresAt: args.expiresAt });
}
},
handleBack() {
this.hasOverage = false;
},
passthroughSlotNames() {
return Object.keys(this.$scopedSlots || {});
},
......@@ -167,6 +179,11 @@ export default {
return [usersToInviteByEmail.map(({ name }) => name), usersToAddById.map(({ id }) => id)];
},
onCancel() {
if (this.showOverageModal) {
this.hasOverage = false;
}
},
},
i18n: {
OVERAGE_MODAL_TITLE,
......@@ -184,12 +201,16 @@ export default {
<invite-modal-base
v-bind="$attrs"
:name="name"
:submit-button-text="submitButtonText"
:submit-button-text="overageModalButtons.submit"
:cancel-button-text="overageModalButtons.cancel"
:modal-title="modalTitleOverride"
:current-slot="currentSlot"
:extra-slots="$options.EXTRA_SLOTS"
:submit-disabled="submitDisabledEE"
:prevent-cancel-default="showOverageModal"
@reset="onReset"
@submit="onSubmit"
@cancel="onCancel"
v-on="getPassthroughListeners()"
>
<template #[$options.OVERAGE_CONTENT_SLOT]>
......@@ -198,11 +219,6 @@ export default {
$options.i18n.OVERAGE_MODAL_LINK_TEXT
}}</gl-link>
</template>
<template v-if="enabledOverageCheck && hasOverage" #cancel-button>
<gl-button data-testid="overage-back-button" @click="handleBack">
{{ $options.i18n.OVERAGE_MODAL_BACK_BUTTON }}
</gl-button>
</template>
<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
<slot :name="slot" v-bind="scope"></slot>
</template>
......
ee/spec/frontend/invite_members/components/invite_modal_base_spec.js
View file @ 0cce1aa5
......@@ -66,14 +66,15 @@ describe('EEInviteModalBase', () => {
});
const findCEBase = () => wrapper.findComponent(CEInviteModalBase);
const findInviteButton = () => wrapper.findByTestId('invite-button');
const findBackButton = () => wrapper.findByTestId('overage-back-button');
const findModal = () => wrapper.findComponent(GlModal);
const findInitialModalContent = () => wrapper.findByTestId('invite-modal-initial-content');
const findOverageModalContent = () => wrapper.findByTestId('invite-modal-overage-content');
const findModalTitle = () => wrapper.findComponent(GlModal).props('title');
const findModalTitle = () => findModal().props('title');
const clickInviteButton = () => findInviteButton().vm.$emit('click');
const clickBackButton = () => findBackButton().vm.$emit('click');
const emitEventFromModal = (eventName) => () =>
findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
const clickInviteButton = emitEventFromModal('primary');
const clickBackButton = emitEventFromModal('cancel');
describe('default', () => {
beforeEach(() => {
......@@ -110,10 +111,6 @@ describe('EEInviteModalBase', () => {
expect(findModalTitle()).toBe(propsData.modalTitle);
});
it('does not show back button', () => {
expect(findBackButton().exists()).toBe(false);
});
it('shows initial modal content', () => {
expect(findInitialModalContent().isVisible()).toBe(true);
});
......@@ -153,16 +150,26 @@ describe('EEInviteModalBase', () => {
});
it('renders the Back button text correctly', () => {
expect(findBackButton().text()).toBe(OVERAGE_MODAL_BACK_BUTTON);
expect(findModal().props('actionPrimary')).toMatchObject({
text: OVERAGE_MODAL_CONTINUE_BUTTON,
attributes: {
variant: 'confirm',
disabled: false,
loading: false,
'data-qa-selector': 'invite_button',
},
});
});
it('renders the Continue button text correctly', () => {
expect(findInviteButton().text()).toBe(OVERAGE_MODAL_CONTINUE_BUTTON);
expect(findModal().props('actionCancel')).toMatchObject({
text: OVERAGE_MODAL_BACK_BUTTON,
});
});
it('shows the info text', () => {
expect(wrapper.findComponent(GlModal).text()).toContain(
'Your subscription includes 1 seat. If you continue, the _name_ group will have 2 seats in use and will be billed for the overage.',
expect(findModal().text()).toContain(
'If you continue, the _name_ group will have 2 seats in use and will be billed for the overage.',
);
});
......@@ -174,7 +181,7 @@ describe('EEInviteModalBase', () => {
beforeEach(() => clickBackButton());
it('shows the initial modal', () => {
expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
expect(findModal().props('title')).toBe(propsData.modalTitle);
expect(findInitialModalContent().isVisible()).toBe(true);
});
......
spec/frontend/invite_members/components/invite_groups_modal_spec.js
View file @ 0cce1aa5
......@@ -42,18 +42,19 @@ describe('InviteGroupsModal', () => {
wrapper = null;
});
const findModal = () => wrapper.findComponent(GlModal);
const findGroupSelect = () => wrapper.findComponent(GroupSelect);
const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
const findCancelButton = () => wrapper.findByTestId('cancel-button');
const findInviteButton = () => wrapper.findByTestId('invite-button');
const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
const membersFormGroupInvalidFeedback = () =>
findMembersFormGroup().attributes('invalid-feedback');
const clickInviteButton = () => findInviteButton().vm.$emit('click');
const clickCancelButton = () => findCancelButton().vm.$emit('click');
const triggerGroupSelect = (val) => findGroupSelect().vm.$emit('input', val);
const findBase = () => wrapper.findComponent(InviteModalBase);
const hideModal = () => wrapper.findComponent(GlModal).vm.$emit('hide');
const triggerGroupSelect = (val) => findGroupSelect().vm.$emit('input', val);
const emitEventFromModal = (eventName) => () =>
findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
const hideModal = emitEventFromModal('hidden');
const clickInviteButton = emitEventFromModal('primary');
const clickCancelButton = emitEventFromModal('cancel');
describe('displaying the correct introText and form group description', () => {
describe('when inviting to a project', () => {
......
spec/frontend/invite_members/components/invite_members_modal_spec.js
View file @ 0cce1aa5
......@@ -85,12 +85,13 @@ describe('InviteMembersModal', () => {
mock.restore();
});
const findModal = () => wrapper.findComponent(GlModal);
const findBase = () => wrapper.findComponent(InviteModalBase);
const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
const findCancelButton = () => wrapper.findByTestId('cancel-button');
const findInviteButton = () => wrapper.findByTestId('invite-button');
const clickInviteButton = () => findInviteButton().vm.$emit('click');
const clickCancelButton = () => findCancelButton().vm.$emit('click');
const emitEventFromModal = (eventName) => () =>
findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
const clickInviteButton = emitEventFromModal('primary');
const clickCancelButton = emitEventFromModal('cancel');
const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
const membersFormGroupInvalidFeedback = () =>
findMembersFormGroup().attributes('invalid-feedback');
......@@ -276,7 +277,7 @@ describe('InviteMembersModal', () => {
});
it('renders the modal with the correct title', () => {
expect(wrapper.findComponent(GlModal).props('title')).toBe(MEMBERS_MODAL_CELEBRATE_TITLE);
expect(findModal().props('title')).toBe(MEMBERS_MODAL_CELEBRATE_TITLE);
});
it('includes the correct celebration text and emoji', () => {
......@@ -337,7 +338,7 @@ describe('InviteMembersModal', () => {
});
it('sets isLoading on the Invite button when it is clicked', () => {
expect(findInviteButton().props('loading')).toBe(true);
expect(findModal().props('actionPrimary').attributes.loading).toBe(true);
});
it('calls Api addGroupMembersByUserId with the correct params', () => {
......@@ -380,7 +381,7 @@ describe('InviteMembersModal', () => {
expect(membersFormGroupInvalidFeedback()).toBe('Member already exists');
expect(findMembersSelect().props('validationState')).toBe(false);
expect(findInviteButton().props('loading')).toBe(false);
expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
});
describe('clearing the invalid state and message', () => {
......@@ -414,7 +415,7 @@ describe('InviteMembersModal', () => {
});
it('clears the error when the modal is hidden', async () => {
wrapper.findComponent(GlModal).vm.$emit('hide');
findModal().vm.$emit('hidden');
await nextTick();
......@@ -432,7 +433,7 @@ describe('InviteMembersModal', () => {
expect(membersFormGroupInvalidFeedback()).toBe('Member already exists');
expect(findMembersSelect().props('validationState')).toBe(false);
expect(findInviteButton().props('loading')).toBe(false);
expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
findMembersSelect().vm.$emit('clear');
......@@ -440,7 +441,7 @@ describe('InviteMembersModal', () => {
expect(membersFormGroupInvalidFeedback()).toBe('');
expect(findMembersSelect().props('validationState')).toBe(null);
expect(findInviteButton().props('loading')).toBe(false);
expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
});
it('displays the generic error for http server error', async () => {
......@@ -542,7 +543,7 @@ describe('InviteMembersModal', () => {
expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
expect(findMembersSelect().props('validationState')).toBe(false);
expect(findInviteButton().props('loading')).toBe(false);
expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
});
it('displays the restricted email error when restricted email is invited', async () => {
......@@ -554,7 +555,7 @@ describe('InviteMembersModal', () => {
expect(membersFormGroupInvalidFeedback()).toContain(expectedEmailRestrictedError);
expect(findMembersSelect().props('validationState')).toBe(false);
expect(findInviteButton().props('loading')).toBe(false);
expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
});
it('displays the successful toast message when email has already been invited', async () => {
......
spec/frontend/invite_members/components/invite_modal_base_spec.js
View file @ 0cce1aa5
......@@ -49,8 +49,6 @@ describe('InviteModalBase', () => {
const findDatepicker = () => wrapper.findComponent(GlDatepicker);
const findLink = () => wrapper.findComponent(GlLink);
const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
const findCancelButton = () => wrapper.findByTestId('cancel-button');
const findInviteButton = () => wrapper.findByTestId('invite-button');
const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
describe('rendering the modal', () => {
......@@ -67,15 +65,21 @@ describe('InviteModalBase', () => {
});
it('renders the Cancel button text correctly', () => {
expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
});
it('renders the Invite button text correctly', () => {
expect(findInviteButton().text()).toBe(INVITE_BUTTON_TEXT);
expect(wrapper.findComponent(GlModal).props('actionCancel')).toMatchObject({
text: CANCEL_BUTTON_TEXT,
});
});
it('renders the Invite button modal without isLoading', () => {
expect(findInviteButton().props('loading')).toBe(false);
it('renders the Invite button correctly', () => {
expect(wrapper.findComponent(GlModal).props('actionPrimary')).toMatchObject({
text: INVITE_BUTTON_TEXT,
attributes: {
variant: 'confirm',
disabled: false,
loading: false,
'data-qa-selector': 'invite_button',
},
});
});
describe('rendering the access levels dropdown', () => {
......@@ -114,7 +118,7 @@ describe('InviteModalBase', () => {
isLoading: true,
});
expect(findInviteButton().props('loading')).toBe(true);
expect(wrapper.findComponent(GlModal).props('actionPrimary').attributes.loading).toBe(true);
});
it('with invalidFeedbackMessage, set members form group validation state', () => {
......
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