Create ViewComponent for gl-alert

- leverage ViewComponent benefits

app/views/admin/dashboard/_security_newsletter_callout.html.haml

 - return unless show_security_newsletter_user_callout?
 
-= render 'shared/global_alert',
-  title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
-  variant: :tip,
-  alert_class: 'js-security-newsletter-callout',
-  alert_data: { feature_id: Users::CalloutsHelper::SECURITY_NEWSLETTER_CALLOUT, dismiss_endpoint: callouts_path, defer_links: 'true' },
-  close_button_data: { testid: 'close-security-newsletter-callout' } do
+= render Pajamas::AlertComponent.new(variant: :tip,
+    title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
+    alert_class: 'js-security-newsletter-callout',
+    alert_data: { feature_id: Users::CalloutsHelper::SECURITY_NEWSLETTER_CALLOUT,
+                  dismiss_endpoint: callouts_path,
+                  defer_links: 'true' },
+    close_button_data: { testid: 'close-security-newsletter-callout' }) do
   .gl-alert-body
     = s_('AdminArea|Sign up for the GitLab Security Newsletter to get notified for security updates.')
   .gl-alert-actions

app/views/admin/groups/_form.html.haml

@@ -27,7 +27,7 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        = render 'shared/global_alert', dismissible: false do
+        = render Pajamas::AlertComponent.new(dismissible: false) do
           .gl-alert-body
             = render 'shared/group_tips'
     .form-actions

app/views/admin/projects/show.html.haml

@@ -14,11 +14,9 @@
 - if @project.last_repository_check_failed?
   .row
     .col-md-12
-      = render 'shared/global_alert',
-        variant: :danger,
+      = render Pajamas::AlertComponent.new(variant: :danger,
         alert_class: 'gl-mb-5',
-        alert_data: { testid: 'last-repository-check-failed-alert' },
-        is_container: true do
+        alert_data: { testid: 'last-repository-check-failed-alert' }) do
         .gl-alert-body
           - last_check_message = _("Last repository check (%{last_check_timestamp}) failed. See the 'repocheck.log' file for error messages.")
           - last_check_message = last_check_message % { last_check_timestamp: time_ago_with_tooltip(@project.last_repository_check_at) }

app/views/admin/runners/edit.html.haml

@@ -25,10 +25,9 @@
           - if project
             %tr
               %td
-                = render 'shared/global_alert',
-                  variant: :danger,
+                = render Pajamas::AlertComponent.new(variant: :danger,
                   dismissible: false,
-                  title: project.full_name do
+                  title: project.full_name) do
                   .gl-alert-actions
                     = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
 

app/views/admin/users/_users.html.haml

 - if registration_features_can_be_prompted?
-  = render 'shared/global_alert',
-    variant: :tip,
+  = render Pajamas::AlertComponent.new(variant: :tip,
     alert_class: 'gl-my-5',
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = render 'shared/registration_features_discovery_message', feature_title: s_('RegistrationFeatures|send emails to users')
 

app/views/clusters/clusters/_banner.html.haml

@@ -6,17 +6,13 @@
   %span.gl-spinner.gl-spinner-dark{ 'aria-label': 'Loading' }
   %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
-= render 'shared/global_alert',
-  variant: :warning,
-  alert_class: 'hidden js-cluster-api-unreachable',
-  close_button_class: 'js-close' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  alert_class: 'hidden js-cluster-api-unreachable') do
   .gl-alert-body
     = s_('ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct.')
 
-= render 'shared/global_alert',
-  variant: :warning,
-  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable',
-  close_button_class: 'js-close' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do
   .gl-alert-body
     = s_('ClusterIntegration|There was a problem authenticating with your cluster. Please ensure your CA Certificate and Token are valid.')
 

app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml

 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-= render 'shared/global_alert',
-  title: s_('ClusterIntegration|Did you know?'),
+
+= render Pajamas::AlertComponent.new(title: s_('ClusterIntegration|Did you know?'),
   alert_class: 'gcp-signup-offer',
-  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path } do
+  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do
   .gl-alert-body
     = s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
   .gl-alert-actions

app/views/groups/_import_group_from_another_instance_panel.html.haml

@@ -4,9 +4,8 @@
       %h4.gl-display-flex
         = s_('GroupsNew|Import groups from another instance of GitLab')
       = link_to _('History'), history_import_bulk_imports_path, class: 'gl-link gl-ml-auto'
