Create ViewComponent for gl-alert cases

- use view components for reusability and testability

app/components/pajamas/alert_component.html.haml

+.gl-alert{ role: 'alert', class: ["gl-alert-#{@variant}", @alert_class], data: @alert_data }
+  = sprite_icon(icon, css_class: icon_classes)
+  - 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')
+  .gl-alert-content{ role: 'alert' }
+    - if @title
+      %h4.gl-alert-title
+        = @title
+    = content

app/components/pajamas/alert_component.rb

+# frozen_string_literal: true
+
+# Renders a GlAlert root element
+module Pajamas
+  class AlertComponent < Pajamas::Component
+    # @param [String] title
+    # @param [Symbol] variant
+    # @param [Boolean] dismissible
+    # @param [String] alert_class
+    # @param [Hash] alert_data
+    # @param [String] close_button_class
+    # @param [Hash] close_button_data
+    def initialize(
+      title: nil, variant: :info, dismissible: true,
+      alert_class: nil, alert_data: {}, close_button_class: nil, close_button_data: {})
+      @title = title
+      @variant = variant
+      @dismissible = dismissible
+      @alert_class = alert_class
+      @alert_data = alert_data
+      @close_button_class = close_button_class
+      @close_button_data = close_button_data
+    end
+
+    private
+
+    delegate :sprite_icon, to: :helpers
+
+    ICONS = {
+      info: 'information-o',
+      warning: 'warning',
+      success: 'check-circle',
+      danger: 'error',
+      tip: 'bulb'
+    }.freeze
+
+    def icon
+      ICONS[@variant]
+    end
+
+    def icon_classes
+      "gl-alert-icon#{' gl-alert-icon-no-title' if @title.nil?}"
+    end
+  end
+end

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

 - return unless show_registration_enabled_user_callout?
 
-= render 'shared/global_alert',
-  title: _('Anyone can register for an account.'),
+= render Pajamas::AlertComponent.new(title: _('Anyone can register for an account.'),
   variant: :warning,
   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
+  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
     = _('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

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

@@ -3,7 +3,12 @@
 - banner_info = storage_enforcement_banner_info(namespace)
 - return unless banner_info.present?
 
-= render 'shared/global_alert', variant: :warning, alert_class: 'js-storage-enforcement-banner', alert_data: { feature_id: banner_info[:callouts_feature_name], dismiss_endpoint: banner_info[:callouts_path], group_id: namespace.id, defer_links: "true" } do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  alert_class: 'js-storage-enforcement-banner',
+  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
     = banner_info[:text]
     = banner_info[:learn_more_link]

spec/components/pajamas/alert_component_spec.rb

+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Pajamas::AlertComponent, :aggregate_failures, type: :component do
+  context 'with content' do
+    before do
+      render_inline(described_class.new) { '_content_' }
+    end
+
+    it 'has content' do
+      expect(rendered_component).to have_text('_content_')
+    end
+  end
+
+  context 'with defaults' do
+    before do
+      render_inline described_class.new
+    end
+
+    it 'does not set a title' do
+      expect(rendered_component).not_to have_selector('.gl-alert-title')
+      expect(rendered_component).to have_selector('.gl-alert-icon-no-title')
+    end
+
+    it 'renders the default variant' do
+      expect(rendered_component).to have_selector('.gl-alert-info')
+      expect(rendered_component).to have_selector("[data-testid='information-o-icon']")
+    end
+
+    it 'renders a dismiss button' do
+      expect(rendered_component).to have_selector('.gl-dismiss-btn.js-close')
+      expect(rendered_component).to have_selector("[data-testid='close-icon']")
+    end
+  end
+
+  context 'with custom options' do
+    context 'with simple options' do
+      context 'without dismissible content' do
+        before do
+          render_inline described_class.new(
+            title: '_title_',
+            dismissible: false,
+            alert_class: '_alert_class_',
+            alert_data: {
+              feature_id: '_feature_id_',
+              dismiss_endpoint: '_dismiss_endpoint_'
+            }
+          )
+        end
+
+        it 'sets the title' do
+          expect(rendered_component).to have_selector('.gl-alert-title')
+          expect(rendered_component).to have_content('_title_')
+          expect(rendered_component).not_to have_selector('.gl-alert-icon-no-title')
+        end
+
+        it 'sets to not be dismissible' do
+          expect(rendered_component).not_to have_selector('.gl-dismiss-btn.js-close')
+          expect(rendered_component).not_to have_selector("[data-testid='close-icon']")
+        end
+
+        it 'sets the alert_class' do
+          expect(rendered_component).to have_selector('._alert_class_')
+        end
+
+        it 'sets the alert_data' do
+          expect(rendered_component).to have_selector('[data-feature-id="_feature_id_"][data-dismiss-endpoint="_dismiss_endpoint_"]')
+        end
+      end
+    end
+
+    context 'with dismissible content' do
+      before do
+        render_inline described_class.new(
+          close_button_class: '_close_button_class_',
+          close_button_data: {
+            testid: '_close_button_testid_'
+          }
+        )
+      end
+
+      it 'renders a dismiss button and data' do
+        expect(rendered_component).to have_selector('.gl-dismiss-btn.js-close._close_button_class_')
+        expect(rendered_component).to have_selector("[data-testid='close-icon']")
+        expect(rendered_component).to have_selector('[data-testid="_close_button_testid_"]')
+      end
+    end
+
+    context 'with setting variant type' do
+      where(:variant) { [:warning, :success, :danger, :tip] }
+
+      before do
+        render_inline described_class.new(variant: variant)
+      end
+
+      with_them do
+        it 'renders the variant' do
+          expect(rendered_component).to have_selector(".gl-alert-#{variant}")
+          expect(rendered_component).to have_selector("[data-testid='#{described_class::ICONS[variant]}-icon']")
+        end
+      end
+    end
+  end
+end