Commit 08dab512 authored by Savas Vedova's avatar Savas Vedova

Merge branch 'ag-273028-subs-details-user-info' into 'master'

Subscription Details: User info

See merge request gitlab-org/gitlab!57852
parents 4ea6ad65 86cabf4c
<script>
import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import {
billableUsersText,
billableUsersTitle,
maximumUsersText,
maximumUsersTitle,
usersInSubscriptionText,
usersInSubscriptionTitle,
usersOverSubscriptionText,
usersOverSubscriptionTitle,
} from '../constants';
export const billableUsersURL = helpPagePath('subscriptions/self_managed/index');
export const trueUpURL = 'https://about.gitlab.com/license-faq/';
export default {
i18n: {
billableUsersTitle,
maximumUsersTitle,
usersInSubscriptionTitle,
usersOverSubscriptionTitle,
billableUsersText,
maximumUsersText,
usersInSubscriptionText,
usersOverSubscriptionText,
},
links: {
billableUsersURL,
trueUpURL,
},
name: 'SubscriptionDetailsUserInfo',
components: {
GlCard,
GlLink,
GlSprintf,
},
props: {
subscription: {
type: Object,
required: true,
},
},
computed: {
usersInSubscription() {
return this.subscription.usersInLicense;
},
billableUsers() {
return this.subscription.billableUsers;
},
maximumUsers() {
return this.subscription.maximumUsers;
},
usersOverSubscription() {
return this.subscription.usersOverSubscription;
},
},
};
</script>
<template>
<section class="row">
<div class="col-md-6 gl-mb-5">
<gl-card data-testid="users-in-license">
<header>
<h2>{{ usersInSubscription }}</h2>
<h5 class="gl-font-weight-normal text-uppercase">
{{ $options.i18n.usersInSubscriptionTitle }}
</h5>
</header>
<p>
{{ $options.i18n.usersInSubscriptionText }}
</p>
</gl-card>
</div>
<div class="col-md-6 gl-mb-5">
<gl-card data-testid="billable-users">
<header>
<h2>{{ billableUsers }}</h2>
<h5 class="gl-font-weight-normal text-uppercase">
{{ $options.i18n.billableUsersTitle }}
</h5>
</header>
<p>
<gl-sprintf :message="$options.i18n.billableUsersText">
<template #billableUsersLink="{ content }">
<gl-link :href="$options.links.billableUsersURL" target="_blank"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</gl-card>
</div>
<div class="col-md-6 gl-mb-5">
<gl-card data-testid="maximum-users">
<header>
<h2>{{ maximumUsers }}</h2>
<h5 class="gl-font-weight-normal text-uppercase">
{{ $options.i18n.maximumUsersTitle }}
</h5>
</header>
<p>
{{ $options.i18n.maximumUsersText }}
</p>
</gl-card>
</div>
<div class="col-md-6 gl-mb-5">
<gl-card data-testid="users-over-subscription">
<header>
<h2>{{ usersOverSubscription }}</h2>
<h5 class="gl-font-weight-normal text-uppercase">
{{ $options.i18n.usersOverSubscriptionTitle }}
</h5>
</header>
<p>
<gl-sprintf :message="$options.i18n.usersOverSubscriptionText">
<template #trueUpLink="{ content }">
<gl-link :href="$options.links.trueUpURL">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
</gl-card>
</div>
</section>
</template>
......@@ -16,3 +16,20 @@ export const detailsLabels = {
startsAt: s__('CloudLicense|Started'),
renews: s__('CloudLicense|Renews'),
};
export const billableUsersTitle = s__('CloudLicense|Billable users');
export const maximumUsersTitle = s__('CloudLicense|Maximum users');
export const usersInSubscriptionTitle = s__('CloudLicense|Users in subscription');
export const usersOverSubscriptionTitle = s__('CloudLicense|Users over subscription');
export const billableUsersText = s__(
'CloudLicense|This is the number of %{billableUsersLinkStart}billable users%{billableUsersLinkEnd} on your installation, and this is the minimum number you need to purchase when you renew your license.',
);
export const maximumUsersText = s__(
'CloudLicense|This is the highest peak of users on your installation since the license started.',
);
export const usersInSubscriptionText = s__(
`CloudLicense|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license.`,
);
export const usersOverSubscriptionText = s__(
`CloudLicense|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.`,
);
import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import SubscriptionDetailsUserInfo, {
billableUsersURL,
trueUpURL,
} from 'ee/pages/admin/cloud_licenses/components/subscription_details_user_info.vue';
import {
billableUsersText,
billableUsersTitle,
maximumUsersText,
maximumUsersTitle,
usersInSubscriptionText,
usersInSubscriptionTitle,
usersOverSubscriptionText,
usersOverSubscriptionTitle,
} from 'ee/pages/admin/cloud_licenses/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { license } from '../mock_data';
describe('Subscription Details Card', () => {
let wrapper;
const itif = (condition) => (condition ? it : it.skip);
const createComponent = (props = {}, stubGlSprintf = false) => {
wrapper = extendedWrapper(
shallowMount(SubscriptionDetailsUserInfo, {
propsData: {
subscription: license.ULTIMATE,
...props,
},
stubs: {
GlCard,
GlSprintf: stubGlSprintf ? GlSprintf : true,
},
}),
);
};
afterEach(() => {
wrapper.destroy();
});
describe.each`
testId | info | title | text | link
${'users-in-license'} | ${'10'} | ${usersInSubscriptionTitle} | ${usersInSubscriptionText} | ${false}
${'billable-users'} | ${'8'} | ${billableUsersTitle} | ${billableUsersText} | ${billableUsersURL}
${'maximum-users'} | ${'8'} | ${maximumUsersTitle} | ${maximumUsersText} | ${false}
${'users-over-subscription'} | ${'0'} | ${usersOverSubscriptionTitle} | ${usersOverSubscriptionText} | ${trueUpURL}
`('with data for $card', ({ testId, info, title, text, link }) => {
beforeEach(() => {
createComponent();
});
const findUseCard = () => wrapper.findByTestId(testId);
it(`displays the info`, () => {
expect(findUseCard().find('h2').text()).toBe(info);
});
it(`displays the title`, () => {
expect(findUseCard().find('h5').text()).toBe(title);
});
itif(link)(`displays the content with a link`, () => {
expect(findUseCard().findComponent(GlSprintf).attributes('message')).toBe(text);
});
itif(!link)('displays a simple content', () => {
expect(findUseCard().find('p').text()).toBe(text);
});
itif(link)(`has a link`, () => {
createComponent({}, true);
expect(findUseCard().findComponent(GlLink).attributes('href')).toBe(link);
});
itif(!link)(`has not a link`, () => {
createComponent({}, true);
expect(findUseCard().findComponent(GlLink).exists()).toBe(link);
});
});
});
export const license = {
ULTIMATE: {
billableUsers: '8',
company: 'ACME Corp',
email: 'user@acmecorp.com',
id: '1309188',
plan: 'Ultimate',
lastSync: 'just now - actual date',
maximumUsers: '8',
name: 'Jane Doe',
plan: 'Ultimate',
startsAt: '22 February',
renews: 'in 11 months',
name: 'Jane Doe',
email: 'user@acmecorp.com',
company: 'ACME Corp',
usersInLicense: '10',
usersOverSubscription: '0',
},
};
......
......@@ -6450,6 +6450,9 @@ msgstr ""
msgid "CloudLicense|Activation code"
msgstr ""
msgid "CloudLicense|Billable users"
msgstr ""
msgid "CloudLicense|I agree that my use of the GitLab Software is subject to the Subscription Agreement located at the %{linkStart}Terms of Service%{linkEnd}, unless otherwise agreed to in writing with GitLab."
msgstr ""
......@@ -6468,6 +6471,9 @@ msgstr ""
msgid "CloudLicense|Manage"
msgstr ""
msgid "CloudLicense|Maximum users"
msgstr ""
msgid "CloudLicense|Paste your activation code"
msgstr ""
......@@ -6489,6 +6495,24 @@ msgstr ""
msgid "CloudLicense|This instance is currently using the %{planName} plan."
msgstr ""
msgid "CloudLicense|This is the highest peak of users on your installation since the license started."
msgstr ""
msgid "CloudLicense|This is the number of %{billableUsersLinkStart}billable users%{billableUsersLinkEnd} on your installation, and this is the minimum number you need to purchase when you renew your license."
msgstr ""
msgid "CloudLicense|Users in subscription"
msgstr ""
msgid "CloudLicense|Users over subscription"
msgstr ""
msgid "CloudLicense|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license."
msgstr ""
msgid "CloudLicense|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement."
msgstr ""
msgid "CloudLicense|Your subscription"
msgstr ""
......
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