-    = render 'shared/global_alert',
-      dismissible: false,
-      variant: :warning do
+    = render Pajamas::AlertComponent.new(dismissible: false,
+      variant: :warning) do
       .gl-alert-body
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - docs_link_end = '</a>'.html_safe

app/views/groups/settings/_export.html.haml

@@ -5,7 +5,7 @@
 .sub-section
   %h4= s_('GroupSettings|Export group')
   %p= _('Export this group with all related data.')
-  = render 'shared/global_alert', variant: :warning, dismissible: false, alert_class: 'gl-mb-4' do
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do
     .gl-alert-body
       - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
       - docs_link_end = '</a>'.html_safe
@@ -14,7 +14,7 @@
     - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
     = export_information.html_safe
     = link_to _('Learn more.'), help_page_path('user/group/settings/import_export.md'), target: '_blank', rel: 'noopener noreferrer'
-  = render 'shared/global_alert', dismissible: false, alert_class: 'gl-mb-5' do
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
     .gl-alert-body
       %p.gl-mb-0
         %p= _('The following items will be exported:')

app/views/groups/settings/_remove_button.html.haml

 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.paid?
-  = render 'shared/global_alert', dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' } do
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do
     .gl-alert-body
       = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 

app/views/groups/settings/_transfer.html.haml

@@ -13,7 +13,7 @@
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group's current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
     - if group.paid?
-      = render 'shared/global_alert', dismissible: false, alert_class: 'gl-mb-5' do
+      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
         .gl-alert-body
           = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
     .js-transfer-group-form{ data: initial_data }

app/views/import/shared/_errors.html.haml

 - if @errors.present?
-  = render 'shared/global_alert',
-    variant: :danger,
+  = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5' do
+    alert_class: 'gl-mb-5') do
     .gl-alert-body
       - @errors.each do |error|
         = error

app/views/profiles/accounts/show.html.haml

@@ -2,18 +2,15 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 - if current_user.ldap_user?
-  = render 'shared/global_alert',
-    variant: :info,
-    alert_class: 'gl-my-5',
-    dismissible: false do
+  = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
+    dismissible: false) do
     .gl-alert-body
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
-  = render 'shared/global_alert',
-    variant: :success,
+  = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-my-5',
-    close_button_class: 'js-close-2fa-enabled-success-alert' do
+    close_button_class: 'js-close-2fa-enabled-success-alert') do
     .gl-alert-body
       = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 

app/views/profiles/two_factor_auths/show.html.haml

@@ -40,7 +40,9 @@
                 = _('Time based: Yes')
         = form_tag profile_two_factor_auth_path, method: :post do |f|
           - if @error
-            = render 'shared/global_alert', title: @error[:message], variant: :danger, dismissible: false do
+            = render Pajamas::AlertComponent.new(title: @error[:message],
+              variant: :danger,
+              dismissible: false) do
               .gl-alert-body
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 

app/views/projects/_deletion_failed.html.haml

 - project = local_assigns.fetch(:project)
 - return unless project.delete_error.present?
 
-= render 'shared/global_alert', variant: :warning, dismissible: false, alert_class: 'project-deletion-failed-message' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  dismissible: false,
+  alert_class: 'project-deletion-failed-message') do
   .gl-alert-body
     This project was scheduled for deletion, but failed with the following message:
     = project.delete_error

app/views/projects/_last_push.html.haml

 - event = last_push_event
 - if event && show_last_push_widget?(event)
-  = render 'shared/global_alert',
-    variant: :success,
+  = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-mt-3',
-    close_button_class: 'js-close-banner' do
+    close_button_class: 'js-close-banner') do
     .gl-alert-body
       %span= s_("LastPushEvent|You pushed to")
       %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }

app/views/projects/_new_project_fields.html.haml

@@ -37,7 +37,9 @@
     - link_start_group_path = '<a href="%{path}">' % { path: new_group_path }
     - project_tip = s_('ProjectsNew|Want to house several dependent projects under the same namespace? %{link_start}Create a group.%{link_end}') % { link_start: link_start_group_path, link_end: '</a>' }
     = project_tip.html_safe
-= render 'shared/global_alert', alert_class: "gl-mb-4 gl-display-none js-user-readme-repo", dismissible: false, variant: :success do
+= render Pajamas::AlertComponent.new(alert_class: "gl-mb-4 gl-display-none js-user-readme-repo",
+  dismissible: false,
+  variant: :success) do
   .gl-alert-body
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/profile/index', anchor: 'add-details-to-your-profile-with-a-readme') }
     = html_escape(_('%{project_path} is a project that you can use to add a README to your GitLab profile. Create a public project and initialize the repository with a README to get started. %{help_link_start}Learn more.%{help_link_end}')) % { project_path: "<strong>#{current_user.username} / #{current_user.username}</strong>".html_safe, help_link_start: help_link_start, help_link_end: '</a>'.html_safe }

