Migrate storage limit alert to Pajamas ViewComponent

What does this MR do and why?

Related to Migrate to Pajamas::AlertComponent ViewComponen... (#325408 - closed)

Migrate storage limit alert to Pajamas Viewcomponent

Screenshots or screen recordings

Before	After

Snapshot before

<div class="gl-py-5">
  <div class="gl-alert js-namespace-storage-alert gl-alert-info" role="alert">
    <svg class="s16 gl-icon gl-alert-icon" data-testid="information-o-icon"><use href="/assets/icons-1008bb94712c8e896164f60259fc330ffa56df8b6bcd4831371abdf4a7b26326.svg#information-o"></use></svg>
    <div class="gl-alert-title">
      <h4 class="gl-alert-title">Usage</h4>
    </div>
    <button aria-label="Dismiss" class="js-namespace-storage-alert-dismiss gl-alert-dismiss gl-cursor-pointer" data-id="139" data-level="info" type="button">
      <svg class="s16 gl-icon" data-testid="close-icon"><use href="/assets/icons-1008bb94712c8e896164f60259fc330ffa56df8b6bcd4831371abdf4a7b26326.svg#close"></use></svg>
    </button>
    <div class="gl-alert-body">
      Explanation
      <a target="_blank" rel="noopener noreferrer" href="/help/user/usage_quotas">Learn more.</a>
    </div>
    <div class="gl-alert-actions">
      <a class="btn gl-alert-action btn-md gl-button btn-default" href="/groups/testg/-/usage_quotas#storage-quota-tab">View usage details</a>
    </div>
  </div>
</div>

Snapshot after

<div class="gl-py-5">
  <div class="gl-alert gl-alert-info js-namespace-storage-alert" role="alert">
    <svg class="s16 gl-alert-icon" data-testid="information-o-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#information-o"></use></svg>
    <button aria-label="Dismiss" class="btn gl-dismiss-btn btn-default btn-sm gl-button btn-default-tertiary btn-icon js-close js-namespace-storage-alert-dismiss" data-id="139" data-level="info" type="button">
      <svg class="s16" data-testid="close-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#close"></use></svg>
    </button>
    <div class="gl-alert-content" role="alert">
      <h4 class="gl-alert-title">
        Usage
      </h4>
      <div class="gl-alert-body">
        <svg class="s16 gl-icon gl-alert-icon" data-testid="information-o-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#information-o"></use></svg>
        Explanation
        <a target="_blank" rel="noopener noreferrer" href="/help/user/usage_quotas">Learn more.</a>

      </div>
      <div class="gl-alert-actions">
        <a class="btn gl-alert-action btn-md gl-button btn-default" href="/groups/testg/-/usage_quotas#storage-quota-tab">View usage details</a>

      </div>
    </div>
  </div>
</div>

How to set up and validate locally

To make this work without setting storage etc

1. Set the payload to a value
2. show banner actions

   payload = { alert_level: :info, usage_message: "Usage", explanation_message: "Explanation", root_namespace: namespace }
....
   if true # show_storage_banner_actions

Tests

bin/rspec ./ee/spec/controllers/ee/groups_controller_spec.rb
bin/rspec ./ee/spec/controllers/projects_controller_spec.rb

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.