Merge pull request #16758 from opf/fix/meeting-flash-banner-width

Change meeting flash banner width to 80%

app/views/layouts/base.html.erb

@@ -119,6 +119,8 @@ See COPYRIGHT and LICENSE files for more details.
     <main id="content-wrapper" class="<%= initial_classes %>">
       <%= render_primer_banner_message %>
       <%= render_streameable_primer_banner_message %>
+      <%# Banner messages are being rendered using primer %>
+      <div id="banner-messages" class="op-primer-banner"></div>
       <turbo-frame id="flash-messages">
         <%= render_flash_messages %>
       </turbo-frame>

frontend/src/global_styles/primer/_banners.sass

@@ -0,0 +1,46 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+$op-primer-banner-toaster-width: 80%
+
+.op-primer-banner
+  z-index: 599
+  position: absolute
+  max-width: $op-primer-banner-toaster-width
+  margin: 0 auto
+  left: 10%
+  right: 10%
+  top: 1rem
+
+  // Align multiple toasts
+  display: flex
+  flex-direction: column
+  gap: 1rem
+
+  &--item
+    word-wrap: break-word

frontend/src/global_styles/primer/_index.sass

@@ -1,2 +1,3 @@
 @import icons
 @import overrides
+@import banners

frontend/src/turbo/flash-stream-action.ts

@@ -3,6 +3,8 @@ import { StreamActions, StreamElement } from '@hotwired/turbo';
 export function registerFlashStreamAction() {
   StreamActions.flash = function dialogStreamAction(this:StreamElement) {
     const content = this.templateElement.content;
-    document.body.append(content);
+    const target = document.getElementById('banner-messages') as HTMLElement;
+    target.innerHTML = '';
+    target.append(content);
   };
 }

modules/meeting/app/components/meetings/update_flash_component.html.erb

@@ -1,23 +1,19 @@
-<%=
-  component_wrapper do
-    flex_layout do |flex|
-      flex.with_row(classes: "op-toast--wrapper") do
-        render(Primer::Alpha::Banner.new(
-          full: false,
-          icon: 'info',
-          scheme: :default,
-          data: {
-            singleton: true
-          }
-        )) do |component|
-          component.with_action_button(
-              tag: :a,
-              href: meeting_path(@meeting),
-              data: { turbo: false },
-              size: :medium) { I18n.t("label_meeting_reload") }
-          I18n.t("notice_meeting_updated")
-        end
-      end
+<div class="op-primer-banner--item">
+  <%=
+    render(Primer::Alpha::Banner.new(
+      full: false,
+      icon: :info,
+      scheme: :default,
+      data: {
+        singleton: true
+      }
+    )) do |component|
+      component.with_action_button(
+        tag: :a,
+        href: meeting_path(@meeting),
+        data: { turbo: false },
+        size: :medium) { I18n.t("label_meeting_reload") }
+      I18n.t("notice_meeting_updated")
     end
-  end
-%>
+  %>
+</div>

modules/meeting/spec/features/structured_meetings/structured_meeting_update_flash_spec.rb

@@ -53,7 +53,7 @@
     end
 
     it do
-      flash_component = ".op-toast--wrapper"
+      flash_component = ".op-primer-banner--item"
 
       ## Add agenda item
       show_page.visit!
@@ -74,7 +74,7 @@
         show_page.trigger_change_poll
         expect(page).to have_css(flash_component, wait: 5)
         expect(page).to have_text I18n.t(:notice_meeting_updated)
-        page.within(".flash") { click_on "Reload" }
+        page.within(flash_component) { click_on "Reload" }
       end
 
       # Expect no notification in window2
@@ -103,7 +103,7 @@
         expect(page).to have_css(flash_component, wait: 5)
         expect(page).to have_text I18n.t(:notice_meeting_updated)
 
-        page.within(".flash") { click_on "Reload" }
+        page.within(flash_component) { click_on "Reload" }
 
         ## Add section
         show_page.add_section do
@@ -119,7 +119,7 @@
         show_page.trigger_change_poll
         expect(page).to have_css(flash_component, wait: 5)
         expect(page).to have_text I18n.t(:notice_meeting_updated)
-        page.within(".flash") { click_on "Reload" }
+        page.within(flash_component) { click_on "Reload" }
       end
 
       # Expect no notification in window2
@@ -147,7 +147,7 @@
         show_page.trigger_change_poll
         expect(page).to have_text I18n.t(:notice_meeting_updated)
 
-        page.within(".flash") { click_on "Reload" }
+        page.within(flash_component) { click_on "Reload" }
 
         ## Close meeting
         find_test_selector("close-meeting-button").click
@@ -158,7 +158,7 @@
         show_page.trigger_change_poll
         expect(page).to have_css(flash_component, wait: 5)
         expect(page).to have_text I18n.t(:notice_meeting_updated)
-        page.within(".flash") { click_on "Reload" }
+        page.within(flash_component) { click_on "Reload" }
       end
 
       # Expect no notification in window2

modules/meeting/spec/support/pages/structured_meeting/show.rb

@@ -43,8 +43,6 @@ def trigger_dropdown_menu_item(name)
 
     def trigger_change_poll
       script = <<~JS
-        // Remove flashes from the page to prevent race conditions
-        document.querySelectorAll('.op-toast--wrapper').forEach((el) => el.remove());
         var target = document.querySelector('[data-test-selector="meeting-page-header"]');
         var controller = window.Stimulus.getControllerForElementAndIdentifier(target, 'poll-for-changes')
         controller.triggerTurboStream();