Merge branch '326732-alignment-problem-with-error-banner' into 'master'

Fix alignment of global alerts

See merge request gitlab-org/gitlab!62498

app/views/layouts/header/_registration_enabled_callout.html.haml

 - return unless show_registration_enabled_user_callout?
 
-%div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-  .gl-alert.gl-alert-warning.js-registration-enabled-callout{ role: 'alert', data: { feature_id: UserCalloutsHelper::REGISTRATION_ENABLED_CALLOUT, dismiss_endpoint: user_callouts_path } }
-    = sprite_icon('warning', size: 16, css_class: 'gl-alert-icon')
-    %button.gl-alert-dismiss.js-close{ type: 'button', aria: { label: _('Close') }, data: { testid: 'close-registration-enabled-callout' } }
-      = sprite_icon('close', size: 16)
-    .gl-alert-title
-      = _('Open registration is enabled on your instance.')
-    .gl-alert-body
-      = html_escape(_('%{anchorOpen}Learn more%{anchorClose} about how you can customize / disable registration on your instance.')) % { anchorOpen: "<a href=\"#{help_page_path('user/admin_area/settings/sign_up_restrictions')}\">".html_safe, anchorClose: '</a>'.html_safe }
-    .gl-alert-actions
-      = link_to general_admin_application_settings_path(anchor: 'js-signup-settings'), class: 'btn gl-alert-action btn-info btn-md gl-button' do
-        %span.gl-button-text
-          = _('View setting')
+= render 'shared/global_alert',
+  title: _('Open registration is enabled on your instance.'),
+  variant: :warning,
+  alert_class: 'js-registration-enabled-callout',
+  alert_data: { feature_id: UserCalloutsHelper::REGISTRATION_ENABLED_CALLOUT, dismiss_endpoint: user_callouts_path },
+  close_button_data: { testid: 'close-registration-enabled-callout' } do
+  .gl-alert-body
+    = html_escape(_('%{anchorOpen}Learn more%{anchorClose} about how you can customize / disable registration on your instance.')) % { anchorOpen: "<a href=\"#{help_page_path('user/admin_area/settings/sign_up_restrictions')}\">".html_safe, anchorClose: '</a>'.html_safe }
+  .gl-alert-actions
+    = link_to general_admin_application_settings_path(anchor: 'js-signup-settings'), class: 'btn gl-alert-action btn-info btn-md gl-button' do
+      %span.gl-button-text
+        = _('View setting')

app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml

 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
-  .qa-auto-devops-banner.auto-devops-implicitly-enabled-banner.gl-alert.gl-alert-info
-    = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-    %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss'), class: 'hide-auto-devops-implicitly-enabled-banner alert-link', data: { project_id: project.id } }
-      = sprite_icon('close', css_class: 'gl-icon')
+  = render 'shared/global_alert',
+    variant: :info,
+    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
       = 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.gl-mt-3
+      - 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
       = link_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link btn gl-button btn-info'
       = link_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link btn gl-button btn-default gl-ml-2'

app/views/shared/_global_alert.html.haml

+- icons = { info: 'information-o', warning: 'warning', success: 'check-circle', danger: 'error', tip: 'bulb' }
+
+- title = local_assigns.fetch(:title, nil)
+- variant = local_assigns.fetch(:variant, :info)
+- alert_class = local_assigns.fetch(:alert_class, nil)
+- alert_data = local_assigns.fetch(:alert_data, nil)
+- close_button_class = local_assigns.fetch(:close_button_class, nil)
+- close_button_data = local_assigns.fetch(:close_button_data, nil)
+- icon = icons[variant]
+
+%div{ role: 'alert', class: ["gl-alert-#{variant}", alert_class], data: alert_data }
+  %div{ class: [container_class, @content_class, 'gl-px-0!'] }
+    .gl-alert
+      = sprite_icon(icon, size: 16, css_class: "gl-alert-icon#{' gl-alert-icon-no-title' if title.nil?}")
+      %button.gl-alert-dismiss.js-close{ type: 'button', aria: { label: _('Close') }, class: close_button_class, data: close_button_data }
+        = sprite_icon('close', size: 16)
+      - if title
+        .gl-alert-title
+          = title
+      = yield