From ab679ac85dcaf7164b1178ca986369bff4123a8d Mon Sep 17 00:00:00 2001
From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:01:08 +0100
Subject: [PATCH] Add the option to use bindable inputs in your confirmations
 (#14138)

Co-authored-by: deanhannigan <deanhannigan@gmail.com>
---
 .../actions/DeleteRow.svelte                  | 32 ++++++++---
 .../actions/DuplicateRow.svelte               | 34 +++++++----
 .../actions/ExecuteQuery.svelte               | 56 +++++++++++--------
 .../ButtonActionEditor/actions/SaveRow.svelte | 33 ++++++++---
 4 files changed, 106 insertions(+), 49 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
index fd3521d597..410e4bb56e 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Checkbox, Input, Body } from "@budibase/bbui"
+  import { Select, Label, Checkbox, Body } from "@budibase/bbui"
   import { tables, viewsV2 } from "stores/builder"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
@@ -46,19 +46,35 @@
 
     {#if parameters.confirm}
       <Label small>Title</Label>
-      <Input placeholder="Delete Row" bind:value={parameters.customTitleText} />
+      <DrawerBindableInput
+        placeholder="Prompt User"
+        value={parameters.customTitleText}
+        on:change={e => (parameters.customTitleText = e.detail)}
+        {bindings}
+      />
 
       <Label small>Text</Label>
-      <Input
-        placeholder="Are you sure you want to delete?"
-        bind:value={parameters.confirmText}
+      <DrawerBindableInput
+        placeholder="Are you sure you want to continue?"
+        value={parameters.confirmText}
+        on:change={e => (parameters.confirmText = e.detail)}
+        {bindings}
       />
 
       <Label small>Confirm Text</Label>
-      <Input placeholder="Confirm" bind:value={parameters.confirmButtonText} />
-
+      <DrawerBindableInput
+        placeholder="Confirm"
+        value={parameters.confirmButtonText}
+        on:change={e => (parameters.confirmButtonText = e.detail)}
+        {bindings}
+      />
       <Label small>Cancel Text</Label>
-      <Input placeholder="Cancel" bind:value={parameters.cancelButtonText} />
+      <DrawerBindableInput
+        placeholder="Cancel"
+        value={parameters.cancelButtonText}
+        on:change={e => (parameters.cancelButtonText = e.detail)}
+        {bindings}
+      />
     {/if}
   </div>
 </div>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
index b6cdd663fd..e92991ad70 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
+  import { Select, Label, Body, Checkbox } from "@budibase/bbui"
   import {
     selectedScreen,
     componentStore,
     tables,
     viewsV2,
   } from "stores/builder"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { getSchemaForDatasourcePlus } from "dataBinding"
   import SaveFields from "./SaveFields.svelte"
   import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
@@ -73,22 +74,35 @@
 
     {#if parameters.confirm}
       <Label small>Title</Label>
-      <Input
-        placeholder="Duplicate Row"
-        bind:value={parameters.customTitleText}
+      <DrawerBindableInput
+        placeholder="Prompt User"
+        value={parameters.customTitleText}
+        on:change={e => (parameters.customTitleText = e.detail)}
+        {bindings}
       />
 
       <Label small>Text</Label>
-      <Input
-        placeholder="Are you sure you want to duplicate this row?"
-        bind:value={parameters.confirmText}
+      <DrawerBindableInput
+        placeholder="Are you sure you want to continue?"
+        value={parameters.confirmText}
+        on:change={e => (parameters.confirmText = e.detail)}
+        {bindings}
       />
 
       <Label small>Confirm Text</Label>
-      <Input placeholder="Confirm" bind:value={parameters.confirmButtonText} />
-
+      <DrawerBindableInput
+        placeholder="Confirm"
+        value={parameters.confirmButtonText}
+        on:change={e => (parameters.confirmButtonText = e.detail)}
+        {bindings}
+      />
       <Label small>Cancel Text</Label>
-      <Input placeholder="Cancel" bind:value={parameters.cancelButtonText} />
+      <DrawerBindableInput
+        placeholder="Cancel"
+        value={parameters.cancelButtonText}
+        on:change={e => (parameters.cancelButtonText = e.detail)}
+        {bindings}
+      />
     {/if}
   </div>
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
index 43797f6369..498d9b4a66 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
+  import { Select, Layout, Checkbox } from "@budibase/bbui"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { datasources, integrations, queries } from "stores/builder"
   import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
@@ -58,37 +59,46 @@
       text="Do not display default notification"
       bind:value={parameters.notificationOverride}
     />
-    <br />
     {#if parameters.queryId}
       <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
 
       {#if parameters.confirm}
-        <Input
-          label="Title"
-          placeholder="Execute Query"
-          bind:value={parameters.customTitleText}
-        />
+        <div class="params">
+          <DrawerBindableInput
+            label="Title"
+            placeholder="Prompt User"
+            value={parameters.customTitleText}
+            on:change={e => (parameters.customTitleText = e.detail)}
+            {bindings}
+          />
+          <DrawerBindableInput
+            label="Message"
+            placeholder="Are you sure you want to continue?"
+            value={parameters.confirmText}
+            on:change={e => (parameters.confirmText = e.detail)}
+            {bindings}
+          />
 
-        <Input
-          label="Text"
-          placeholder="Are you sure you want to execute this query?"
-          bind:value={parameters.confirmText}
-        />
+          <DrawerBindableInput
+            label="Confirm Text"
+            placeholder="Confirm"
+            value={parameters.confirmButtonText}
+            on:change={e => (parameters.confirmButtonText = e.detail)}
+            {bindings}
+          />
 
-        <Input
-          label="Confirm Text"
-          placeholder="Confirm"
-          bind:value={parameters.confirmButtonText}
-        />
-
-        <Input
-          label="Cancel Text"
-          placeholder="Cancel"
-          bind:value={parameters.cancelButtonText}
-        />
+          <DrawerBindableInput
+            label="Cancel Text"
+            placeholder="Cancel"
+            value={parameters.cancelButtonText}
+            on:change={e => (parameters.cancelButtonText = e.detail)}
+            {bindings}
+          />
+        </div>
       {/if}
 
       {#if query?.parameters?.length > 0}
+        <br />
         <div class="params">
           <BindingBuilder
             customParams={parameters.queryParams}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
index aed2618778..c23edbeb58 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
+  import { Select, Label, Body, Checkbox } from "@budibase/bbui"
   import {
     selectedScreen,
     componentStore,
     tables,
     viewsV2,
   } from "stores/builder"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { getSchemaForDatasourcePlus } from "dataBinding"
   import SaveFields from "./SaveFields.svelte"
   import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
@@ -73,19 +74,35 @@
 
     {#if parameters.confirm}
       <Label small>Title</Label>
-      <Input placeholder="Save Row" bind:value={parameters.customTitleText} />
+      <DrawerBindableInput
+        placeholder="Prompt User"
+        value={parameters.customTitleText}
+        on:change={e => (parameters.customTitleText = e.detail)}
+        {bindings}
+      />
 
       <Label small>Text</Label>
-      <Input
-        placeholder="Are you sure you want to save this row?"
-        bind:value={parameters.confirmText}
+      <DrawerBindableInput
+        placeholder="Are you sure you want to continue?"
+        value={parameters.confirmText}
+        on:change={e => (parameters.confirmText = e.detail)}
+        {bindings}
       />
 
       <Label small>Confirm Text</Label>
-      <Input placeholder="Confirm" bind:value={parameters.confirmButtonText} />
-
+      <DrawerBindableInput
+        placeholder="Confirm"
+        value={parameters.confirmButtonText}
+        on:change={e => (parameters.confirmButtonText = e.detail)}
+        {bindings}
+      />
       <Label small>Cancel Text</Label>
-      <Input placeholder="Cancel" bind:value={parameters.cancelButtonText} />
+      <DrawerBindableInput
+        placeholder="Cancel"
+        value={parameters.cancelButtonText}
+        on:change={e => (parameters.cancelButtonText = e.detail)}
+        {bindings}
+      />
     {/if}
   </div>