Add latest changes from gitlab-org/gitlab@master

55 files changed, 142 insertions, 132 deletions

diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/link.vue b/app/assets/javascripts/content_editor/components/bubble_menus/link.vue
index abd225c0b1a..dae0bc63b5a 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/link.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/link.vue
@@ -60,7 +60,7 @@ export default {
     async endEditingLink() {
       this.isEditing = false;
 
-      this.linkHref = await this.contentEditor.resolveLink(this.linkCanonicalSrc);
+      this.linkHref = await this.contentEditor.resolveUrl(this.linkCanonicalSrc);
 
       if (!this.linkCanonicalSrc && !this.linkHref) {
         this.removeLink();
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/media.vue b/app/assets/javascripts/content_editor/components/bubble_menus/media.vue
index d1bc5c83948..a36a860c440 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/media.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/media.vue
@@ -114,7 +114,7 @@ export default {
     async saveEditedMedia() {
       this.isUpdating = true;
 
-      this.mediaSrc = await this.contentEditor.resolveLink(this.mediaCanonicalSrc);
+      this.mediaSrc = await this.contentEditor.resolveUrl(this.mediaCanonicalSrc);
 
       const position = this.tiptapEditor.state.selection.from;
 
@@ -151,7 +151,7 @@ export default {
       this.mediaAlt = alt;
       this.mediaCanonicalSrc = canonicalSrc || src;
       this.isUploading = uploading;
-      this.mediaSrc = await this.contentEditor.resolveLink(this.mediaCanonicalSrc);
+      this.mediaSrc = await this.contentEditor.resolveUrl(this.mediaCanonicalSrc);
 
       this.isUpdating = false;
     },
diff --git a/app/assets/javascripts/content_editor/services/content_editor.js b/app/assets/javascripts/content_editor/services/content_editor.js
index 5078668c620..6eac5a63439 100644
--- a/app/assets/javascripts/content_editor/services/content_editor.js
+++ b/app/assets/javascripts/content_editor/services/content_editor.js
@@ -43,7 +43,7 @@ export class ContentEditor {
     });
   }
 
-  resolveAssetUrl(canonicalSrc) {
+  resolveUrl(canonicalSrc) {
     return this._assetResolver.resolveUrl(canonicalSrc);
   }
 
diff --git a/app/components/diffs/overflow_warning_component.html.haml b/app/components/diffs/overflow_warning_component.html.haml
index 907d066e73d..b184fa1d527 100644
--- a/app/components/diffs/overflow_warning_component.html.haml
+++ b/app/components/diffs/overflow_warning_component.html.haml
@@ -1,9 +1,9 @@
 = render Pajamas::AlertComponent.new(title: _('Too many changes to show.'),
   variant: :warning,
-  alert_class: 'gl-mb-5') do
-  .gl-alert-body
+  alert_class: 'gl-mb-5') do |c|
+  = c.body do
     = message
 
-  .gl-alert-actions
+  = c.actions do
     = diff_link
     = patch_link
diff --git a/app/components/pajamas/alert_component.html.haml b/app/components/pajamas/alert_component.html.haml
index 92bf81a4f8d..782ac8b9ca2 100644
--- a/app/components/pajamas/alert_component.html.haml
+++ b/app/components/pajamas/alert_component.html.haml
@@ -11,4 +11,9 @@
     - if @title
       %h4.gl-alert-title
         = @title
-    = content
+    - if body?
+      .gl-alert-body
+        = body
+    - if actions?
+      .gl-alert-actions
+        = actions
diff --git a/app/components/pajamas/alert_component.rb b/app/components/pajamas/alert_component.rb
index ef35ae195b0..c1b2132da29 100644
--- a/app/components/pajamas/alert_component.rb
+++ b/app/components/pajamas/alert_component.rb
@@ -36,6 +36,9 @@ module Pajamas
 
     delegate :sprite_icon, to: :helpers
 
+    renders_one :body
+    renders_one :actions
+
     ICONS = {
       info: 'information-o',
       warning: 'warning',
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index ec084c05cf7..55c25ca32d5 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -18,9 +18,9 @@
 - else
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    title: _('Service Ping payload not found in the application cache')) do
+    title: _('Service Ping payload not found in the application cache')) do |c|
 
-    .gl-alert-body
+    = c.body do
       - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
       - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
       - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index 9b994b757f9..4b1303cc97c 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -6,9 +6,9 @@
     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
+    close_button_data: { testid: 'close-security-newsletter-callout' }) do |c|
+  = c.body do
     = s_('AdminArea|Sign up for the GitLab Security Newsletter to get notified for security updates.')
-  .gl-alert-actions
+  = c.actions do
     = link_to 'https://about.gitlab.com/company/preference-center/', target: '_blank', rel: 'noreferrer noopener', class: 'deferred-link gl-alert-action btn-confirm btn-md gl-button' do
       = s_('AdminArea|Sign up for the GitLab newsletter')
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 8ac6f63cdfb..944d7bfced0 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -27,8 +27,8 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        = render Pajamas::AlertComponent.new(dismissible: false) do
-          .gl-alert-body
+        = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+          = c.body do
             = render 'shared/group_tips'
     .form-actions
       = f.submit _('Create group'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index be7055e6f7b..16f6e71d79b 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -16,8 +16,8 @@
     .col-md-12
       = render Pajamas::AlertComponent.new(variant: :danger,
         alert_class: 'gl-mb-5',
-        alert_data: { testid: 'last-repository-check-failed-alert' }) do
-        .gl-alert-body
+        alert_data: { testid: 'last-repository-check-failed-alert' }) do |c|
+        = c.body do
           - 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) }
           = last_check_message.html_safe
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index 59e9c784e5f..dba18b2f608 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/app/views/admin/runners/edit.html.haml
@@ -26,8 +26,8 @@
             %td
               = render Pajamas::AlertComponent.new(variant: :danger,
                 dismissible: false,
-                title: project.full_name) do
-                .gl-alert-actions
+                title: project.full_name) do |c|
+                = c.actions do
                   = 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'
 
   %table.table{ data: { testid: 'unassigned-projects' } }
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 86391b980c0..a7ed7b8c052 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -1,8 +1,8 @@
 - if registration_features_can_be_prompted?
   = render Pajamas::AlertComponent.new(variant: :tip,
     alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = render 'shared/registration_features_discovery_message', feature_title: s_('RegistrationFeatures|send emails to users')
 
 .top-area
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index b7d1aa6f944..720e3ff08e2 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -7,13 +7,13 @@
   %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-api-unreachable') do |c|
+  = c.body do
     = s_('ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct.')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do |c|
+  = c.body do
     = s_('ClusterIntegration|There was a problem authenticating with your cluster. Please ensure your CA Certificate and Token are valid.')
 
 .hidden.js-cluster-success.bs-callout.bs-callout-success{ role: 'alert' }
diff --git a/app/views/clusters/clusters/_deprecation_alert.html.haml b/app/views/clusters/clusters/_deprecation_alert.html.haml
index 202e2c14d3f..3a83efec29b 100644
--- a/app/views/clusters/clusters/_deprecation_alert.html.haml
+++ b/app/views/clusters/clusters/_deprecation_alert.html.haml
@@ -1,5 +1,5 @@
-= render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mt-6 gl-mb-3') do
-  .gl-alert-body
+= render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mt-6 gl-mb-3') do |c|
+  = c.body do
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
     - issue_link_start = link_start % { url: 'https://gitlab.com/gitlab-org/configure/general/-/issues/199' }
     - docs_link_start = link_start % { url: help_page_path('user/clusters/agent/index.md') }
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 ffd910b1b9d..b130e0c7214 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -2,9 +2,9 @@
 
 = 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
-  .gl-alert-body
+  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do |c|
+  = c.body do
     = 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
+  = c.actions do
     %a.gl-button.btn-confirm.text-decoration-none{ href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', rel: 'noopener noreferrer' }
       = s_("ClusterIntegration|Apply for credit")
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 95b3ad26e99..654ee70dbee 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
@@ -5,8 +5,8 @@
         = s_('GroupsNew|Import groups from another instance of GitLab')
       = link_to _('History'), history_import_bulk_imports_path, class: 'gl-link gl-ml-auto'
     = render Pajamas::AlertComponent.new(dismissible: false,
-      variant: :warning) do
-      .gl-alert-body
+      variant: :warning) do |c|
+      = c.body do
         - 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
         = s_('GroupsNew|Not all related objects are migrated. %{docs_link_start}More info%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
diff --git a/app/views/groups/_import_group_from_file_panel.html.haml b/app/views/groups/_import_group_from_file_panel.html.haml
index ddd7481e0bd..04170c30a20 100644
--- a/app/views/groups/_import_group_from_file_panel.html.haml
+++ b/app/views/groups/_import_group_from_file_panel.html.haml
@@ -7,8 +7,8 @@
     %h4
       = _('Import group from file')
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - link_end = '</a>'.html_safe
         = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: link_end }
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 62bc574231f..6cae416311e 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -3,8 +3,8 @@
 .sub-section
   %h4= s_('GroupSettings|Export group')
   %p= _('Export this group with all related data.')
-  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do |c|
+    = c.body do
       - 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
       = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
@@ -12,8 +12,8 @@
     - 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 Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+    = c.body do
       %p.gl-mb-0
         %p= _('The following items will be exported:')
         %ul
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index 66d6b516a86..e765638953a 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,8 +1,8 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.paid?
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do |c|
+    = c.body do
       = 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 }
 
 .js-confirm-danger{ data: group_settings_confirm_modal_data(group, remove_form_id) }
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index f5d9d0e2587..e65c3cd13f6 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 Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+        = c.body do
           = 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 aa6fcc445fd..ae54d0544f3 100644
