Migrate project new tag alert to Pajamas ViewComponent

What does this MR do and why?

Migrate project new tag alert to Pajamas ViewComponent

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

Screenshots or screen recordings

Before After
image image

Snapshot before

<div class="gl-alert gl-alert-danger">
  <svg class="s16 gl-icon gl-alert-icon gl-alert-icon-no-title" data-testid="error-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#error"></use></svg>
  <button aria-label="Dismiss" class="js-close gl-alert-dismiss" type="button">
    <svg class="s16 gl-icon" data-testid="close-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#close"></use></svg>
  </button>
  Some error
</div>

Snapshot after

<div class="gl-alert gl-alert-danger" role="alert">
  <svg class="s16 gl-alert-icon gl-alert-icon-no-title" data-testid="error-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#error"></use></svg>
  <button aria-label="Dismiss" class="btn gl-dismiss-btn btn-default btn-sm gl-button btn-default-tertiary btn-icon js-close gl-alert-dismiss" 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">
    <div class="gl-alert-body">
      Some error

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

How to set up and validate locally

To make this work without extensive setup

  1. On any project go to create a new tag: http://gdk.test:3000/testg/testp/-/tags/new.
  2. Set the @error = 'Some error' and make the if condition true

MR acceptance checklist

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

Edited by Alper Akgun

Merge request reports

Loading