Merge pull request #8911 from Budibase/bug/sev2/custom-sql-query-bindings

Update custom sql query in design when changed in the data section

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

@@ -144,6 +144,11 @@
     drawer.show()
   }
 
+  const getQueryValue = queries => {
+    value = queries.find(q => q._id === value._id) || value
+    return value
+  }
+
   const saveQueryParams = () => {
     handleSelected({
       ...value,
@@ -175,7 +180,7 @@
           {/if}
           <IntegrationQueryEditor
             height={200}
-            query={value}
+            query={getQueryValue(queries)}
             schema={fetchQueryDefinition(value)}
             datasource={getQueryDatasource(value)}
             editable={false}

packages/builder/src/components/integration/index.svelte

@@ -105,6 +105,7 @@
       {#if !query.fields.steps?.length}
         <div class="controls">
           <Button
+            disabled={!editable}
             secondary
             slot="buttons"
             on:click={() => {
@@ -131,6 +132,7 @@
                       {#if index > 0}
                         <ActionButton
                           quiet
+                          disabled={!editable}
                           on:click={() => {
                             updateEditorsOnSwap(index, index - 1)
                             const target = query.fields.steps[index - 1].key
@@ -144,6 +146,7 @@
                       {#if index < query.fields.steps.length - 1}
                         <ActionButton
                           quiet
+                          disabled={!editable}
                           on:click={() => {
                             updateEditorsOnSwap(index, index + 1)
                             const target = query.fields.steps[index + 1].key
@@ -156,6 +159,7 @@
                       {/if}
                     </div>
                     <ActionButton
+                      disabled={!editable}
                       on:click={() => {
                         updateEditorsOnDelete(index)
                         query.fields.steps.splice(index, 1)
@@ -169,6 +173,7 @@
                   <div class="fields">
                     <div class="block-field">
                       <Select
+                        disabled={!editable}
                         value={step.key}
                         options={schema.steps.map(s => s.key)}
                         on:change={({ detail }) => {
@@ -178,6 +183,7 @@
                       <Editor
                         bind:this={stepEditors[index]}
                         editorHeight={height / 2}
+                        readOnly={!editable}
                         mode="json"
                         value={typeof step.value === "string"
                           ? step.value
@@ -194,9 +200,11 @@
             <div class="separator" />
             {#if index === query.fields.steps.length - 1}
               <Icon
+                disabled={!editable}
                 hoverable
                 name="AddCircle"
                 size="S"
+                readOnly={!editable}
                 on:click={() => {
                   query.fields.steps = [
                     ...query.fields.steps,