Commit 117f5552 authored by Martin Wortschack's avatar Martin Wortschack Committed by Brandon Labuschagne

Replace bootstrap modal trigger in ee/app/assets/javascripts/main_ee.js

parent d73de719
<script>
import { GlModal, GlLink, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import trialLicenseActivatedSvg from 'ee_icons/_ee_trial_license_activated.svg';
import csrf from '~/lib/utils/csrf';
import { __ } from '~/locale';
export default {
name: 'UploadTrialLicenseModal',
components: {
GlModal,
GlLink,
GlIcon,
},
directives: {
SafeHtml,
},
props: {
licenseKey: {
type: String,
required: true,
},
adminLicensePath: {
type: String,
required: true,
},
initialShow: {
type: Boolean,
required: false,
default: true,
},
},
data() {
return {
visible: this.initialShow,
};
},
methods: {
submitForm() {
this.$refs.form.submit();
},
},
csrf,
cancelOptions: {
text: __('Cancel'),
},
primaryOptions: {
text: __('Install license'),
attributes: [
{
variant: 'confirm',
category: 'primary',
},
],
},
trialLicenseActivatedSvg,
};
</script>
<template>
<gl-modal
ref="modal"
:visible="visible"
modal-id="modal-upload-trial-license"
body-class="modal-upload-trial-license"
:action-primary="$options.primaryOptions"
:action-cancel="$options.cancelOptions"
@primary.prevent="submitForm"
>
<div class="trial-activated-graphic gl-display-flex gl-justify-content-center gl-mt-5">
<span v-safe-html="$options.trialLicenseActivatedSvg" class="svg-container"></span>
</div>
<h3 class="gl-text-center">{{ __('Your trial license was issued!') }}</h3>
<p class="gl-text-center gl-text-gray-500 mw-70p m-auto gl-font-size-h2 gl-line-height-28">
{{
__(
'Your trial license was issued and activated. Install it to enjoy GitLab Ultimate for 30 days.',
)
}}
</p>
<form
id="new_license"
ref="form"
:action="adminLicensePath"
enctype="multipart/form-data"
method="post"
>
<div class="gl-mt-5">
<gl-link
id="hide-license"
href="#hide-license"
class="hide-license gl-text-gray-600 gl-text-center"
>{{ __('Show license key') }}<gl-icon name="chevron-down"
/></gl-link>
<gl-link
id="show-license"
href="#show-license"
class="show-license gl-text-gray-600 gl-text-center"
>{{ __('Hide license key') }}<gl-icon name="chevron-up"
/></gl-link>
<div class="card trial-license-preview gl-overflow-y-auto gl-word-break-all gl-mt-5">
{{ licenseKey }}
</div>
</div>
<input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
<input id="license_data" :value="licenseKey" type="hidden" name="license[data]" />
</form>
</gl-modal>
</template>
import Vue from 'vue';
import UploadTrialLicenseModal from './components/upload_trial_license_modal.vue';
export default function initUploadTrialLicenseModal() {
const el = document.querySelector('.js-upload-trial-license-modal');
if (!el) {
return false;
}
const { licenseKey, adminLicensePath } = el.dataset;
return new Vue({
el,
render(h) {
return h(UploadTrialLicenseModal, {
props: {
licenseKey,
adminLicensePath,
},
});
},
});
}
import $ from 'jquery';
import 'bootstrap/js/dist/modal';
import initEETrialBanner from 'ee/ee_trial_banner';
import trackNavbarEvents from 'ee/event_tracking/navbar';
import initNamespaceStorageLimitAlert from 'ee/namespace_storage_limit_alert';
$(() => {
/**
* EE specific scripts
*/
$('#modal-upload-trial-license').modal('show');
// EE specific calls
initEETrialBanner();
initNamespaceStorageLimitAlert();
// EE specific calls
initEETrialBanner();
initNamespaceStorageLimitAlert();
trackNavbarEvents();
});
trackNavbarEvents();
import initUploadTrialLicenseModal from 'ee/admin/licenses/init_trial_license_modal';
import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
shouldQrtlyReconciliationMount();
initUploadTrialLicenseModal();
......@@ -38,34 +38,13 @@
/* Trial License Install Modal */
.modal-upload-trial-license {
.modal-body-contents {
.trial-activated-graphic {
display: flex;
justify-content: center;
svg {
width: 90px;
height: 90px;
}
}
.confirmation-title,
.confirmation-desc {
text-align: center;
}
.confirmation-desc {
max-width: 80%;
margin: auto;
color: $gl-text-color-secondary;
}
.svg-container {
width: 90px;
height: 90px;
}
.trial-license-preview {
max-height: 300px;
word-wrap: break-word;
word-break: break-all;
overflow-y: auto;
}
.trial-license-preview {
max-height: 300px;
}
/* Pure CSS License Key Preview Toggle */
......@@ -83,11 +62,6 @@
.show-license,
.hide-license {
margin-top: 10px;
text-align: center;
font-size: 18px;
color: $gray-600;
&:hover {
text-decoration: none;
color: $gray-900;
......
- license_key = params[:trial_key]
#modal-upload-trial-license.modal-upload-trial-license.modal.fade.in{ tabindex: -1, role: 'dialog' }
.modal-dialog
.modal-content
.modal-body
%button.close{ type: 'button', data: { dismiss: 'modal' }, aria: { label: 'Close' } }
%span &times;
.modal-body-contents
.trial-activated-graphic.gl-mt-5
= custom_icon('ee_trial_license_activated', size: 100)
%h3.confirmation-title
Your trial license was issued!
%p.confirmation-desc.lead
Your trial license was issued and activated. Install it
to enjoy GitLab Ultimate for 30 days.
= form_for License.new, url: admin_license_path, html: { multipart: true, class: 'fieldset-form' } do |f|
= f.hidden_field :data, value: license_key
%a#hide-license.hide-license{ href: '#hide-license' }
Show license key
= sprite_icon('chevron-down')
%a#show-license.show-license{ href: '#show-license' }
Hide license key
= sprite_icon('chevron-up')
.card.trial-license-preview.gl-mt-5
= license_key
.modal-footer.form-actions
%button.btn.gl-button.btn-default{ type: 'button', data: { dismiss: 'modal' } } Cancel
= f.submit 'Install license', class: 'gl-button btn btn-confirm'
......@@ -4,7 +4,7 @@
= s_('License|Your License')
= render "upload_buy_license"
- if params[:trial_key].present?
= render "upload_trial_license"
.js-upload-trial-license-modal{ data: { license_key: params[:trial_key], admin_license_path: admin_license_path } }
%hr
- if params.key?(:trial_key) && params[:trial_key].blank?
......
import { GlModal } from '@gitlab/ui';
import UploadTrialLicenseModal from 'ee/admin/licenses/components/upload_trial_license_modal.vue';
import { stubComponent } from 'helpers/stub_component';
import { mountExtended } from 'helpers/vue_test_utils_helper';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
describe('UploadTrialLicenseModal', () => {
let wrapper;
let formSubmitSpy;
function createComponent(props = {}) {
return mountExtended(UploadTrialLicenseModal, {
propsData: {
initialShow: true,
...props,
},
stubs: {
GlModal: stubComponent(GlModal, {
template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
}),
},
});
}
beforeEach(() => {
formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation();
});
afterEach(() => {
wrapper.destroy();
});
const findModal = () => wrapper.findComponent(GlModal);
const findForm = () => wrapper.find('form');
const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
const findLicenseData = () => new FormData(findForm().element).get('license[data]');
describe('template', () => {
const licenseKey = '12345abcde';
const adminLicensePath = '/admin/license';
describe('form', () => {
beforeEach(() => {
wrapper = createComponent({ licenseKey, adminLicensePath });
});
it('displays the form with the correct action and inputs', () => {
expect(findForm().exists()).toBe(true);
expect(findForm().attributes('action')).toBe(adminLicensePath);
expect(findAuthenticityToken()).toBe('mock-csrf-token');
expect(findLicenseData()).toBe(licenseKey);
});
it('submits the form when the primary action is clicked', () => {
const mockEvent = { preventDefault: jest.fn() };
findModal().vm.$emit('primary', mockEvent);
expect(formSubmitSpy).toHaveBeenCalled();
});
});
});
});
......@@ -16187,6 +16187,9 @@ msgstr ""
msgid "Hide host keys manual input"
msgstr ""
msgid "Hide license key"
msgstr ""
msgid "Hide list"
msgstr ""
......@@ -17461,6 +17464,9 @@ msgstr ""
msgid "Install GitLab Runner on Kubernetes"
msgstr ""
msgid "Install license"
msgstr ""
msgid "Install on clusters"
msgstr ""
......@@ -30001,6 +30007,9 @@ msgstr ""
msgid "Show latest version"
msgstr ""
msgid "Show license key"
msgstr ""
msgid "Show links anyways"
msgstr ""
......@@ -38024,6 +38033,12 @@ msgstr ""
msgid "Your subscription will expire in %{remaining_days}."
msgstr ""
msgid "Your trial license was issued and activated. Install it to enjoy GitLab Ultimate for 30 days."
msgstr ""
msgid "Your trial license was issued!"
msgstr ""
msgid "Your username is %{username}."
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