Render flashes along with table

It doesn't matter where the flash messages appear in the HTML (thanks to fixed positioning), so why not keep it simple and send them with the main response.

preventDefault in case we are inside a form, so the button doesn't submit it.

app/reflexes/application_reflex.rb

@@ -24,11 +24,4 @@ class ApplicationReflex < StimulusReflex::Reflex
   def morph_admin_flashes
     morph "#flashes", render(partial: "admin/shared/flashes", locals: { flashes: flash })
   end
-
-  def broadcast_admin_flashes
-    cable_ready.replace(
-      selector: "#flashes",
-      html: render(partial: "admin/shared/flashes", locals: { flashes: flash })
-    ).broadcast
-  end
 end

app/reflexes/products_reflex.rb

@@ -43,8 +43,7 @@ class ProductsReflex < ApplicationReflex
       @error_counts = { saved: product_set.saved_count, invalid: product_set.invalid.count }
     end
 
-    render_products_form
-    broadcast_admin_flashes if flash.any?
+    render_products_form_with_flash
   end
 
   private
@@ -85,9 +84,10 @@ class ProductsReflex < ApplicationReflex
     morph :nothing
   end
 
-  def render_products_form
+  def render_products_form_with_flash
     locals = { products: @products }
     locals[:error_counts] = @error_counts if @error_counts.present?
+    locals[:flashes] = flash if flash.any?
 
     cable_ready.replace(
       selector: "#products-form",

app/views/admin/products_v3/_table.html.haml

@@ -4,6 +4,7 @@
                    'data-controller': "bulk-form", 'data-bulk-form-disable-selector-value': "#sort,#filters",
                    'data-bulk-form-error-value': defined?(error_counts),
                   } do |form|
+  = render(partial: "admin/shared/flashes", locals: { flashes: }) if defined? flashes
   %fieldset.form-actions{ class: ("hidden" unless defined?(error_counts)), 'data-bulk-form-target': "actions" }
     .container
       .status.eleven.columns

app/webpacker/controllers/flash_controller.js

@@ -15,11 +15,12 @@ export default class extends Controller {
     }
   }
 
-  close() {
+  close(e) {
     // Fade out
     this.element.classList.remove("animate-show");
     this.element.classList.add("animate-hide-500");
     setTimeout(this.remove.bind(this), 500);
+    e && e.preventDefault(); // Prevent submitting if we're inside a form
   }
 
   remove() {

app/webpacker/css/admin_v3/components/messages.scss

@@ -27,6 +27,7 @@
 
 .flash-container {
   position: fixed;
+  left: 0;
   bottom: 0;
   width: 100%;
   z-index: 1000;