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

ee/app/assets/javascripts/admin/licenses/components/upload_trial_license_modal.vue

+<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>

ee/app/assets/javascripts/admin/licenses/init_trial_license_modal.js

+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,
+        },
+      });
+    },
+  });
+}

ee/app/assets/javascripts/main_ee.js

-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();

ee/app/assets/javascripts/pages/admin/licenses/show/index.js

+import initUploadTrialLicenseModal from 'ee/admin/licenses/init_trial_license_modal';
 import { shouldQrtlyReconciliationMount } from 'ee/billings/qrtly_reconciliation';
 
 shouldQrtlyReconciliationMount();
+initUploadTrialLicenseModal();

ee/app/assets/stylesheets/pages/ee_start_trial.scss

@@ -38,34 +38,13 @@
 
 /* Trial License Install Modal */
 .modal-upload-trial-license {
-  .modal-body-contents {
-    .trial-activated-graphic {
-      display: flex;
-      justify-content: center;
-
-      svg {
+  .svg-container {
     width: 90px;
     height: 90px;
   }
-    }
-
-    .confirmation-title,
-    .confirmation-desc {
-      text-align: center;
-    }
-
-    .confirmation-desc {
-      max-width: 80%;
-      margin: auto;
-      color: $gl-text-color-secondary;
-    }
 
   .trial-license-preview {
     max-height: 300px;
-      word-wrap: break-word;
-      word-break: break-all;
-      overflow-y: auto;
-    }
   }
 
   /* 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;

ee/app/views/admin/licenses/_upload_trial_license.html.haml

-- 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 ×
-        .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'

ee/app/views/admin/licenses/missing.html.haml

@@ -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?

ee/spec/frontend/admin/licenses/components/upload_trial_license_modal_spec.js

+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();
+      });
+    });
+  });
+});

locale/gitlab.pot

@@ -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 ""