--- a/app/views/import/shared/_errors.html.haml
+++ b/app/views/import/shared/_errors.html.haml
@@ -1,7 +1,7 @@
 - if @errors.present?
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       - @errors.each do |error|
         = error
diff --git a/app/views/layouts/header/_registration_enabled_callout.html.haml b/app/views/layouts/header/_registration_enabled_callout.html.haml
index affee15c4d0..03e961bda8f 100644
--- a/app/views/layouts/header/_registration_enabled_callout.html.haml
+++ b/app/views/layouts/header/_registration_enabled_callout.html.haml
@@ -5,10 +5,10 @@
   alert_class: 'js-registration-enabled-callout',
   alert_data: { feature_id: Users::CalloutsHelper::REGISTRATION_ENABLED_CALLOUT,
                 dismiss_endpoint: callouts_path },
-  close_button_data: { testid: 'close-registration-enabled-callout' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-registration-enabled-callout' }) do |c|
+  = c.body do
     = _('Only allow anyone to register for accounts on GitLab instances that you intend to be used by anyone. Allowing anyone to register makes GitLab instances more vulnerable.')
-  .gl-alert-actions
+  = c.actions do
     = link_to general_admin_application_settings_path(anchor: 'js-signup-settings'), class: 'btn gl-alert-action btn-confirm btn-md gl-button' do
       %span.gl-button-text
         = _('Turn off')
diff --git a/app/views/layouts/header/_storage_enforcement_banner.html.haml b/app/views/layouts/header/_storage_enforcement_banner.html.haml
index 92c02d6ecfd..6613130fdf3 100644
--- a/app/views/layouts/header/_storage_enforcement_banner.html.haml
+++ b/app/views/layouts/header/_storage_enforcement_banner.html.haml
@@ -8,7 +8,7 @@
   alert_data: { feature_id: banner_info[:callouts_feature_name],
                 dismiss_endpoint: banner_info[:callouts_path],
                 group_id: namespace.id,
-                defer_links: "true" }) do
-  .gl-alert-body
+                defer_links: "true" }) do |c|
+  = c.body do
     = banner_info[:text]
     = banner_info[:learn_more_link]
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 8568e61aa33..bbbb8154c51 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -3,15 +3,15 @@
 
 - if current_user.ldap_user?
   = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-my-5',
