Add latest changes from gitlab-org/gitlab@master

46 files changed, 106 insertions, 148 deletions

diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index aced997bada..9b994b757f9 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -1,11 +1,12 @@
 - 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
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 0c3ce1f3fa4..5f12cd048b3 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/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
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index e8bcf479d70..be7055e6f7b 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/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) }
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index 55fd09ac203..5570c46c17f 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/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'
 
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index ad6e1668e2f..86391b980c0 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -1,8 +1,7 @@
 - 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')
 
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index 6fb3f26ff4f..b7d1aa6f944 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/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.')
 
diff --git a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index 3a4632affdc..ffd910b1b9d 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -1,8 +1,8 @@
 - 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
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index a08728f282a..95b3ad26e99 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/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
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index dedd9c03cd8..acb349e82b7 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/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:')
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index a12c3c7ac69..66d6b516a86 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,7 +1,7 @@
 - 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 }
 
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index 08bde4e88e2..f5d9d0e2587 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/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 }
diff --git a/app/views/import/shared/_errors.html.haml b/app/views/import/shared/_errors.html.haml
index 3e8a99c541a..aa6fcc445fd 100644
--- a/app/views/import/shared/_errors.html.haml
+++ b/app/views/import/shared/_errors.html.haml
@@ -1,8 +1,7 @@
 - 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
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index fdcee3670b7..8568e61aa33 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/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 }
 
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 5f8b21b2646..78dbe487297 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/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'
 
diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index b713b805009..f9d8a2d2989 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -1,7 +1,9 @@
 - 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
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 88cce9e71c0..66857dadb65 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -1,9 +1,8 @@
 - 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 }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 83a00ce4ab7..aada3283239 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/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 }
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 3d7b9e21d5d..629fa9c0e8a 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/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]
 
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 773137ff3f2..aefa4a41ab5 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/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
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 5cc83111b34..07bae7819a4 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/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
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 02b5fe00ad0..82d3bfbcfe6 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/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)
 
diff --git a/app/views/projects/diffs/_warning.html.haml b/app/views/projects/diffs/_warning.html.haml
index 3d31773694f..b3942782c91 100644
--- a/app/views/projects/diffs/_warning.html.haml
+++ b/app/views/projects/diffs/_warning.html.haml
@@ -1,7 +1,6 @@
-= 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
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 7933e0e07b3..9b64f158a1b 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -1,10 +1,9 @@
 - 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) }
diff --git a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
index 26bd65fbe26..f28b951ad62 100644
--- a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
+++ b/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 }
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 1efec0c017c..3d901c6f59b 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -1,8 +1,8 @@
 - if @teams_error_message
   = content_for :flash_message do
-    .gl-alert.gl-alert-danger
-      = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-      .gl-alert-body= @teams_error_message
+    = render Pajamas::AlertComponent.new(variant: :danger) do
+      .gl-alert-body
+        = @teams_error_message
 
 %p
   You aren’t a member of any team on the Mattermost instance at
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index d894aeaad65..49b7320d630 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/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.')
 
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index aa68fe031bb..ce5a042fbf8 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/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
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 225f8c7dd66..13aa8f56d20 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/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
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 3af95633214..bd344be49cd 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/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.')
 
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 4411bc474b8..3abab0281a0 100644
--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -4,7 +4,7 @@
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
   %button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
-    .js-spinner.d-none.gl-spinner.mr-1
+    = gl_loading_icon(inline: true, css_class: 'js-spinner gl-display-none gl-mr-2')
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index fbb5e59da33..d3e2854ff19 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -1,5 +1,5 @@
 - 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
 
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 7a47b504b7c..9ae7acab925 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/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.')
 
diff --git a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
index 35a3835a522..fdd4dfba616 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,9 +1,7 @@
 - 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
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 3ab2b969b75..850d58920db 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/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
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index d1e1a8a819d..195bd15f840 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,8 +1,7 @@
 - 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
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index 20dc1b41970..d30679b4305 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,8 +1,7 @@
 - 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
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 90612ba623f..7e1874f3416 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,8 +1,7 @@
 - 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
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 9cdff35ead2..96f015c7a4b 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,7 +1,5 @@
 - 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'
diff --git a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
index f21acd26ada..2294c44d49f 100644
--- a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
+++ b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
@@ -1,8 +1,9 @@
-= 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'
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index 366d4585435..e99c41f2496 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,7 +1,6 @@
-= 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.')
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 59625eb33ea..ce04e24b09f 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/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 }
 
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 3f6e7a6fb32..e0d5f738273 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/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
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index 6a58acf8c05..7ab82362e85 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/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
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 5b05fdb6019..4685a93a343 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -1,9 +1,8 @@
 - 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
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index 9fd55e215e2..365cee5fadc 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -1,18 +1,16 @@
 - 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'
diff --git a/app/views/shared/web_hooks/_hook_errors.html.haml b/app/views/shared/web_hooks/_hook_errors.html.haml
index 03f373783f8..a100a620cea 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/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