add tooltips to items counts by statuses (#245)

components/Harvesters/JobPage.vue

@@ -26,22 +26,42 @@
         <RiInformationLine class="inline size-3" />
         <span>{{ $t('Items:') }}</span>
         <span class="space-x-2">
-          <span class="space-x-0.5">
-            <RiCheckLine class="inline size-3.5" />
-            <span>{{ job.items.filter((i) => i.status === 'done').length }}</span>
-          </span>
-          <span class="space-x-0.5">
-            <RiEyeOffLine class="inline size-3.5" />
-            <span>{{ job.items.filter((i) => i.status === 'skipped').length }}</span>
-          </span>
-          <span class="space-x-0.5">
-            <RiArchiveLine class="inline size-3.5" />
-            <span>{{ job.items.filter((i) => i.status === 'archived').length }}</span>
-          </span>
-          <span class="space-x-0.5">
-            <RiCloseLine class="inline size-3.5" />
-            <span>{{ job.items.filter((i) => i.status === 'failed').length }}</span>
-          </span>
+          <Tooltip class="inline">
+            <span class="space-x-0.5 text-sm">
+              <RiCheckLine class="inline size-3.5" />
+              <span>{{ job.items.filter((i) => i.status === 'done').length }}</span>
+            </span>
+            <template #tooltip>
+              {{ $t('Done items') }}
+            </template>
+          </Tooltip>
+          <Tooltip class="inline">
+            <span class="space-x-0.5 text-sm">
+              <RiEyeOffLine class="inline size-3.5" />
+              <span>{{ job.items.filter((i) => i.status === 'skipped').length }}</span>
+            </span>
+            <template #tooltip>
+              {{ $t('Skipped items') }}
+            </template>
+          </Tooltip>
+          <Tooltip class="inline">
+            <span class="space-x-0.5 text-sm">
+              <RiArchiveLine class="inline size-3.5" />
+              <span>{{ job.items.filter((i) => i.status === 'archived').length }}</span>
+            </span>
+            <template #tooltip>
+              {{ $t('Archived items') }}
+            </template>
+          </Tooltip>
+          <Tooltip class="inline">
+            <span class="space-x-0.5 text-sm">
+              <RiCloseLine class="inline size-3.5" />
+              <span>{{ job.items.filter((i) => i.status === 'failed').length }}</span>
+            </span>
+            <template #tooltip>
+              {{ $t('Failed items') }}
+            </template>
+          </Tooltip>
         </span>
         <span v-if="preview">{{ $t('(previews limit the number of items returned)') }}</span>
       </div>

components/Tooltip/Tooltip.vue

@@ -6,26 +6,42 @@
     @focusout="show = false"
     @mouseleave="show = false"
   >
-    <p
-      v-bind="$attrs"
-      :aria-describedby="id"
-    >
-      <slot />
-    </p>
-    <div
-      v-show="show"
-      :id
-      role="tooltip"
-      aria-hidden="true"
-      class="absolute drop-shadow bg-white p-2 left-1/2 z-10 mt-0 w-screen max-w-56 -translate-x-1/2 transform"
-      static
-    >
-      <slot name="tooltip" />
-    </div>
+    <ClientOnly>
+      <p
+        ref="reference"
+        v-bind="$attrs"
+        :aria-describedby="id"
+      >
+        <slot />
+      </p>
+
+      <div
+        v-show="show"
+        :id
+        ref="floating"
+        role="tooltip"
+        aria-hidden="true"
+        class="drop-shadow bg-white p-2 z-10 mt-2 whitespace-nowrap"
+        :style="floatingStyles"
+      >
+        <slot name="tooltip" />
+      </div>
+    </ClientOnly>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+
 const id = useId()
 const show = ref(false)
+
+const reference = ref(null)
+const floating = ref(null)
+const { floatingStyles } = useFloating(reference, floating, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+  })],
+  whileElementsMounted: autoUpdate,
+})
 </script>

i18n/locales/en-US.json

@@ -781,6 +781,10 @@
   "Skipped items": "Skipped items",
   "Archived items": "Archived items",
   "Failed items": "Failed items",
+  "ID": "ID",
+  "Started": "Started",
+  "Skipped": "Skipped",
+  "Errors & Logs": "Errors & Logs",
   "Unarchive the dataservice": "Unarchive the dataservice",
   "Archive the dataservice": "Archive the dataservice",
   "An archived dataservice is no longer indexed but still accessible for users with the direct link.": "An archived dataservice is no longer indexed but still accessible for users with the direct link.",

i18n/locales/es-ES.json

@@ -774,6 +774,10 @@
   "Skipped items": "Skipped items",
   "Archived items": "Archived items",
   "Failed items": "Failed items",
+  "ID": "ID",
+  "Started": "Started",
+  "Skipped": "Skipped",
+  "Errors & Logs": "Errors & Logs",
   "Unarchive the dataservice": "Unarchive the dataservice",
   "Archive the dataservice": "Archive the dataservice",
   "An archived dataservice is no longer indexed but still accessible for users with the direct link.": "An archived dataservice is no longer indexed but still accessible for users with the direct link.",

i18n/locales/fr-FR.json

@@ -802,6 +802,10 @@
   "Skipped items": "Éléments ignorés",
   "Archived items": "Éléments archivés",
   "Failed items": "Éléments en échec",
+  "ID": "ID",
+  "Started": "Démarré",
+  "Skipped": "Ignoré",
+  "Errors & Logs": "Erreurs & Logs",
   "Unarchive the dataservice": "Désarchiver cette API",
   "Archive the dataservice": "Archiver cette API",
   "An archived dataservice is no longer indexed but still accessible for users with the direct link.": "Une API archivée n'est plus indexée mais reste accessible aux utilisateurs avec un lien direct.",

package.json

@@ -15,7 +15,7 @@
     "@datagouv/components": "^2.0.4",
     "@datagouv/select-a11y": "^3.6.1",
     "@datagouv/vue-toaster": "^2.4.5",
-    "@floating-ui/vue": "^1.1.5",
+    "@floating-ui/vue": "^1.1.6",
     "@gouvfr/dsfr": "^1.11.1",
     "@headlessui/vue": "^1.7.23",
     "@iconify/vue": "^4.1.2",