Guard the alert kind, and let long alert text run the full width (#4023)

Follow-up to #4020. An unknown alert kind used to fall back to notice
silently, so a caller that passed a typo'd or unhandled kind got a blue
box and no signal. And a dismissable alert's text could only wrap inside
its own column, so a long message pushed the dismiss button onto a line
of its own.

- **`kind` defaults to `:notice`, and anything outside `KINDS` raises.**
An omitted kind and a wrong one used to be the same input; now only the
wrong one is an error. Deployed environments notify Honeybadger and fall
back instead of raising — the flash is swept after the layout renders,
so a raise from there would raise again on every subsequent request.
That's `production? || sandbox?`, per the gotcha in
`config/environments/sandbox.rb`.
- **`UI::Alerts::FlashMessage` drops its own copy of that guard** and
hands the flash type straight to the alert.
- **The icon and dismiss button float rather than sitting in a flex
row**, so an alert's first line renders between them and every line
after runs the full width. A float displaces only the lines it overlaps,
which a flex item can't do — its text is stuck in its own column. Both
are kept to about a line tall and precede the text, which is what floats
require; the dismiss button moving above the message in the DOM also
puts it first in tab order.
- **Preview reorganization**: the warning kind variant is now the header
variant, the separate header group is gone, and the dismissable group
picks up a header variant and a long-text purple one that exercises the
wrapping above.

The `MARKUP_DIGEST` bumps are these edits reaching templates inside
fragment caches.

Author: sethherr

app/components/admin/bikes_table/component.rb

@@ -8,7 +8,7 @@ module BikesTable
     # checkboxes, and skip_user to drop the owner column.
     class Component < ApplicationComponent
       # Digest of the markup inside the row cache — the cached_markup_digest spec keeps it current
-      MARKUP_DIGEST = "864a82f880b3"
+      MARKUP_DIGEST = "96fa3d808254"
 
       def initialize(bikes:, no_show_header: false, show_serial: false, render_sortable: false,
         skip_user: false, render_multi_check: false)

app/components/admin/users_table/component.rb

@@ -6,7 +6,7 @@ module UsersTable
     # render_deleted to show the deleted_at column.
     class Component < ApplicationComponent
       # Digest of the markup inside the row cache — the cached_markup_digest spec keeps it current
-      MARKUP_DIGEST = "bc1f91c7d43d"
+      MARKUP_DIGEST = "ffd7f9f91f03"
 
       def initialize(users:, render_sortable: false, render_deleted: false)
         @users = users

app/components/registrations/show/wrapper/component.rb

@@ -8,7 +8,7 @@ module Wrapper
       class Component < ApplicationComponent
         # Digest of the markup inside the cache block — the cached_markup_digest spec
         # keeps it current, following what this tree renders out into UI:: and elsewhere
-        MARKUP_DIGEST = "2c440bc315b8"
+        MARKUP_DIGEST = "86faa178a90f"
 
         def initialize(bike:, current_user:, view:, available_views:, bike_sticker: nil, current_alerts: {})
           @bike = bike

app/components/ui/alerts/base/component.html.erb

@@ -1,33 +1,22 @@
 <div
-  class="tw:flex tw:flex-wrap tw:items-baseline tw:gap-x-4 tw:gap-y-2 tw:rounded-sm tw:border tw:p-4 tw:transition-all tw:duration-300 <%= @margin_classes %> <%= color_classes %>"
+  class="tw:flow-root tw:rounded-sm tw:border tw:p-4 tw:transition-all tw:duration-300 <%= @margin_classes %> <%= color_classes %>"
   role="alert"
   data-controller="ui--alert"
 >
-  <div class="tw:w-4">
+  <div class="tw:float-left tw:mr-4 tw:w-4 <%= icon_classes %>">
     <% if @icon.present? %>
       <%= @icon %>
     <% else %>
-      <%= helpers.inline_svg_tag("icons/info.svg", class: "tw:-mb-0.5 tw:h-4 tw:w-4 tw:shrink-0", aria_hidden: true) %>
+      <%= helpers.inline_svg_tag("icons/info.svg", class: "tw:-mb-0.5 tw:h-4 tw:w-4", aria_hidden: true) %>
     <% end %>
 
     <span class="tw:sr-only"><%= @kind.to_s.titleize %></span>
   </div>
 
-  <% if @header.present? %>
-    <h4 class="uncap tw:mb-0! tw:flex-1 tw:text-lg! <%= text_color_classes_important %>">
-      <%= @header %>
-    </h4>
-  <% end %>
-
-  <div class="<%= body_classes %>">
-    <%= @text %>
-    <%= content %>
-  </div>
-
   <% if @dismissable %>
     <button
       type="button"
-      class="tw:-mx-1.5 tw:-my-1.5 tw:inline-flex tw:h-8 tw:w-8 tw:items-center tw:justify-center tw:rounded-sm tw:p-1.5 tw:focus:ring-2 <%= dismissable_color_classes %>"
+      class="tw:float-right tw:-my-1.5 tw:-mr-1.5 tw:ml-4 tw:inline-flex tw:h-8 tw:w-8 tw:items-center tw:justify-center tw:rounded-sm tw:p-1.5 tw:focus:ring-2 <%= dismissable_color_classes %>"
       aria-label="Close"
       data-action="click->ui--alert#close"
     >
@@ -50,4 +39,15 @@
       </svg>
     </button>
   <% end %>
+
+  <% if @header.present? %>
+    <h4 class="uncap tw:mb-2! tw:text-lg! <%= text_color_classes_important %>">
+      <%= @header %>
+    </h4>
+  <% end %>
+
+  <div>
+    <%= @text %>
+    <%= content %>
+  </div>
 </div>

app/components/ui/alerts/base/component.rb

@@ -15,24 +15,32 @@ class Component < ApplicationComponent
 
         # icon: rendered markup, e.g. inline_svg_tag("icons/envelope.svg", class: "tw:h-4 tw:w-4") -
         # replaces the default info icon
-        def initialize(text: nil, header: nil, kind: nil, dismissable: false, margin_classes: "tw:mb-4", icon: nil)
+        def initialize(text: nil, header: nil, kind: :notice, dismissable: false, margin_classes: "tw:mb-4", icon: nil)
           @text = text
           @header = header
-          @kind = if KINDS.include?(kind&.to_sym)
-            kind&.to_sym
-          else
-            KINDS.first
-          end
+          @kind = normalized_kind(kind)
           @dismissable = dismissable
           @margin_classes = margin_classes
           @icon = icon
         end
 
         private
 
-        # order-last keeps the dismiss button, which is last in the DOM, up on the header row
-        def body_classes
-          @header.present? ? "tw:order-last tw:basis-full" : "tw:grow"
+        def normalized_kind(kind)
+          return kind.to_sym if KINDS.include?(kind&.to_sym)
+
+          unless Rails.env.production?
+            raise ArgumentError, "unknown kind #{kind.inspect}, expected one of: #{KINDS.join(", ")}"
+          end
+
+          Honeybadger.notify("Unknown alert kind", {error_class: self.class.to_s, context: {kind:}})
+          KINDS.first
+        end
+
+        # A float's box sits at the top of the line it shares, not on that line's
+        # baseline, so nudge it down onto one -- further for a header
+        def icon_classes
+          @header.present? ? "tw:mt-[7px]" : "tw:mt-1"
         end
 
         def color_classes

app/components/ui/alerts/base/component_preview.rb

@@ -5,6 +5,7 @@ module Alerts
     module Base
       class ComponentPreview < ApplicationComponentPreview
         CONFIRMATION_TEXT = "We've sent a confirmation link to your email. No need to wait — you can finish registering right now."
+        LONG_TEXT = "Bauhaus williamsburg seitan rams 8-bit live-edge edison bulb pork belly chia. Black trumpet locavore DSA wabi-sabi fitzcarraldo angela davis. Cassavetes dad shoes japanese breakfast gatekeep truffaut, offal wolf."
 
         # @!group Kind variants
         def notice
@@ -15,8 +16,8 @@ def error
           render(UI::Alerts::Base::Component.new(text: "This is an error alert", kind: :error))
         end
 
-        def warning
-          render(UI::Alerts::Base::Component.new(text: "This is a warning alert", kind: :warning))
+        def with_header
+          render(UI::Alerts::Base::Component.new(header: "Registration incomplete", kind: :warning, text: CONFIRMATION_TEXT))
         end
 
         def success
@@ -34,17 +35,6 @@ def custom_icon
         end
         # @!endgroup
 
-        # @!group Header variants
-        def with_header
-          render(UI::Alerts::Base::Component.new(header: "Registration incomplete", kind: :warning, text: CONFIRMATION_TEXT))
-        end
-
-        def dismissable_with_header
-          render(UI::Alerts::Base::Component.new(header: "Registration incomplete", kind: :warning, text: CONFIRMATION_TEXT,
-            dismissable: true))
-        end
-        # @!endgroup
-
         # @!group Dismissable variants
         def dismissable_notice
           render(UI::Alerts::Base::Component.new(text: "Dismissable notice", kind: :notice, dismissable: true))
@@ -53,6 +43,15 @@ def dismissable_notice
         def dismissable_error
           render(UI::Alerts::Base::Component.new(text: "Dismissable error", kind: :error, dismissable: true))
         end
+
+        def dismissable_purple
+          render(UI::Alerts::Base::Component.new(text: LONG_TEXT, kind: :purple, dismissable: true))
+        end
+
+        def dismissable_with_header
+          render(UI::Alerts::Base::Component.new(header: "Registration incomplete", kind: :warning, text: CONFIRMATION_TEXT,
+            dismissable: true))
+        end
         # @!endgroup
       end
     end

app/components/ui/alerts/flash_message/component.rb

@@ -15,18 +15,9 @@ def initialize(flash: {})
         def messages
           @flash.filter_map do |type, message|
             next unless message.is_a?(String)
-            {text: message, kind: kind_for(type)}
+            {text: message, kind: type}
           end
         end
-
-        # Rails sweeps the flash after the layout renders, so raising here would raise again
-        # on the next request too -- keep it to the environments where that's a useful signal.
-        def kind_for(type)
-          kind = type.to_sym
-          return kind if UI::Alerts::Base::Component::KINDS.include?(kind)
-          raise ArgumentError, "Unknown flash type: #{type}" if Rails.env.local?
-          UI::Alerts::Base::Component::KINDS.first
-        end
       end
     end
   end

spec/components/ui/alerts/base/component_spec.rb

@@ -6,7 +6,7 @@
   let(:options) { {text: "some text"} }
   let(:component) { render_inline(described_class.new(**options)) }
 
-  it "renders" do
+  it "renders, defaulting to the notice kind" do
     expect(component).to be_present
     expect(component).to have_css('[role="alert"].tw:text-blue-800')
     expect(component.to_html).to include "M10 9.25v4.5" # the default info icon
@@ -55,6 +55,34 @@
     end
   end
 
+  describe "unknown kind" do
+    let(:options) { {text: "some text", kind: "bogus"} }
+
+    it "raises" do
+      expect { component }.to raise_error(ArgumentError, /unknown kind/i)
+    end
+
+    context "passed nil, rather than omitted" do
+      let(:options) { {text: "some text", kind: nil} }
+
+      it "raises" do
+        expect { component }.to raise_error(ArgumentError, /unknown kind/i)
+      end
+    end
+
+    context "in production" do
+      before { allow(Rails).to receive(:env).and_return("production".inquiry) }
+
+      it "renders a notice and notifies" do
+        stub_const("Honeybadger", spy("Honeybadger"))
+
+        expect(component).to have_css('[role="alert"].tw:text-blue-800')
+        expect(Honeybadger).to have_received(:notify)
+          .with("Unknown alert kind", hash_including(context: {kind: "bogus"}))
+      end
+    end
+  end
+
   context "success dismissable" do
     let(:options) { {text: "some text", kind: "success", dismissable: true} }
     it "renders with dismissable" do

spec/components/ui/alerts/flash_message/component_spec.rb

@@ -48,8 +48,8 @@
   context "with an unknown flash type" do
     let(:flash) { {bogus: "Who knows"} }
 
-    it "raises" do
-      expect { component }.to raise_error(ArgumentError, /unknown flash type/i)
+    it "raises, from the kind it hands the alert" do
+      expect { component }.to raise_error(ArgumentError, /unknown kind/i)
     end
   end
 end