feat(lite): tooltips (#6412)

@xen-orchestra/lite/package.json

@@ -30,6 +30,7 @@
     "lodash-es": "^4.17.21",
     "make-error": "^1.3.6",
     "pinia": "^2.0.14",
+    "placement.js": "^1.0.0-beta.5",
     "vue": "^3.2.37",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "9",

@xen-orchestra/lite/src/App.vue

@@ -12,6 +12,7 @@
         <RouterView />
       </main>
     </div>
+    <AppTooltips />
   </div>
 </template>
 
@@ -20,6 +21,7 @@ import { watchEffect } from "vue";
 import favicon from "@/assets/favicon.svg";
 import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
+import AppTooltips from "@/components/AppTooltips.vue";
 import InfraPoolList from "@/components/infra/InfraPoolList.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
 import { useXenApiStore } from "@/stores/xen-api.store";

@xen-orchestra/lite/src/components/AppTooltip.vue

@@ -0,0 +1,167 @@
+<template>
+  <div v-if="!isDisabled" ref="tooltipElement" class="app-tooltip">
+    <span class="triangle" />
+    <span class="label">{{ content }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty, isFunction, isString } from "lodash-es";
+import place from "placement.js";
+import { computed, ref, watchEffect } from "vue";
+import type { TooltipOptions } from "@/stores/tooltip.store";
+
+const props = defineProps<{
+  target: HTMLElement;
+  options: TooltipOptions;
+}>();
+
+const tooltipElement = ref<HTMLElement>();
+
+const content = computed(() =>
+  isString(props.options) ? props.options : props.options.content
+);
+
+const isDisabled = computed(() => {
+  if (isEmpty(content.value)) {
+    return true;
+  }
+
+  if (isString(props.options)) {
+    return false;
+  }
+
+  if (isFunction(props.options.disabled)) {
+    return props.options.disabled(props.target);
+  }
+
+  return props.options.disabled ?? false;
+});
+
+const placement = computed(() =>
+  isString(props.options) ? "top" : props.options.placement ?? "top"
+);
+
+watchEffect(() => {
+  if (tooltipElement.value) {
+    place(props.target, tooltipElement.value, {
+      placement: placement.value,
+    });
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.app-tooltip {
+  font-size: 1.6rem;
+  font-weight: 400;
+  position: relative;
+  display: inline-flex;
+  padding: 0.3125em 0.5em;
+  pointer-events: none;
+  color: var(--color-blue-scale-500);
+  border-radius: 0.5em;
+  background-color: var(--color-blue-scale-100);
+}
+
+.triangle {
+  position: absolute;
+  overflow: hidden;
+  width: 1.875em;
+  height: 1.875em;
+}
+
+[data-placement^="top"] {
+  margin-bottom: 0.625em;
+
+  .triangle {
+    bottom: -1.75em;
+    transform: rotate(180deg);
+  }
+}
+
+[data-placement^="right"] {
+  margin-left: 0.625em;
+
+  .triangle {
+    left: -1.75em;
+    transform: rotate(270deg);
+  }
+}
+
+[data-placement^="bottom"] {
+  margin-top: 0.625em;
+
+  .triangle {
+    top: -1.75em;
+  }
+}
+
+[data-placement^="left"] {
+  margin-right: 0.625em;
+
+  .triangle {
+    right: -1.75em;
+    transform: rotate(90deg);
+  }
+}
+
+[data-placement="top-start"] .triangle {
+  left: 0;
+}
+
+[data-placement="top-center"] .triangle {
+  left: 50%;
+  margin-left: -0.9375em;
+}
+
+[data-placement="top-end"] .triangle {
+  right: 0;
+}
+
+[data-placement="left-start"] .triangle {
+  top: -0.25em;
+}
+
+[data-placement="left-center"] .triangle {
+  top: 50%;
+  margin-top: -0.9375em;
+}
+
+[data-placement="left-end"] .triangle {
+  bottom: -0.25em;
+}
+
+[data-placement="right-start"] .triangle {
+  top: -0.25em;
+}
+
+[data-placement="right-center"] .triangle {
+  top: 50%;
+  margin-top: -0.9375em;
+}
+
+[data-placement="right-end"] .triangle {
+  bottom: -0.25em;
+}
+
+[data-placement="bottom-center"] .triangle {
+  left: 50%;
+  margin-left: -0.9375em;
+}
+
+[data-placement="bottom-end"] .triangle {
+  right: 0;
+}
+
+.triangle::after {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin-top: 1.875em;
+  content: "";
+  transform: rotate(45deg) skew(20deg, 20deg);
+  border-radius: 0.3125em;
+  background-color: var(--color-blue-scale-100);
+}
+</style>

@xen-orchestra/lite/src/components/AppTooltips.vue

@@ -0,0 +1,19 @@
+<template>
+  <AppTooltip
+    v-for="tooltip in tooltips"
+    :key="tooltip.target"
+    :options="tooltip.options"
+    :target="tooltip.target"
+  />
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import AppTooltip from "@/components/AppTooltip.vue";
+import { useTooltipStore } from "@/stores/tooltip.store";
+
+const tooltipStore = useTooltipStore();
+const { tooltips } = storeToRefs(tooltipStore);
+</script>
+
+<style scoped></style>

@xen-orchestra/lite/src/components/infra/InfraHostItem.vue

@@ -1,5 +1,12 @@
 <template>
-  <li v-if="host" class="infra-host-item">
+  <li
+    v-if="host"
+    class="infra-host-item"
+    v-tooltip="{
+      content: host.name_label,
+      disabled: isTooltipDisabled,
+    }"
+  >
     <InfraItemLabel
       :active="isCurrentHost"
       :icon="faServer"
@@ -20,6 +27,7 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { vTooltip } from "@/directives/tooltip.directive";
 import {
   faAngleDown,
   faAngleUp,
@@ -29,6 +37,7 @@ import { useToggle } from "@vueuse/core";
 import InfraAction from "@/components/infra/InfraAction.vue";
 import InfraItemLabel from "@/components/infra/InfraItemLabel.vue";
 import InfraVmList from "@/components/infra/InfraVmList.vue";
+import { hasEllipsis } from "@/libs/utils";
 import { useHostStore } from "@/stores/host.store";
 import { useUiStore } from "@/stores/ui.store";
 
@@ -45,6 +54,9 @@ const isCurrentHost = computed(
   () => props.hostOpaqueRef === uiStore.currentHostOpaqueRef
 );
 const [isExpanded, toggle] = useToggle();
+
+const isTooltipDisabled = (target: HTMLElement) =>
+  !hasEllipsis(target.querySelector(".text"));
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/infra/InfraVmItem.vue

@@ -1,5 +1,12 @@
 <template>
-  <li ref="rootElement" class="infra-vm-item">
+  <li
+    ref="rootElement"
+    class="infra-vm-item"
+    v-tooltip="{
+      content: vm.name_label,
+      disabled: isTooltipDisabled,
+    }"
+  >
     <InfraItemLabel
       v-if="isVisible"
       :icon="faDisplay"
@@ -17,11 +24,13 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
+import { vTooltip } from "@/directives/tooltip.directive";
 import { faDisplay } from "@fortawesome/free-solid-svg-icons";
 import { useIntersectionObserver } from "@vueuse/core";
 import PowerStateIcon from "@/components/PowerStateIcon.vue";
 import InfraAction from "@/components/infra/InfraAction.vue";
 import InfraItemLabel from "@/components/infra/InfraItemLabel.vue";
+import { hasEllipsis } from "@/libs/utils";
 import { useVmStore } from "@/stores/vm.store";
 
 const props = defineProps<{
@@ -41,6 +50,9 @@ const { stop } = useIntersectionObserver(rootElement, ([entry]) => {
 const vmStore = useVmStore();
 
 const vm = computed(() => vmStore.getRecord(props.vmOpaqueRef));
+
+const isTooltipDisabled = (target: HTMLElement) =>
+  !hasEllipsis(target.querySelector(".text"));
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/directives/tooltip.directive.md

@@ -0,0 +1,36 @@
+# Tooltip Directive
+
+By default, tooltip will appear centered above the target element.
+
+## Usage
+
+```vue
+<template>
+  <!-- Static -->
+  <span v-tooltip="'Tooltip content'">Item</span>
+
+  <!-- Dynamic -->
+  <span v-tooltip="myTooltipContent">Item</span>
+
+  <!-- Placement  -->
+  <span v-tooltip="{ content: 'Foobar', placement: 'left-end' }">Item</span>
+
+  <!-- Disabling (variable) -->
+  <span v-tooltip="{ content: 'Foobar', disabled: isDisabled }">Item</span>
+
+  <!-- Disabling (function) -->
+  <span v-tooltip="{ content: 'Foobar', disabled: isDisabledFn }">Item</span>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { vTooltip } from "@/directives/tooltip.directive";
+
+const myTooltipContent = ref("Content");
+const isDisabled = ref(true);
+
+const isDisabledFn = (target: Element) => {
+  // return boolean;
+};
+</script>
+```

@xen-orchestra/lite/src/directives/tooltip.directive.ts

@@ -0,0 +1,23 @@
+import type { Directive } from "vue";
+import type { TooltipEvents, TooltipOptions } from "@/stores/tooltip.store";
+import { useTooltipStore } from "@/stores/tooltip.store";
+
+export const vTooltip: Directive<HTMLElement, TooltipOptions> = {
+  mounted(target, binding) {
+    const store = useTooltipStore();
+
+    const events: TooltipEvents = binding.modifiers.focus
+      ? { on: "focusin", off: "focusout" }
+      : { on: "mouseenter", off: "mouseleave" };
+
+    store.register(target, binding.value, events);
+  },
+  updated(target, binding) {
+    const store = useTooltipStore();
+    store.updateOptions(target, binding.value);
+  },
+  beforeUnmount(target) {
+    const store = useTooltipStore();
+    store.unregister(target);
+  },
+};

@xen-orchestra/lite/src/libs/utils.ts

@@ -54,6 +54,9 @@ export function parseDateTime(dateTime: string) {
   return date.getTime();
 }
 
+export const hasEllipsis = (target: Element | undefined | null) =>
+  target != undefined && target.clientWidth < target.scrollWidth;
+
 export function percent(currentValue: number, maxValue: number, precision = 2) {
   return round((currentValue / maxValue) * 100, precision);
 }

@xen-orchestra/lite/src/stores/tooltip.store.ts

@@ -0,0 +1,73 @@
+import { defineStore } from "pinia";
+import type { Options } from "placement.js";
+import { type EffectScope, computed, effectScope, ref } from "vue";
+import { type WindowEventName, useEventListener } from "@vueuse/core";
+
+export type TooltipOptions =
+  | string
+  | {
+      content: string;
+      placement: Options["placement"];
+      disabled?: boolean | ((target: HTMLElement) => boolean);
+    };
+
+export type TooltipEvents = { on: WindowEventName; off: WindowEventName };
+
+export const useTooltipStore = defineStore("tooltip", () => {
+  const targetsScopes = new WeakMap<HTMLElement, EffectScope>();
+  const targets = ref(new Set<HTMLElement>());
+  const targetsOptions = ref(new Map<HTMLElement, TooltipOptions>());
+
+  const register = (
+    target: HTMLElement,
+    options: TooltipOptions,
+    events: TooltipEvents
+  ) => {
+    const scope = effectScope();
+
+    targetsScopes.set(target, scope);
+    targetsOptions.value.set(target, options);
+
+    scope.run(() => {
+      useEventListener(target, events.on, () => {
+        targets.value.add(target);
+
+        scope.run(() => {
+          useEventListener(
+            target,
+            events.off,
+            () => {
+              targets.value.delete(target);
+            },
+            { once: true }
+          );
+        });
+      });
+    });
+  };
+
+  const updateOptions = (target: HTMLElement, options: TooltipOptions) => {
+    targetsOptions.value.set(target, options);
+  };
+
+  const unregister = (target: HTMLElement) => {
+    targets.value.delete(target);
+    targetsOptions.value.delete(target);
+    targetsScopes.get(target)?.stop();
+    targetsScopes.delete(target);
+  };
+
+  return {
+    register,
+    unregister,
+    updateOptions,
+    tooltips: computed(() => {
+      return Array.from(targets.value.values()).map((target) => {
+        return {
+          target,
+          options: targetsOptions.value.get(target),
+        };
+      });
+    }),
+  };
+});

yarn.lock

@@ -15337,6 +15337,11 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
+placement.js@^1.0.0-beta.5:
+  version "1.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/placement.js/-/placement.js-1.0.0-beta.5.tgz#2aac6bd8e670729bbf26ad47f2f9656b19e037d5"
+  integrity sha512-QD5hLPVKnT6Q1U34xxuRG9BhlBVaD0uF91JOzjvDnHAQfO/qjO4jmSTyjpR+K4se6Dn3Oo23IWeFX+QFFa9xNg==
+
 platform@^1.3.0, platform@^1.3.3:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"