Add confirmation params for some actions

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label } from "@budibase/bbui"
+  import { Select, Label, Checkbox, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
@@ -35,6 +35,17 @@
     value={parameters.revId}
     on:change={value => (parameters.revId = value.detail)}
   />
+
+  <Label small />
+  <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
+
+  {#if parameters.confirm}
+    <Label small>Confirm text</Label>
+    <Input
+      placeholder="Are you sure you want to delete this row?"
+      bind:value={parameters.confirmText}
+    />
+  {/if}
 </div>
 
 <style>
@@ -42,8 +53,8 @@
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr;
-    align-items: baseline;
+    grid-template-columns: 60px 1fr;
+    align-items: center;
     max-width: 800px;
     margin: 0 auto;
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Layout } from "@budibase/bbui"
+  import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { datasources, integrations, queries } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
@@ -25,7 +25,7 @@
   }
 </script>
 
-<Layout>
+<Layout gap="XS">
   <Select
     label="Datasource"
     bind:value={parameters.datasourceId}
@@ -44,22 +44,34 @@
       getOptionLabel={query => query.name}
       getOptionValue={query => query._id}
     />
-  {/if}
 
-  {#if query?.parameters?.length > 0}
-    <div>
-      <ParameterBuilder
-        bind:customParams={parameters.queryParams}
-        parameters={query.parameters}
-        bindings={bindableProperties}
-      />
-      <IntegrationQueryEditor
-        height={200}
-        {query}
-        schema={fetchQueryDefinition(query)}
-        editable={false}
-        {datasource}
-      />
-    </div>
+    {#if parameters.queryId}
+      <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
+
+      {#if parameters.confirm}
+        <Input
+          label="Confirm text"
+          placeholder="Are you sure you want to execute this query?"
+          bind:value={parameters.confirmText}
+        />
+      {/if}
+
+      {#if query?.parameters?.length > 0}
+        <div>
+          <ParameterBuilder
+            bind:customParams={parameters.queryParams}
+            parameters={query.parameters}
+            bindings={bindableProperties}
+          />
+          <IntegrationQueryEditor
+            height={200}
+            {query}
+            schema={fetchQueryDefinition(query)}
+            editable={false}
+            {datasource}
+          />
+        </div>
+      {/if}
+    {/if}
   {/if}
 </Layout>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -79,7 +79,7 @@
       on:click={() => removeField(field[0])}
     />
   {/each}
-  <div>
+  <div style="margin-top: 10px">
     <Button icon="AddCircle" secondary on:click={addField}>
       Add
       {fieldLabel}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Body } from "@budibase/bbui"
+  import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
   import {
@@ -33,7 +33,8 @@
     optional.<br />
     You can always add or override fields manually.
   </Body>
-  <div class="fields">
+
+  <div class="params">
     <Label small>Data Source</Label>
     <Select
       bind:value={parameters.providerId}
@@ -51,37 +52,58 @@
       getOptionValue={option => option._id}
     />
 
-    {#if parameters.tableId}
+    <Label small />
+    <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
+
+    {#if parameters.confirm}
+      <Label small>Confirm text</Label>
+      <Input
+        placeholder="Are you sure you want to save this row?"
+        bind:value={parameters.confirmText}
+      />
+    {/if}
+  </div>
+
+  {#if parameters.tableId}
+    <div class="fields">
       <SaveFields
         parameterFields={parameters.fields}
         {schemaFields}
         on:change={onFieldsChanged}
       />
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>
 
 <style>
   .root {
+    width: 100%;
     max-width: 800px;
     margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
   }
 
   .root :global(p) {
     line-height: 1.5;
   }
 
-  .fields {
+  .params {
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-columns: 60px 1fr;
     align-items: center;
   }
 
-  .fields :global(> div:nth-child(2)),
-  .fields :global(> div:nth-child(4)) {
-    grid-column-start: 2;
-    grid-column-end: 6;
+  .fields {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr auto 1fr auto;
+    align-items: center;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Input } from "@budibase/bbui"
+  import { Select, Label, Input, Checkbox } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import SaveFields from "./SaveFields.svelte"
 
@@ -72,7 +72,7 @@
     </div>
   </div>
 
-  <div class="fields">
+  <div class="params">
     <Label small>Automation</Label>
 
     {#if automationStatus === AUTOMATION_STATUS.EXISTING}
@@ -90,6 +90,19 @@
       />
     {/if}
 
+    <Label small />
+    <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
+
+    {#if parameters.confirm}
+      <Label small>Confirm text</Label>
+      <Input
+        placeholder="Are you sure you want to trigger this automation?"
+        bind:value={parameters.confirmText}
+      />
+    {/if}
+  </div>
+
+  <div class="fields">
     {#key parameters.automationId}
       <SaveFields
         schemaFields={selectedSchema}
@@ -107,16 +120,21 @@
     margin: 0 auto;
   }
 
-  .fields {
+  .params {
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
+    grid-template-columns: 60px 1fr;
+    align-items: center;
   }
 
-  .fields :global(> div:nth-child(2)) {
-    grid-column: 2 / span 4;
+  .fields {
+    margin-top: var(--spacing-l);
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr auto 1fr auto;
+    align-items: center;
   }
 
   .radios,

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte

@@ -24,15 +24,12 @@
 
 <style>
   .root {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
     align-items: center;
     max-width: 800px;
     margin: 0 auto;
   }
-
-  .root :global(> div) {
-    flex: 1;
-    margin-left: var(--spacing-l);
-  }
 </style>