-    close_button_class: 'js-close-2fa-enabled-success-alert') do
-    .gl-alert-body
+    close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+    = c.body do
       = 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 }
 
 .row.gl-mt-3.js-search-settings-section
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 5d74bbe9971..26c9b2f0ee1 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -3,8 +3,8 @@
 
 %div
   - if @user.errors.any?
-    = render Pajamas::AlertComponent.new(variant: :danger) do
-      .gl-alert-body
+    = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+      = c.body do
         %ul
           - @user.errors.full_messages.each do |msg|
             %li= msg
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 3ae64643420..b85b7841d55 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -42,8 +42,8 @@
           - if @error
             = render Pajamas::AlertComponent.new(title: @error[:message],
               variant: :danger,
-              dismissible: false) do
-              .gl-alert-body
+              dismissible: false) do |c|
+              = c.body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 
           .form-group
diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index f9d8a2d2989..85a7b9eb22b 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -3,7 +3,7 @@
 
 = render Pajamas::AlertComponent.new(variant: :warning,
   dismissible: false,
-  alert_class: 'project-deletion-failed-message') do
-  .gl-alert-body
+  alert_class: 'project-deletion-failed-message') do |c|
+  = c.body do
     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 66857dadb65..5a2add9de1e 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -2,8 +2,8 @@
 - if event && show_last_push_widget?(event)
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-mt-3',
-    close_button_class: 'js-close-banner') do
-    .gl-alert-body
+    close_button_class: 'js-close-banner') do |c|
+    = c.body do
       %span= s_("LastPushEvent|You pushed to")
       %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }
         = link_to event.ref_name, project_commits_path(event.project, event.ref_name), class: 'ref-name gl-text-truncate'
