From cdd973cc179512b02f89c9960985f84f20db52bb Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 28 Nov 2023 17:51:08 +0300
Subject: [PATCH] Add source and provider definition

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../components/VIconButton/VIconButton.vue    |   2 +-
 .../src/components/VMediaInfo/VMetadata.vue   |  39 +++-
 .../VMediaInfo/VSourceProviderTooltip.vue     |  54 ++++++
 frontend/src/components/VPopover/VPopover.vue |  17 --
 frontend/src/components/VTooltip/VTooltip.vue | 180 ++++++++++++++++++
 frontend/src/composables/use-floating-ui.ts   |  11 +-
 .../src/composables/use-popover-content.ts    |  20 +-
 frontend/src/locales/scripts/en.json5         |   2 +
 frontend/src/types/media.ts                   |   1 +
 frontend/src/utils/metadata.ts                |   2 +
 10 files changed, 293 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
 create mode 100644 frontend/src/components/VTooltip/VTooltip.vue

diff --git a/frontend/src/components/VIconButton/VIconButton.vue b/frontend/src/components/VIconButton/VIconButton.vue
index 35c3621a3fb..2c800a78246 100644
--- a/frontend/src/components/VIconButton/VIconButton.vue
+++ b/frontend/src/components/VIconButton/VIconButton.vue
@@ -44,7 +44,7 @@ export default defineComponent({
      * The size of the button, matches the sizes of VButton component.
      */
     size: {
-      type: String as PropType<Exclude<ButtonSize, "disabled">>,
+      type: String as PropType<ButtonSize>,
       required: true,
     },
     /**
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index 191642c00cd..c1e4be83a68 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -1,7 +1,15 @@
 <template>
   <dl v-if="isSm" class="metadata grid gap-8" :style="columnCount">
-    <div v-for="datum in metadata" :key="`${datum.label}`">
-      <dt class="label-regular mb-1 ps-1">{{ $t(datum.label) }}</dt>
+    <div v-for="datum in metadata" :key="datum.label">
+      <VSourceProviderTooltip
+        v-if="tooltipId(datum)"
+        :describedby="tooltipId(datum)"
+        class="label-regular mb-1 flex flex-row ps-1"
+        :datum="datum"
+      />
+      <dt v-else class="label-regular mb-1 flex flex-row ps-1">
+        {{ $t(datum.label) }}
+      </dt>
       <VMetadataValue
         :datum="datum"
         @click="sendVisitSourceLinkEvent(datum.source)"
@@ -10,7 +18,19 @@
   </dl>
   <dl v-else class="grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
     <template v-for="datum in metadata">
-      <dt :key="`${datum.label}`" class="label-regular pt-1">
+      <VSourceProviderTooltip
+        v-if="tooltipId(datum)"
+        :key="datum.label"
+        :describedby="tooltipId(datum)"
+        class="label-regular flex flex-row pt-1"
+        :datum="datum"
+      />
+      <dt
+        v-else
+        :id="datum.label"
+        :key="datum.label"
+        class="label-regular flex flex-row pt-1"
+      >
         {{ $t(datum.label) }}
       </dt>
       <VMetadataValue
@@ -30,10 +50,11 @@ import { useAnalytics } from "~/composables/use-analytics"
 import { useUiStore } from "~/stores/ui"
 
 import VMetadataValue from "~/components/VMediaInfo/VMetadataValue.vue"
+import VSourceProviderTooltip from "~/components/VMediaInfo/VSourceProviderTooltip.vue"
 
 export default defineComponent({
   name: "VMetadata",
-  components: { VMetadataValue },
+  components: { VSourceProviderTooltip, VMetadataValue },
   props: {
     metadata: {
       type: Array as PropType<Metadata[]>,
@@ -45,6 +66,15 @@ export default defineComponent({
     const uiStore = useUiStore()
 
     const isSm = computed(() => uiStore.isBreakpoint("sm"))
+    const tooltipId = (datum: Metadata): "source" | "provider" | "" => {
+      if (
+        datum.name &&
+        (datum.name === "source" || datum.name === "provider")
+      ) {
+        return datum.name
+      }
+      return ""
+    }
 
     const columnCount = computed(() => ({
       "--column-count": props.metadata.length,
@@ -63,6 +93,7 @@ export default defineComponent({
 
     return {
       sendVisitSourceLinkEvent,
+      tooltipId,
       isSm,
       columnCount,
     }
diff --git a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
new file mode 100644
index 00000000000..0ff8e957207
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
@@ -0,0 +1,54 @@
+<template>
+  <dt>
+    {{ $t(datum.label) }}
+    <VTooltip placement="top" :describedby="describedby" class="ms-2">
+      <template #default>
+        <p
+          class="caption-regular rounded-sm bg-dark-charcoal px-2 py-1 text-white"
+        >
+          {{ description }}
+        </p>
+      </template>
+    </VTooltip>
+  </dt>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import { Metadata } from "~/types/media"
+import { useI18n } from "~/composables/use-i18n"
+
+import VTooltip from "~/components/VTooltip/VTooltip.vue"
+
+export default defineComponent({
+  name: "VSourceProviderTooltip",
+  components: { VTooltip },
+  props: {
+    datum: {
+      type: Object as PropType<Metadata>,
+      required: true,
+    },
+    describedby: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const i18n = useI18n()
+    const description = computed(() => {
+      if (!props.datum.name) {
+        return ""
+      }
+      return i18n.t(
+        props.datum.name === "source"
+          ? "mediaDetails.sourceDescription"
+          : "mediaDetails.providerDescription"
+      )
+    })
+
+    return {
+      description,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VPopover/VPopover.vue b/frontend/src/components/VPopover/VPopover.vue
index 73c06be0f08..5c8873873cd 100644
--- a/frontend/src/components/VPopover/VPopover.vue
+++ b/frontend/src/components/VPopover/VPopover.vue
@@ -6,10 +6,6 @@
       ref="triggerContainerRef"
       class="flex w-min items-stretch whitespace-nowrap"
       @click="onTriggerClick"
-      @mouseenter="onTriggerMouseEnter"
-      @focusin="onTriggerMouseEnter"
-      @mouseleave="onTriggerMouseLeave"
-      @focusout="onTriggerMouseLeave"
     >
       <!--
         @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the popover will not open
@@ -180,17 +176,6 @@ export default defineComponent({
       emit: emit as SetupContext["emit"],
     })
 
-    const onTriggerMouseEnter = () => {
-      if (props.activateOnHover) {
-        open()
-      }
-    }
-    const onTriggerMouseLeave = () => {
-      if (props.activateOnHover) {
-        close()
-      }
-    }
-
     return {
       open,
       close,
@@ -198,8 +183,6 @@ export default defineComponent({
       triggerContainerRef,
       triggerRef,
       onTriggerClick,
-      onTriggerMouseEnter,
-      onTriggerMouseLeave,
       triggerA11yProps,
     }
   },
diff --git a/frontend/src/components/VTooltip/VTooltip.vue b/frontend/src/components/VTooltip/VTooltip.vue
new file mode 100644
index 00000000000..61e2ee0e379
--- /dev/null
+++ b/frontend/src/components/VTooltip/VTooltip.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <!-- re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906 -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <div
+      ref="triggerContainerRef"
+      class="flex w-min items-stretch whitespace-nowrap"
+      @keydown.esc="handleEscape"
+    >
+      <!--
+        @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the tooltip will not open
+          @binding {object} a11yProps
+          @binding {boolean} visible
+      -->
+      <slot name="trigger" :open="open">
+        <VIconButton
+          :label="describedby"
+          :aria-describedby="describedby"
+          variant="bordered-white"
+          size="disabled"
+          class="h-4 w-4 hover:!border-tx"
+          :icon-props="{ name: 'info', size: 4 }"
+          @click="open"
+        />
+      </slot>
+    </div>
+    <div
+      v-show="visibleRef"
+      :id="describedby"
+      ref="tooltipRef"
+      role="tooltip"
+      :class="`z-${zIndex} w-max-content absolute left-0 top-0`"
+      :style="{ ...style }"
+      :aria-hidden="!visibleRef"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  PropType,
+  watch,
+  toRefs,
+  onBeforeUnmount,
+} from "vue"
+
+import { zIndexValidator } from "~/constants/z-indices"
+
+import { useFloatingUi } from "~/composables/use-floating-ui"
+import { hasFocusWithin } from "~/utils/reakit-utils/focus"
+
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+import type { Placement, Strategy } from "@floating-ui/dom"
+
+export default defineComponent({
+  name: "VTooltip",
+  components: { VIconButton },
+  props: {
+    /**
+     * The placement of the tooltip relative to the trigger. Should be one of the options
+     * for `placement` passed to floating-ui.
+     *
+     * @see https://floating-ui.com/docs/tutorial#placements
+     *
+     * @default 'bottom'
+     */
+    placement: {
+      type: String as PropType<Placement>,
+      default: "bottom",
+    },
+    /**
+     * The positioning strategy of the tooltip. If your reference element is in a fixed container
+     * use the fixed strategy; otherwise use the default, absolute strategy.
+     *
+     * @see https://floating-ui.com/docs/computeposition#strategy
+     *
+     * @default 'absolute'
+     */
+    strategy: {
+      type: String as PropType<Strategy>,
+      default: "absolute",
+    },
+    /**
+     * The id of the element labelling the popover content.
+     * The owning element must have `aria-describedby` set to this value.
+     */
+    describedby: {
+      type: String,
+      required: true,
+    },
+    /**
+     * the z-index to apply to the tooltip content
+     */
+    zIndex: {
+      type: [Number, String],
+      default: "popover", // named z-index
+      validator: zIndexValidator,
+    },
+  },
+  setup(props) {
+    const visibleRef = ref(false)
+    const triggerContainerRef = ref<HTMLElement | null>(null)
+
+    const closeIfNeeded = () => {
+      if (triggerRef.value && !hasFocusWithin(triggerRef.value)) {
+        visibleRef.value = false
+      }
+    }
+
+    const open = () => {
+      visibleRef.value = true
+    }
+
+    const listeners = {
+      mouseover: open,
+      mouseout: closeIfNeeded,
+      focus: open,
+      blur: closeIfNeeded,
+    }
+
+    const setTrigger = (triggerElement: HTMLElement) => {
+      triggerRef.value = triggerElement
+      for (const [event, listener] of Object.entries(listeners)) {
+        triggerElement.addEventListener(event, listener)
+      }
+    }
+
+    const triggerRef = ref<HTMLElement | null>(null)
+    watch(triggerContainerRef, (container) => {
+      if (container) {
+        setTrigger(container.firstElementChild as HTMLElement)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      if (triggerRef.value) {
+        for (const [event, listener] of Object.entries(listeners)) {
+          triggerRef.value.removeEventListener(event, listener)
+        }
+      }
+    })
+
+    const tooltipRef = ref<HTMLElement | null>(null)
+    const propsRefs = toRefs(props)
+
+    const { style } = useFloatingUi({
+      floatingElRef: tooltipRef,
+      floatingPropsRefs: {
+        placement: propsRefs.placement,
+        strategy: propsRefs.strategy,
+        clippable: ref(false),
+        visible: visibleRef,
+        triggerElement: triggerRef,
+      },
+    })
+
+    const handleEscape = () => {
+      if (visibleRef.value) {
+        visibleRef.value = false
+      }
+    }
+
+    return {
+      visibleRef,
+      triggerContainerRef,
+      triggerRef,
+      tooltipRef,
+      style,
+
+      open,
+      handleEscape,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/composables/use-floating-ui.ts b/frontend/src/composables/use-floating-ui.ts
index 3c4c5811309..75ad4abb69d 100644
--- a/frontend/src/composables/use-floating-ui.ts
+++ b/frontend/src/composables/use-floating-ui.ts
@@ -12,24 +12,17 @@ import {
   Strategy,
 } from "@floating-ui/dom"
 
-export type PopoverContentProps = {
+export type UseFloatingProps = {
   visible: boolean
-  hide: () => void
-  hideOnEsc: boolean
-  hideOnClickOutside: boolean
-  autoFocusOnShow: boolean
-  autoFocusOnHide: boolean
   triggerElement: HTMLElement | null
   placement: Placement
   strategy: Strategy
   clippable: boolean
-  trapFocus: boolean
-  zIndex: number | string
 }
 
 type Props = {
   floatingElRef: Ref<HTMLElement | null>
-  floatingPropsRefs: ToRefs<PopoverContentProps>
+  floatingPropsRefs: ToRefs<UseFloatingProps>
 }
 
 // A constant offset to ensure there's a gap between
diff --git a/frontend/src/composables/use-popover-content.ts b/frontend/src/composables/use-popover-content.ts
index f3d09d23788..accde7dac87 100644
--- a/frontend/src/composables/use-popover-content.ts
+++ b/frontend/src/composables/use-popover-content.ts
@@ -1,16 +1,28 @@
 import { computed, ref } from "vue"
 
-import {
-  PopoverContentProps,
-  useFloatingUi,
-} from "~/composables/use-floating-ui"
+import { useFloatingUi } from "~/composables/use-floating-ui"
 
 import { useDialogContent } from "~/composables/use-dialog-content"
 
 import type { Properties as CSSProperties } from "csstype"
 
 import type { Ref, ToRefs, SetupContext } from "vue"
+import type { Placement, Strategy } from "@floating-ui/dom"
 
+export type PopoverContentProps = {
+  visible: boolean
+  hide: () => void
+  hideOnEsc: boolean
+  hideOnClickOutside: boolean
+  autoFocusOnShow: boolean
+  autoFocusOnHide: boolean
+  triggerElement: HTMLElement | null
+  placement: Placement
+  strategy: Strategy
+  clippable: boolean
+  trapFocus: boolean
+  zIndex: number | string
+}
 type Props = {
   popoverRef: Ref<HTMLElement | null>
   popoverPropsRefs: ToRefs<PopoverContentProps>
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index ba290436deb..77344e0f70d 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -485,6 +485,8 @@
     },
     providerLabel: "Provider",
     sourceLabel: "Source",
+    providerDescription: "Website where the content is hosted",
+    sourceDescription: "Organization that created or owns the original content",
     loading: "Loading...",
     relatedError: "Error fetching related media",
     aria: {
diff --git a/frontend/src/types/media.ts b/frontend/src/types/media.ts
index 416ecd0c4b7..063f68cc26c 100644
--- a/frontend/src/types/media.ts
+++ b/frontend/src/types/media.ts
@@ -131,6 +131,7 @@ export const isMediaDetail = <T extends SupportedMediaType>(
 }
 
 export type Metadata = {
+  name?: string
   label: string
   url?: string
   value: string
diff --git a/frontend/src/utils/metadata.ts b/frontend/src/utils/metadata.ts
index acc9e869f48..f8b79a3ad2d 100644
--- a/frontend/src/utils/metadata.ts
+++ b/frontend/src/utils/metadata.ts
@@ -41,6 +41,7 @@ export const getMediaMetadata = (
   const metadata: Metadata[] = []
   if (media.source && media.providerName !== media.sourceName) {
     metadata.push({
+      name: "provider",
       label: "mediaDetails.providerLabel",
       value: media.providerName || media.provider,
     })
@@ -51,6 +52,7 @@ export const getMediaMetadata = (
   )
   const sourceName = media.sourceName ?? media.providerName ?? media.provider
   metadata.push({
+    name: "source",
     label: "mediaDetails.sourceLabel",
     source: media.source ?? media.provider,
     url: sourceUrl,