fix: issues from review

fix: chevron respect select status

chore: removes a TODO

refactor: modal view component into subcomponents
adds tests

refactor: kebab to generic dropdown menu

fix: unsafe save

fix: view changes

.tool-versions

@@ -1 +1,2 @@
 ruby 3.2.2
+yarn 1.22.19

app/components/dropdown_menu_component.html.erb

@@ -0,0 +1,16 @@
+<div class="dropdown <%= @class %>">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <% if icon? %>
+      <%= render_icon %>
+    <% else %>
+      <svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title><%= @menu_title %></title>
+        <path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
+      </svg>
+    <% end %>
+    <%= button_label %>
+  </button>
+  <ul class="dropdown-menu">
+    <%= content %>
+  </ul>
+</div>

app/components/dropdown_menu_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class DropdownMenuComponent < ViewComponent::Base
+  renders_one :icon
+
+  def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, klass: nil)
+    @menu_title = menu_title
+    @render_check = render_check
+    @hide_label = hide_label
+    @icon_name = icon_name
+    @class = klass
+  end
+
+  def render_icon
+    return icon if icon.present?
+
+    content_tag(:i, nil, class: "lni mr-10 lni-#{@icon_name}")
+  end
+
+  def icon?
+    icon.present? || @icon_name.present?
+  end
+
+  def render?
+    @render_check && @menu_title.present? && content.present?
+  end
+
+  def button_label
+    content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : nil)
+  end
+end

app/components/modal/body_component.html.erb

@@ -0,0 +1,3 @@
+<div class="modal-body <%= @class %>">
+  <%= body_content %>
+</div>

app/components/modal/body_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Modal::BodyComponent < ViewComponent::Base
+  def initialize(text: nil, klass: nil, render_check: true)
+    @text = text
+    @render_check = render_check
+    @class = klass
+  end
+
+  def body_content
+    return content if content.present?
+
+    Array.wrap(@text).map do |text|
+      content_tag :p, text
+    end.join.html_safe
+  end
+
+  def render?
+    @render_check && (@text.present? || content.present?)
+  end
+end

app/components/modal/footer_component.html.erb

@@ -0,0 +1,4 @@
+<div class="modal-footer <%= @class %>">
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  <%= content %>
+</div>

app/components/modal/footer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Modal::FooterComponent < ViewComponent::Base
+  def initialize(klass: nil, render_check: true)
+    @render_check = render_check
+    @class = klass
+  end
+
+  def render?
+    @render_check && content.present?
+  end
+end

app/components/modal/group_component.html.erb

@@ -0,0 +1,9 @@
+<div class="modal fade <%= @class %>" id="<%= @id %>" tabindex="-1" aria-labelledby="<%= @id %>-label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <%= header %>
+      <%= body %>
+      <%= footer %>
+    </div>
+  </div>
+</div>

app/components/modal/group_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Modal::GroupComponent < ViewComponent::Base
+  renders_one :header, Modal::HeaderComponent
+  renders_one :body, Modal::BodyComponent
+  renders_one :footer, Modal::FooterComponent
+
+  def initialize(id:, klass: nil, render_check: true)
+    @id = id
+    @class = klass
+    @render_check = render_check
+  end
+
+  def render?
+    @render_check && (body.present? || header.present?)
+  end
+end

app/components/modal/header_component.html.erb

@@ -0,0 +1,4 @@
+<div class="modal-header <%= @class %>">
+  <%= header_content %>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>

app/components/modal/header_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Modal::HeaderComponent < ViewComponent::Base
+  def initialize(id:, text: nil, icon: nil, klass: nil, render_check: true)
+    @text = text
+    @id = id
+    @icon = icon
+    @render_check = render_check
+    @class = klass
+  end
+
+  def header_content
+    return content if content.present?
+
+    content_tag :h1, class: "modal-title fs-5", id: "#{@id}-label" do
+      concat(content_tag(:i, nil, class: "lni mr-10 lni-#{@icon}")) if @icon.present?
+      concat(@text)
+    end
+  end
+
+  def render?
+    @render_check && (@text.present? || content.present?)
+  end
+end

app/components/modal/open_button_component.html.erb

@@ -0,0 +1,6 @@
+<button type="button" class="btn <%= @class %>" data-bs-toggle="modal" data-bs-target="<%= "##{@target}" %>">
+  <% if @icon %>
+    <i class="lni mr-10 lni-<%= @icon %>"></i>
+  <% end %>
+  <%= open_button %>
+</button>

app/components/modal/open_button_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Modal::OpenButtonComponent < ViewComponent::Base
+  def initialize(target:, text: nil, klass: nil, icon: nil, render_check: true)
+    @target = target
+    @text = text
+    @icon = icon
+    @render_check = render_check
+    @class = klass
+  end
+
+  def open_button
+    return content if content.present?
+
+    @text
+  end
+
+  def render?
+    @render_check && (@text.present? || content.present?)
+  end
+end

app/components/modal/open_link_component.html.erb

