Copy feature in message headers in message view (#2281)

* add option to copy the header values to clipboard
Co-authored-by: John Simons <[email protected]>

Author: soujay

src/Frontend/src/components/CopyToClipboard.vue

@@ -2,9 +2,13 @@
 import { Tippy, TippyComponent } from "vue-tippy";
 import { useTemplateRef } from "vue";
 
-const props = defineProps<{
-  value: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    isIconOnly?: boolean;
+  }>(),
+  { isIconOnly: false }
+);
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
 let timeoutId: number;
@@ -19,6 +23,7 @@ async function copyToClipboard() {
 
 <template>
   <Tippy content="Copied" ref="tippyRef" trigger="manual">
-    <button type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
+    <button v-if="!props.isIconOnly" type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
+    <button v-else type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard" v-tippy="'Copy to clipboard'"><i class="fa fa-copy"></i></button>
   </Tippy>
 </template>

src/Frontend/src/components/messages/HeadersView.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { ExtendedFailedMessage } from "@/resources/FailedMessage";
-
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
+import { ref } from "vue";
 const props = defineProps<{
   message: ExtendedFailedMessage;
 }>();
+
+const hoverStates = ref<Record<number, boolean>>({});
+
+const toggleHover = (index: number, state: boolean) => {
+  hoverStates.value[index] = state;
+};
 </script>
 
 <template>
@@ -12,12 +19,21 @@ const props = defineProps<{
       <tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
         <td>
-          <pre>{{ header.value }}</pre>
+          <div class="headercopy" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
+            <pre>{{ header.value }}</pre>
+            <CopyToClipboard v-if="hoverStates[index]" :value="header.value || ''" :isIconOnly="true" />
+          </div>
         </td>
       </tr>
     </tbody>
   </table>
   <div v-if="props.message.headersNotFound" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.headercopy {
+  display: flex;
+  align-items: top;
+  gap: 0.4rem;
+}
+</style>