From 77114b88385f6036e67492c41a733b5b07153bca Mon Sep 17 00:00:00 2001
From: andz-bb <andrew.thompson@budibase.com>
Date: Fri, 7 Mar 2025 08:58:25 +0000
Subject: [PATCH] copy binding to clipboard button action

---
 .../actions/CopyToClipboard.svelte            | 51 +++++++++++++++++++
 .../ButtonActionEditor/actions/index.js       |  1 +
 .../controls/ButtonActionEditor/manifest.json | 11 ++++
 packages/client/src/utils/buttonActions.js    | 24 +++++++++
 4 files changed, 87 insertions(+)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CopyToClipboard.svelte

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CopyToClipboard.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CopyToClipboard.svelte
new file mode 100644
index 0000000000..5a17dccb4e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CopyToClipboard.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { Label, Checkbox } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
+
+  onMount(() => {
+    if (!parameters.showNotification) {
+      parameters.showNotification = true
+    }
+    if (!parameters.notificationMessage) {
+      parameters.notificationMessage = "Copied to clipboard"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label>Text to copy</Label>
+  <DrawerBindableInput
+    title="Text to copy"
+    {bindings}
+    value={parameters.textToCopy}
+    on:change={e => (parameters.textToCopy = e.detail)}
+  />
+  <Label />
+  <Checkbox text="Show notification" bind:value={parameters.showNotification} />
+  {#if parameters.showNotification}
+    <Label>Notification message</Label>
+    <DrawerBindableInput
+      title="Notification message"
+      {bindings}
+      value={parameters.notificationMessage}
+      placeholder="Copied to clipboard"
+      on:change={e => (parameters.notificationMessage = e.detail)}
+    />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 120px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
index b171b34111..2ad41076f2 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
@@ -26,3 +26,4 @@ export { default as CloseModal } from "./CloseModal.svelte"
 export { default as ClearRowSelection } from "./ClearRowSelection.svelte"
 export { default as DownloadFile } from "./DownloadFile.svelte"
 export { default as RowAction } from "./RowAction.svelte"
+export { default as CopyToClipboard } from "./CopyToClipboard.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
index 631e3119e8..2bc8599057 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
@@ -183,6 +183,17 @@
       "name": "Row Action",
       "type": "data",
       "component": "RowAction"
+    },
+    {
+      "name": "Copy To Clipboard",
+      "type": "data",
+      "component": "CopyToClipboard",
+      "context": [
+        {
+          "label": "Copied text",
+          "value": "copied"
+        }
+      ]
     }
   ]
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index a467cc81ed..0ef21ea5a9 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -421,6 +421,29 @@ const showNotificationHandler = action => {
 
 const promptUserHandler = () => {}
 
+const copyToClipboardHandler = action => {
+  const { textToCopy, showNotification, notificationMessage } =
+    action.parameters
+
+  if (!textToCopy) {
+    return
+  }
+
+  navigator.clipboard
+    .writeText(textToCopy)
+    .then(() => {
+      if (showNotification && notificationMessage) {
+        notificationStore.actions.success(notificationMessage, true, 3000)
+      }
+    })
+    .catch(err => {
+      console.error("Failed to copy text: ", err)
+      notificationStore.actions.error("Failed to copy to clipboard")
+    })
+
+  return { copied: textToCopy }
+}
+
 const openSidePanelHandler = action => {
   const { id } = action.parameters
   if (id) {
@@ -514,6 +537,7 @@ const handlerMap = {
   ["Close Modal"]: closeModalHandler,
   ["Download File"]: downloadFileHandler,
   ["Row Action"]: rowActionHandler,
+  ["Copy To Clipboard"]: copyToClipboardHandler,
 }
 
 const confirmTextMap = {