Merge branch 'update-shared-haml-alert-template' into 'master'

Pajamas-compliant alert HAML template

See merge request gitlab-org/gitlab!63792

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

@@ -7,8 +7,8 @@
   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 }
+    = 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')}\" class=\"gl-link\">".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
+    = 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
         = _('View setting')

app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml

@@ -10,5 +10,5 @@
         %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'
+      = 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'

app/views/shared/_global_alert.html.haml

@@ -2,19 +2,23 @@
 
 - title = local_assigns.fetch(:title, nil)
 - variant = local_assigns.fetch(:variant, :info)
+- dismissible = local_assigns.fetch(:dismissible, true)
 - 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]
+- alert_root_class = 'gl-alert-layout-limited' if fluid_layout
+- alert_container_class = [container_class, @content_class] unless fluid_layout || local_assigns.fetch(:is_contained, false)
 
-%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 }
+%div{ role: 'alert', class: [alert_root_class, 'gl-alert-max-content', 'gl-alert', "gl-alert-#{variant}", alert_class], data: alert_data }
+  .gl-alert-container{ class: alert_container_class }
+    = sprite_icon(icon, size: 16, css_class: "gl-alert-icon#{' gl-alert-icon-no-title' if title.nil?}")
+    - if dismissible
+      %button.btn.gl-dismiss-btn.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-close{ type: 'button', aria: { label: _('Dismiss') }, class: close_button_class, data: close_button_data }
         = sprite_icon('close', size: 16)
+    .gl-alert-content{ role: 'alert' }
       - if title
-        .gl-alert-title
+        %h4.gl-alert-title
           = title
       = yield

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

@@ -5,15 +5,14 @@
 - help_link_end = '</a>'.html_safe
 
 %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
-  .gl-alert.gl-alert-max-content.gl-alert-warning.js-new-user-signups-cap-reached{ role: 'alert', data: { feature_id: ::EE::UserCalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED, dismiss_endpoint: user_callouts_path, defer_links: "true" } }
-    .gl-alert-container
-      = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-      %button.js-close.btn.gl-dismiss-btn.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon{ type: 'button', 'aria-label' => _('Dismiss') }
-        = sprite_icon('close', css_class: 'gl-button-icon gl-icon')
-      .gl-alert-content
-        %h4.gl-alert-title= s_('Admin|Your instance has reached its user cap')
-        .gl-alert-body
-          = s_('Admin|Additional users must be reviewed and approved by a system administrator. Learn more about %{help_link_start}usage caps%{help_link_end}.').html_safe % { help_link_start: help_link_start, help_link_end: help_link_end }
-        - if User.blocked_pending_approval.count > 0
-          .gl-alert-actions
-            = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-confirm gl-button'
+  = render 'shared/global_alert',
+    variant: :warning,
+    title: s_('Admin|Your instance has reached its user cap'),
+    is_contained: true,
+    alert_class: 'js-new-user-signups-cap-reached',
+    alert_data: { feature_id: ::EE::UserCalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED, dismiss_endpoint: user_callouts_path, defer_links: "true" } do
+    .gl-alert-body
+      = s_('Admin|Additional users must be reviewed and approved by a system administrator. Learn more about %{help_link_start}usage caps%{help_link_end}.').html_safe % { help_link_start: help_link_start, help_link_end: help_link_end }
+      - if User.blocked_pending_approval.count > 0
+        .gl-alert-actions
+          = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-confirm gl-button'

package.json

@@ -56,7 +56,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.199.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "29.35.0",
+    "@gitlab/ui": "29.36.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.3-2",
     "@rails/ujs": "6.1.3-2",

spec/views/shared/_global_alert.html.haml_spec.rb

+# frozen_string_literal: true
+require 'spec_helper'
+
+RSpec.describe 'shared/_global_alert.html.haml' do
+  before do
+    allow(view).to receive(:sprite_icon).and_return('<span class="icon"></span>'.html_safe)
+  end
+
+  it 'renders the title' do
+    title = "The alert's title"
+    render partial: 'shared/global_alert', locals: { title: title }
+
+    expect(rendered).to have_text(title)
+  end
+
+  context 'variants' do
+    it 'renders an info alert by default' do
+      render
+
+      expect(rendered).to have_selector(".gl-alert-info")
+    end
+
+    %w[warning success danger tip].each do |variant|
+      it "renders a #{variant} variant" do
+        allow(view).to receive(:variant).and_return(variant)
+        render partial: 'shared/global_alert', locals: { variant: variant }
+
+        expect(rendered).to have_selector(".gl-alert-#{variant}")
+      end
+    end
+  end
+
+  context 'dismissible option' do
+    it 'shows the dismiss button by default' do
+      render
+
+      expect(rendered).to have_selector('.gl-dismiss-btn')
+    end
+
+    it 'does not show the dismiss button when dismissible is false' do
+      render partial: 'shared/global_alert', locals: { dismissible: false }
+
+      expect(rendered).not_to have_selector('.gl-dismiss-btn')
+    end
+  end
+
+  context 'fixed layout' do
+    before do
+      allow(view).to receive(:fluid_layout).and_return(false)
+    end
+
+    it 'does not add layout limited class' do
+      render
+
+      expect(rendered).not_to have_selector('.gl-alert-layout-limited')
+    end
+
+    it 'adds container classes' do
+      render
+
+      expect(rendered).to have_selector('.container-fluid.container-limited')
+    end
+
+    it 'does not add container classes if is_contained is true' do
+      render partial: 'shared/global_alert', locals: { is_contained: true }
+
+      expect(rendered).not_to have_selector('.container-fluid.container-limited')
+    end
+  end
+
+  context 'fluid layout' do
+    before do
+      allow(view).to receive(:fluid_layout).and_return(true)
+      render
+    end
+
+    it 'adds layout limited class' do
+      expect(rendered).to have_selector('.gl-alert-layout-limited')
+    end
+
+    it 'does not add container classes' do
+      expect(rendered).not_to have_selector('.container-fluid.container-limited')
+    end
+  end
+end

yarn.lock

@@ -908,10 +908,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@29.35.0":
-  version "29.35.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-29.35.0.tgz#bb04d1e4f8796134bc406adaa869c1b5b1fdcaf2"
-  integrity sha512-Fso++QXqxZSfIgSmPGlfQC3mdFI6oh/AOL/9cGn4t/3kfxwHd1GCMjUNAFeHsgyIwKIr1hwksipapwuuOIFSCw==
+"@gitlab/ui@29.36.0":
+  version "29.36.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-29.36.0.tgz#a418c34c7ef768552b551807fa2a65deeaeba0bf"
+  integrity sha512-ZsaYpbp5cFN9hxVCf19E7avS9AmMaAyS4/Zwkwu2reHJUOkwyOY24eLr44u/Kbaq6SkFarQ2y+zU8vuhzXwQjQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"