Create CopyButton component

temporalio · Oct 2, 2023 · 93f6da3 · 93f6da3
1 parent e93cf6e
commit 93f6da3
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 86 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/lib/holocene/copyable/button.svelte 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
@@ -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
@@ -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
@@ -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';