Add a copy method to task run result locations

Changelog.md

@@ -4,6 +4,8 @@
 
 ### Features and Improvements
 
+- Add a copy method to task run result locations - [#1033](https://github.com/PrefectHQ/ui/pull/1033)
+- Route to task run page on timeline click - [#1024](https://github.com/PrefectHQ/ui/pull/1024
 - Increase default number of flows shown in the flow table - [#1027](https://github.com/PrefectHQ/ui/pull/1027)
 - Remove global max width on dashboard etc screens - [#1026](https://github.com/PrefectHQ/ui/pull/1026)
 - Route to task run page on timeline click - [#1024](https://github.com/PrefectHQ/ui/pull/1024)

src/pages/TaskRun/Details-Tile.vue

@@ -19,7 +19,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      copiedText: {}
+    }
   },
   computed: {
     expectedRuns() {
@@ -35,6 +37,20 @@ export default {
         ]
       }
     }
+  },
+  methods: {
+    copyTextToClipboard(text) {
+      if (!text) return
+
+      this.copiedText = {}
+      this.copiedText[text] = true
+      navigator.clipboard.writeText(text)
+
+      setTimeout(() => {
+        this.copiedText = {}
+        this.copiedText[text] = false
+      }, 1000)
+    }
   }
 }
 </script>
@@ -227,7 +243,23 @@ export default {
               <v-col cols="6" class="text-right font-weight-bold">
                 <v-tooltip top>
                   <template #activator="{ on }">
-                    <span v-on="on">
+                    <span
+                      class="cursor-pointer show-icon-hover-focus-only pa-2px"
+                      role="button"
+                      @click="
+                        copyTextToClipboard(
+                          taskRun.serialized_state._result.location
+                        )
+                      "
+                      v-on="on"
+                    >
+                      <v-icon x-small class="mb-2px mr-2" tabindex="0">
+                        {{
+                          copiedText[taskRun.serialized_state._result.location]
+                            ? 'check'
+                            : 'file_copy'
+                        }}
+                      </v-icon>
                       {{ taskRun.serialized_state._result.location || 'None' }}
                     </span>
                   </template>
@@ -284,4 +316,17 @@ a {
     content: '' !important;
   }
 }
+
+.show-icon-hover-focus-only {
+  .v-icon {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus {
+    .v-icon {
+      visibility: visible;
+    }
+  }
+}
 </style>