Merge pull request #877 from PrefectHQ/copy-log-logs-fix

Move CopyButton component into orion-design and fix empty label logic

orion-ui/packages/orion-design/src/components/CopyButton.vue

@@ -0,0 +1,97 @@
+<template>
+  <button type="button" class="copy-button" @click="copy">
+    <i class="pi pi-file-copy-line pi-sm" />
+    <template v-if="label == null || $slots.default">
+      <span class="copy-button__label">
+        <slot>{{ labelOrDefault }}</slot>
+      </span>
+    </template>
+  </button>
+</template>
+
+<script lang="ts">
+  import { showToast } from '@prefecthq/miter-design'
+  import { defineComponent, PropType } from 'vue'
+
+  export default defineComponent({
+    name: 'CopyButton',
+    props: {
+      value: {
+        type: [String, Function] as PropType<string | (() => string)>,
+        required: true,
+      },
+
+      label: {
+        type: String as PropType<string | null>,
+        default: null,
+      },
+
+      toast: {
+        type: String,
+        default: 'Copied to Clipboard',
+      },
+
+      timeout: {
+        type: Number,
+        default: 5000,
+      },
+    },
+
+    expose: [],
+
+    computed: {
+      labelOrDefault() {
+        return this.label ?? 'Copy'
+      },
+    },
+
+    methods: {
+      copy() {
+        if (typeof this.value === 'function') {
+          navigator.clipboard.writeText(this.value())
+        } else {
+          navigator.clipboard.writeText(this.value)
+        }
+
+        showToast({
+          type: 'success',
+          message: this.toast,
+          timeout: this.timeout,
+        })
+      },
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+.copy-button {
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: $primary;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 8px;
+  text-decoration: none;
+  transition: all 50ms;
+  user-select: none;
+  font-family: var(--font-primary);
+
+  &:hover,
+  &:focus {
+    & .copy-button__label {
+      text-decoration: underline;
+    }
+  }
+
+  &:active {
+    background: transparent;
+    color: $primary-hover;
+  }
+}
+
+.copy-button__label {
+  margin-left: 4px;
+}
+</style>

orion-ui/packages/orion-design/src/components/FlowRunLog.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-  import CopyButton from '@/components/Global/CopyButton.vue'
+  import CopyButton from './CopyButton.vue'
   import { snakeCase } from '@/utilities/strings'
   import { defineComponent, PropType } from 'vue'
   import { formatDateTimeNumeric, formatTimeNumeric } from '..'

orion-ui/packages/orion-design/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as CopyButton } from './CopyButton.vue'
 export { default as FlowRunLog } from './FlowRunLog.vue'
 export { default as FlowRunLogs } from './FlowRunLogs.vue'
 export { default as LogLevelLabel } from './LogLevelLabel.vue'

orion-ui/src/components/FlowRunLogsTabContent.vue

@@ -82,8 +82,8 @@ import {
 } from '@prefecthq/orion-design'
 import { subscribe } from '@prefecthq/vue-compositions'
 import { SubscriptionOptions } from '@prefecthq/vue-compositions/src/subscribe/types'
-import { computed, defineProps, nextTick, ref, watch } from 'vue'
-import CopyButton from './Global/CopyButton.vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { CopyButton } from '@prefecthq/orion-design'
 
 const props = defineProps({
   flowRunId: {

orion-ui/src/components/Global/index.ts

@@ -9,4 +9,3 @@ export * from './ResultsList'
 export * from './Row'
 export * from './StateIcon'
 export * from './StateLabel'
-export { default as CopyButton } from './CopyButton.vue'

orion-ui/src/views/FlowRun.vue

@@ -41,7 +41,7 @@
 import { Api, Query, Endpoints } from '@/plugins/api'
 import { FlowRun, Flow } from '@/typings/objects'
 import { computed, onBeforeUnmount, onBeforeMount, ref, Ref, watch } from 'vue'
-import CopyButton from '@/components/Global/CopyButton.vue'
+import { CopyButton } from '@prefecthq/orion-design'
 import media from '@/utilities/media'
 
 import { useRoute, onBeforeRouteLeave } from 'vue-router'