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.

app/javascript/controllers/rules_controller.js

@@ -16,6 +16,7 @@ export default class extends Controller {
       this.conditionGroupTemplateTarget,
       this.conditionsListTarget,
     );
+    this.updateConditionPrefixes();
   }
 
   addCondition() {
@@ -23,6 +24,7 @@ export default class extends Controller {
       this.conditionTemplateTarget,
       this.conditionsListTarget,
     );
+    this.updateConditionPrefixes();
   }
 
   addAction() {
@@ -45,4 +47,15 @@ export default class extends Controller {
   #uniqueKey() {
     return Date.now();
   }
+
+  updateConditionPrefixes() {
+    const items = this.conditionsListTarget.querySelectorAll('[data-condition-prefix]');
+    items.forEach((el, idx) => {
+      if (idx === 0) {
+        el.classList.add('hidden');
+      } else {
+        el.classList.remove('hidden');
+      }
+    });
+  }
 }

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

@@ -6,10 +6,13 @@
 <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">
-      <span class="font-medium uppercase text-xs">and</span>
+      <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+    </div>
+  <% else %>
+    <div class="pl-4">
+      <span class="font-medium uppercase text-xs hidden" data-condition-prefix>and</span>
     </div>
   <% end %>
-
   <div class="grow flex gap-2 items-center h-full">
     <%= form.hidden_field :_destroy, value: false, data: { rule__conditions_target: "destroyField" } %>
 

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

@@ -11,7 +11,11 @@
     <div class="flex items-center gap-2">
       <% unless form.index == 0 %>
         <div class="pl-2">
-          <span class="font-medium uppercase text-xs">and</span>
+          <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+        </div>
+      <% else %>
+        <div class="pl-2">
+          <span class="font-medium uppercase text-xs hidden" data-condition-prefix>and</span>
         </div>
       <% end %>
       <p class="text-sm text-secondary">match</p>