Skip to content

Migrate wiki/issue rebalancing alert to Pajamas ViewComponent

What does this MR do and why?

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

Screenshots or screen recordings

Before After
image image
image image

Snapshot before

<div class="gl-alert gl-alert-info">
  <svg class="s16 gl-icon gl-alert-icon gl-alert-icon-no-title" data-testid="information-o-icon"><use href="/assets/icons-f305926186cfc3bb530f27269d545937c385578ba62adb0088d74f0d2d02cb56.svg#information-o"></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>
  <div class="gl-alert-body">
    The sidebar failed to load. You can reload the page to try again.
  </div>
</div>

Snapshot after

<div class="gl-alert gl-alert-info" role="alert">
  <svg class="s16 gl-alert-icon gl-alert-icon-no-title" 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" 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">
      The sidebar failed to load. You can reload the page to try again.

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

How to set up and validate locally

To make this work without extensive setup

  1. On any project, go to Wiki
  2. Create a wiki Page homeaaaaa
  3. Go to http://gdk.test:3000/testg/testp/-/wikis/homeaaaaa
  4. Use the following to show the alert
diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml
index 5f181371663..81a5ac5749d 100644
--- a/app/views/shared/wikis/_sidebar.html.haml
+++ b/app/views/shared/wikis/_sidebar.html.haml
@@ -19,7 +19,7 @@
             = sprite_icon('pencil-square', css_class: 'gl-mr-2')
             %span= _("Edit sidebar")
 
-    - if @sidebar_error.present?
+    - if true #@sidebar_error.present?
       = render 'shared/alert_info', body: s_('Wiki|The sidebar failed to load. You can reload the page to try again.')
 
     .blocks-container

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