Fix AND prefix on rule form (#2234)

* Fix AND prefix on rule form

This new condition prefix data target is used to ensure the AND prefix is added/removed to additional conditions/groups when there aren't any saved conditions yet.

* Ensure the condition group "Add condition" button is type button to avoid form submission

* Add prefix update when removing a subcondition

* Use data condition to update the prefix on conditions, condition groups, and subconditions

* Use condition remove instead of element remove for condition groups so prefix logic runs

* Add back explicit show_prefixes to ensure subconditions never have a prefix

* Run the prefix update runs on a load of a form, which handles prefixes on an edit since no conditions change

* Ensure saved items that are marked for removal don't impact the index

* Simplify logic since we don't process subconditions

* Clean up comments

* Add primary_condition_title field to rule model

app/views/rule/conditions/_condition.html.erb

@@ -4,8 +4,11 @@
 <% rule = condition.rule %>
 
 <li data-controller="rule--conditions" data-rule--conditions-condition-filters-value="<%= rule.condition_filters.to_json %>" class="flex items-center gap-3">
-  <% if form.index.to_i > 0 && show_prefix %>
-    <div class="pl-4">
+
+  <%# Conditionally render the prefix %>
+  <%# Condition groups pass in show_prefix: false for subconditions since the ANY/ALL selector makes that clear %>
+  <% if show_prefix %>
+    <div class="pl-2" data-condition-prefix>
       <span class="font-medium uppercase text-xs">and</span>
     </div>
   <% end %>

app/views/rule/conditions/_condition_group.html.erb

@@ -3,17 +3,16 @@
 <% condition = form.object %>
 <% rule = condition.rule %>
 
-<li data-controller="rule--conditions element-removal" class="border border-secondary rounded-md p-4 space-y-3">
+<li data-controller="rule--conditions" class="border border-secondary rounded-md p-4 space-y-3">
 
   <%= form.hidden_field :condition_type, value: "compound" %>
 
   <div class="flex items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <% unless form.index == 0 %>
-        <div class="pl-2">
-          <span class="font-medium uppercase text-xs">and</span>
-        </div>
-      <% end %>
+      <%# Show prefix on condition groups, except the first one %>
+      <div class="pl-2" data-condition-prefix>
+        <span class="font-medium uppercase text-xs">and</span>
+      </div>
       <p class="text-sm text-secondary">match</p>
       <%= form.select :operator, [["all", "and"], ["any", "or"]], { container_class: "w-fit" }, data: { rules_target: "operatorField" } %>
       <p class="text-sm text-secondary">of the following conditions</p>
@@ -21,16 +20,16 @@
 
     <%= icon(
       "trash-2",
-      size: "sm",
       as_button: true,
-      data: { action: "element-removal#remove" }
+      size: "sm",
+      data: { action: "rule--conditions#remove" }
     ) %>
   </div>
 
   <%# Sub-condition template, used by Stimulus controller to add new sub-conditions dynamically %>
   <template data-rule--conditions-target="subConditionTemplate">
     <%= form.fields_for :sub_conditions, Rule::Condition.new(parent: condition, condition_type: rule.condition_filters.first.key), child_index: "IDX_PLACEHOLDER" do |scf| %>
-      <%= render "rule/conditions/condition", form: scf %>
+      <%= render "rule/conditions/condition", form: scf, show_prefix: false %>
     <% end %>
   </template>
 
@@ -44,6 +43,7 @@
     text: "Add condition",
     leading_icon: "plus",
     variant: "ghost",
+    type: "button",
     data: { action: "rule--conditions#addSubCondition" }
   ) %>
 </li>

app/views/rules/_form.html.erb

@@ -12,7 +12,7 @@
   <section class="space-y-4">
     <h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
 
-    <%# Condition template, used by Stimulus controller to add new conditions dynamically %>
+    <%# Condition Group template, used by Stimulus controller to add new conditions dynamically %>
     <template data-rules-target="conditionGroupTemplate">
       <%= f.fields_for :conditions, Rule::Condition.new(rule: rule, condition_type: "compound", operator: "and"), child_index: "IDX_PLACEHOLDER" do |cf| %>
         <%= render "rule/conditions/condition_group", form: cf %>

app/views/rules/_rule.html.erb

@@ -4,12 +4,8 @@
   <div class="text-sm space-y-1.5">
     <% if rule.conditions.any? %>
       <p class="flex items-center flex-wrap gap-1.5">
-        <span class="px-2 py-1 border border-alpha-black-200 rounded-full">
-          <% if rule.conditions.first.compound? %>
-            If <%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
-          <% else %>
-            If <%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
-          <% end %>
+        <span class="px-2 py-1 border border-secondary rounded-full">
+          <%= rule.primary_condition_title %>
         </span>
 
         <% if rule.conditions.count > 1 %>