fix: [sources] display requirements on connection changes too

flowintel · Oct 15, 2024 · 9cf7d18 · 9cf7d18
1 parent 3e8f419
commit 9cf7d18
Showing 1 changed file with 42 additions and 30 deletions.
diff --git a/lib/cocktailparty_web/controllers/source_html/source_form.html.heex b/lib/cocktailparty_web/controllers/source_html/source_form.html.heex
@@ -29,34 +29,10 @@
   // Include the connection_source_types map as a JavaScript variable
   var connectionSourceTypes = <%= raw(Jason.encode!(@connection_source_types)) %>;
 
-  document.getElementById("source_connection_id").addEventListener("change", function() {
-    const connectionId = this.value;
-    const sourceTypeSelect = document.getElementById("source_type");
-    sourceTypeSelect.innerHTML = '';
-
-    if (connectionSourceTypes[connectionId]) {
-      connectionSourceTypes[connectionId].forEach(function(sourceTypeInfo) {
-        const option = document.createElement("option");
-        option.value = sourceTypeInfo.type;
-        option.text = sourceTypeInfo.type;
-        sourceTypeSelect.add(option);
-      });
-    } else {
-      // If no source types are available, show a message or disable the select
-      const option = document.createElement("option");
-      option.text = "No source types available";
-      option.disabled = true;
-      sourceTypeSelect.add(option);
-    }
-
-    // Clear the required fields display
-    document.getElementById("required-fields").innerHTML = '';
-
-  });
-
-    document.getElementById("source_type").addEventListener("change", function() {
+  // Function to update the required fields display based on the selected source type
+  function updateRequiredFields() {
     const connectionId = document.getElementById("source_connection_id").value;
-    const sourceType = this.value;
+    const sourceType = document.getElementById("source_type").value;
 
     const requiredFieldsDiv = document.getElementById("required-fields");
     requiredFieldsDiv.innerHTML = '';
@@ -68,20 +44,56 @@
 
       if (sourceTypeInfo && sourceTypeInfo.required_fields) {
         var heading = document.createElement("dt");
-        heading.setAttribute("class", "w-1/4 flex-none text-[0.8125rem] leading-6 text-zinc-500")
+        heading.setAttribute("class", "w-1/4 flex-none text-[0.8125rem] leading-6 text-zinc-500");
         var content = document.createTextNode("Required fields:");
         heading.appendChild(content);
         requiredFieldsDiv.appendChild(heading);
 
         sourceTypeInfo.required_fields.forEach(function(field) {
           var listItem = document.createElement("dd");
-          listItem.setAttribute("class", "text-sm leading-6 text-zinc-700")
+          listItem.setAttribute("class", "text-sm leading-6 text-zinc-700");
           listItem.innerText = field;
           requiredFieldsDiv.appendChild(listItem);
         });
       }
     }
-  });
+  }
 
+  // Event listener for when the connection selection changes
+  document.getElementById("source_connection_id").addEventListener("change", function() {
+    const connectionId = this.value;
+    const sourceTypeSelect = document.getElementById("source_type");
+    const requiredFieldsDiv = document.getElementById("required-fields");
+
+    // Clear existing options and required fields
+    sourceTypeSelect.innerHTML = '';
+    requiredFieldsDiv.innerHTML = '';
+
+    if (connectionSourceTypes[connectionId]) {
+      // Populate the source type select with options
+      connectionSourceTypes[connectionId].forEach(function(sourceTypeInfo) {
+        const option = document.createElement("option");
+        option.value = sourceTypeInfo.type;
+        option.text = sourceTypeInfo.type;
+        sourceTypeSelect.add(option);
+      });
 
+      // Select the first source type and update required fields
+      if (sourceTypeSelect.options.length > 0) {
+        sourceTypeSelect.selectedIndex = 0;
+        updateRequiredFields();
+      }
+    } else {
+      // If no source types are available, show a message or disable the select
+      const option = document.createElement("option");
+      option.text = "No source types available";
+      option.disabled = true;
+      sourceTypeSelect.add(option);
+    }
+  });
+
+  // Event listener for when the source type selection changes
+  document.getElementById("source_type").addEventListener("change", updateRequiredFields);
 </script>
+
+