Clean up stimulus usage

Use value and parameter when possible instead of relying on hidden
input

app/components/add_tag_rule_modal_component.rb

@@ -2,7 +2,7 @@
 
 class AddTagRuleModalComponent < ModalComponent
   def initialize(id:, tag_rule_types:, current_index:, div_id:, is_default: false,
-                 customer_tag: "" )
+                 customer_tag: "", hidden_field_customer_tag_options: {} )
     super
 
     @close_button = false
@@ -13,7 +13,9 @@ class AddTagRuleModalComponent < ModalComponent
     @div_id = div_id
     @is_default = is_default
     @customer_tag = customer_tag
+    @hidden_field_customer_tag_options = hidden_field_customer_tag_options
   end
 
-  attr_reader :tag_rule_types, :current_index, :div_id, :is_default, :customer_tag
+  attr_reader :tag_rule_types, :current_index, :div_id, :is_default, :customer_tag,
+              :hidden_field_customer_tag_options
 end

app/components/add_tag_rule_modal_component/add_tag_rule_modal_component.html.haml

@@ -6,18 +6,26 @@
 %div{ id: @id, "data-controller": @data_controller, "data-action": @data_action, "data-modal-instant-value": @instant, **@options }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
   .reveal-modal.fade.modal-component{ "data-modal-target": "modal", class: @modal_class }
-    #new-tag-rule-dialog{ "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal", "data-action": "add-tag-rule-modal-component--add-tag-rule-modal:ruleAdded->tag-rule-index#added" }
-      = hidden_field_tag "current_index", current_index, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "index" }
-      = hidden_field_tag "div_id", div_id, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "divId" }
-      = hidden_field_tag "is_default", is_default, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "isDefault" }
-      -# TODO the group-form stuff should be passed as a dependency
-      = hidden_field_tag "customer_tag", customer_tag, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "ruleCustomerTag", "data-tag-rule-group-form-component--tag-rule-group-form-target": "ruleCustomerTag" }
+    #new-tag-rule-dialog{ "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal",
+      "data-add-tag-rule-modal-component--add-tag-rule-modal-index-value": current_index } 
+
+      -# Ideally we would use event to communicate the update of customer tag, but we would need 
+      -# the element with  "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal" 
+      -# to be parent of the element with "data-controller": "tag-rule-group-form-component--tag-rule-group-form" 
+      -# so it could respond to event generated by  "tag-rule-group-form-component--tag-rule-group-form".
+      -# Here we are in the opposite situation so we use a hidden field to store the value of 
+      -# the customer tag, so it can be updated by "tag-rule-group-form-component--tag-rule-group-form"
+      = hidden_field_tag "customer_tag", customer_tag, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "ruleCustomerTag" }.merge(hidden_field_customer_tag_options)
       .text-normal.margin-bottom-30.text-center
         = t('components.add_tag_rule_modal.select_rule_type')
       .text-center.margin-bottom-30
         = select_tag :rule_type_selector, options_for_select(tag_rule_types), { "data-controller": "tom-select", "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "rule", class: "primary no-search" }
       .text-center
-        %input.button.red.icon-plus{ type: 'button', value: "#{t('components.add_tag_rule_modal.add_rule')}", "data-action": "click->add-tag-rule-modal-component--add-tag-rule-modal#add click->modal#close", }
+        %input.button.red.icon-plus{ type: 'button',
+          value: "#{t('components.add_tag_rule_modal.add_rule')}",
+          "data-action": "click->add-tag-rule-modal-component--add-tag-rule-modal#add click->modal#close",
+          "data-add-tag-rule-modal-component--add-tag-rule-modal-div-id-param": div_id,
+          "data-add-tag-rule-modal-component--add-tag-rule-modal-is-default-param": "#{is_default}"}
 
     - if close_button?
       .text-center

app/components/add_tag_rule_modal_component/add_tag_rule_modal_controller.js

@@ -1,14 +1,17 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  static targets = ["rule", "index", "divId", "isDefault", "ruleCustomerTag"];
+  static targets = ["rule", "ruleCustomerTag"];
+  static values = { index: Number };
 
-  add() {
+  add({ params }) {
     const rule_type = this.ruleTarget.value;
-    const index = this.indexTarget.value;
-    const divId = this.divIdTarget.value;
-    const isDefault = this.isDefaultTarget.value;
-    const customerTags = this.hasRuleCustomerTagTarget ? this.ruleCustomerTagTarget.value : undefined;
+    const index = this.indexValue;
+    const divId = params["divId"];
+    const isDefault = params["isDefault"];
+    const customerTags = this.hasRuleCustomerTagTarget
+      ? this.ruleCustomerTagTarget.value
+      : undefined;
 
     const urlParams = new URLSearchParams();
     urlParams.append("rule_type", rule_type);
@@ -29,7 +32,7 @@ export default class extends Controller {
       .then((r) => r.text())
       .then((html) => {
         Turbo.renderStreamMessage(html);
-        this.indexTarget.value = parseInt(index) + 1;
+        this.indexValue = parseInt(index) + 1;
       })
       .catch((error) => console.warn(error));
   }

app/components/tag_rule_group_form_component/tag_rule_group_form_component.html.haml

@@ -31,4 +31,9 @@
     .add_rule.text-center
       %input.button{ type: 'button', value: t('components.tag_rule_group_form.add_new_rule'), "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "tag_rule_add_new_rule_#{index}" }
 
-  = render AddTagRuleModalComponent.new(id: "tag_rule_add_new_rule_#{index}", tag_rule_types: tag_rule_types, current_index: (rule_index + 1), div_id: customer_tag_rule_div_id, customer_tag: group[:tags])
+  = render AddTagRuleModalComponent.new(id: "tag_rule_add_new_rule_#{index}",
+    tag_rule_types: tag_rule_types,
+    current_index: (rule_index + 1),
+    div_id: customer_tag_rule_div_id,
+    customer_tag: group[:tags],
+    hidden_field_customer_tag_options: { "data-tag-rule-group-form-component--tag-rule-group-form-target": "ruleCustomerTag" })