app/views/projects/blob/_upload.html.haml

@@ -15,10 +15,9 @@
                 #{ dropzone_text.html_safe }
 
           %br
-          = render 'shared/global_alert',
-            variant: :danger,
+          = render Pajamas::AlertComponent.new(variant: :danger,
             alert_class: 'dropzone-alerts gl-alert gl-alert-danger gl-mb-5 data gl-display-none',
-            dismissible: false
+            dismissible: false)
 
           = render 'shared/new_commit_form', placeholder: placeholder, ref: local_assigns[:ref]
 

app/views/projects/blob/edit.html.haml

@@ -4,10 +4,9 @@
   - webpack_preload_asset_tag('monaco')
 
 - if @conflict
-  = render 'shared/global_alert',
-    alert_class: 'gl-mb-5 gl-mt-5',
+  = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5 gl-mt-5',
     variant: :danger,
-    dismissible: false do
+    dismissible: false) do
     - blob_url = project_blob_path(@project, @id)
     - external_link_icon = content_tag 'span', { aria: { label: _('Opens new window') }} do
       - sprite_icon('external-link', css_class: 'gl-icon').html_safe

app/views/projects/branches/new.html.haml

@@ -2,9 +2,7 @@
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
-  = render 'shared/global_alert',
-    variant: :danger,
-    close_button_class: 'js-close' do
+  = render Pajamas::AlertComponent.new(variant: :danger) do
     .gl-alert-body
       = @error
 %h3.page-title

app/views/projects/commits/_commits.html.haml

@@ -35,9 +35,8 @@
 
 - if hidden > 0
   %li
-    = render 'shared/global_alert',
-      variant: :warning,
-      dismissible: false do
+    = render Pajamas::AlertComponent.new(variant: :warning,
+      dismissible: false) do
       .gl-alert-body
         = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)
 

app/views/projects/diffs/_warning.html.haml

