Skip to content

Fix alert-wrapper margin by using original .gl-alert:first-child selector

Scott de Jonge requested to merge sdejonge-alert-wrapper-spacing into master

What does this MR do and why?

!165461 (merged) updated subcription alert container width and spacing between alerts which caused a visual regression in fullscreen modes (like IDE) resolved in !166749 (merged). However, both cause issues by having gl-mt-3 when no alerts are present in .alert-wrapper because .flash-container is always a child element:

<div class="alert-wrapper">
  <!-- alerts -->
  <div class="flash-container"></div>
</div>

Instead revert to previous iteration where .gl-alert:first-child inside .alert-wrapper gets the spacing, but keep the .alert-wrapper-top-space class from !166749 (merged) to avoid top space added in full-screen IDE view

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

No Alerts Alerts
gdk.test_3443_groups_flightjs_-boards__1 gdk.test_3443_groups_flightjs_-_boards
gdk.test_3443_-ide_project_flightjs_Flight_merge_requests_4__1 gdk.test_3443_-_ide_project_flightjs_Flight_merge_requests_4
gdk.test_3443_flightjs_Flight_-merge_requests_4__1 gdk.test_3443_flightjs_Flight_-_merge_requests_4
gdk.test_3443_admin__2_ gdk.test_3443_admin

How to set up and validate locally

  1. Add broadcast messages and update alerts to be visible patch below
  2. View: 2. Boards https://gdk.test:3443/groups/flightjs/-/boards 3. Admin settings https://gdk.test:3443/admin 4. Issuable https://gdk.test:3443/flightjs/Flight/-/merge_requests/4 5. Fullscreen IDE https://gdk.test:3443/-/ide/project/flightjs/Flight/merge_requests/4
Patch to show alerts
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index 0bdeef9aceae..bee344208f69 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -1,4 +1,4 @@
-- return unless show_security_newsletter_user_callout?
+-# - return unless show_security_newsletter_user_callout?
 
 = render Pajamas::AlertComponent.new(variant: :tip,
     title: s_('AdminArea|Get security updates from GitLab and stay up to date'),
diff --git a/app/views/layouts/header/_read_only_banner.html.haml b/app/views/layouts/header/_read_only_banner.html.haml
index 86c1d34c0b7d..c98ebb152cc7 100644
--- a/app/views/layouts/header/_read_only_banner.html.haml
+++ b/app/views/layouts/header/_read_only_banner.html.haml
@@ -1,4 +1,4 @@
-- message = read_only_message
+- message = 'Hello world'
 - if message
   .flash-container.flash-container-page
     .flash-notice
diff --git a/app/views/layouts/header/_registration_enabled_callout.html.haml b/app/views/layouts/header/_registration_enabled_callout.html.haml
index ee4644e9ff03..7f92a5ca8d24 100644
--- a/app/views/layouts/header/_registration_enabled_callout.html.haml
+++ b/app/views/layouts/header/_registration_enabled_callout.html.haml
@@ -1,4 +1,4 @@
-- return unless show_registration_enabled_user_callout?
+-# - return unless show_registration_enabled_user_callout?
 
 = render Pajamas::AlertComponent.new(title: _('Check your sign-up restrictions'),
   variant: :warning,
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index d26f377272b3..a32c9b194ed0 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,7 +1,7 @@
-- if outdated_browser?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
-    - c.with_body do
-      = s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
-      %br
-      - link = link_to('', help_page_path('install/requirements.md', anchor: 'supported-web-browsers'), target: '_blank', rel: 'noopener noreferrer')
-      = safe_format(s_('OutdatedBrowser|Please install a %{browser_link_start}supported web browser%{browser_link_end} for a better experience.'), tag_pair(link, :browser_link_start, :browser_link_end))
+-# - if outdated_browser?
+= render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+  - c.with_body do
+    = s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
+    %br
+    - link = link_to('', help_page_path('install/requirements.md', anchor: 'supported-web-browsers'), target: '_blank', rel: 'noopener noreferrer')
+    = safe_format(s_('OutdatedBrowser|Please install a %{browser_link_start}supported web browser%{browser_link_end} for a better experience.'), tag_pair(link, :browser_link_start, :browser_link_end))
diff --git a/app/views/shared/projects/_archived_alert.html.haml b/app/views/shared/projects/_archived_alert.html.haml
index 95f90dc26da6..669dd6bf47cd 100644
--- a/app/views/shared/projects/_archived_alert.html.haml
+++ b/app/views/shared/projects/_archived_alert.html.haml
@@ -1,5 +1,5 @@
-- if show_archived_project_banner?(@project)
-  = render Pajamas::AlertComponent.new(variant: :info,
-    dismissible: false) do |c|
-    = c.with_body do
-      = _('This is an archived project. Repository and other project resources are read-only.')
+-# - if show_archived_project_banner?(@project)
+= render Pajamas::AlertComponent.new(variant: :info,
+  dismissible: false) do |c|
+  = c.with_body do
+    = _('This is an archived project. Repository and other project resources are read-only.')
diff --git a/ee/app/views/layouts/header/_licensed_user_count_threshold.html.haml b/ee/app/views/layouts/header/_licensed_user_count_threshold.html.haml
index 053229751754..55725621a6e4 100644
--- a/ee/app/views/layouts/header/_licensed_user_count_threshold.html.haml
+++ b/ee/app/views/layouts/header/_licensed_user_count_threshold.html.haml
@@ -1,4 +1,4 @@
-- return unless show_active_user_count_threshold_banner?
+-# - return unless show_active_user_count_threshold_banner?
 
 = render Pajamas::AlertComponent.new(title: _('Your instance is approaching its licensed user count'),
   alert_options: { class: 'gitlab-ee-license-banner js-admin-licensed-user-count-threshold', data: { feature_id: Users::CalloutsHelper::ACTIVE_USER_COUNT_THRESHOLD, dismiss_endpoint: callouts_path } },

Merge request reports