From 93f6da31e5eebbf5897fc08ddcc771f95211ec47 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 2 Oct 2023 12:29:54 -0600
Subject: [PATCH] Create CopyButton component

---
 .../event/event-details-row-expanded.svelte   |  2 +-
 .../components/event/event-details-row.svelte |  2 +-
 src/lib/components/workflow-actions.svelte    |  5 +-
 .../first-previous-next-workflow-table.svelte |  2 +-
 .../workflow/parent-workflow-table.svelte     |  2 +-
 .../workflow/scheduler-table.svelte           |  2 +-
 .../workflow/workflow-detail.svelte           |  2 +-
 src/lib/holocene/code-block.svelte            | 24 +++----
 src/lib/holocene/copyable.svelte              | 63 -------------------
 src/lib/holocene/copyable/button.svelte       | 32 ++++++++++
 src/lib/holocene/copyable/index.svelte        | 52 +++++++++++++++
 src/lib/holocene/tooltip.svelte               |  2 +-
 src/lib/layouts/workflow-header.svelte        |  2 +-
 13 files changed, 106 insertions(+), 86 deletions(-)
 delete mode 100644 src/lib/holocene/copyable.svelte
 create mode 100644 src/lib/holocene/copyable/button.svelte
 create mode 100644 src/lib/holocene/copyable/index.svelte

diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
index 7b0ade9da..1075ae081 100644
--- a/src/lib/components/event/event-details-row-expanded.svelte
+++ b/src/lib/components/event/event-details-row-expanded.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { format } from '$lib/utilities/format-camel-case';
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index c7cbb9c84..b3041cecf 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { format } from '$lib/utilities/format-camel-case';
diff --git a/src/lib/components/workflow-actions.svelte b/src/lib/components/workflow-actions.svelte
index 06ce8f977..2b5180769 100644
--- a/src/lib/components/workflow-actions.svelte
+++ b/src/lib/components/workflow-actions.svelte
@@ -10,14 +10,13 @@
   import SplitButton from '$lib/holocene/split-button.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { Action } from '$lib/models/workflow-actions';
-  import { ResetReapplyType } from '$lib/models/workflow-actions';
+  import { Action, ResetReapplyType } from '$lib/models/workflow-actions';
   import {
+    cancelWorkflow,
     resetWorkflow,
     signalWorkflow,
     terminateWorkflow,
   } from '$lib/services/workflow-service';
-  import { cancelWorkflow } from '$lib/services/workflow-service';
   import { authUser } from '$lib/stores/auth-user';
   import { coreUserStore } from '$lib/stores/core-user';
   import { resetEvents } from '$lib/stores/events';
diff --git a/src/lib/components/workflow/first-previous-next-workflow-table.svelte b/src/lib/components/workflow/first-previous-next-workflow-table.svelte
index 7a76a11ac..62676edea 100644
--- a/src/lib/components/workflow/first-previous-next-workflow-table.svelte
+++ b/src/lib/components/workflow/first-previous-next-workflow-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/parent-workflow-table.svelte b/src/lib/components/workflow/parent-workflow-table.svelte
index ee64c9d3a..360975f08 100644
--- a/src/lib/components/workflow/parent-workflow-table.svelte
+++ b/src/lib/components/workflow/parent-workflow-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/scheduler-table.svelte b/src/lib/components/workflow/scheduler-table.svelte
index 3d99e5ee2..7c83b597d 100644
--- a/src/lib/components/workflow/scheduler-table.svelte
+++ b/src/lib/components/workflow/scheduler-table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
diff --git a/src/lib/components/workflow/workflow-detail.svelte b/src/lib/components/workflow/workflow-detail.svelte
index f94330037..c6fa69766 100644
--- a/src/lib/components/workflow/workflow-detail.svelte
+++ b/src/lib/components/workflow/workflow-detail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
 
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 5a66e3aca..9e14d3f7a 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -15,6 +15,7 @@
   import { EditorView, keymap } from '@codemirror/view';
   import { createEventDispatcher, onMount } from 'svelte';
 
+  import CopyButton from '$lib/holocene/copyable/button.svelte';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
   import {
     parseWithBigInt,
@@ -25,8 +26,6 @@
     TEMPORAL_THEME,
   } from '$lib/vendor/codemirror/theme';
 