@@ -15,6 +15,6 @@
       #{time_ago_with_tooltip(event.created_at)}
 
     - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
-      .gl-alert-actions
+      = c.actions do
         = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-confirm qa-create-merge-request" do
           #{ _('Create merge request') }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index e79825bdfc4..66fa1a69ef9 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -39,8 +39,8 @@
     = project_tip.html_safe
 = render Pajamas::AlertComponent.new(alert_class: "gl-mb-4 gl-display-none js-user-readme-repo",
   dismissible: false,
-  variant: :success) do
-  .gl-alert-body
+  variant: :success) do |c|
+  = c.body do
     - 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/edit.html.haml b/app/views/projects/blob/edit.html.haml
index aefa4a41ab5..f80601ef221 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -6,12 +6,13 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5 gl-mt-5',
     variant: :danger,
-    dismissible: false) do
+    dismissible: false) do |c|
     - 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
     - blob_link_start = '<a href="%{url}" class="gl-link" target="_blank" rel="noopener noreferrer">'.html_safe % { url: blob_url }
-    = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
+    = c.body do
+      = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
 
 
 %h3.page-title.blob-edit-page-title
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 07bae7819a4..c06f60bd05d 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,8 +2,8 @@
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
-  = render Pajamas::AlertComponent.new(variant: :danger) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
       = @error
 %h3.page-title
   = _('New Branch')
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 82d3bfbcfe6..f887a4c744e 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -36,8 +36,8 @@
 - if hidden > 0
   %li
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = 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)
 
 - if can_update_merge_request && context_commits&.empty?
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 9b64f158a1b..13fd4cee0cc 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -3,8 +3,8 @@
   = render Pajamas::AlertComponent.new(title: _('Fork Error!'),
     variant: :danger,
     alert_class: 'gl-mt-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       %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) }
 
@@ -17,5 +17,5 @@
           - else
             = error
 
-      .gl-alert-actions
-        = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
+    = c.actions do
+      = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
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 f28b951ad62..291edf014c3 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
@@ -3,6 +3,6 @@
 - service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
 
 = 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
+  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do |c|
+  = c.body do
     = 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/new.html.haml b/app/views/projects/mattermosts/new.html.haml
index b01dabbbadf..8254198bd41 100644
--- a/app/views/projects/mattermosts/new.html.haml
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -5,8 +5,8 @@
 - @content_class = 'limit-container-width' unless fluid_layout
 
 - if @teams_error_message
-  = render Pajamas::AlertComponent.new(variant: :danger) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
       = @teams_error_message
 
 %h3
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index b40fef0e892..488c49736e6 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -8,8 +8,8 @@
   - if @merge_request.closed_or_merged_without_fork?
     = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5',
       variant: :danger,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = _('The source project of this merge request has been removed.')
 
   .detail-page-header.border-bottom-0.pt-0.pb-0
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index ce5a042fbf8..4596fcd280d 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -10,8 +10,8 @@
   = render "projects/merge_requests/mr_box"
 
   = render Pajamas::AlertComponent.new(variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       - if @merge_request.for_fork? && !@merge_request.source_project
         = err_fork_project_removed
       - elsif !@merge_request.source_branch_exists?
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 13aa8f56d20..4ec72176202 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -14,8 +14,8 @@
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count == 0
   = render Pajamas::AlertComponent.new(dismissible: false,
     alert_data: { testid: 'no-issues-alert' },
-    alert_class: 'gl-mt-3 gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mt-3 gl-mb-5') do |c|
+    = c.body do
       = _('Assign some issues to this milestone.')
 - else
   = render 'shared/milestones/milestone_complete_alert', milestone: @milestone do
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index bc8400a63f9..d689b54678e 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -37,8 +37,8 @@
           .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 Pajamas::AlertComponent.new(dismissible: false) do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+        = c.body do
           = _('Mirror settings are only available to GitLab administrators.')
 
     .panel.panel-default
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index d3e2854ff19..9d9603b0947 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -1,7 +1,8 @@
 - if domain_presenter.errors.any?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
-    - domain_presenter.errors.full_messages.each do |msg|
-      = msg
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.body do
+      - domain_presenter.errors.full_messages.each do |msg|
+        = msg
 
 .form-group.border-section
   .row
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index d1d9a220068..0d9cb7290ac 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -7,8 +7,8 @@
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
   = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
 %h2.gl-mb-4
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 fdd4dfba616..d69f54608e9 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,12 +1,12 @@
 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
   = 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
-    .gl-alert-body
+    close_button_data: { project_id: project.id }) do |c|
+    = c.body do
       = 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
         %div
           = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link btn gl-button btn-confirm'
       = link_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 0e0b1ea6993..7248403d6c9 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -24,8 +24,8 @@
     = 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
-      .gl-alert-body
+      close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+      = c.body do
         = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.')
   = render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only
   .row
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 195bd15f840..91cd91ec38b 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,9 +1,9 @@
 - if show_no_password_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-password-message',
-    close_button_class: 'js-hide-no-password-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-password-message') do |c|
+    = c.body do
       = no_password_message
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action btn btn-confirm btn-md gl-button'
       = link_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index d30679b4305..c4d8cb092dc 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,9 +1,9 @@
 - if show_no_ssh_key_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-ssh-message',
