From 969e6531d58a6133a46c0e22281c40aa0ffadabd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Feb 2022 21:48:23 +0000
Subject: [PATCH] Make copy to clipboard an exported utility

---
 .../bbui/src/Table/InternalRenderer.svelte    | 45 +++++--------------
 packages/bbui/src/helpers.js                  | 28 ++++++++++++
 .../DevToolsComponentContextTab.svelte        |  0
 .../DevToolsComponentSettingsTab.svelte       |  0
 4 files changed, 40 insertions(+), 33 deletions(-)
 create mode 100644 packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
 create mode 100644 packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte

diff --git a/packages/bbui/src/Table/InternalRenderer.svelte b/packages/bbui/src/Table/InternalRenderer.svelte
index 7e2dd0b2aa..d38fb9f691 100644
--- a/packages/bbui/src/Table/InternalRenderer.svelte
+++ b/packages/bbui/src/Table/InternalRenderer.svelte
@@ -1,42 +1,21 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
+  import { copyToClipboard } from "../helpers"
   import { notifications } from "../Stores/notifications"
+
   export let value
 
-  const onClick = e => {
+  const onClick = async e => {
     e.stopPropagation()
-    copyToClipboard(value)
-  }
-
-  const copyToClipboard = value => {
-    return new Promise(res => {
-      if (navigator.clipboard && window.isSecureContext) {
-        // Try using the clipboard API first
-        navigator.clipboard.writeText(value).then(res)
-      } else {
-        // Fall back to the textarea hack
-        let textArea = document.createElement("textarea")
-        textArea.value = value
-        textArea.style.position = "fixed"
-        textArea.style.left = "-9999px"
-        textArea.style.top = "-9999px"
-        document.body.appendChild(textArea)
-        textArea.focus()
-        textArea.select()
-        document.execCommand("copy")
-        textArea.remove()
-        res()
-      }
-    })
-      .then(() => {
-        notifications.success("Copied to clipboard")
-      })
-      .catch(() => {
-        notifications.error(
-          "Failed to copy to clipboard. Check the dev console for the value."
-        )
-        console.warn("Failed to copy the value", value)
-      })
+    try {
+      await copyToClipboard(value)
+      notifications.success("Copied to clipboard")
+    } catch (error) {
+      notifications.error(
+        "Failed to copy to clipboard. Check the dev console for the value."
+      )
+      console.warn("Failed to copy the value", value)
+    }
   }
 </script>
 
diff --git a/packages/bbui/src/helpers.js b/packages/bbui/src/helpers.js
index cf40e12d74..8ffbf8d6e1 100644
--- a/packages/bbui/src/helpers.js
+++ b/packages/bbui/src/helpers.js
@@ -1,3 +1,5 @@
+import { notifications } from "./Stores/notifications"
+
 /**
  * Generates a DOM safe UUID.
  * Starting with a letter is important to make it DOM safe.
@@ -106,3 +108,29 @@ export const deepSet = (obj, key, value) => {
 export const cloneDeep = obj => {
   return JSON.parse(JSON.stringify(obj))
 }
+
+/**
+ * Copies a value to the clipboard
+ * @param value the value to copy
+ */
+export const copyToClipboard = value => {
+  return new Promise(res => {
+    if (navigator.clipboard && window.isSecureContext) {
+      // Try using the clipboard API first
+      navigator.clipboard.writeText(value).then(res)
+    } else {
+      // Fall back to the textarea hack
+      let textArea = document.createElement("textarea")
+      textArea.value = value
+      textArea.style.position = "fixed"
+      textArea.style.left = "-9999px"
+      textArea.style.top = "-9999px"
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      document.execCommand("copy")
+      textArea.remove()
+      res()
+    }
+  })
+}
diff --git a/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte b/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
new file mode 100644
index 0000000000..e69de29bb2