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
- Set the
payload
to a value - 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.
Edited by Alper Akgun