-= render 'shared/global_alert',
-  title: _('Too many changes to show.'),
+= render Pajamas::AlertComponent.new(title: _('Too many changes to show.'),
   variant: :warning,
-  alert_class: 'gl-mb-5' do
+  alert_class: 'gl-mb-5') do
   .gl-alert-body
     = html_escape(_("To preserve performance only %{strong_open}%{display_size} of %{real_size}%{strong_close} files are displayed.")) % { display_size: diff_files.size, real_size: diff_files.real_size, strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
   .gl-alert-actions

app/views/projects/forks/error.html.haml

 - page_title _("Fork project")
 - if @forked_project && !@forked_project.saved?
-  = render 'shared/global_alert',
-    title: _('Fork Error!'),
+  = render Pajamas::AlertComponent.new(title: _('Fork Error!'),
     variant: :danger,
     alert_class: 'gl-mt-5',
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       %p
         = _("You tried to fork %{link_to_the_project} but it failed for the following reason:").html_safe % { link_to_the_project: link_to_project(@project) }

app/views/projects/issues/_alert_moved_from_service_desk.html.haml

@@ -2,9 +2,7 @@
 - service_desk_link_url = help_page_path('user/project/service_desk')
 - service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
 
-= render 'shared/global_alert',
-  variant: :warning,
-  close_button_class: 'js-close',
-  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do
   .gl-alert-body.gl-mr-3
     = s_('This project does not have %{service_desk_link_start}Service Desk%{service_desk_link_end} enabled, so the user who created the issue will no longer receive email notifications about new activity.').html_safe % { service_desk_link_start: service_desk_link_start, service_desk_link_end: '</a>'.html_safe }

app/views/projects/merge_requests/_mr_title.html.haml

@@ -6,10 +6,9 @@
 
 = cache(cache_key, expires_in: 1.day) do
   - if @merge_request.closed_or_merged_without_fork?
-    = render 'shared/global_alert',
-      alert_class: 'gl-mb-5',
+    = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5',
       variant: :danger,
-      dismissible: false do
+      dismissible: false) do
       .gl-alert-body
         = _('The source project of this merge request has been removed.')
 

app/views/projects/merge_requests/invalid.html.haml

@@ -9,9 +9,8 @@
   = render "projects/merge_requests/mr_title"
   = render "projects/merge_requests/mr_box"
 
-  = render 'shared/global_alert',
-    variant: :danger,
-    dismissible: false do
+  = render Pajamas::AlertComponent.new(variant: :danger,
+    dismissible: false) do
     .gl-alert-body
       - if @merge_request.for_fork? && !@merge_request.source_project
         = err_fork_project_removed

app/views/projects/milestones/show.html.haml

@@ -12,11 +12,9 @@
 = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count == 0
-  = render 'shared/global_alert',
-    variant: :info,
-    dismissible: false,
+  = render Pajamas::AlertComponent.new(dismissible: false,
     alert_data: { testid: 'no-issues-alert' },
-    alert_class: 'gl-mt-3 gl-mb-5' do
+    alert_class: 'gl-mt-3 gl-mb-5') do
     .gl-alert-body
       = _('Assign some issues to this milestone.')
 - else

app/views/projects/mirrors/_mirror_repos.html.haml

@@ -37,9 +37,7 @@
           .panel-footer
             = f.submit _('Mirror repository'), class: 'gl-button btn btn-confirm js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
     - else
-      = render 'shared/global_alert',
-        dismissible: false,
-        variant: :info do
+      = render Pajamas::AlertComponent.new(dismissible: false) do
         .gl-alert-body
           = _('Mirror settings are only available to GitLab administrators.')
 

app/views/projects/pages_domains/_form.html.haml

 - if domain_presenter.errors.any?
-  = render 'shared/global_alert', variant: :danger, dismissible: false do
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
     - domain_presenter.errors.full_messages.each do |msg|
       = msg
 

app/views/projects/services/_form.html.haml

@@ -5,10 +5,9 @@
   -# When using integration.activate_disabled_reason[:trackers], it's potentially insecure to use the raw records
   -# when passed directly to the frontend. Only use specific fields that are needed for render.
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
-  = render 'shared/global_alert',
-    title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
+  = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 

app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml

 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
-  = render 'shared/global_alert',
-    variant: :info,
-    alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner',
+  = render Pajamas::AlertComponent.new(alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner',
     close_button_class: 'hide-auto-devops-implicitly-enabled-banner',
-    close_button_data: { project_id: project.id } do
+    close_button_data: { project_id: project.id }) do
     .gl-alert-body
       = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
       - unless Gitlab.config.registry.enabled

app/views/shared/_import_form.html.haml

@@ -8,11 +8,10 @@
         = _('Git repository URL')
     = f.text_field :import_url, value: import_url.sanitized_url,
         autocomplete: 'off', class: 'form-control gl-form-input', placeholder: 'https://gitlab.company.com/group/project.git', required: true
-    = render 'shared/global_alert',
-      variant: :danger,
+    = render Pajamas::AlertComponent.new(variant: :danger,
       alert_class: 'gl-mt-3 js-import-url-error hide',
       dismissible: false,
-      close_button_class: 'js-close-2fa-enabled-success-alert' do
+      close_button_class: 'js-close-2fa-enabled-success-alert') do
       .gl-alert-body
         = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.')
   .row

app/views/shared/_no_password.html.haml

 - if show_no_password_message?
-  = render 'shared/global_alert',
-    variant: :warning,
+  = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-password-message',
-    close_button_class: 'js-hide-no-password-message' do
+    close_button_class: 'js-hide-no-password-message') do
     .gl-alert-body
       = no_password_message
     .gl-alert-actions

app/views/shared/_no_ssh.html.haml

 - if show_no_ssh_key_message?
-  = render 'shared/global_alert',
-    variant: :warning,
+  = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-ssh-message',
-    close_button_class: 'js-hide-no-ssh-message' do
+    close_button_class: 'js-hide-no-ssh-message') do
     .gl-alert-body
       = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
     .gl-alert-actions

app/views/shared/_project_limit.html.haml

 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  = render 'shared/global_alert',
-    variant: :warning,
+  = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    alert_class: 'project-limit-message' do
+    alert_class: 'project-limit-message') do
     .gl-alert-body
       = _("You won't be able to create new projects because you have reached your project limit.")
     .gl-alert-actions

app/views/shared/_service_ping_consent.html.haml

 - if session[:ask_for_usage_stats_consent]
-  = render 'shared/global_alert',
-    variant: :info,
-    alert_class: 'service-ping-consent-message' do
+  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do
     .gl-alert-body
       - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
       - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'

app/views/shared/_two_factor_auth_recovery_settings_check.html.haml

