Merge branch...

Merge branch '325409-glalert-update-markup-in-ee-app-views-shared-_new_user_signups_cap_reached_alert-html-haml' into 'master'

Update "new user signups cap reached alert" to GlAlert

See merge request gitlab-org/gitlab!63222

ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml

 - return unless show_new_user_signups_cap_reached?
 
 - user_cap_help_url = help_page_path('user/admin_area/settings/sign_up_restrictions.md')
-- help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_cap_help_url }
+- help_link_start = '<a class="gl-link" href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: user_cap_help_url }
 - help_link_end = '</a>'.html_safe
 
 %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-  .gl-alert.gl-alert-warning.js-new-user-signups-cap-reached{ role: 'alert', data: { feature_id: ::EE::UserCalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED, dismiss_endpoint: user_callouts_path, defer_links: "true" } }
-    = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-    %button.js-close.gl-alert-dismiss.gl-cursor-pointer{ type: 'button', 'aria-label' => _('Dismiss') }
-      = sprite_icon('close', css_class: 'gl-icon')
-    .gl-alert-body
-      %h4.gl-alert-title= s_('Admin|Your instance has reached its user cap')
-      = s_('Admin|Additional users must be reviewed and approved by a system administrator. Learn more about %{help_link_start}usage caps%{help_link_end}.').html_safe % { help_link_start: help_link_start, help_link_end: help_link_end }
-    - if User.blocked_pending_approval.count > 0
-      .gl-alert-actions
-        = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-info gl-button'
+  .gl-alert.gl-alert-max-content.gl-alert-warning.js-new-user-signups-cap-reached{ role: 'alert', data: { feature_id: ::EE::UserCalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED, dismiss_endpoint: user_callouts_path, defer_links: "true" } }
+    .gl-alert-container
+      = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+      %button.js-close.btn.gl-dismiss-btn.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon{ type: 'button', 'aria-label' => _('Dismiss') }
+        = sprite_icon('close', css_class: 'gl-button-icon gl-icon')
+      .gl-alert-content
+        %h4.gl-alert-title= s_('Admin|Your instance has reached its user cap')
+        .gl-alert-body
+          = s_('Admin|Additional users must be reviewed and approved by a system administrator. Learn more about %{help_link_start}usage caps%{help_link_end}.').html_safe % { help_link_start: help_link_start, help_link_end: help_link_end }
+        - if User.blocked_pending_approval.count > 0
+          .gl-alert-actions
+            = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-confirm gl-button'

ee/spec/features/admin/admin_show_new_user_signups_cap_alert_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe 'displays new user signups cap alert', :js do
       expect(page).to have_link('usage caps', href: help_page_href)
 
       visit root_dashboard_path
-      find('.js-new-user-signups-cap-reached .gl-alert-dismiss').click
+      find('.js-new-user-signups-cap-reached .gl-dismiss-btn').click
 
       expect(page).not_to have_content(expected_content)
       expect(page).not_to have_link('usage caps', href: help_page_href)