Fix(eetrialbanner): fix EE trial banner to allow dismiss

Allow the EE trial banner to close
on both alert dismiss
and button action

https://gitlab.com/gitlab-org/gitlab/-/issues/289925

changelogs/unreleased/289925-subscription-expiration-banner-not-dismissable.yml

+---
+title: 'Fix(eetrialbanner): fix EE trial banner to allow dismiss'
+merge_request: 50436
+author:
+type: fixed

ee/app/assets/javascripts/ee_trial_banner/ee_trial_banner.js

@@ -14,7 +14,7 @@ export default class EETrialBanner {
   init() {
     // Wait for navbars to render before querying
     this.setCookies();
-    this.$trialBanner.on('close.bs.alert', (e) => this.handleTrialBannerDismiss(e));
+    this.$trialBanner.on('click', (e) => this.handleTrialBannerDismiss(e.target));
   }
 
   /**
@@ -93,7 +93,14 @@ export default class EETrialBanner {
     this.toggleSecondaryNavbarMargin(state);
   }
 
-  handleTrialBannerDismiss() {
+  handleTrialBannerDismiss(element) {
+    // Check if a close button was clicked inside the parent element
+    if (!element.classList.contains('js-close')) {
+      return;
+    }
+
+    // A closed button has been clicked, dismiss the banner and handle setting the cookie
+    this.toggleBanner(false);
     this.toggleMainNavbarMargin(false);
     this.toggleSecondaryNavbarMargin(false);
     if (Cookies.get(this.COOKIE_KEY)) {

ee/app/views/layouts/header/_ee_subscribable_banner.html.haml

@@ -3,12 +3,11 @@
 
 - if message.present? && subscribable.present?
   .container-fluid.container-limited.pt-3
-    .gl-alert.alert-dismissible.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } }
-      %button.close.p-2{ type: 'button', 'aria-label' => 'Dismiss banner', data: { dismiss: 'alert', track_event: 'click_button', track_label: 'dismiss_subscribable_banner' } }
-        %span{ 'aria-hidden' => 'true' }
-          = sprite_icon('merge-request-close-m', size: 24)
-      .d-flex.flex-row
-        .pr-4.pl-3.pt-2
+    .gl-alert.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } }
+      %button.gl-alert-dismiss{ type: 'button', 'aria-label' => 'Dismiss', data: { track_event: 'click_button', track_label: 'dismiss_subscribable_banner' } }
+        = sprite_icon('close', css_class: 'gl-icon js-close')
+      .gl-display-flex.gl-flex-direction-row
+        .gl-pr-6.gl-pl-5.gl-pt-3
           - if subscribable.expired?
             - if subscribable.block_changes?
               = image_tag('illustrations/subscription-downgraded.svg')
@@ -16,11 +15,11 @@
               = image_tag('illustrations/subscription-cancelled.svg')
           - else
             = image_tag('illustrations/subscription-warning.svg')
-        .text-left.pt-2
+        .gl-text-left.gl-pt-3
           = message
 
           - if subscribable.block_changes?
-            = link_to 'Upgrade your plan', 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'upgrade' }
+            = link_to _('Upgrade your plan'), 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn gl-button btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'upgrade' }
           - else
-            = link_to 'Renew subscription', 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'renew' }
-            = link_to "That's ok, I don't want to renew", '#', data: { dismiss: 'alert', track_event: 'click_text', track_label: 'subscribable_action', track_property: 'thats_ok' }, 'aria-label' => 'Dismiss banner', class: 'btn btn-inverted-secondary ml-2'
+            = link_to _('Renew subscription'), 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn gl-button btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'renew' }
+            = link_to _('That is ok, I do not want to renew'), '#', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'thats_ok' }, 'aria-label' => 'Dismiss', class: 'btn gl-button btn-info btn-info-secondary gl-ml-3 js-close'

ee/spec/frontend/ee_trial_banner/ee_trial_banner_spec.js

+import Cookies from 'js-cookie';
+import initEETrialBanner from 'ee/ee_trial_banner';
+
+describe('EE gitlab license banner dismiss', () => {
+  const dismiss = () => {
+    const button = document.querySelector('.js-close');
+    button.click();
+  };
+
+  const renew = () => {
+    const button = document.querySelector('.gl-button');
+    button.click();
+  };
+
+  const isHidden = () =>
+    document.querySelector('.js-gitlab-ee-license-banner').classList.contains('hidden');
+
+  beforeEach(() => {
+    setFixtures(`
+    <div class="js-gitlab-ee-license-banner">
+      <button class="js-close"></button>
+      <a href="#" class="btn gl-button btn-primary"></a>
+    </div>
+    `);
+
+    initEETrialBanner();
+  });
+
+  it('should remove the license banner when a close button is clicked', () => {
+    expect(isHidden()).toBeFalsy();
+
+    dismiss();
+
+    expect(isHidden()).toBeTruthy();
+  });
+
+  it('calls Cookies.set for `show_ee_trial_banner` when a close button is clicked', () => {
+    jest.spyOn(Cookies, 'set');
+    dismiss();
+
+    expect(Cookies.set).toHaveBeenCalledWith('show_ee_trial_banner', 'false');
+  });
+
+  it('should not call Cookies.set for `show_ee_trial_banner` when a non close button is clicked', () => {
+    jest.spyOn(Cookies, 'set');
+    renew();
+
+    expect(Cookies.set).not.toHaveBeenCalled();
+  });
+});

locale/gitlab.pot

@@ -23426,6 +23426,9 @@ msgstr ""
 msgid "Rename/Move"
 msgstr ""
 
+msgid "Renew subscription"
+msgstr ""
+
 msgid "Reopen"
 msgstr ""
 
@@ -27605,6 +27608,9 @@ msgstr ""
 msgid "Thanks for your purchase!"
 msgstr ""
 
+msgid "That is ok, I do not want to renew"
+msgstr ""
+
 msgid "That's it, well done!"
 msgstr ""