-= render 'shared/global_alert',
-  variant: :warning,
+= render Pajamas::AlertComponent.new(variant: :warning,
   alert_class: 'js-recovery-settings-callout gl-mt-5',
-  alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK, dismiss_endpoint: callouts_path, defer_links: 'true' },
-  close_button_data: { testid: 'close-account-recovery-regular-check-callout' } do
+  alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK,
+                dismiss_endpoint: callouts_path,
+                defer_links: 'true' },
+  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do
   .gl-alert-body
     = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.')
     = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer'

app/views/shared/errors/_gitaly_unavailable.html.haml

-= render 'shared/global_alert',
-  alert_class: 'gl-my-5',
+= render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
   variant: :danger,
   dismissible: false,
-  title: reason do
+  title: reason) do
   .gl-alert-body
     = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')

app/views/shared/hook_logs/_content.html.haml

@@ -10,10 +10,9 @@
 %hr
 
 - if hook_log.internal_error_message.present?
-  = render 'shared/global_alert',
-    title: _('Internal error occurred while delivering this webhook.'),
+  = render Pajamas::AlertComponent.new(title: _('Internal error occurred while delivering this webhook.'),
     variant: :danger,
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = _('Error: %{error}') % { error: hook_log.internal_error_message }
 

app/views/shared/issuable/_form.html.haml

@@ -6,10 +6,9 @@
 = form_errors(issuable)
 
 - if @conflict
-  = render 'shared/global_alert',
-    variant: :danger,
+  = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5' do
+    alert_class: 'gl-mb-5') do
     .gl-alert-body
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
       Please check out

app/views/shared/issuable/_label_page_create.html.haml

@@ -6,7 +6,7 @@
 .dropdown-page-two.dropdown-new-label
   = dropdown_title(create_label_title(subject), options: { back: true, close: show_close })
   = dropdown_content do
-    = render 'shared/global_alert', variant: :danger, alert_class: 'js-label-error gl-mb-3', dismissible: false
+    = render Pajamas::AlertComponent.new(variant: :danger, alert_class: 'js-label-error gl-mb-3', dismissible: false)
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') }
     .suggest-colors.suggest-colors-dropdown
       = render_suggested_colors

app/views/shared/milestones/_milestone_complete_alert.html.haml

 - milestone = local_assigns[:milestone]
 
 - if milestone.complete? && milestone.active?
-  = render 'shared/global_alert',
-    variant: :success,
+  = render Pajamas::AlertComponent.new(variant: :success,
     alert_data: { testid: 'all-issues-closed-alert' },
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
     = yield

app/views/shared/runners/_runner_type_alert.html.haml

 - alert_class = 'gl-mb-5'
 
 - if runner.group_type?
-  = render 'shared/global_alert',
-    alert_class: alert_class,
+  = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is available to all projects and subgroups in a group.'),
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
 - else
-  = render 'shared/global_alert',
-    alert_class: alert_class,
+  = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is associated with specific projects.'),
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = s_('Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'

app/views/shared/web_hooks/_hook_errors.html.haml

@@ -10,17 +10,13 @@
     limit: hook.rate_limit,
     support_link_start: link_start % { url: support_path },
     support_link_end: link_end }
-  = render 'shared/global_alert',
-    title: s_('Webhooks|Webhook was automatically disabled'),
-    variant: :danger,
-    close_button_class: 'js-close' do
+  = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook was automatically disabled'),
+    variant: :danger) do
     .gl-alert-body
       = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
 - elsif hook.permanently_disabled?
-  = render 'shared/global_alert',
-    title: s_('Webhooks|Webhook failed to connect'),
-    variant: :danger,
-    close_button_class: 'js-close' do
+  = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook failed to connect'),
+    variant: :danger) do
     .gl-alert-body
       = s_('Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % { strong_start: strong_start, strong_end: strong_end }
 - elsif hook.temporarily_disabled?
@@ -30,9 +26,7 @@
     retry_time: time_interval_in_words(hook.disabled_until - Time.now),
     help_link_start: link_start % { url: help_path },
     help_link_end: link_end }
