Make some texts copyable

Author: iximiuz

ui/.eslintrc.cjs

@@ -79,7 +79,7 @@ module.exports = {
       },
     }],
     "vue/multi-word-component-names": ["error", {
-      ignores: [],
+      ignores: ["Copyable"],
     }],
     "vue/static-class-names-order": ["error"],
     "vue/attributes-order": ["error"],

ui/src/components/KubeObjectViewer.vue

@@ -8,6 +8,7 @@ import { useKubeDataStore } from "../stores";
 import KubeObjectViewerActionBar from "./KubeObjectViewerActionBar.vue";
 import KubeObjectViewerMenu from "./KubeObjectViewerMenu.vue";
 import KubeObjectViewerTabs from "./KubeObjectViewerTabs.vue";
+import Copyable from "./base/Copyable.vue";
 
 const props = defineProps<{
   object: KubeObject
@@ -56,7 +57,7 @@ onMounted(async() => {
       namespace: props.object.namespace,
     }, (err) => {
       if (err) {
-        console.error("KubeObjectViewer: watch inpsected object error", props.object, err);
+        console.error("KubeObjectViewer: watch inspected object error", props.object, err);
       }
     });
     cleaner.addCleanup(unwatch);
@@ -73,10 +74,12 @@ onMounted(async() => {
           class="block font-semibold truncate"
           :class="objectClass"
         >
-          <div
+          <Copyable
             :title="titleText"
             class="truncate"
-          >{{ titleText }}</div>
+            :copy-text="object.name"
+            :text="titleText"
+          />
         </a>
 
         <KubeObjectViewerMenu :object="object" />

ui/src/components/KubeObjectViewerPodInsightsTab.vue

@@ -7,6 +7,7 @@ import type { KubeObject, V1Container, V1Pod } from "../common/types";
 import CodeEditor from "./CodeEditor.vue";
 import KubeObjectViewerPodConditions from "./KubeObjectViewerPodConditions.vue";
 import KubeObjectViewerPodContainers from "./KubeObjectViewerPodContainers.vue";
+import Copyable from "./base/Copyable.vue";
 
 const props = defineProps<{
   object: KubeObject<V1Pod>,
@@ -68,7 +69,7 @@ const selectedContainerYaml = computed(() => {
         <div class="cursor-default">
           IPs:
         </div>
-        <div>{{ object.raw.status!.podIPs?.map((el) => el.ip)?.join(" ") }}</div>
+        <Copyable :text="object.raw.status!.podIPs?.map((el) => el.ip)?.join(' ') || ''" />
       </div>
 
       <div>

ui/src/components/base/Copyable.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ClipboardIcon, CheckIcon } from "@heroicons/vue/24/outline";
+import { useClipboard } from "@vueuse/core";
+import { ref } from "vue";
+
+const props = defineProps<{
+  text: string,
+  copyText?: string,
+}>();
+
+const clipboardIcon = ref(ClipboardIcon);
+
+async function onCopyClick() {
+  await useClipboard().copy(props.copyText || props.text);
+
+  clipboardIcon.value = CheckIcon;
+
+  setTimeout(() => {
+    clipboardIcon.value = ClipboardIcon;
+  }, 2000);
+}
+</script>
+
+<template>
+  <div class="flex group items-center">
+    <slot>
+      {{ text }}
+    </slot>
+
+    <button
+      class="bg-transparent border-none btn btn-square btn-xs group-hover:flex group-hover:opacity-50 hidden hover:!opacity-100 hover:bg-transparent z-40"
+      @click="onCopyClick"
+    >
+      <component
+        :is="clipboardIcon"
+        class="w-[1rem]"
+      />
+    </button>
+  </div>
+</template>