-  import Icon from './icon/icon.svelte';
-
   type BaseProps = HTMLAttributes<HTMLDivElement> & {
     content: string;
     language?: 'json' | 'text';
@@ -58,6 +57,10 @@
 
   const { copy, copied } = copyToClipboard();
 
+  const handleCopy = (e: Event) => {
+    copy(e, stringifyWithBigInt(content, undefined, 2));
+  };
+
   let editor: HTMLElement;
   let view: EditorView;
 
@@ -145,15 +148,12 @@
     {...$$restProps}
   />
   {#if copyable}
-    <button
-      on:click={(e) => copy(e, stringifyWithBigInt(content, undefined, 2))}
-      class="absolute top-2.5 right-2.5 rounded-md bg-gray-900 opacity-90 hover:bg-white"
-    >
-      <Icon
-        title={$copied ? copySuccessIconTitle : copyIconTitle}
-        name={$copied ? 'checkmark' : 'copy'}
-        class="text-white hover:text-gray-900"
-      />
-    </button>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class="absolute top-1 right-1 text-white hover:text-gray-900 focus-visible:text-gray-900"
+      on:click={handleCopy}
+      copied={$copied}
+    />
   {/if}
 </div>
diff --git a/src/lib/holocene/copyable.svelte b/src/lib/holocene/copyable.svelte
deleted file mode 100644
index 7585bc6b9..000000000
--- a/src/lib/holocene/copyable.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
-
-  export let content: string;
-  export let visible = false;
-  export let clickAllToCopy = false;
-  export let copyIconTitle: string;
-  export let copySuccessIconTitle: string;
-
-  const { copy, copied } = copyToClipboard();
-</script>
-
-{#if clickAllToCopy}
-  <button
-    class="group flex items-center gap-1 {$$props['container-class']}"
-    on:click={(e) => copy(e, content)}
-  >
-    <slot>
-      <span class={$$props.class} class:select-all={!$$slots.default}
-        >{content}</span
-      >
-    </slot>
-    <button
-      on:click={(e) => copy(e, content)}
-      aria-label={$copied ? copySuccessIconTitle : copyIconTitle}
-      class={`${
-        visible ? 'visible' : 'invisible group-hover:visible'
-      } copy-button`}
-    >
-      <Icon
-        title={$copied ? copySuccessIconTitle : copyIconTitle}
-        name={$copied ? 'checkmark' : 'copy'}
-      />
-    </button>
-  </button>
-{:else}
-  <div class="group flex items-center gap-1 {$$props['container-class']}">
-    <slot>
-      <span class={$$props.class} class:select-all={!$$slots.default}
-        >{content}</span
-      >
-    </slot>
-    <button
-      on:click={(e) => copy(e, content)}
-      aria-label={$copied ? copySuccessIconTitle : copyIconTitle}
-      class={`${
-        visible ? 'visible' : 'invisible group-hover:visible'
-      } copy-button`}
-    >
-      <Icon
-        title={$copied ? copySuccessIconTitle : copyIconTitle}
-        name={$copied ? 'checkmark' : 'copy'}
-      />
-    </button>
-  </div>
-{/if}
-
-<style lang="postcss">
-  .copy-button {
-    @apply m-1 rounded-md border-2 border-[transparent] hover:border-indigo-600 hover:bg-gradient-to-br hover:from-blue-100 hover:to-purple-100 hover:shadow-focus hover:shadow-blue-600/50 focus-visible:border-indigo-600 focus-visible:bg-gradient-to-br focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline-none;
-  }
-</style>
diff --git a/src/lib/holocene/copyable/button.svelte b/src/lib/holocene/copyable/button.svelte
new file mode 100644
index 000000000..07e122d90
--- /dev/null
+++ b/src/lib/holocene/copyable/button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+
+  interface $$Props extends HTMLButtonAttributes {
+    copyIconTitle: string;
+    copySuccessIconTitle: string;
+    copied: boolean;
+    'data-testid'?: string;
+  }
+
+  export let copyIconTitle: string;
+  export let copySuccessIconTitle: string;
+  export let copied: boolean;
+
+  let className = '';
+  export { className as class };
+</script>
+
+<button class="copy-button {className}" on:click {...$$restProps}>
+  <Icon
+    title={copied ? copySuccessIconTitle : copyIconTitle}
+    name={copied ? 'checkmark' : 'copy'}
+  />
+</button>
+
+<style lang="postcss">
+  .copy-button {
+    @apply m-1 rounded-md border-2 border-[transparent] hover:border-indigo-600 hover:bg-gradient-to-br hover:from-blue-100 hover:to-purple-100 hover:shadow-focus hover:shadow-blue-600/50 focus-visible:border-indigo-600 focus-visible:bg-gradient-to-br focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline-none;
+  }
+</style>
diff --git a/src/lib/holocene/copyable/index.svelte b/src/lib/holocene/copyable/index.svelte
new file mode 100644
index 000000000..3f57a7a03
--- /dev/null
+++ b/src/lib/holocene/copyable/index.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+
+  import CopyButton from './button.svelte';
+
+  export let content: string;
+  export let visible = false;
+  export let clickAllToCopy = false;
+  export let copyIconTitle: string;
+  export let copySuccessIconTitle: string;
+
+  const { copy, copied } = copyToClipboard();
+
+  function handleOnClick(e: Event) {
+    copy(e, content);
+  }
+</script>
+
+{#if clickAllToCopy}
+  <button
+    class="group flex items-center gap-1 {$$props['container-class']}"
+    on:click={handleOnClick}
+  >
+    <slot>
+      <span class={$$props.class} class:select-all={!$$slots.default}
+        >{content}</span
+      >
+    </slot>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class={visible ? 'visible' : 'invisible group-hover:visible'}
+      on:click={handleOnClick}
+      copied={$copied}
+    />
+  </button>
+{:else}
+  <div class="group flex items-center gap-1 {$$props['container-class']}">
+    <slot>
+      <span class={$$props.class} class:select-all={!$$slots.default}
+        >{content}</span
+      >
+    </slot>
+    <CopyButton
+      {copyIconTitle}
+      {copySuccessIconTitle}
+      class={visible ? 'visible' : 'invisible group-hover:visible'}
+      on:click={handleOnClick}
+      copied={$copied}
+    />
+  </div>
+{/if}
diff --git a/src/lib/holocene/tooltip.svelte b/src/lib/holocene/tooltip.svelte
index a41d21474..0b7b40f5f 100644
--- a/src/lib/holocene/tooltip.svelte
+++ b/src/lib/holocene/tooltip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import type { IconName } from '$lib/holocene/icon/paths';
   import type { Only } from '$lib/types/global';
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index bb68f7c41..a68a0cbc4 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -11,7 +11,7 @@
   import Alert from '$lib/holocene/alert.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CompatibilityBadge from '$lib/holocene/compatibility-badge.svelte';
-  import Copyable from '$lib/holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TabList from '$lib/holocene/tab/tab-list.svelte';