Коммит 816c15cb создал по автору Doug Stull's avatar Doug Stull Зафиксировано автором Frédéric Caplette
Просмотр файлов

Fix invite a group on project wording and link

- Copy was misleading
- Padding between elements was off

Changelog: fixed
владелец fa73d67b
<script>
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { GROUP_MODAL_ALERT_BODY } from '../constants';
const SHARE_GROUP_LINK =
'https://docs.gitlab.com/ee/user/group/manage.html#share-a-group-with-another-group';
export default {
SHARE_GROUP_LINK,
name: 'InviteGroupNotification',
components: { GlAlert, GlSprintf, GlLink },
inject: ['freeUsersLimit'],
......@@ -15,18 +10,23 @@ export default {
type: String,
required: true,
},
},
i18n: {
body: GROUP_MODAL_ALERT_BODY,
notificationText: {
type: String,
required: true,
},
notificationLink: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-alert variant="warning" :dismissible="false">
<gl-sprintf :message="$options.i18n.body">
<gl-sprintf :message="notificationText">
<template #link="{ content }">
<gl-link :href="$options.SHARE_GROUP_LINK" target="_blank" class="gl-label-link">{{
<gl-link :href="notificationLink" target="_blank" class="gl-label-link">{{
content
}}</gl-link>
</template>
......
......@@ -190,7 +190,13 @@ export default {
@submit="sendInvite"
>
<template #alert>
<invite-group-notification v-if="freeUserCapEnabled" :name="name" />
<invite-group-notification
v-if="freeUserCapEnabled"
:name="name"
:notification-text="$options.labels[inviteTo].notificationText"
:notification-link="$options.labels[inviteTo].notificationLink"
class="gl-mb-5"
/>
</template>
<template #select>
......
import { s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper';
export const SEARCH_DELAY = 200;
export const VALID_TOKEN_BACKGROUND = 'gl-bg-green-100';
......@@ -59,9 +60,18 @@ export const GROUP_MODAL_TO_PROJECT_DEFAULT_INTRO_TEXT = s__(
"InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} project.",
);
export const GROUP_MODAL_ALERT_BODY = s__(
'InviteMembersModal| Inviting a group %{linkStart}adds its members to your group%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit.',
export const GROUP_MODAL_TO_GROUP_ALERT_BODY = s__(
'InviteMembersModal|Inviting a group %{linkStart}adds its members to your group%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit.',
);
export const GROUP_MODAL_TO_GROUP_ALERT_LINK = helpPagePath('user/group/manage', {
anchor: 'share-a-group-with-another-group',
});
export const GROUP_MODAL_TO_PROJECT_ALERT_BODY = s__(
'InviteMembersModal|Inviting a group %{linkStart}adds its members to your project%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit.',
);
export const GROUP_MODAL_TO_PROJECT_ALERT_LINK = helpPagePath('user/project/members/index', {
anchor: 'add-groups-to-a-project',
});
export const GROUP_SEARCH_FIELD = s__('InviteMembersModal|Select a group to invite');
export const GROUP_PLACEHOLDER = s__('InviteMembersModal|Search for a group to invite');
......@@ -127,9 +137,13 @@ export const GROUP_MODAL_LABELS = {
title: GROUP_MODAL_DEFAULT_TITLE,
toGroup: {
introText: GROUP_MODAL_TO_GROUP_DEFAULT_INTRO_TEXT,
notificationText: GROUP_MODAL_TO_GROUP_ALERT_BODY,
notificationLink: GROUP_MODAL_TO_GROUP_ALERT_LINK,
},
toProject: {
introText: GROUP_MODAL_TO_PROJECT_DEFAULT_INTRO_TEXT,
notificationText: GROUP_MODAL_TO_PROJECT_ALERT_BODY,
notificationLink: GROUP_MODAL_TO_PROJECT_ALERT_LINK,
},
searchField: GROUP_SEARCH_FIELD,
placeHolder: GROUP_PLACEHOLDER,
......
......@@ -23656,9 +23656,6 @@ msgstr ""
msgid "InviteMembersBanner|We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge."
msgstr ""
 
msgid "InviteMembersModal| Inviting a group %{linkStart}adds its members to your group%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit."
msgstr ""
msgid "InviteMembersModal| To get more members, the owner of this top-level group can %{trialLinkStart}start a trial%{trialLinkEnd} or %{upgradeLinkStart}upgrade%{upgradeLinkEnd} to a paid tier."
msgstr ""
 
......@@ -23707,6 +23704,12 @@ msgstr ""
msgid "InviteMembersModal|Invite members"
msgstr ""
 
msgid "InviteMembersModal|Inviting a group %{linkStart}adds its members to your group%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit."
msgstr ""
msgid "InviteMembersModal|Inviting a group %{linkStart}adds its members to your project%{linkEnd}, including members who join after the invite. This might put your group over the free %{count} user limit."
msgstr ""
msgid "InviteMembersModal|Manage members"
msgstr ""
 
......@@ -2,7 +2,7 @@ import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { sprintf } from '~/locale';
import InviteGroupNotification from '~/invite_members/components/invite_group_notification.vue';
import { GROUP_MODAL_ALERT_BODY } from '~/invite_members/constants';
import { GROUP_MODAL_TO_GROUP_ALERT_BODY } from '~/invite_members/constants';
describe('InviteGroupNotification', () => {
let wrapper;
......@@ -13,7 +13,11 @@ describe('InviteGroupNotification', () => {
const createComponent = () => {
wrapper = shallowMountExtended(InviteGroupNotification, {
provide: { freeUsersLimit: 5 },
propsData: { name: 'name' },
propsData: {
name: 'name',
notificationLink: '_notification_link_',
notificationText: GROUP_MODAL_TO_GROUP_ALERT_BODY,
},
stubs: { GlSprintf },
});
};
......@@ -28,15 +32,13 @@ describe('InviteGroupNotification', () => {
});
it('shows the correct message', () => {
const message = sprintf(GROUP_MODAL_ALERT_BODY, { count: 5 });
const message = sprintf(GROUP_MODAL_TO_GROUP_ALERT_BODY, { count: 5 });
expect(findAlert().text()).toMatchInterpolatedText(message);
});
it('has a help link', () => {
expect(findLink().attributes('href')).toEqual(
'https://docs.gitlab.com/ee/user/group/manage.html#share-a-group-with-another-group',
);
expect(findLink().attributes('href')).toEqual('_notification_link_');
});
});
});
......@@ -12,6 +12,12 @@ import {
displaySuccessfulInvitationAlert,
reloadOnInvitationSuccess,
} from '~/invite_members/utils/trigger_successful_invite_alert';
import {
GROUP_MODAL_TO_GROUP_ALERT_BODY,
GROUP_MODAL_TO_GROUP_ALERT_LINK,
GROUP_MODAL_TO_PROJECT_ALERT_BODY,
GROUP_MODAL_TO_PROJECT_ALERT_LINK,
} from '~/invite_members/constants';
import { propsData, sharedGroup } from '../mock_data/group_modal';
jest.mock('~/invite_members/utils/trigger_successful_invite_alert');
......@@ -91,6 +97,26 @@ describe('InviteGroupsModal', () => {
expect(findInviteGroupAlert().exists()).toBe(false);
});
it('shows the user limit notification alert with correct link and text for group', () => {
createComponent({ freeUserCapEnabled: true });
expect(findInviteGroupAlert().props()).toMatchObject({
name: propsData.name,
notificationText: GROUP_MODAL_TO_GROUP_ALERT_BODY,
notificationLink: GROUP_MODAL_TO_GROUP_ALERT_LINK,
});
});
it('shows the user limit notification alert with correct link and text for project', () => {
createComponent({ freeUserCapEnabled: true, isProject: true });
expect(findInviteGroupAlert().props()).toMatchObject({
name: propsData.name,
notificationText: GROUP_MODAL_TO_PROJECT_ALERT_BODY,
notificationLink: GROUP_MODAL_TO_PROJECT_ALERT_LINK,
});
});
});
describe('submitting the invite form', () => {
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать