Skip to content

G
gitlab-ce
Commit 6fd529f6 authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

Merge branch '354003-resolve-ce-ee-duplication-in-invite-modal-base' into 'master' 

Part 2 - Resolve EE/CE duplication in invite_modal_base

See merge request gitlab-org/gitlab!82138
parents 47dd2466 a628a289
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 423 deletions
app/assets/javascripts/invite_members/components/invite_modal_base.vue
View file @ 6fd529f6
......@@ -11,6 +11,7 @@ import {
GlFormInput,
} from '@gitlab/ui';
import { sprintf } from '~/locale';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
import {
ACCESS_LEVEL,
ACCESS_EXPIRE_DATE,
......@@ -20,6 +21,17 @@ import {
HEADER_CLOSE_LABEL,
} from '../constants';
const DEFAULT_SLOT = 'default';
const DEFAULT_SLOTS = [
{
key: DEFAULT_SLOT,
attributes: {
class: 'invite-modal-content',
'data-testid': 'invite-modal-initial-content',
},
},
];
export default {
components: {
GlFormGroup,
......@@ -31,6 +43,7 @@ export default {
GlSprintf,
GlButton,
GlFormInput,
ContentTransition,
},
inheritAttrs: false,
props: {
......@@ -86,6 +99,21 @@ export default {
required: false,
default: '',
},
submitButtonText: {
type: String,
required: false,
default: INVITE_BUTTON_TEXT,
},
currentSlot: {
type: String,
required: false,
default: DEFAULT_SLOT,
},
extraSlots: {
type: Array,
required: false,
default: () => [],
},
},
data() {
// Be sure to check out reset!
......@@ -110,6 +138,9 @@ export default {
(key) => this.accessLevels[key] === Number(this.selectedAccessLevel),
);
},
contentSlots() {
return [...DEFAULT_SLOTS, ...(this.extraSlots || [])];
},
},
watch: {
selectedAccessLevel: {
......@@ -148,6 +179,7 @@ export default {
READ_MORE_TEXT,
INVITE_BUTTON_TEXT,
CANCEL_BUTTON_TEXT,
DEFAULT_SLOT,
};
</script>
......@@ -164,79 +196,96 @@ export default {
@close="reset"
@hide="reset"
>
<div class="gl-display-flex" data-testid="modal-base-intro-text">
<slot name="intro-text-before"></slot>
<p>
<gl-sprintf :message="introText">
<template #strong="{ content }">
<strong>{{ content }}</strong>
</template>
</gl-sprintf>
</p>
<slot name="intro-text-after"></slot>
</div>
<gl-form-group
:invalid-feedback="invalidFeedbackMessage"
:state="validationState"
:description="formGroupDescription"
data-testid="members-form-group"
<content-transition
class="gl-display-grid"
transition-name="invite-modal-transition"
:slots="contentSlots"
:current-slot="currentSlot"
>
<label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
<slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
</gl-form-group>
<template #[$options.DEFAULT_SLOT]>
<div class="gl-display-flex" data-testid="modal-base-intro-text">
<slot name="intro-text-before"></slot>
<p>
<gl-sprintf :message="introText">
<template #strong="{ content }">
<strong>{{ content }}</strong>
</template>
</gl-sprintf>
</p>
<slot name="intro-text-after"></slot>
</div>
<label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
<div class="gl-mt-2 gl-w-half gl-xs-w-full">
<gl-dropdown
class="gl-shadow-none gl-w-full"
data-qa-selector="access_level_dropdown"
v-bind="$attrs"
:text="selectedRoleName"
>
<template v-for="(key, item) in accessLevels">
<gl-dropdown-item
:key="key"
active-class="is-active"
is-check-item
:is-checked="key === selectedAccessLevel"
@click="changeSelectedItem(key)"
>
<div>{{ item }}</div>
</gl-dropdown-item>
</template>
</gl-dropdown>
</div>
<gl-form-group
:invalid-feedback="invalidFeedbackMessage"
:state="validationState"
:description="formGroupDescription"
data-testid="members-form-group"
>
<label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
<slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
</gl-form-group>
<div class="gl-mt-2 gl-w-half gl-xs-w-full">
<gl-sprintf :message="$options.READ_MORE_TEXT">
<template #link="{ content }">
<gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
<label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
<div class="gl-mt-2 gl-w-half gl-xs-w-full">
<gl-dropdown
class="gl-shadow-none gl-w-full"
data-qa-selector="access_level_dropdown"
v-bind="$attrs"
:text="selectedRoleName"
>
<template v-for="(key, item) in accessLevels">
<gl-dropdown-item
:key="key"
active-class="is-active"
is-check-item
:is-checked="key === selectedAccessLevel"
@click="changeSelectedItem(key)"
>
<div>{{ item }}</div>
</gl-dropdown-item>
</template>
</gl-dropdown>
</div>
<label class="gl-mt-5 gl-display-block" for="expires_at">{{
$options.ACCESS_EXPIRE_DATE
}}</label>
<div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
<gl-datepicker
v-model="selectedDate"
class="gl-display-inline!"
:min-date="minDate"
:target="null"
>
<template #default="{ formattedDate }">
<gl-form-input class="gl-w-full" :value="formattedDate" :placeholder="__(`YYYY-MM-DD`)" />
</template>
</gl-datepicker>
</div>
<slot name="form-after"></slot>
<div class="gl-mt-2 gl-w-half gl-xs-w-full">
<gl-sprintf :message="$options.READ_MORE_TEXT">
<template #link="{ content }">
<gl-link :href="helpLink" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
<label class="gl-mt-5 gl-display-block" for="expires_at">{{
$options.ACCESS_EXPIRE_DATE
}}</label>
<div class="gl-mt-2 gl-w-half gl-xs-w-full gl-display-inline-block">
<gl-datepicker
v-model="selectedDate"
class="gl-display-inline!"
:min-date="minDate"
:target="null"
>
<template #default="{ formattedDate }">
<gl-form-input
class="gl-w-full"
:value="formattedDate"
:placeholder="__(`YYYY-MM-DD`)"
/>
</template>
</gl-datepicker>
</div>
<slot name="form-after"></slot>
</template>
<template v-for="{ key } in extraSlots" #[key]>
<slot :name="key"></slot>
</template>
</content-transition>
<template #modal-footer>
<gl-button data-testid="cancel-button" @click="closeModal">
{{ $options.CANCEL_BUTTON_TEXT }}
</gl-button>
<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"
......@@ -245,7 +294,7 @@ export default {
data-testid="invite-button"
@click="submit"
>
{{ $options.INVITE_BUTTON_TEXT }}
{{ submitButtonText }}
</gl-button>
</template>
</gl-modal>
......
app/assets/javascripts/vue_shared/components/content_transition.vue 0 → 100644
View file @ 6fd529f6
<script>
export default {
props: {
currentSlot: {
type: String,
required: true,
},
slots: {
type: Array,
required: true,
},
transitionName: {
type: String,
required: true,
},
},
methods: {
shouldShow(key) {
return this.currentSlot === key;
},
},
};
</script>
<template>
<div>
<transition v-for="{ key, attributes } in slots" :key="key" :name="transitionName">
<div v-show="shouldShow(key)" v-bind="attributes">
<slot :name="key"></slot>
</div>
</transition>
</div>
</template>
ee/spec/frontend/invite_members/components/invite_modal_base_spec.js
View file @ 6fd529f6
import {
GlDropdown,
GlDropdownItem,
GlDatepicker,
GlFormGroup,
GlSprintf,
GlLink,
GlModal,
} from '@gitlab/ui';
import { GlModal, GlSprintf } from '@gitlab/ui';
import { nextTick } from 'vue';
import { stubComponent } from 'helpers/stub_component';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import InviteModalBase from 'ee_else_ce/invite_members/components/invite_modal_base.vue';
import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
import CEInviteModalBase from '~/invite_members/components/invite_modal_base.vue';
import EEInviteModalBase from 'ee/invite_members/components/invite_modal_base.vue';
import {
OVERAGE_MODAL_TITLE,
OVERAGE_MODAL_CONTINUE_BUTTON,
......@@ -18,11 +12,12 @@ import {
} from 'ee/invite_members/constants';
import { propsData } from 'jest/invite_members/mock_data/modal_base';
describe('InviteModalBase', () => {
describe('EEInviteModalBase', () => {
let wrapper;
let listenerSpy;
const createComponent = (props = {}, glFeatures = {}) => {
wrapper = shallowMountExtended(InviteModalBase, {
wrapper = shallowMountExtended(EEInviteModalBase, {
propsData: {
...propsData,
...props,
......@@ -31,125 +26,103 @@ describe('InviteModalBase', () => {
...glFeatures,
},
stubs: {
GlSprintf,
InviteModalBase: CEInviteModalBase,
ContentTransition,
GlModal: stubComponent(GlModal, {
template:
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
}),
GlDropdown: true,
GlDropdownItem: true,
GlSprintf,
GlFormGroup: stubComponent(GlFormGroup, {
props: ['state', 'invalidFeedback', 'description'],
}),
},
listeners: {
submit: (...args) => listenerSpy('submit', ...args),
reset: (...args) => listenerSpy('reset', ...args),
foo: (...args) => listenerSpy('foo', ...args),
},
});
};
beforeEach(() => {
listenerSpy = jest.fn();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findDropdown = () => wrapper.findComponent(GlDropdown);
const findDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
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 findCEBase = () => wrapper.findComponent(CEInviteModalBase);
const findInviteButton = () => wrapper.findByTestId('invite-button');
const findBackButton = () => wrapper.findByTestId('overage-back-button');
const findOverageInviteButton = () => wrapper.findByTestId('invite-with-overage-button');
const findInitialModalContent = () => wrapper.findByTestId('invite-modal-initial-content');
const findOverageModalContent = () => wrapper.findByTestId('invite-modal-overage-content');
const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
const findModalTitle = () => wrapper.findComponent(GlModal).props('title');
const clickInviteButton = () => findInviteButton().vm.$emit('click');
const clickBackButton = () => findBackButton().vm.$emit('click');
describe('rendering the modal', () => {
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('renders the modal with the correct title', () => {
expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
it('passes attrs to CE base', () => {
expect(findCEBase().props()).toMatchObject({
...propsData,
currentSlot: 'default',
extraSlots: EEInviteModalBase.EXTRA_SLOTS,
});
});
it('displays the introText', () => {
expect(findIntroText()).toBe(propsData.labelIntroText);
it("doesn't show the overage content", () => {
expect(findOverageModalContent().isVisible()).toBe(false);
});
it('renders the Cancel button text correctly', () => {
expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
});
it('when reset is emitted on base, emits reset', () => {
expect(wrapper.emitted('reset')).toBeUndefined();
it('renders the Invite button text correctly', () => {
expect(findInviteButton().text()).toBe(INVITE_BUTTON_TEXT);
});
findCEBase().vm.$emit('reset');
it('renders the Invite button modal without isLoading', () => {
expect(findInviteButton().props('loading')).toBe(false);
expect(wrapper.emitted('reset')).toHaveLength(1);
});
describe('rendering the access levels dropdown', () => {
it('sets the default dropdown text to the default access level name', () => {
expect(findDropdown().attributes('text')).toBe('Guest');
describe('(integration) when invite is clicked', () => {
beforeEach(async () => {
clickInviteButton();
await nextTick();
});
it('renders dropdown items for each accessLevel', () => {
expect(findDropdownItems()).toHaveLength(5);
it('does not change title', () => {
expect(findModalTitle()).toBe(propsData.modalTitle);
});
});
it('renders the correct link', () => {
expect(findLink().attributes('href')).toBe(propsData.helpLink);
});
it('renders the datepicker', () => {
expect(findDatepicker().exists()).toBe(true);
});
it("doesn't show the overage content", () => {
expect(findOverageModalContent().isVisible()).toBe(false);
});
it('renders the members form group', () => {
expect(findMembersFormGroup().props()).toEqual({
description: propsData.formGroupDescription,
invalidFeedback: '',
state: null,
it('does not show back button', () => {
expect(findBackButton().exists()).toBe(false);
});
});
});
it('with isLoading, shows loading for invite button', () => {
createComponent({
isLoading: true,
});
expect(findInviteButton().props('loading')).toBe(true);
});
it('with invalidFeedbackMessage, set members form group validation state', () => {
createComponent({
invalidFeedbackMessage: 'invalid message!',
});
it('shows initial modal content', () => {
expect(findInitialModalContent().isVisible()).toBe(true);
});
expect(findMembersFormGroup().props()).toEqual({
description: propsData.formGroupDescription,
invalidFeedback: 'invalid message!',
state: false,
it('emits submit', () => {
expect(wrapper.emitted('submit')).toEqual([[{ accessLevel: 10, expiresAt: undefined }]]);
});
});
});
describe('displays overage modal', () => {
beforeEach(() => {
describe('with overageMembersModal feature flag, and invite is clicked ', () => {
beforeEach(async () => {
createComponent({}, { glFeatures: { overageMembersModal: true } });
clickInviteButton();
await nextTick();
});
it('does not emit submit', () => {
expect(wrapper.emitted().submit).toBeUndefined();
});
it('renders the modal with the correct title', () => {
expect(wrapper.findComponent(GlModal).props('title')).toBe(OVERAGE_MODAL_TITLE);
expect(findModalTitle()).toBe(OVERAGE_MODAL_TITLE);
});
it('renders the Back button text correctly', () => {
......@@ -157,7 +130,7 @@ describe('InviteModalBase', () => {
});
it('renders the Continue button text correctly', () => {
expect(findOverageInviteButton().text()).toBe(OVERAGE_MODAL_CONTINUE_BUTTON);
expect(findInviteButton().text()).toBe(OVERAGE_MODAL_CONTINUE_BUTTON);
});
it('shows the info text', () => {
......@@ -174,7 +147,7 @@ describe('InviteModalBase', () => {
beforeEach(() => clickBackButton());
it('shows the initial modal', () => {
expect(wrapper.findComponent(GlModal).props('title')).toBe('_modal_title_');
expect(wrapper.findComponent(GlModal).props('title')).toBe(propsData.modalTitle);
expect(findInitialModalContent().isVisible()).toBe(true);
});
......
spec/frontend/invite_members/components/invite_groups_modal_spec.js
View file @ 6fd529f6
......@@ -4,6 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import Api from '~/api';
import InviteGroupsModal from '~/invite_members/components/invite_groups_modal.vue';
import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
import GroupSelect from '~/invite_members/components/group_select.vue';
import { stubComponent } from 'helpers/stub_component';
import { propsData, sharedGroup } from '../mock_data/group_modal';
......@@ -19,6 +20,7 @@ describe('InviteGroupsModal', () => {
},
stubs: {
InviteModalBase,
ContentTransition,
GlSprintf,
GlModal: stubComponent(GlModal, {
template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
......
spec/frontend/invite_members/components/invite_members_modal_spec.js
View file @ 6fd529f6
......@@ -19,6 +19,7 @@ import {
LEARN_GITLAB,
} from '~/invite_members/constants';
import eventHub from '~/invite_members/event_hub';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
import axios from '~/lib/utils/axios_utils';
import httpStatus from '~/lib/utils/http_status';
import { getParameterValues } from '~/lib/utils/url_utility';
......@@ -55,6 +56,7 @@ describe('InviteMembersModal', () => {
},
stubs: {
InviteModalBase,
ContentTransition,
GlSprintf,
GlModal: stubComponent(GlModal, {
template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
......
spec/frontend/invite_members/components/invite_modal_base_spec.js
View file @ 6fd529f6
......@@ -10,6 +10,7 @@ import {
import { stubComponent } from 'helpers/stub_component';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
import { CANCEL_BUTTON_TEXT, INVITE_BUTTON_TEXT } from '~/invite_members/constants';
import { propsData } from '../mock_data/modal_base';
......@@ -23,6 +24,7 @@ describe('InviteModalBase', () => {
...props,
},
stubs: {
ContentTransition,
GlModal: stubComponent(GlModal, {
template:
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
......
spec/frontend/vue_shared/components/__snapshots__/content_transition_spec.js.snap 0 → 100644
View file @ 6fd529f6
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`~/vue_shared/components/content_transition.vue default shows all transitions and only default is visible 1`] = `
<div>
<transition-stub
name="test_transition_name"
>
<div
data-testval="default"
>
<p>
Default
</p>
</div>
</transition-stub>
<transition-stub
name="test_transition_name"
>
<div
data-testval="foo"
style="display: none;"
>
<p>
Foo
</p>
</div>
</transition-stub>
<transition-stub
name="test_transition_name"
>
<div
data-testval="bar"
style="display: none;"
>
<p>
Bar
</p>
</div>
</transition-stub>
</div>
`;
spec/frontend/vue_shared/components/content_transition_spec.js 0 → 100644
View file @ 6fd529f6
import { groupBy, mapValues } from 'lodash';
import { shallowMount } from '@vue/test-utils';
import ContentTransition from '~/vue_shared/components/content_transition.vue';
const TEST_CURRENT_SLOT = 'default';
const TEST_TRANSITION_NAME = 'test_transition_name';
const TEST_SLOTS = [
{ key: 'default', attributes: { 'data-testval': 'default' } },
{ key: 'foo', attributes: { 'data-testval': 'foo' } },
{ key: 'bar', attributes: { 'data-testval': 'bar' } },
];
describe('~/vue_shared/components/content_transition.vue', () => {
let wrapper;
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const createComponent = (props = {}, slots = {}) => {
wrapper = shallowMount(ContentTransition, {
propsData: {
transitionName: TEST_TRANSITION_NAME,
currentSlot: TEST_CURRENT_SLOT,
slots: TEST_SLOTS,
...props,
},
slots: {
default: '<p>Default</p>',
foo: '<p>Foo</p>',
bar: '<p>Bar</p>',
dne: '<p>DOES NOT EXIST</p>',
...slots,
},
});
};
const findTransitionsData = () =>
wrapper.findAll('transition-stub').wrappers.map((transition) => {
const child = transition.find('[data-testval]');
const { style, ...attributes } = child.attributes();
return {
transitionName: transition.attributes('name'),
isVisible: child.isVisible(),
attributes,
text: transition.text(),
};
});
const findVisibleData = () => {
const group = groupBy(findTransitionsData(), (x) => x.attributes['data-testval']);
return mapValues(group, (x) => x[0].isVisible);
};
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('shows all transitions and only default is visible', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('render transitions for each slot', () => {
expect(findTransitionsData()).toEqual([
{
attributes: {
'data-testval': 'default',
},
isVisible: true,
text: 'Default',
transitionName: 'test_transition_name',
},
{
attributes: {
'data-testval': 'foo',
},
isVisible: false,
text: 'Foo',
transitionName: 'test_transition_name',
},
{
attributes: {
'data-testval': 'bar',
},
isVisible: false,
text: 'Bar',
transitionName: 'test_transition_name',
},
]);
});
});
describe('with currentSlot=foo', () => {
beforeEach(() => {
createComponent({ currentSlot: 'foo' });
});
it('should only show the foo slot', () => {
expect(findVisibleData()).toEqual({
default: false,
foo: true,
bar: 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