From 6ceeacf58b58ba71f84fa99c8aca1e0cb9e29dc8 Mon Sep 17 00:00:00 2001
From: Olivier Floch <olivier.floch@vates.fr>
Date: Tue, 2 Jul 2024 17:17:00 +0200
Subject: [PATCH] feat(xo-core): add CellObject component

---
 .../cell-object/cell-object.story.vue         | 25 ++++++++
 .../lib/components/cell-object/CellObject.vue | 61 +++++++++++++++++++
 @xen-orchestra/web-core/lib/locales/en.json   |  2 +
 @xen-orchestra/web-core/lib/locales/fr.json   |  2 +
 4 files changed, 90 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/cell-object/CellObject.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue b/@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue
new file mode 100644
index 00000000000..88a68f4d201
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue
@@ -0,0 +1,25 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('id').str().preset('550e8400-e29b-41d4-a716-446655440000').widget(),
+      prop('copiableId').bool().widget(),
+      slot().help('Meant to receive an ObjectLink component'),
+      setting('slot').preset('Object link').widget(),
+    ]"
+  >
+    <table>
+      <tr>
+        <CellObject v-bind="properties">
+          {{ settings.slot }}
+        </CellObject>
+      </tr>
+    </table>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import CellObject from '@core/components/cell-object/CellObject.vue'
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
new file mode 100644
index 00000000000..793d85872df
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
@@ -0,0 +1,61 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-object">
+    <div class="data">
+      <slot />
+      <template v-if="id !== undefined">
+        <span v-tooltip class="id typo p4-regular-italic ellipsis">
+          {{ id }}
+        </span>
+        <UiButton
+          v-if="isSupported && copiableId"
+          :left-icon="faCopy"
+          level="secondary"
+          size="extra-small"
+          :color="copied ? 'success' : 'info'"
+          @click="copy(id)"
+        >
+          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+        </UiButton>
+      </template>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/button/UiButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard } from '@vueuse/core'
+
+defineProps<{
+  id?: string
+  copiableId?: boolean
+}>()
+
+const { isSupported, copy, copied } = useClipboard()
+</script>
+
+<style lang="postcss" scoped>
+.cell-object {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.id {
+  color: var(--color-grey-300);
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index 2d752730cc8..eb2ef949aaa 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -8,6 +8,8 @@
   "coming-soon": "Coming soon!",
   "console": "Console",
 
+  "core.copied": "Copied",
+  "core.copy-id": "Copy ID",
   "core.close": "Close",
   "core.current": "Current",
   "core.filter": "Filter",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index 18bd72057d1..d9017640d89 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -8,6 +8,8 @@
   "coming-soon": "Bientôt disponible !",
   "console": "Console",
 
+  "core.copied": "Copié",
+  "core.copy-id": "Copier l'ID",
   "core.close": "Fermer",
   "core.current": "Actuel",
   "core.filter": "Filtrer",