Budi 9567 form block tracker

packages/builder/src/components/design/settings/componentSettings.js

@@ -37,6 +37,8 @@ import TableConditionEditor from "./controls/TableConditionEditor.svelte"
 import ButtonConditionEditor from "./controls/ButtonConditionEditor.svelte"
 import MultilineDrawerBindableInput from "@/components/common/MultilineDrawerBindableInput.svelte"
 import FilterableSelect from "./controls/FilterableSelect.svelte"
+import FormSelect from "./controls/FormSelect.svelte"
+import FormStepCustomization from "./controls/FormStepCustomization.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -107,6 +109,8 @@ const componentMap = {
   "validation/signature_single": ValidationEditor,
   "validation/link": ValidationEditor,
   "validation/bb_reference": ValidationEditor,
+  formSelect: FormSelect,
+  formStepCustomization: FormStepCustomization,
 }
 
 export const getComponentForSetting = setting => {

packages/builder/src/components/design/settings/controls/FormSelect.svelte

@@ -0,0 +1,39 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { selectedScreen } from "@/stores/builder"
+  import { getAvailableFormOptions } from "@/helpers/formBlockTracker"
+  import { createEventDispatcher } from "svelte"
+
+  export const componentInstance = {}
+  export let value = ""
+  export let placeholder = "Select a form to track"
+
+  const dispatch = createEventDispatcher()
+
+  $: options = getAvailableFormOptions($selectedScreen)
+  $: boundValue = getValidValue(value, options)
+
+  const getValidValue = (value, options) => {
+    // Reset value if there aren't any options
+    if (!Array.isArray(options) || options.length === 0) {
+      return null
+    }
+
+    // Reset value if the value isn't found in the options
+    if (!options.some(option => option.value === value)) {
+      return null
+    }
+
+    return value
+  }
+
+  const onChange = event => {
+    const newValue = event.detail
+    // Don't validate - just pass through the selected value
+    boundValue = newValue
+    // Dispatch the change event to update the component's value prop
+    dispatch("change", newValue)
+  }
+</script>
+
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />