Skip to content

G
gitlab-ce
Commit 8b82777c authored by Angelo Gulina's avatar Angelo Gulina
Browse files
Options

Use Form as proper component 

Move GlCard related to its own component
Adjust components communication
parent d4bc7dab
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 186 deletions
ee/app/assets/javascripts/pages/admin/cloud_licenses/components/app.vue
View file @ 8b82777c
<script>
import { GlAlert } from '@gitlab/ui';
import {
activateSubscription,
noActiveSubscription,
subscriptionActivationNotificationText,
subscriptionActivationTitle,
subscriptionHistoryQueries,
subscriptionMainTitle,
subscriptionQueries,
} from '../constants';
import CloudLicenseSubscriptionActivationForm from './subscription_activation_form.vue';
import SubscriptionActivationCard from './subscription_activation_card.vue';
import SubscriptionBreakdown from './subscription_breakdown.vue';
import SubscriptionPurchaseCard from './subscription_purchase_card.vue';
import SubscriptionTrialCard from './subscription_trial_card.vue';
......@@ -16,14 +17,15 @@ export default {
name: 'CloudLicenseApp',
components: {
GlAlert,
CloudLicenseSubscriptionActivationForm,
SubscriptionActivationCard,
SubscriptionBreakdown,
SubscriptionPurchaseCard,
SubscriptionTrialCard,
},
i18n: {
activateSubscription,
noActiveSubscription,
subscriptionActivationNotificationText,
subscriptionActivationTitle,
subscriptionMainTitle,
},
props: {
......@@ -98,9 +100,9 @@ export default {
<div v-else class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h3 class="gl-mb-7 gl-mt-6 gl-text-center" data-testid="subscription-activation-title">
{{ $options.i18n.subscriptionActivationTitle }}
{{ $options.i18n.noActiveSubscription }}
</h3>
<cloud-license-subscription-activation-form />
<subscription-activation-card />
<div class="row gl-mt-7">
<div class="col-lg-6">
<subscription-trial-card />
......
ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_activation_card.vue 0 → 100644
View file @ 8b82777c
<script>
import { GlAlert, GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import {
activateSubscription,
CONNECTIVITY_ERROR,
connectivityErrorAlert,
connectivityIssue,
howToActivateSubscription,
} from '../constants';
import SubscriptionActivationForm from './subscription_activation_form.vue';
export const adminLicenseUrl = helpPagePath('/user/admin_area/license');
export const troubleshootingHelpLink = helpPagePath('user/admin_area/license.html#troubleshooting');
export const subscriptionActivationHelpLink = helpPagePath('user/admin_area/license.html');
export default {
name: 'SubscriptionActivationCard',
i18n: {
activateSubscription,
connectivityIssueTitle: connectivityIssue,
connectivityIssueSubtitle: connectivityErrorAlert.subtitle,
connectivityIssueHelpText: connectivityErrorAlert.helpText,
howToActivateSubscription,
},
links: {
adminLicenseUrl,
subscriptionActivationHelpLink,
troubleshootingHelpLink,
},
components: {
GlAlert,
GlCard,
GlLink,
GlSprintf,
SubscriptionActivationForm,
},
data() {
return {
error: null,
};
},
computed: {
hasConnectivityIssue() {
return this.error === CONNECTIVITY_ERROR;
},
},
methods: {
handleFormActivationFailure(error) {
this.error = error;
},
},
};
</script>
<template>
<gl-card body-class="gl-p-0">
<template #header>
<h5 class="gl-my-0 gl-font-weight-bold">
{{ $options.i18n.activateSubscription }}
</h5>
</template>
<div
v-if="hasConnectivityIssue"
class="gl-p-5 gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
>
<gl-alert variant="danger" :title="$options.i18n.connectivityIssueTitle" :dismissible="false">
<gl-sprintf :message="$options.i18n.connectivityIssueSubtitle">
<template #link="{ content }">
<gl-link
:href="$options.links.subscriptionActivationHelpLink"
target="_blank"
class="gl-text-decoration-none!"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
<gl-sprintf :message="$options.i18n.connectivityIssueHelpText">
<template #link="{ content }">
<gl-link
:href="$options.links.troubleshootingHelpLink"
target="_blank"
class="gl-text-decoration-none!"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
</gl-alert>
</div>
<p class="gl-mb-0 gl-px-5 gl-pt-5">
<gl-sprintf :message="$options.i18n.howToActivateSubscription">
<template #link="{ content }">
<gl-link :href="$options.links.adminLicenseUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<subscription-activation-form
class="gl-p-5"
@subscription-activation-failure="handleFormActivationFailure"
/>
</gl-card>
</template>
ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_activation_form.vue
View file @ 8b82777c
<script>
import {
GlAlert,
GlButton,
GlCard,
GlForm,
GlFormCheckbox,
GlFormGroup,
......@@ -11,11 +9,9 @@ import {
GlSprintf,
} from '@gitlab/ui';
import produce from 'immer';
import { helpPagePath } from '~/helpers/help_page_helper';
import validation from '~/vue_shared/directives/validation';
import {
CONNECTIVITY_ERROR,
connectivityErrorAlert,
activateLabel,
fieldRequiredMessage,
subscriptionActivationForm,
subscriptionQueries,
......@@ -34,16 +30,11 @@ const getErrorsAsData = ({
}) => errors;
export const SUBSCRIPTION_ACTIVATION_FAILURE_EVENT = 'subscription-activation-failure';
export const adminLicenseUrl = helpPagePath('/user/admin_area/license');
export const troubleshootingHelpLink = helpPagePath('user/admin_area/license.html#troubleshooting');
export const subscriptionActivationHelpLink = helpPagePath('user/admin_area/license.html');
export default {
name: 'CloudLicenseSubscriptionActivationForm',
components: {
GlAlert,
GlButton,
GlCard,
GlForm,
GlFormGroup,
GlFormInput,
......@@ -52,23 +43,11 @@ export default {
GlLink,
},
i18n: {
title: subscriptionActivationForm.title,
howToActivateSubscription: subscriptionActivationForm.howToActivateSubscription,
activationCode: subscriptionActivationForm.activationCode,
pasteActivationCode: subscriptionActivationForm.pasteActivationCode,
acceptTerms: subscriptionActivationForm.acceptTerms,
activateLabel: subscriptionActivationForm.activateLabel,
activateLabel,
activationCode: subscriptionActivationForm.activationCode,
fieldRequiredMessage,
alert: {
title: connectivityErrorAlert.title,
subtitle: connectivityErrorAlert.subtitle,
helpText: connectivityErrorAlert.helpText,
},
},
links: {
adminLicenseUrl,
troubleshootingHelpLink,
subscriptionActivationHelpLink,
pasteActivationCode: subscriptionActivationForm.pasteActivationCode,
},
directives: {
validation: validation(),
......@@ -93,7 +72,6 @@ export default {
return {
form,
isLoading: false,
hasConnectivityIssue: false,
};
},
computed: {
......@@ -115,7 +93,6 @@ export default {
}
this.form.showValidation = false;
this.isLoading = true;
this.hasConnectivityIssue = false;
this.$apollo
.mutate({
mutation: subscriptionQueries.mutation,
......@@ -139,14 +116,12 @@ export default {
.then((res) => {
const errors = getErrorsAsData(res);
if (errors.length) {
if (errors.find((error) => error === CONNECTIVITY_ERROR)) {
this.hasConnectivityIssue = true;
}
throw new Error();
const [error] = errors;
throw new Error(error);
}
})
.catch(() => {
this.$emit(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT, null);
.catch((error) => {
this.$emit(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT, error.message);
})
.finally(() => {
this.isLoading = false;
......@@ -156,99 +131,56 @@ export default {
};
</script>
<template>
<gl-card body-class="gl-p-0">
<template #header>
<h5 class="gl-my-0 gl-font-weight-bold">{{ $options.i18n.title }}</h5>
</template>
<div
v-if="hasConnectivityIssue"
class="gl-p-5 gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
>
<gl-alert variant="danger" :title="$options.i18n.alert.title" :dismissible="false">
<gl-sprintf :message="$options.i18n.alert.subtitle">
<template #link="{ content }">
<gl-link
:href="$options.links.subscriptionActivationHelpLink"
target="_blank"
class="gl-text-decoration-none!"
>{{ content }}</gl-link
>
</template>
</gl-sprintf>
<gl-sprintf :message="$options.i18n.alert.helpText">
<template #link="{ content }">
<gl-link
:href="$options.links.troubleshootingHelpLink"
target="_blank"
class="gl-text-decoration-none!"
>
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</gl-alert>
</div>
<div class="gl-p-5">
<p>
<gl-sprintf :message="$options.i18n.howToActivateSubscription">
<template #link="{ content }">
<gl-link href="$options.links.adminLicenseUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<gl-form novalidate @submit.prevent="submit">
<div class="gl-display-flex gl-flex-wrap">
<gl-form-group
class="gl-flex-grow-1"
:invalid-feedback="form.fields.activationCode.feedback"
data-testid="form-group-activation-code"
>
<label class="gl-w-full" for="activation-code-group">
{{ $options.i18n.activationCode }}
</label>
<gl-form-input
id="activation-code-group"
v-model="form.fields.activationCode.value"
v-validation:[form.showValidation]
:disabled="isLoading"
:placeholder="$options.i18n.pasteActivationCode"
:state="form.fields.activationCode.state"
name="activationCode"
class="gl-mb-4"
required
/>
</gl-form-group>
<gl-form novalidate @submit.prevent="submit">
<div class="gl-display-flex gl-flex-wrap">
<gl-form-group
class="gl-flex-grow-1"
:invalid-feedback="form.fields.activationCode.feedback"
data-testid="form-group-activation-code"
>
<label class="gl-w-full" for="activation-code-group">
{{ $options.i18n.activationCode }}
</label>
<gl-form-input
id="activation-code-group"
v-model="form.fields.activationCode.value"
v-validation:[form.showValidation]
:disabled="isLoading"
:placeholder="$options.i18n.pasteActivationCode"
:state="form.fields.activationCode.state"
name="activationCode"
class="gl-mb-4"
required
/>
</gl-form-group>
<gl-form-group
class="gl-mb-0"
:state="isCheckboxValid"
:invalid-feedback="$options.i18n.fieldRequiredMessage"
data-testid="form-group-terms"
>
<gl-form-checkbox v-model="form.fields.terms.state" :state="isCheckboxValid">
<gl-sprintf :message="$options.i18n.acceptTerms">
<template #link="{ content }">
<gl-link href="https://about.gitlab.com/terms/" target="_blank"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
</gl-form-checkbox>
</gl-form-group>
<gl-form-group
class="gl-mb-0"
:state="isCheckboxValid"
:invalid-feedback="$options.i18n.fieldRequiredMessage"
data-testid="form-group-terms"
>
<gl-form-checkbox v-model="form.fields.terms.state" :state="isCheckboxValid">
<gl-sprintf :message="$options.i18n.acceptTerms">
<template #link="{ content }">
<gl-link href="https://about.gitlab.com/terms/" target="_blank"
>{{ content }}
</gl-link>
</template>
</gl-sprintf>
</gl-form-checkbox>
</gl-form-group>
<gl-button
:loading="isRequestingActivation"
category="primary"
class="gl-mt-6 js-no-auto-disable"
data-testid="activate-button"
type="submit"
variant="confirm"
>
{{ $options.i18n.activateLabel }}
</gl-button>
</div>
</gl-form>
<gl-button
:loading="isRequestingActivation"
category="primary"
class="gl-mt-6 js-no-auto-disable"
data-testid="activate-button"
type="submit"
variant="confirm"
>
{{ $options.i18n.activateLabel }}
</gl-button>
</div>
</gl-card>
</gl-form>
</template>
ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_sync_notifications.vue
View file @ 8b82777c
......@@ -2,7 +2,7 @@
import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import {
manualSyncFailureText,
manualSyncFailureTitle,
connectivityIssue,
manualSyncSuccessfulTitle,
notificationType,
} from '../constants';
......@@ -17,7 +17,7 @@ export default {
i18n: {
manualSyncSuccessfulTitle,
manualSyncFailureText,
manualSyncFailureTitle,
connectivityIssue,
},
components: {
GlAlert,
......@@ -62,7 +62,7 @@ export default {
v-else-if="syncDidFail"
variant="danger"
:dismissible="false"
:title="$options.i18n.manualSyncFailureTitle"
:title="$options.i18n.connectivityIssue"
data-testid="sync-failure-alert"
>
<gl-sprintf :message="$options.i18n.manualSyncFailureText">
......
ee/app/assets/javascripts/pages/admin/cloud_licenses/constants.js
View file @ 8b82777c
......@@ -8,9 +8,16 @@ export const subscriptionMainTitle = s__('SuperSonics|Your subscription');
export const subscriptionActivationNotificationText = s__(
`SuperSonics|Your subscription was successfully activated. You can see the details below.`,
);
export const subscriptionActivationTitle = s__(
`SuperSonics|You do not have an active subscription`,
export const subscriptionActivationInsertCode = __(
"If you've purchased or renewed your subscription and have an activation code, please enter it below to start the activation process.",
);
export const howToActivateSubscription = s__(
'SuperSonics|Learn how to %{linkStart}activate your subscription%{linkEnd}.',
);
export const activateLabel = s__('CloudLicense|Activate');
export const activateSubscription = s__('CloudLicense|Activate subscription');
export const enterActivationCode = s__('CloudLicense|Enter activation code');
export const noActiveSubscription = s__(`SuperSonics|You do not have an active subscription`);
export const subscriptionDetailsHeaderText = s__('SuperSonics|Subscription details');
export const licensedToHeaderText = s__('SuperSonics|Licensed to');
export const manageSubscriptionButtonText = s__('SuperSonics|Manage');
......@@ -54,34 +61,22 @@ export const subscriptionTable = {
title: __('Subscription History'),
type: s__('SuperSonics|Type'),
};
export const connectivityIssue = s__('SuperSonics|There is a connectivity issue.');
export const manualSyncSuccessfulTitle = s__(
'SuperSonics|The subscription details synced successfully.',
);
export const manualSyncFailureText = s__(
'SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}.',
);
export const manualSyncFailureTitle = s__('SuperSonics|There is a connectivity issue.');
export const subscriptionActivationForm = {
title: s__('CloudLicense|Activate subscription'),
howToActivateSubscription: s__(
'CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}.',
),
activationCode: s__('CloudLicense|Activation code'),
pasteActivationCode: s__('CloudLicense|Paste your activation code'),
acceptTerms: s__(
'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.',
),
activateLabel: s__('CloudLicense|Activate'),
};
export const userNotifications = {
manualSyncSuccessfulTitle: s__('SuperSonics|The subscription details synced successfully.'),
manualSyncFailureText: s__(
'SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}.',
),
manualSyncFailureTitle: s__('SuperSonics|There is a connectivity issue.'),
};
export const notificationType = {
SYNC_FAILURE: 'SYNC_FAILURE',
SYNC_SUCCESS: 'SYNC_SUCCESS',
......@@ -118,7 +113,6 @@ export const buySubscriptionCard = {
export const CONNECTIVITY_ERROR = 'CONNECTIVITY_ERROR';
export const connectivityErrorAlert = {
title: s__('There is a connectivity issue'),
subtitle: s__(
'CloudLicense|To activate your subscription, connect to GitLab servers through the %{linkStart}Cloud Sync service%{linkEnd}, a hassle-free way to manage your subscription.',
),
......
ee/spec/frontend/admin/cloud_licenses/components/app_spec.js
View file @ 8b82777c
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import CloudLicenseApp from 'ee/pages/admin/cloud_licenses/components/app.vue';
import SubscriptionActivationForm from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
import SubscriptionManagementApp from 'ee/pages/admin/cloud_licenses/components/app.vue';
import SubscriptionActivationCard from 'ee/pages/admin/cloud_licenses/components/subscription_activation_card.vue';
import SubscriptionBreakdown from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue';
import {
noActiveSubscription,
subscriptionActivationNotificationText,
subscriptionActivationTitle,
subscriptionHistoryQueries,
subscriptionMainTitle,
subscriptionQueries,
......@@ -17,10 +17,10 @@ import { license, subscriptionHistory } from '../mock_data';
const localVue = createLocalVue();
localVue.use(VueApollo);
describe('CloudLicenseApp', () => {
describe('SubscriptionManagementApp', () => {
let wrapper;
const findActivateSubscriptionForm = () => wrapper.findComponent(SubscriptionActivationForm);
const findActivateSubscriptionCard = () => wrapper.findComponent(SubscriptionActivationCard);
const findSubscriptionBreakdown = () => wrapper.findComponent(SubscriptionBreakdown);
const findSubscriptionActivationTitle = () =>
wrapper.findByTestId('subscription-activation-title');
......@@ -40,7 +40,7 @@ describe('CloudLicenseApp', () => {
const createComponent = (props = {}, resolverMock) => {
wrapper = extendedWrapper(
shallowMount(CloudLicenseApp, {
shallowMount(SubscriptionManagementApp, {
localVue,
apolloProvider: createMockApolloProvider(resolverMock),
propsData: {
......@@ -77,7 +77,7 @@ describe('CloudLicenseApp', () => {
createComponent({}, [currentSubscriptionResolver, subscriptionHistoryResolver]);
});
it('shows a title saying there is no active subscription', () => {
expect(findSubscriptionActivationTitle().text()).toBe(subscriptionActivationTitle);
expect(findSubscriptionActivationTitle().text()).toBe(noActiveSubscription);
});
it('queries for the current history', () => {
......@@ -85,7 +85,7 @@ describe('CloudLicenseApp', () => {
});
it('shows the subscription activation form', () => {
expect(findActivateSubscriptionForm().exists()).toBe(true);
expect(findActivateSubscriptionCard().exists()).toBe(true);
});
it('does not show the activation success notification', () => {
......
ee/spec/frontend/admin/cloud_licenses/components/subscription_activation_card_spec.js 0 → 100644
View file @ 8b82777c
import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import SubscriptionActivationCard, {
subscriptionActivationHelpLink,
troubleshootingHelpLink,
} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_card.vue';
import SubscriptionActivationForm, {
SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
import { CONNECTIVITY_ERROR } from 'ee/pages/admin/cloud_licenses/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
describe('CloudLicenseApp', () => {
let wrapper;
const findConnectivityErrorAlert = () => wrapper.findComponent(GlAlert);
const findSubscriptionActivationForm = () => wrapper.findComponent(SubscriptionActivationForm);
const createComponent = ({ props = {}, stubs = {} } = {}) => {
wrapper = extendedWrapper(
shallowMount(SubscriptionActivationCard, {
propsData: {
...props,
},
stubs,
}),
);
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('shows a form', () => {
expect(findSubscriptionActivationForm().exists()).toBe(true);
});
it('does not show any alert', () => {
expect(findConnectivityErrorAlert().exists()).toBe(false);
});
describe('when the forms emits a connectivity error', () => {
beforeEach(() => {
createComponent({ stubs: { GlSprintf } });
findSubscriptionActivationForm().vm.$emit(
SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
CONNECTIVITY_ERROR,
);
});
it('shows an alert component', () => {
expect(findConnectivityErrorAlert().exists()).toBe(true);
});
it('shows some help links', () => {
const alert = findConnectivityErrorAlert();
expect(alert.findAll(GlLink).at(0).attributes('href')).toBe(subscriptionActivationHelpLink);
expect(alert.findAll(GlLink).at(1).attributes('href')).toBe(troubleshootingHelpLink);
});
});
});
ee/spec/frontend/admin/cloud_licenses/components/subscription_activation_form_spec.js
View file @ 8b82777c
import { GlAlert, GlForm, GlFormInput, GlFormCheckbox, GlLink, GlSprintf } from '@gitlab/ui';
import { GlForm, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import CloudLicenseSubscriptionActivationForm, {
import SubscriptionActivationForm, {
SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
troubleshootingHelpLink,
subscriptionActivationHelpLink,
} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
import { fieldRequiredMessage, subscriptionQueries } from 'ee/pages/admin/cloud_licenses/constants';
import {
CONNECTIVITY_ERROR,
fieldRequiredMessage,
subscriptionQueries,
} from 'ee/pages/admin/cloud_licenses/constants';
import createMockApollo from 'helpers/mock_apollo_helper';
import { stubComponent } from 'helpers/stub_component';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -32,7 +34,6 @@ describe('CloudLicenseApp', () => {
const findActivationCodeFormGroup = () => wrapper.findByTestId('form-group-activation-code');
const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
const findActivateSubscriptionForm = () => wrapper.findComponent(GlForm);
const findConnectivityErrorAlert = () => wrapper.findComponent(GlAlert);
const GlFormInputStub = stubComponent(GlFormInput, {
template: `<input />`,
......@@ -43,9 +44,9 @@ describe('CloudLicenseApp', () => {
stopPropagation,
});
const createComponentWithApollo = ({ props = {}, mutationMock, stubs = {} } = {}) => {
const createComponentWithApollo = ({ props = {}, mutationMock } = {}) => {
wrapper = extendedWrapper(
shallowMount(CloudLicenseSubscriptionActivationForm, {
shallowMount(SubscriptionActivationForm, {
localVue,
apolloProvider: createMockApolloProvider(mutationMock),
propsData: {
......@@ -53,7 +54,6 @@ describe('CloudLicenseApp', () => {
},
stubs: {
GlFormInput: GlFormInputStub,
...stubs,
},
}),
);
......@@ -137,7 +137,7 @@ describe('CloudLicenseApp', () => {
});
});
describe('when the mutation is not successful but looks like it is', () => {
describe('when the mutation is not successful', () => {
const mutationMock = jest
.fn()
.mockResolvedValue(activateLicenseMutationResponse.ERRORS_AS_DATA);
......@@ -146,7 +146,9 @@ describe('CloudLicenseApp', () => {
findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
});
it.todo('deals with failures in a meaningful way');
it('emits a unsuccessful event', () => {
expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toBeUndefined();
});
});
describe('when the mutation is not successful with connectivity error', () => {
......@@ -154,21 +156,20 @@ describe('CloudLicenseApp', () => {
.fn()
.mockResolvedValue(activateLicenseMutationResponse.CONNECTIVITY_ERROR);
beforeEach(async () => {
createComponentWithApollo({ mutationMock, stubs: { GlSprintf } });
createComponentWithApollo({ mutationMock });
await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
await findAgreementCheckbox().vm.$emit('input', true);
findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
});
it('shows alert component guiding the user to resolve the connectivity problem', () => {
const alert = findConnectivityErrorAlert();
expect(alert.exists()).toBe(true);
expect(alert.findAll(GlLink).at(0).attributes('href')).toBe(subscriptionActivationHelpLink);
expect(alert.findAll(GlLink).at(1).attributes('href')).toBe(troubleshootingHelpLink);
it('emits an failure event with a connectivity error payload', () => {
expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toEqual([
[CONNECTIVITY_ERROR],
]);
});
});
describe('when the mutation is not successful', () => {
describe('when the mutation request fails', () => {
const mutationMock = jest.fn().mockRejectedValue(activateLicenseMutationResponse.FAILURE);
beforeEach(() => {
createComponentWithApollo({ mutationMock });
......@@ -178,8 +179,6 @@ describe('CloudLicenseApp', () => {
it('emits a unsuccessful event', () => {
expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toBeUndefined();
});
it.todo('deals with failures in a meaningful way');
});
});
});
ee/spec/frontend/admin/cloud_licenses/components/subscription_sync_notifications_spec.js
View file @ 8b82777c
......@@ -4,7 +4,7 @@ import SubscriptionSyncNotifications, {
SUCCESS_ALERT_DISMISSED_EVENT,
} from 'ee/pages/admin/cloud_licenses/components/subscription_sync_notifications.vue';
import {
manualSyncFailureTitle,
connectivityIssue,
manualSyncSuccessfulTitle,
notificationType,
} from 'ee/pages/admin/cloud_licenses/constants';
......@@ -69,7 +69,7 @@ describe('Subscription Sync Notifications', () => {
});
it('displays an alert with a failure title', () => {
expect(findFailureAlert().props('title')).toBe(manualSyncFailureTitle);
expect(findFailureAlert().props('title')).toBe(connectivityIssue);
});
it('displays an alert with a failure message', () => {
......
locale/gitlab.pot
View file @ 8b82777c
......@@ -6689,6 +6689,9 @@ msgstr ""
msgid "CloudLicense|Buy subscription"
msgstr ""
msgid "CloudLicense|Enter activation code"
msgstr ""
msgid "CloudLicense|Free trial"
msgstr ""
......@@ -6698,9 +6701,6 @@ 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 ""
msgid "CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}."
msgstr ""
msgid "CloudLicense|Maximum users"
msgstr ""
......@@ -16474,6 +16474,9 @@ msgstr ""
msgid "If you want to re-enable two-factor authentication, visit the %{settings_link_to} page."
msgstr ""
msgid "If you've purchased or renewed your subscription and have an activation code, please enter it below to start the activation process."
msgstr ""
msgid "If your HTTP repository is not publicly accessible, add your credentials."
msgstr ""
......@@ -31055,6 +31058,9 @@ msgstr ""
msgid "SuperSonics|Last Sync"
msgstr ""
msgid "SuperSonics|Learn how to %{linkStart}activate your subscription%{linkEnd}."
msgstr ""
msgid "SuperSonics|Licensed to"
msgstr ""
......@@ -32246,9 +32252,6 @@ msgstr ""
msgid "There are running deployments on the environment. Please retry later."
msgstr ""
msgid "There is a connectivity issue"
msgstr ""
msgid "There is a halted Elasticsearch migration"
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7