added better formatting for add ons

app/javascript/controllers/environment_variables_controller.js

@@ -0,0 +1,45 @@
+// Customizable command palette for advanced users
+// Opens with cmd+k or ctrl+k by default
+// https://github.com/excid3/ninja-keys
+
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container"]
+  static values = {
+    vars: String
+  }
+
+  connect() {
+    const vars = JSON.parse(this.varsValue)
+    vars.forEach(v => {
+      console.log(v)
+      this._add(v.name, v.value)
+    })
+  }
+
+  add(e) {
+    e.preventDefault();
+    this._add("", "")
+  }
+
+  _add(name, value) {
+    const container = this.containerTarget;
+    const div = document.createElement("div");
+    // Make the value 3x the width of the name
+    div.innerHTML = `
+      <div class="flex items-center my-4 space-x-2">
+        <input type="text" name="environment_variables[][name]" class="form-control w-1/3" value="${name}" />
+        <input type="text" name="environment_variables[][value]" class="form-control w-2/3" value="${value}" />
+        <button type="button" class="btn btn-danger" data-action="environment-variables#remove">Delete</button>
+      </div>
+    `;
+    container.appendChild(div);
+  }
+
+  remove(e) {
+    e.preventDefault();
+    const div = e.target.closest("div");
+    div.remove();
+  }
+}

app/javascript/controllers/new_add_ons_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "card"]
+  static values = { repository: String }
+
+  connect() {
+    console.log("HelmChartSelector controller connected")
+  }
+
+  selectChart(event) {
+    event.preventDefault()
+    this.inputTarget.value = event.currentTarget.dataset.chartName
+    this.cardTargets.forEach(card => card.classList.remove('ring', 'ring-primary'))
+    event.currentTarget.classList.add('ring', 'ring-primary')
+    // Show Input
+    this.element.querySelectorAll('.chart-form').forEach(form => form.classList.add('hidden'))
+    document.getElementById(`chart-${event.currentTarget.dataset.chartName}`).classList.remove("hidden");
+  }
+}

app/javascript/controllers/partial_select_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["select", "toggleable"]
+  static values = {
+    selectAttribute: String
+  }
+
+  connect() {
+    this.toggle()
+  }
+
+  toggle() {
+    const selectedValue = this.selectTarget.value
+    this.toggleableTargets.forEach(element => {
+      const shouldShow = element.getAttribute(this.selectTarget.dataset.selectAttributeValue) === selectedValue
+      element.classList.toggle('hidden', !shouldShow)
+    })
+  }
+}