Copy feature in message headers in message view

src/Frontend/src/components/CopyToClipboard.vue

@@ -2,9 +2,16 @@
 import { Tippy, TippyComponent } from "vue-tippy";
 import { useTemplateRef } from "vue";
 
-const props = defineProps<{
-  value: string;
-}>();
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  isIconOnly: {
+    type: Boolean,
+    default: false, // Default value
+  },
+});
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
 let timeoutId: number;
@@ -18,7 +25,7 @@ async function copyToClipboard() {
 </script>
 
 <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>
+  <Tippy content="Copied" ref="tippyRef" trigger="manual" :title="props.isIconOnly ? 'Copy to Clipboard' : ''">
+    <button type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> <span v-if="!props.isIconOnly">Copy to clipboard</span></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: 10px;
+}
+</style>