Fix close button for subscription expired alert

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

@@ -94,8 +94,8 @@ export default class EETrialBanner {
   }
 
   handleTrialBannerDismiss(element) {
-    // Check if a close button was clicked inside the parent element
-    if (!element.classList.contains('js-close')) {
+    // Check if a close button or an element inside it was clicked inside the parent alert component
+    if (!element.closest('.js-close')) {
       return;
     }
 

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

@@ -4,8 +4,8 @@
 - if message.present? && subscribable.present?
   .container-fluid.container-limited.pt-3
     .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_action: 'click_button', track_label: 'dismiss_subscribable_banner' } }
-        = sprite_icon('close', css_class: 'gl-icon js-close')
+      %button.gl-alert-dismiss.js-close{ type: 'button', 'aria-label' => 'Dismiss', data: { track_action: 'click_button', track_label: 'dismiss_subscribable_banner' } }
+        = sprite_icon('close', css_class: 'gl-icon')
       .gl-display-flex.gl-flex-direction-row.gl-align-items-center
         .gl-pr-6.gl-pl-5.gl-pt-3.gl-display-none.gl-sm-display-block
           - if subscribable.block_changes?

ee/spec/features/admin/groups/admin_subscription_alerts_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Subscription expired notification', :js do
+  let(:admin) { create(:admin) }
+  let(:subscribable) { double(:license) }
+  let(:expected_content) { 'Your subscription expired' }
+
+  before do
+    stub_application_setting(signup_enabled: false)
+
+    sign_in(admin)
+    gitlab_enable_admin_mode_sign_in(admin)
+  end
+
+  context 'for group namespace' do
+    let(:message) { double(:message) }
+    let(:group) { create(:group) }
+    let(:plan_name) { ::Plan::PREMIUM }
+    let(:auto_renew) { false }
+    let!(:license) { create_current_license(cloud_licensing_enabled: false, plan: License::ULTIMATE_PLAN, expires_at: Date.current - 1.week) }
+
+    before do
+      allow(subscribable).to receive(:plan).and_return(plan_name)
+      allow(subscribable).to receive(:expires_at).and_return(Date.current - 1.week)
+      allow(subscribable).to receive(:auto_renew).and_return(auto_renew)
+
+      visit group_path(group)
+    end
+
+    it 'displays and dismisses alert' do
+      expect(page).to have_content(expected_content)
+
+      find('.gl-alert-dismiss.js-close').click
+      visit group_path(group)
+
+      expect(page).not_to have_content(expected_content)
+    end
+  end
+end

ee/spec/frontend/ee_trial_banner/ee_trial_banner_spec.js

@@ -7,6 +7,11 @@ describe('EE gitlab license banner dismiss', () => {
     button.click();
   };
 
+  const dismissOnChildElement = () => {
+    const childElement = document.querySelector('.child-element');
+    childElement.click();
+  };
+
   const renew = () => {
     const button = document.querySelector('.gl-button');
     button.click();
@@ -18,7 +23,7 @@ describe('EE gitlab license banner dismiss', () => {
   beforeEach(() => {
     setFixtures(`
     <div class="js-gitlab-ee-license-banner">
-      <button class="js-close"></button>
+      <button class="js-close"><span class="child-element">X</span></button>
       <a href="#" class="btn gl-button btn-confirm"></a>
     </div>
     `);
@@ -26,6 +31,10 @@ describe('EE gitlab license banner dismiss', () => {
     initEETrialBanner();
   });
 
+  afterEach(() => {
+    Cookies.remove('show_ee_trial_banner');
+  });
+
   it('should remove the license banner when a close button is clicked', () => {
     expect(isHidden()).toBeFalsy();
 
@@ -34,6 +43,14 @@ describe('EE gitlab license banner dismiss', () => {
     expect(isHidden()).toBeTruthy();
   });
 
+  it('should remove the license banner when an element inside close button is clicked', () => {
+    expect(isHidden()).toBeFalsy();
+
+    dismissOnChildElement();
+
+    expect(isHidden()).toBeTruthy();
+  });
+
   it('calls Cookies.set for `show_ee_trial_banner` when a close button is clicked', () => {
     jest.spyOn(Cookies, 'set');
     dismiss();