From 7003475cafb6e49939e67a99b763d1cec5421601 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:42:04 +0100
Subject: [PATCH] Refactor FieldSelector to not use BindableSlot (#11942)

---
 .../automation/SetupPanel/RowSelector.svelte  |  31 +++-
 .../SetupPanel/RowSelectorTypes.svelte        | 152 ++++++++----------
 2 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 8c50689f22..c3097f3072 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -3,6 +3,8 @@
   import { Select, Checkbox } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import RowSelectorTypes from "./RowSelectorTypes.svelte"
+  import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
+  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -108,14 +110,29 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn && schema.type !== "attachment"}
-        <RowSelectorTypes
-          {isTestModal}
-          {field}
+        <DrawerBindableSlot
+          fillWidth
+          title={value.title}
+          label={field}
+          panel={AutomationBindingPanel}
+          type={schema.type}
           {schema}
-          bindings={parsedBindings}
-          {value}
-          {onChange}
-        />
+          value={value[field]}
+          on:change={e => onChange(e, field)}
+          {bindings}
+          allowJS={true}
+          updateOnChange={false}
+          drawerLeft="260px"
+        >
+          <RowSelectorTypes
+            {isTestModal}
+            {field}
+            {schema}
+            bindings={parsedBindings}
+            {value}
+            {onChange}
+          />
+        </DrawerBindableSlot>
       {/if}
       {#if isUpdateRow && schema.type === "link"}
         <div class="checkbox-field">
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 9111df0adc..8cf1ecf6de 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -8,7 +8,6 @@
   } from "@budibase/bbui"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
-  import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
   import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
@@ -31,88 +30,73 @@
   }
 </script>
 
-<DrawerBindableSlot
-  fillWidth
-  title={value.title}
-  label={field}
-  panel={AutomationBindingPanel}
-  type={schema.type}
-  {schema}
-  value={value[field]}
-  on:change={e => onChange(e, field)}
-  {bindings}
-  allowJS={true}
-  updateOnChange={false}
-  drawerLeft="260px"
->
-  {#if schemaHasOptions(schema) && schema.type !== "array"}
-    <Select
-      on:change={e => onChange(e, field)}
-      label={field}
+{#if schemaHasOptions(schema) && schema.type !== "array"}
+  <Select
+    on:change={e => onChange(e, field)}
+    label={field}
+    value={value[field]}
+    options={schema.constraints.inclusion}
+  />
+{:else if schema.type === "datetime"}
+  <DatePicker
+    label={field}
+    value={value[field]}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "boolean"}
+  <Select
+    on:change={e => onChange(e, field)}
+    label={field}
+    value={value[field]}
+    options={[
+      { label: "True", value: "true" },
+      { label: "False", value: "false" },
+    ]}
+  />
+{:else if schema.type === "array"}
+  <Multiselect
+    bind:value={value[field]}
+    label={field}
+    options={schema.constraints.inclusion}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "longform"}
+  <TextArea
+    label={field}
+    bind:value={value[field]}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "json"}
+  <span>
+    <Label>{field}</Label>
+    <Editor
+      editorHeight="150"
+      mode="json"
+      on:change={e => {
+        if (e.detail?.value !== value[field]) {
+          onChange(e, field, schema.type)
+        }
+      }}
       value={value[field]}
-      options={schema.constraints.inclusion}
     />
-  {:else if schema.type === "datetime"}
-    <DatePicker
-      label={field}
-      value={value[field]}
-      on:change={e => onChange(e, field)}
-    />
-  {:else if schema.type === "boolean"}
-    <Select
-      on:change={e => onChange(e, field)}
-      label={field}
-      value={value[field]}
-      options={[
-        { label: "True", value: "true" },
-        { label: "False", value: "false" },
-      ]}
-    />
-  {:else if schema.type === "array"}
-    <Multiselect
-      bind:value={value[field]}
-      label={field}
-      options={schema.constraints.inclusion}
-      on:change={e => onChange(e, field)}
-    />
-  {:else if schema.type === "longform"}
-    <TextArea
-      label={field}
-      bind:value={value[field]}
-      on:change={e => onChange(e, field)}
-    />
-  {:else if schema.type === "json"}
-    <span>
-      <Label>{field}</Label>
-      <Editor
-        editorHeight="150"
-        mode="json"
-        on:change={e => {
-          if (e.detail?.value !== value[field]) {
-            onChange(e, field, schema.type)
-          }
-        }}
-        value={value[field]}
-      />
-    </span>
-  {:else if schema.type === "link"}
-    <LinkedRowSelector
-      bind:linkedRows={value[field]}
-      {schema}
-      on:change={e => onChange(e, field)}
-    />
-  {:else if schema.type === "string" || schema.type === "number"}
-    <svelte:component
-      this={isTestModal ? ModalBindableInput : DrawerBindableInput}
-      panel={AutomationBindingPanel}
-      value={value[field]}
-      on:change={e => onChange(e, field)}
-      label={field}
-      type="string"
-      bindings={parsedBindings}
-      fillWidth={true}
-      allowJS={true}
-      updateOnChange={false}
-    />
-  {/if}
-</DrawerBindableSlot>
+  </span>
+{:else if schema.type === "link"}
+  <LinkedRowSelector
+    bind:linkedRows={value[field]}
+    {schema}
+    on:change={e => onChange(e, field)}
+  />
+{:else if schema.type === "string" || schema.type === "number"}
+  <svelte:component
+    this={isTestModal ? ModalBindableInput : DrawerBindableInput}
+    panel={AutomationBindingPanel}
+    value={value[field]}
+    on:change={e => onChange(e, field)}
+    label={field}
+    type="string"
+    bindings={parsedBindings}
+    fillWidth={true}
+    allowJS={true}
+    updateOnChange={false}
+  />
+{/if}