Skip to content

Fix createAlert not showing as sticky

The following discussion from !163612 (merged) should be addressed:

  • @justin_ho started a discussion: (+4 comments)

    I stumbled upon this change while testing a feature and looking at the history around flash messages.

    I think this change caused an issue with createAlert to not apply position: sticky properly. When createAlert is called and the user is not on the top of the page (they scrolled down), the alert should show on the top of the page below the header. This isn't the case now as alerts only show when you scroll to the top of the page (see video).

    Screen_Recording_2024-09-26_at_16.55.11

    For the alert (flash message) to be sticky again, it needs to be a sibling of the main content (like the before change here).

    Since @seggenberger is on PTO, maybe @aregnery can you have a look (or tag someone who can)?

How to replicate

  1. Go to Admin > Overview > Groups. For example, http://127.0.0.1:3000/admin/groups.
  2. Find any group and select Edit. For example, http://127.0.0.1:3000/admin/groups/Commit451/gitlab-instance-cef261fc11/edit.
  3. Apply the following diff to force show alerts:
diff --git a/app/assets/javascripts/groups/components/group_name_and_path.vue b/app/assets/javascripts/groups/components/group_name_and_path.vue
index 06eaaa4eb50c..144171ad44db 100644
--- a/app/assets/javascripts/groups/components/group_name_and_path.vue
+++ b/app/assets/javascripts/groups/components/group_name_and_path.vue
@@ -192,7 +192,7 @@ export default {
 
         this.apiLoading = false;
 
-        if (exists) {
+        if (true) {
           if (suggests.length) {
             return Promise.resolve({ exists, suggests });
           }
  1. (IMPORTANT) Scroll down so you are not at the very top but can still see the Group URL field, then change the field Group URL and add any characters.
  2. Scroll up to observe that there is an error (alert) created but it doesn't stick on top of content.

Screen_Recording_2024-10-01_at_15.55.42

Edited by Justin Ho Tuan Duong