-  = render 'shared/global_alert',
-    title: s_('Webhooks|Webhook fails to connect'),
-    variant: :warning,
-    close_button_class: 'js-close' do
+  = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook fails to connect'),
+    variant: :warning) do
     .gl-alert-body
       = s_('Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % placeholders

ee/app/views/admin/application_settings/_elasticsearch_form.html.haml

@@ -21,10 +21,9 @@
           .gl-card-body
             - halted_migrations = elasticsearch_available && Elastic::DataMigrationService.halted_migrations?
             - if halted_migrations
-              = render 'shared/global_alert',
-                variant: :warning,
+              = render Pajamas::AlertComponent.new(variant: :warning,
                 title: _('Elasticsearch migration halted'),
-                alert_class: 'gl-my-3' do
+                alert_class: 'gl-my-3') do
                 .gl-alert-body
                   = html_escape_once(_('Check the %{code_open}elasticsearch.log%{code_close} file to debug why the migration halted and make any changes before retrying the migration. When you fix the cause of the failure, select %{strong_open}Retry migration%{strong_close}, and the migration is scheduled to retry in the background.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe, code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
                   = link_to _('Learn more.'), help_page_path('integration/elasticsearch', anchor: 'advanced-search-migrations')

ee/app/views/admin/application_settings/advanced_search.html.haml

@@ -11,10 +11,9 @@
 - if @elasticsearch_warn_if_not_using_aliases
   - content_for :page_level_alert do
     %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-      = render 'shared/global_alert',
-        title: s_('AdvancedSearch|Reindex required'),
+      = render Pajamas::AlertComponent.new(title: s_('AdvancedSearch|Reindex required'),
         dismissible: false,
-        variant: :warning do
+        variant: :warning) do
         .gl-alert-body
           = s_('Introduced in GitLab 13.1, before using %{reindexing_link_start}zero-downtime reindexing%{link_end} and %{migrations_link_start}Advanced Search migrations%{link_end}, you need to %{recreate_link_start}recreate your index%{link_end}.').html_safe % { reindexing_link_start: help_zero_downtime_reindexing_link_start, migrations_link_start: help_advanced_search_migrations_link_start, recreate_link_start: help_recreate_index_link_start, link_end: '</a>'.html_safe }
 

ee/app/views/groups/saml_providers/_response_debug.html.haml

 = bootstrap_form_for @saml_response_check.tap(&:valid?), url: '#', html: { class: 'gl-show-field-errors' } do |f|
   - if f.object.valid?
-    = render 'shared/global_alert',
-      variant: :success do
+    = render Pajamas::AlertComponent.new(variant: :success) do
       .gl-alert-body
         = s_('GroupSAML|Valid SAML Response')
   = f.errors_on :xml_response, hide_attribute_name: true

ee/app/views/groups/usage_quotas/_product_purchase_success_alert.html.haml

-= render 'shared/global_alert',
-  title: _('Thanks for your purchase!'),
+= render Pajamas::AlertComponent.new(title: _('Thanks for your purchase!'),
   variant: :success,
-  close_button_data: { testid: 'close-product-purchase-success' } do
+  close_button_data: { testid: 'close-product-purchase-success' }) do
   .gl-alert-body
     = _('You have successfully purchased %{product}. You\'ll receive a receipt by email. Your purchase may take a minute to sync, so refresh the page if you don\'t see it yet.') % { product: product_name }

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

@@ -3,10 +3,9 @@
 
 - if message.present? && subscribable.present?
   .js-gitlab-ee-license-banner.hidden{ class: [container_class, @content_class, 'gl-pt-5!'] }
-    = render 'shared/global_alert',
-      variant: :danger,
+    = render Pajamas::AlertComponent.new(variant: :danger,
       title: message,
-      alert_data: { license_expiry: subscribable.expires_at, defer_links: "true" } do
+      alert_data: { license_expiry: subscribable.expires_at, defer_links: "true" }) do
       .gl-alert-body
         - if subscribable.block_changes?
           = link_to_button_style(path: renew_subscription_path, track_property: 'renew')

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

 - return unless show_seats_count_alert?
 .container.container-limited.pt-3
-  = render 'shared/global_alert',
-    alert_class: 'js-approaching-seats-count-threshold',
-    alert_data: { dismiss_endpoint: group_callouts_path, feature_id: Users::GroupCalloutsHelper::APPROACHING_SEAT_COUNT_THRESHOLD, group_id: root_namespace.id },
+  = render Pajamas::AlertComponent.new(alert_class: 'js-approaching-seats-count-threshold',
+    alert_data: { dismiss_endpoint: group_callouts_path,
+                  feature_id: Users::GroupCalloutsHelper::APPROACHING_SEAT_COUNT_THRESHOLD,
+                  group_id: root_namespace.id },
     title: _('%{group_name} is approaching the limit of available seats') % { group_name: group_name },
-    close_button_data: { testid: 'approaching-seats-count-threshold-alert-dismiss' } do
+    close_button_data: { testid: 'approaching-seats-count-threshold-alert-dismiss' }) do
     .gl-alert-body
       = _('Your subscription has %{remaining_seats_count} out of %{total_seats_count} seats remaining. Even if you reach the number of seats in your subscription, you can continue to add users, and GitLab will bill you for the overage.') % { remaining_seats_count: remaining_seats_count, total_seats_count: total_seats_count }
       = learn_more_link

ee/app/views/profiles/personal_access_tokens/_token_expiry_notification.html.haml

@@ -3,10 +3,11 @@
 - expired_tokens = active_tokens.select(&:expired_but_not_enforced?)
 - return unless expired_tokens.present?
 
-= render 'shared/global_alert',
-  title: n_('%d token has expired', '%d tokens have expired', expired_tokens.size) % expired_tokens.size,
+= render Pajamas::AlertComponent.new(title: n_('%d token has expired', '%d tokens have expired', expired_tokens.size) % expired_tokens.size,
   alert_class: 'gl-mb-3 js-token-expiry-callout',
-  alert_data: { feature_id: "profile_personal_access_token_expiry", dismiss_endpoint: callouts_path, defer_links: 'true' },
-  variant: :danger do
+  alert_data: { feature_id: "profile_personal_access_token_expiry",
+                dismiss_endpoint: callouts_path,
+                defer_links: 'true' },
+  variant: :danger) do
   .gl-alert-body
     = _('Until revoked, expired personal access tokens pose a security risk.')

ee/app/views/projects/services/gitlab_slack_application/_top.html.haml

 - if session.delete(:slack_install_success)
-  = render 'shared/global_alert',
-    title: s_('SlackIntegration|GitLab for Slack was successfully installed.'),
-    variant: :success do
+  = render Pajamas::AlertComponent.new(title: s_('SlackIntegration|GitLab for Slack was successfully installed.'),
+    variant: :success) do
     .gl-alert-body
       = s_('SlackIntegration|You can now close this window and go to your Slack workspace.')

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

@@ -3,12 +3,11 @@
 
 = content_for :page_level_alert do
   %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-    = render 'shared/global_alert',
-      title: payload.subject,
+    = render Pajamas::AlertComponent.new(title: payload.subject,
       variant: payload.display_error_version? ? :danger : :warning,
       alert_class: 'gl-my-5',
       alert_data: { testid: 'manual-quarterly-co-term-banner' },
-      dismissible: false do
+      dismissible: false) do
       .gl-alert-body
         = payload.body
       .gl-alert-actions

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

@@ -3,12 +3,11 @@
 
 = content_for :page_level_alert do
   %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-    = render 'shared/global_alert',
-      title: payload.subject,
+    = render Pajamas::AlertComponent.new(title: payload.subject,
       variant: payload.display_error_version? ? :danger : :warning,
       alert_class: 'gl-my-5',
       alert_data: { testid: 'manual-renewal-banner' },
-      dismissible: false do
+      dismissible: false) do
       .gl-alert-body
         = payload.body
       .gl-alert-actions

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

@@ -10,11 +10,11 @@
 - users_pending_approval_link_start = link_start.html_safe % { url: help_page_path('user/group/index', anchor: 'approve-pending-members-for-a-group') }
 - link_end = '</a>'.html_safe
 
-= render 'shared/global_alert',
-  title: s_('NamespaceUserCap|Your group has reached its billable member limit'),
+= render Pajamas::AlertComponent.new(title: s_('NamespaceUserCap|Your group has reached its billable member limit'),
   variant: :warning,
   close_button_class: 'js-namespace-user-cap-alert-dismiss',
-  close_button_data: { cookie_id: hide_user_cap_alert_cookie_id(root_namespace), testid: 'namespace_user_cap_alert_dismiss' } do
+  close_button_data: { cookie_id: hide_user_cap_alert_cookie_id(root_namespace),
+                       testid: 'namespace_user_cap_alert_dismiss' }) do
   .gl-alert-body
     = s_('NamespaceUserCap|Pending users must be reviewed and approved by a group owner. Learn more about %{user_caps_link_start}user caps%{link_end} and %{users_pending_approval_link_start}users pending approval%{link_end}.').html_safe % { user_caps_link_start: user_caps_link_start, users_pending_approval_link_start: users_pending_approval_link_start, link_end: link_end }
   .gl-alert-actions

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

@@ -5,11 +5,12 @@
 - help_link_end = '</a>'.html_safe
 
 %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-  = render 'shared/global_alert',
-    variant: :warning,
+  = render Pajamas::AlertComponent.new(variant: :warning,
     title: s_('Admin|Your instance has reached its user cap'),
     alert_class: 'js-new-user-signups-cap-reached',
-    alert_data: { feature_id: ::EE::Users::CalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED, dismiss_endpoint: callouts_path, defer_links: "true" } do
+    alert_data: { feature_id: ::EE::Users::CalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED,
+                  dismiss_endpoint: callouts_path,
+                  defer_links: "true" }) do
     .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

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

@@ -2,8 +2,7 @@
 
 - content_for :user_over_limit_free_plan_alert do
   .container-fluid.container-limited{ class: "gl-pb-2! gl-pt-6! #{@content_class}" }
-    = render 'shared/global_alert',
-      alert_class: 'js-user-over-limit-free-plan-alert',
+    = render Pajamas::AlertComponent.new(alert_class: 'js-user-over-limit-free-plan-alert',
       alert_data: { track_action: 'render',
                     track_label: 'user_limit_banner',
                     dismiss_endpoint: group_callouts_path,
@@ -13,7 +12,7 @@
       title: _('From June 22, 2022 (GitLab 15.1), free personal namespaces and top-level groups will be limited to %{free_limit} members') % { free_limit: ::Plan::FREE_USER_LIMIT },
       close_button_data: { track_action: 'dismiss_banner',
                            track_label: 'user_limit_banner',
-                           testid: 'user-over-limit-free-plan-dismiss' } do
+                           testid: 'user-over-limit-free-plan-dismiss' }) do
       .gl-alert-body
         = _('Your %{doc_link_start}namespace%{doc_link_end}, %{strong_start}%{namespace_name}%{strong_end} has more than %{free_limit} members. From June 22, 2022, it will be limited to %{free_limit}, and the remaining members will get a %{link_start}status of Over limit%{link_end} and lose access to the namespace. You can go to the Usage Quotas page to manage which %{free_limit} members will remain in your namespace. To get more members, an owner can start a trial or upgrade to a paid tier.').html_safe % { namespace_name: source.root_ancestor.name,
           free_limit: ::Plan::FREE_USER_LIMIT,

ee/app/views/shared/billings/_eoa_bronze_plan_banner.html.haml

 - if show_eoa_bronze_plan_banner?(namespace)
   .container-fluid.container-limited.pt-3
-    = render 'shared/global_alert',
-      title: s_("BillingPlans|End of availability for the Bronze Plan"),
+    = render Pajamas::AlertComponent.new(title: s_("BillingPlans|End of availability for the Bronze Plan"),
       alert_class: 'gl-mt-5 js-eoa-bronze-plan-banner',
-      alert_data: { feature_id: ::EE::Users::CalloutsHelper::EOA_BRONZE_PLAN_BANNER, dismiss_endpoint: callouts_path } do
+      alert_data: { feature_id: ::EE::Users::CalloutsHelper::EOA_BRONZE_PLAN_BANNER,
+                    dismiss_endpoint: callouts_path }) do
       .gl-alert-body
         - announcement_link = external_link("announcement blog", "https://about.gitlab.com/blog/2021/01/26/new-gitlab-product-subscription-model")
         = s_("BillingPlans|While GitLab is ending availability of the Bronze plan, you can still renew your Bronze subscription one additional time before %{eoa_bronze_plan_end_date}. We are also offering a limited time free upgrade to our Premium Plan (up to 25 users)! Learn more about the changes and offers in our %{announcement_link}.").html_safe % { announcement_link: announcement_link, eoa_bronze_plan_end_date: eoa_bronze_plan_end_date.in_time_zone.to_date.to_s(:medium) }

ee/app/views/shared/billings/customers_dot_unavailable.html.haml

 - page_title _("Billing")
 
-= render 'shared/global_alert',
-  title: _('Subscription service outage'),
+= render Pajamas::AlertComponent.new(title: _('Subscription service outage'),
   variant: :danger,
-  is_contained: true,
   alert_class: 'gl-mb-5',
-  dismissible: false do
+  dismissible: false) do
   .gl-alert-body
     = html_escape(_("The GitLab subscription service (customers.gitlab.com) is currently experiencing an outage. You can monitor the status and get updates at %{linkStart}status.gitlab.com%{linkEnd}.")) % { linkStart: "<a href=\"#{::EE::GITLAB_COM_STATUS_URL}\">".html_safe, linkEnd: '</a>'.html_safe }