-    close_button_class: 'js-hide-no-ssh-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-ssh-message') do |c|
+    = c.body do
       = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
-    .gl-alert-actions
+    = c.actions do
       = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "gl-alert-action btn btn-confirm btn-md gl-button"
       = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: { hide_no_ssh_key: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index 76fb34985c0..0af378cb883 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,6 +1,6 @@
 - if outdated_browser?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.body do
       = s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
       %br
       - browser_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('install/requirements', anchor: 'supported-web-browsers') }
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 7e1874f3416..b630c829c76 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,9 +1,9 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    alert_class: 'project-limit-message') do
-    .gl-alert-body
+    alert_class: 'project-limit-message') do |c|
+    = c.body do
       = _("You won't be able to create new projects because you have reached your project limit.")
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Remind later'), '#', class: 'alert-link hide-project-limit-message btn gl-button btn-confirm'
       = link_to _("Don't show again"), profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 96f015c7a4b..8de7552c39a 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,10 +1,10 @@
 - if session[:ask_for_usage_stats_consent]
-  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do |c|
+    = c.body do
       - 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'
       = s_('To help improve GitLab, we would like to periodically %{docs_link}. This can be changed at any time in %{settings_link}.').html_safe % { docs_link: docs_link, settings_link: settings_link }
-    .gl-alert-actions.gl-mt-3
+    = c.actions do
       - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 })
       - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 })
       = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info'
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 2294c44d49f..0899756d088 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
@@ -3,10 +3,10 @@
   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
+  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do |c|
+  = c.body do
     = 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'
-  .gl-alert-actions
+  = c.actions do
     = link_to profile_two_factor_auth_path, class: 'deferred-link btn gl-alert-action btn-confirm btn-md gl-button' do
       = s_('Profiles|Manage two-factor authentication')
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index e99c41f2496..c9d7920b9c2 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,6 +1,6 @@
 = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
   variant: :danger,
   dismissible: false,
-  title: reason) do
-  .gl-alert-body
+  title: reason) do |c|
+  = c.body do
     = 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 ce04e24b09f..932971402a2 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -12,8 +12,8 @@
 - if hook_log.internal_error_message.present?
   = render Pajamas::AlertComponent.new(title: _('Internal error occurred while delivering this webhook.'),
     variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = _('Error: %{error}') % { error: hook_log.internal_error_message }
 
 %h4= _('Response')
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index e0d5f738273..62e1a930ee6 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -8,8 +8,8 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
       Please check out
       = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project, issuable]), target: "_blank", rel: 'noopener noreferrer'
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 4685a93a343..86f9193cc7a 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -3,6 +3,6 @@
 - if milestone.complete? && milestone.active?
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_data: { testid: 'all-issues-closed-alert' },
-    dismissible: false) do
-    .gl-alert-body
-    = yield
+    dismissible: false) do |c|
+    = c.body do
+      = yield
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index 365cee5fadc..4bf02b71109 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -3,14 +3,14 @@
 - if runner.group_type?
   = 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
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = 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 Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is associated with specific projects.'),
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = 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 a100a620cea..d95efe83e15 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/app/views/shared/web_hooks/_hook_errors.html.haml
@@ -11,13 +11,13 @@
     support_link_start: link_start % { url: support_path },
     support_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook was automatically disabled'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.body do
       = 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 Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook failed to connect'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.body do
       = 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?
   - help_path = help_page_path('user/project/integrations/webhooks', anchor: 'webhook-fails-or-multiple-webhook-requests-are-triggered')
@@ -27,6 +27,6 @@
     help_link_start: link_start % { url: help_path },
     help_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook fails to connect'),
-    variant: :warning) do
-    .gl-alert-body
+    variant: :warning) do |c|
+    = c.body do
       = 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