Commit 774cb19a authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

Merge branch 'ag-327248-buttons-fe' into 'master'

Add buttons for subscription management

See merge request gitlab-org/gitlab!61328
parents 3a0d4077 086d1b0d
......@@ -7,9 +7,11 @@ import {
licensedToHeaderText,
manageSubscriptionButtonText,
notificationType,
removeLicense,
subscriptionDetailsHeaderText,
subscriptionType,
syncSubscriptionButtonText,
uploadLicense,
} from '../constants';
import SubscriptionActivationModal from './subscription_activation_modal.vue';
import SubscriptionDetailsCard from './subscription_details_card.vue';
......@@ -22,11 +24,13 @@ export const modalId = 'subscription-activation-modal';
export default {
i18n: {
enterActivationCode,
licensedToHeaderText,
manageSubscriptionButtonText,
removeLicense,
subscriptionDetailsHeaderText,
syncSubscriptionButtonText,
enterActivationCode,
uploadLicense,
},
modal: {
id: modalId,
......@@ -43,7 +47,7 @@ export default {
SubscriptionDetailsUserInfo,
SubscriptionSyncNotifications: () => import('./subscription_sync_notifications.vue'),
},
inject: ['subscriptionSyncPath'],
inject: ['customersPortalUrl', 'licenseUploadPath', 'subscriptionSyncPath'],
props: {
subscription: {
type: Object,
......@@ -63,10 +67,16 @@ export default {
};
},
computed: {
canManageSubscription() {
return this.customersPortalUrl;
},
canSyncSubscription() {
return this.subscriptionSyncPath && this.subscription.type === subscriptionType.CLOUD;
return this.subscriptionSyncPath && this.isCloudType;
},
canManageSubscription() {
canUploadLicense() {
return this.licenseUploadPath && this.isLegacyType;
},
canRemoveLicense() {
return false;
},
hasSubscription() {
......@@ -75,9 +85,21 @@ export default {
hasSubscriptionHistory() {
return Boolean(this.subscriptionList.length);
},
isCloudType() {
return this.subscription.type === subscriptionType.CLOUD;
},
isLegacyType() {
return this.subscription.type === subscriptionType.LEGACY;
},
shouldShowFooter() {
return some(
pick(this, ['canSyncSubscription', 'canMangeSubscription', 'hasSubscription']),
pick(this, [
'hasSubscription',
'canDeleteSubscription',
'canManageSubscription',
'canSyncSubscription',
'canUploadSubscription',
]),
Boolean,
);
},
......@@ -144,9 +166,33 @@ export default {
>
{{ $options.i18n.enterActivationCode }}
</gl-button>
<gl-button v-if="canManageSubscription">
<gl-button
v-if="canUploadLicense"
:href="licenseUploadPath"
category="secondary"
variant="confirm"
data-testid="license-upload-action"
>
{{ $options.i18n.uploadLicense }}
</gl-button>
<gl-button
v-if="canManageSubscription"
:href="customersPortalUrl"
target="_blank"
category="secondary"
variant="confirm"
data-testid="subscription-manage-action"
>
{{ $options.i18n.manageSubscriptionButtonText }}
</gl-button>
<gl-button
v-if="canRemoveLicense"
category="secondary"
variant="danger"
data-testid="license-remove-action"
>
{{ $options.i18n.removeLicense }}
</gl-button>
</template>
</subscription-details-card>
</div>
......
......@@ -37,6 +37,8 @@ export const detailsLabels = {
startsAt: s__('SuperSonics|Started'),
};
export const removeLicense = __('Remove license');
export const uploadLicense = __('Upload license');
export const uploadLegacyLicense = s__('SuperSonics|Upload a legacy license');
export const billableUsersTitle = s__('CloudLicense|Billable users');
export const maximumUsersTitle = s__('CloudLicense|Maximum users');
......
......@@ -25,6 +25,7 @@ export default () => {
const {
buySubscriptionPath,
customersPortalUrl,
freeTrialPath,
hasActiveLicense,
licenseUploadPath,
......@@ -40,6 +41,7 @@ export default () => {
provide: {
buySubscriptionPath,
connectivityHelpURL,
customersPortalUrl,
freeTrialPath,
licenseUploadPath,
subscriptionSyncPath,
......
......@@ -18,6 +18,7 @@ import {
licensedToHeaderText,
notificationType,
subscriptionDetailsHeaderText,
subscriptionType,
} from 'ee/pages/admin/cloud_licenses/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
......@@ -31,20 +32,24 @@ describe('Subscription Breakdown', () => {
const [, legacyLicense] = subscriptionHistory;
const connectivityHelpURL = 'connectivity/help/url';
const customersPortalUrl = 'customers.dot';
const licenseUploadPath = '/license/upload/';
const subscriptionSyncPath = '/sync/path/';
const findDetailsCards = () => wrapper.findAllComponents(SubscriptionDetailsCard);
const findDetailsCardFooter = () => wrapper.find('.gl-card-footer');
const findDetailsHistory = () => wrapper.findComponent(SubscriptionDetailsHistory);
const findDetailsUserInfo = () => wrapper.findComponent(SubscriptionDetailsUserInfo);
const findLicenseUploadAction = () => wrapper.findByTestId('license-upload-action');
const findSubscriptionActivationAction = () =>
wrapper.findByTestId('subscription-activation-action');
const findSubscriptionMangeAction = () => wrapper.findByTestId('subscription-manage-action');
const findSubscriptionSyncAction = () => wrapper.findByTestId('subscription-sync-action');
const findSubscriptionActivationModal = () => wrapper.findComponent(SubscriptionActivationModal);
const findSubscriptionSyncNotifications = () =>
wrapper.findComponent(SubscriptionSyncNotifications);
const createComponent = ({ props, stubs } = {}) => {
const createComponent = ({ props = {}, provide = {}, stubs = {} } = {}) => {
glModalDirective = jest.fn();
wrapper = extendedWrapper(
shallowMount(SubscriptionBreakdown, {
......@@ -57,7 +62,10 @@ describe('Subscription Breakdown', () => {
},
provide: {
connectivityHelpURL,
customersPortalUrl,
licenseUploadPath,
subscriptionSyncPath,
...provide,
},
propsData: {
subscription: license.ULTIMATE,
......@@ -122,12 +130,6 @@ describe('Subscription Breakdown', () => {
expect(findDetailsCardFooter().exists()).toBe(true);
});
it('shows a button to sync the subscription', () => {
createComponent({ stubs: { GlCard, SubscriptionDetailsCard } });
expect(findSubscriptionSyncAction().exists()).toBe(true);
});
it('shows a button to activate a new subscription', () => {
createComponent({ stubs: { GlCard, SubscriptionDetailsCard } });
......@@ -142,7 +144,62 @@ describe('Subscription Breakdown', () => {
expect(findSubscriptionActivationModal().attributes('modalid')).toBe(modalId);
});
it.todo('shows a button to manage the subscription');
describe('footer buttons', () => {
it.each`
url | type | shouldShow
${subscriptionSyncPath} | ${subscriptionType.CLOUD} | ${true}
${subscriptionSyncPath} | ${subscriptionType.LEGACY} | ${false}
${''} | ${subscriptionType.CLOUD} | ${false}
${''} | ${subscriptionType.LEGACY} | ${false}
${undefined} | ${subscriptionType.CLOUD} | ${false}
${undefined} | ${subscriptionType.LEGACY} | ${false}
`(
'with url is $url and type is $type the sync buttons is shown: $shouldShow',
({ url, type, shouldShow }) => {
const provide = { subscriptionSyncPath: url };
const props = { subscription: { ...license.ULTIMATE, type } };
const stubs = { GlCard, SubscriptionDetailsCard };
createComponent({ props, provide, stubs });
expect(findSubscriptionSyncAction().exists()).toBe(shouldShow);
},
);
it.each`
url | type | shouldShow
${licenseUploadPath} | ${subscriptionType.LEGACY} | ${true}
${licenseUploadPath} | ${subscriptionType.CLOUD} | ${false}
${''} | ${subscriptionType.LEGACY} | ${false}
${''} | ${subscriptionType.CLOUD} | ${false}
${undefined} | ${subscriptionType.LEGACY} | ${false}
${undefined} | ${subscriptionType.CLOUD} | ${false}
`(
'with url is $url and type is $type the upload buttons is shown: $shouldShow',
({ url, type, shouldShow }) => {
const provide = { licenseUploadPath: url };
const props = { subscription: { ...license.ULTIMATE, type } };
const stubs = { GlCard, SubscriptionDetailsCard };
createComponent({ props, provide, stubs });
expect(findLicenseUploadAction().exists()).toBe(shouldShow);
},
);
it.each`
url | shouldShow
${customersPortalUrl} | ${true}
${''} | ${false}
${undefined} | ${false}
`('with url is $url the manage buttons is shown: $shouldShow', ({ url, shouldShow }) => {
const provide = { customersPortalUrl: url };
const stubs = { GlCard, SubscriptionDetailsCard };
createComponent({ provide, stubs });
expect(findSubscriptionMangeAction().exists()).toBe(shouldShow);
});
it.todo('should show a remove subscription button');
});
describe('with a legacy license', () => {
beforeEach(() => {
......
......@@ -34673,6 +34673,9 @@ msgstr ""
msgid "Upload file"
msgstr ""
msgid "Upload license"
msgstr ""
msgid "Upload object map"
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