Commit d188d6b9 authored by Ammar Alakkad's avatar Ammar Alakkad Committed by Jose Ivan Vargas

Cloud License - Adjust Subscription Activation Form

parent 8c5b304e
......@@ -35,7 +35,13 @@ export default {
<template>
<div class="gl-display-flex gl-justify-content-center gl-flex-direction-column">
<h3 class="gl-mb-7 gl-mt-6 gl-text-center">{{ mainTitle }}</h3>
<cloud-license-subscription-activation-form v-if="!subscriptionData" />
<h4>{{ s__('CloudLicense|Your subscription') }}</h4>
<hr />
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h3 class="gl-mb-7 gl-mt-6 gl-text-center">{{ mainTitle }}</h3>
<cloud-license-subscription-activation-form v-if="!subscriptionData" />
</div>
</div>
</div>
</template>
<script>
import { GlButton, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
import {
GlButton,
GlCard,
GlForm,
GlFormCheckbox,
GlFormGroup,
GlFormInput,
GlLink,
GlSprintf,
} from '@gitlab/ui';
import activateSubscriptionMutation from 'ee/pages/admin/cloud_licenses/graphql/mutations/activate_subscription.mutation.graphql';
export const SUBSCRIPTION_ACTIVATION_EVENT = 'subscription-activation';
......@@ -8,16 +17,26 @@ export default {
name: 'CloudLicenseSubscriptionActivationForm',
components: {
GlButton,
GlCard,
GlForm,
GlFormGroup,
GlFormInput,
GlFormCheckbox,
GlSprintf,
GlLink,
},
data() {
return {
activationCode: null,
isLoading: false,
termsAccepted: false,
};
},
computed: {
activateButtonDisabled() {
return this.isLoading || !this.termsAccepted;
},
},
methods: {
submit() {
this.isLoading = true;
......@@ -53,32 +72,65 @@ export default {
};
</script>
<template>
<gl-form @submit.stop.prevent="submit">
<gl-form-group>
<div class="gl-display-flex gl-flex-wrap gl-justify-content-center">
<label class="gl-text-center gl-w-full" for="activation-code-group">
{{ s__('CloudLicense|Paste your activation code below') }}
</label>
<gl-form-input
id="activation-code-group"
v-model="activationCode"
:disabled="isLoading"
:placeholder="s__('CloudLicense|Paste your activation code')"
class="gl-mr-3"
required
size="xl"
/>
<gl-button
:disabled="isLoading"
category="primary"
class="gl-align-self-end"
data-testid="activate-button"
type="submit"
variant="confirm"
>
{{ s__('CloudLicense|Activate') }}
</gl-button>
</div>
</gl-form-group>
</gl-form>
<gl-card>
<template #header>
<h5 class="gl-my-0 gl-font-weight-bold">{{ s__('CloudLicense|Activate subscription') }}</h5>
</template>
<p>
<gl-sprintf
:message="
s__('CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}.')
"
>
<template #link="{ content }">
<gl-link href="" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<gl-form @submit.stop.prevent="submit">
<gl-form-group class="gl-mb-0">
<div class="gl-display-flex gl-flex-wrap">
<label class="gl-w-full" for="activation-code-group">
{{ s__('CloudLicense|Activation code') }}
</label>
<gl-form-input
id="activation-code-group"
v-model="activationCode"
:disabled="isLoading"
:placeholder="s__('CloudLicense|Paste your activation code')"
class="gl-w-full gl-mb-4"
required
/>
<gl-form-checkbox v-model="termsAccepted">
<gl-sprintf
:message="
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.',
)
"
>
<template #link="{ content }">
<gl-link href="https://about.gitlab.com/terms/" target="_blank">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</gl-form-checkbox>
<gl-button
:disabled="activateButtonDisabled"
category="primary"
class="gl-mt-6"
data-testid="activate-button"
type="submit"
variant="confirm"
>
{{ s__('CloudLicense|Activate') }}
</gl-button>
</div>
</gl-form-group>
</gl-form>
</gl-card>
</template>
import { GlForm, GlFormInput } from '@gitlab/ui';
import { GlForm, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import CloudLicenseSubscriptionActivationForm, {
......@@ -25,8 +25,10 @@ describe('CloudLicenseApp', () => {
};
const findActivateButton = () => wrapper.findByTestId('activate-button');
const findAgreementCheckbox = () => wrapper.findComponent(GlFormCheckbox);
const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
const findActivateSubscriptionForm = () => wrapper.findComponent(GlForm);
const enableAcceptAgreementCheckbox = () => findAgreementCheckbox().vm.$emit('input', true);
const GlFormInputStub = stubComponent(GlFormInput, {
template: `<input />`,
......@@ -69,6 +71,21 @@ describe('CloudLicenseApp', () => {
it('has an `Activate` button', () => {
expect(findActivateButton().text()).toBe('Activate');
});
it('has a checkbox to accept subscription agreement', () => {
expect(findAgreementCheckbox().exists()).toBe(true);
});
it('disables the activate button if the agreement is unaccepted', () => {
expect(findActivateButton().props('disabled')).toBe(true);
});
it('enables the activate button if the agreement is accepted', async () => {
expect(findActivateButton().props('disabled')).toBe(true);
enableAcceptAgreementCheckbox();
await wrapper.vm.$nextTick();
expect(findActivateButton().props('disabled')).toBe(false);
});
});
......
......@@ -6438,12 +6438,24 @@ msgstr ""
msgid "CloudLicense|Activate"
msgstr ""
msgid "CloudLicense|Activate subscription"
msgstr ""
msgid "CloudLicense|Activation code"
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|ID"
msgstr ""
msgid "CloudLicense|Last Sync"
msgstr ""
msgid "CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}."
msgstr ""
msgid "CloudLicense|Licensed to"
msgstr ""
......@@ -6453,9 +6465,6 @@ msgstr ""
msgid "CloudLicense|Paste your activation code"
msgstr ""
msgid "CloudLicense|Paste your activation code below"
msgstr ""
msgid "CloudLicense|Plan"
msgstr ""
......@@ -6474,6 +6483,9 @@ msgstr ""
msgid "CloudLicense|This instance is currently using the %{planName} plan."
msgstr ""
msgid "CloudLicense|Your subscription"
msgstr ""
msgid "Cluster"
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