@@ -0,0 +1,6 @@
+<a href="#" role="button" class="btn <%= @class %>" data-bs-toggle="modal" data-bs-target="<%= "##{@target}" %>">
+  <% if @icon %>
+    <i class="lni mr-10 lni-<%= @icon %>"></i>
+  <% end %>
+  <%= open_link %>
+</a>

app/components/modal/open_link_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Modal::OpenLinkComponent < ViewComponent::Base
+  def initialize(target:, text: nil, icon: nil, klass: nil, render_check: true)
+    @target = target
+    @text = text
+    @icon = icon
+    @class = klass
+    @render_check = render_check
+  end
+
+  def open_link
+    return content if content.present?
+
+    @text
+  end
+
+  def render?
+    @render_check && (@text.present? || content.present?)
+  end
+end

app/controllers/case_contacts_controller.rb

@@ -48,9 +48,15 @@ def new
         []
       end
 
-    @case_contact = CaseContact.create(creator: current_user, draft_case_ids: draft_case_ids)
-    @case_contact.create_contact_topic_answers!(current_organization) # NOTE: Should this be a callback?
-    redirect_to case_contact_form_path(CaseContact::FORM_STEPS.first, case_contact_id: @case_contact.id)
+    @case_contact = CaseContact.create_with_answers(current_organization,
+      creator: current_user, draft_case_ids: draft_case_ids)
+
+    if @case_contact.errors.any?
+      flash[:alert] = @case_contact.errors.full_messages.join("\n")
+      redirect_to request.referer
+    else
+      redirect_to case_contact_form_path(CaseContact::FORM_STEPS.first, case_contact_id: @case_contact.id)
+    end
   end
 
   def edit

app/models/case_contact.rb

@@ -259,12 +259,14 @@ def volunteer
     end
   end
 
-  def create_contact_topic_answers!(casa_org)
-    casa_org.contact_topics.active.each do |topic|
-      contact_topic_answers << ContactTopicAnswer.new(contact_topic: topic)
+  def self.create_with_answers(casa_org, **kwargs)
+    create(kwargs).tap do |case_contact|
+      casa_org.contact_topics.active.each do |topic|
+        unless case_contact.contact_topic_answers << ContactTopicAnswer.new(contact_topic: topic)
+          case_contact.errors.add(:contact_topic_answers, "could not create topic #{topic&.question.inspect}")
+        end
+      end
     end
-
-    save!
   end
 
   def self.options_for_sorted_by

app/views/casa_org/_contact_topics.html.erb

@@ -27,7 +27,8 @@
           </thead>
           <tbody>
             <% @contact_topics.each do |contact_topic| %>
-              <tr id="contact_topic-<%= contact_topic.id %>">
+              <% id = "contact_topic-#{contact_topic.id}" %>
+              <tr>
                 <td scope="row" class="min-width">
                   <%= contact_topic.question %>
                 </td>
@@ -36,29 +37,24 @@
                   <%= contact_topic.active ? "Yes" : "No" %>
                 </td>
                 <td>
-                  <%= render(KebabMenuComponent.new(menu_title: "Actions Menu")) do %>
+                  <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do %>
                     <li><%= link_to "Edit", edit_contact_topic_path(contact_topic), class: "dropdown-item" %></li>
-                    <li><%= render(ModalComponent.new( id: "contact_topic-#{contact_topic.id}", modal: false, button_value: "Delete")) %></li>
+                    <li><%= render(Modal::OpenLinkComponent.new(text: "Delete", target: id, klass: "dropdown-item")) %></li>
                   <% end %>
                 </td>
               </tr>
-              <%= render(ModalComponent.new(
-                id: "contact_topic-#{contact_topic.id}",
-                button: false,
-                header_text: "Delete Court Report Topic?"
-              )) do |component| %>
-                <% component.with_modal_footer do %>
+              <%= render(Modal::GroupComponent.new(id: id)) do |component| %>
+                <% component.with_header(text: "Delete Contact Topic?", id: id) %>
+                <% component.with_body(text: [
+                  "This topic and its related questions will be deleted and will no longer be presented while filling out case contacts.",
+                  "This will not affect case contacts that have already been created."]) %>
+                <% component.with_footer do %>
                   <%= link_to soft_delete_contact_topic_path(contact_topic), method: :delete,
                     class: "btn-sm main-btn danger-btn btn-hover ms-auto" do %>
                     <i class="lni lni-trash-can mr-10"></i>
                     Delete Court Report Topic
                   <% end %>
                 <% end %>
-                <% component.with_modal_content do %>
-                  <p>This topic and its related questions will be deleted and will no longer be presented while filling out case contacts.</p>
-                  <br>
-                  <p>This will not affect case contacts that have already been created.</p>
-                <% end %>
               <% end %>
             <% end %>
           </tbody>

app/views/case_contacts/form/_contact_topic_notes.html.erb

@@ -17,7 +17,7 @@
                    type="button"
                    id="<%= answer_id %>_button"
                    aria-expanded="false">
-             <i class="lni lni-chevron-up" data-icon-toggle-target="icon"></i>
+             <i class="lni <%= f.object.selected ? "lni-chevron-up" : "lni-chevron-down" %>" data-icon-toggle-target="icon"></i>
            </button>
       </div>