From eb6c4f1a05d1b3a1141f40e0de69b0ae6d102740 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 May 2022 15:39:17 +0530
Subject: [PATCH] feat: add copy to clipboard button in response headers entry

---
 .../components/lenses/HeadersRenderer.vue     | 23 ++------
 .../lenses/HeadersRendererEntry.vue           | 52 +++++++++++++++++++
 2 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue

diff --git a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
index 6da92d755..448fc8a86 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -17,26 +17,11 @@
         />
       </div>
     </div>
-    <div
+    <LensesHeadersRendererEntry
       v-for="(header, index) in headers"
-      :key="`header-${index}`"
-      class="flex border-b divide-x divide-dividerLight border-dividerLight group"
-    >
-      <span
-        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
-      >
-        <span class="truncate rounded-sm select-all">
-          {{ header.key }}
-        </span>
-      </span>
-      <span
-        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
-      >
-        <span class="truncate rounded-sm select-all">
-          {{ header.value }}
-        </span>
-      </span>
-    </div>
+      :key="index"
+      :header="header"
+    />
   </div>
 </template>
 
diff --git a/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
new file mode 100644
index 000000000..3c6c33292
--- /dev/null
+++ b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="flex border-b divide-x divide-dividerLight border-dividerLight group"
+  >
+    <span
+      class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
+    >
+      <span class="truncate rounded-sm select-all">
+        {{ header.key }}
+      </span>
+    </span>
+    <span
+      class="flex flex-1 min-w-0 pl-4 py-2 transition group-hover:text-secondaryDark justify-between"
+    >
+      <span class="truncate rounded-sm select-all">
+        {{ header.value }}
+      </span>
+      <ButtonSecondary
+        ref="copyHeader"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.copy')"
+        :svg="copyIcon"
+        class="hidden group-hover:inline-flex !py-0"
+        @click.native="copyHeader(header.value)"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "~/../hoppscotch-data/dist"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
+const toast = useToast()
+
+defineProps<{
+  header: HoppRESTHeader
+}>()
+
+const copyIcon = ref("copy")
+
+const copyHeader = (headerValue: string) => {
+  copyToClipboard(headerValue)
+  copyIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
+</script>