From fd11ef8f49357ce9aedabc90327850a4cfab0455 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:38:11 -0500
Subject: [PATCH 1/6] Set up hover cards

---
 .eslintrc.js                         |   3 +-
 src/assets/scss/_variables.scss      |   3 +
 src/assets/scss/app.scss             |   5 +-
 src/components/app.vue               |   9 +-
 src/components/audit/row.vue         |  31 +++--
 src/components/hover-card.vue        | 167 +++++++++++++++++++++++++++
 src/components/hover-cards.vue       |  99 ++++++++++++++++
 src/components/popover.vue           |  16 ++-
 src/composables/event-listener.js    |  31 ++++-
 src/composables/hover-card.js        |  52 +++++++++
 src/container.js                     |   4 +
 src/container/hover-card.js          |  57 +++++++++
 src/directives/tooltip.js            |   8 +-
 src/request-data/hover-card.js       |  24 ++++
 src/util/dom.js                      |   8 ++
 src/util/load-async.js               |   4 +
 test/components/hover-card.spec.js   |  13 +++
 test/container/hover-card.spec.js    |  35 ++++++
 test/util/components/hover-cards.vue |  26 +++++
 test/util/dom.js                     |  21 +++-
 test/util/request-data.js            |   4 +-
 21 files changed, 582 insertions(+), 38 deletions(-)
 create mode 100644 src/components/hover-card.vue
 create mode 100644 src/components/hover-cards.vue
 create mode 100644 src/composables/hover-card.js
 create mode 100644 src/container/hover-card.js
 create mode 100644 src/request-data/hover-card.js
 create mode 100644 test/components/hover-card.spec.js
 create mode 100644 test/container/hover-card.spec.js
 create mode 100644 test/util/components/hover-cards.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index a90b749d1..d83512ef7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -52,9 +52,8 @@ module.exports = {
     'spaced-comment': 'off',
     'vue/attributes-order': ['error', {
       order: [
-        'DEFINITION',
         'LIST_RENDERING',
-        'CONDITIONALS',
+        ['CONDITIONALS', 'DEFINITION'],
         'RENDER_MODIFIERS',
         'GLOBAL',
         ['UNIQUE', 'SLOT'],
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index b7f98400f..0493f80d0 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -61,6 +61,8 @@ $padding-top-btn: 6px;
 $font-size-dropdown-menu: $font-size-btn;
 $min-width-dropdown-menu: 150px;
 
+$padding-block-dl: 10px;
+
 // Forms
 $padding-top-form-control: 6px;
 
@@ -94,6 +96,7 @@ $color-subpanel-border-strong: #c3c3c3;
 $ease-extreme-out: cubic-bezier(.05, .9, 0, 1);
 
 
+
 ////////////////////////////////////////////////////////////////////////////////
 // COMPONENTS
 
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 463a689cc..0f8954c84 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -42,8 +42,7 @@ p { @include text-block; }
 
 dl > * {
   border-bottom: 1px solid #ddd;
-  padding-bottom: 10px;
-  padding-top: 10px;
+  padding-block: $padding-block-dl;
 
   &:first-of-type { padding-top: 0; }
 
@@ -75,7 +74,7 @@ dl:not(.dl-horizontal) {
 // down to the fact that .dl-horizontal uses a CSS grid, while other <dl>
 // elements use flexbox.
 .dl-horizontal {
-  $padding-between: 10px;
+  $padding-between: 12px;
   $dt-width: 160px + $padding-panel-body + $padding-between;
 
   display: grid;
diff --git a/src/components/app.vue b/src/components/app.vue
index 0fc9331ff..85e91e509 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -27,7 +27,9 @@ except according to the terms contained in the LICENSE file.
     <template v-else-if="$route.meta.standalone">
       <router-view/>
     </template>
+
     <div id="tooltips"></div>
+    <hover-cards/>
   </div>
 </template>
 
@@ -48,7 +50,12 @@ import { loadAsync } from '../util/load-async';
 
 export default {
   name: 'App',
-  components: { Alert, Navbar, FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton')) },
+  components: {
+    Alert,
+    HoverCards: defineAsyncComponent(loadAsync('HoverCards')),
+    Navbar,
+    FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton'))
+  },
   inject: ['alert', 'config'],
   setup() {
     const { visiblyLoggedIn } = useSessions();
diff --git a/src/components/audit/row.vue b/src/components/audit/row.vue
index 090e30bba..d52fb2c77 100644
--- a/src/components/audit/row.vue
+++ b/src/components/audit/row.vue
@@ -29,7 +29,9 @@ except according to the terms contained in the LICENSE file.
     </td>
     <td class="target">
       <template v-if="target != null">
-        <router-link v-if="target.path != null" :to="target.path"
+        <component v-if="target.component != null" :is="target.component"
+          v-bind="target.props" v-tooltip.text/>
+        <router-link v-else-if="target.path != null" :to="target.path"
           v-tooltip.text>
           {{ target.title }}
         </router-link>
@@ -144,18 +146,23 @@ export default {
       if (this.category == null) return null;
       const species = acteeSpeciesByCategory[this.category];
       if (species == null) return null;
-      const { actee } = this.audit;
-
-      // purged actee (used purgedName as title)
-      if (actee.purgedAt != null)
-        return { title: actee.purgedName, purged: true };
 
-      const title = species.title(actee);
-      // soft-deleted actee (use species title but don't make a link)
-      if (actee.deletedAt != null) return { title, deleted: true };
-
-      const result = { title };
-      if (species.path != null) result.path = species.path(actee, this);
+      const { actee } = this.audit;
+      const deleted = actee.deletedAt != null;
+      const purged = actee.purgedAt != null;
+      const result = {
+        title: purged ? actee.purgedName : species.title(actee),
+        deleted,
+        purged
+      };
+      if (!(deleted || purged)) {
+        if (species.path != null) {
+          result.path = species.path(actee, this);
+        } else if (species.component != null) {
+          result.component = species.component;
+          result.props = species.props(actee);
+        }
+      }
       return result;
     },
     details() {
diff --git a/src/components/hover-card.vue b/src/components/hover-card.vue
new file mode 100644
index 000000000..33cc844dd
--- /dev/null
+++ b/src/components/hover-card.vue
@@ -0,0 +1,167 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div ref="el" class="hover-card" :style="{ width }">
+    <div class="hover-card-heading">
+      <span :class="`icon-${icon}`"></span>
+      <div>
+        <div class="hover-card-title"><slot name="title"></slot></div>
+        <div class="hover-card-subtitle"><slot name="subtitle"></slot></div>
+      </div>
+    </div>
+    <div class="hover-card-body" :class="{ 'truncate-dt': truncateDt }">
+      <slot name="body"></slot>
+    </div>
+    <div class="hover-card-footer"><slot name="footer"></slot></div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+import { px, truncatesText } from '../util/dom';
+
+defineOptions({
+  name: 'HoverCard'
+});
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  /* By default, <dt> elements will be truncated if their width exceeds 50% of
+  the hover card. However, if <dt> elements have a known fixed width -- if their
+  text is not user-provided or arbitrarily long -- then we don't want to
+  truncate them. (You can't hover over a hover card, so we can't show a tooltip
+  over truncated text.) That said, we still generally don't want the width of a
+  <dt> to exceed 50% of the hover card (to be wider than the <dd>). With that in
+  mind, if truncateDt is `false`, there will be no restriction on the width of
+  <dt> elements, but the width of <dd> elements will be allowed to grow up to
+  the width of the <dt> elements. */
+  truncateDt: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const width = ref('');
+const el = ref(null);
+const resize = () => {
+  if (props.truncateDt) return;
+  const dtWidth = el.value.querySelector('dt').getBoundingClientRect().width;
+  const ddWidth = el.value.querySelector('dd').getBoundingClientRect().width;
+  if (dtWidth > ddWidth) {
+    const currentWidth = el.value.getBoundingClientRect().width;
+    const equalWidth = px(currentWidth + dtWidth - ddWidth);
+    const { style } = el.value;
+    style.width = equalWidth;
+    if (![...el.value.querySelectorAll('dd')].some(truncatesText)) {
+      // Don't give the <dd> elements the same width as the <dt> elements unless
+      // they need it. The <dt> elements are already making the hover card wider
+      // than the default. The width of the <dd> elements is allowed to grow up
+      // to the width of the <dt> elements, but it shouldn't grow beyond what it
+      // needs.
+      style.width = 'auto';
+
+      // Bail if setting `width: auto` causes the width of the <dd> elements to
+      // shrink.
+      if (el.value.getBoundingClientRect().width < currentWidth)
+        style.width = '';
+    }
+
+    // Persist the new width in width.value so that it appears in the style
+    // attribute. That's needed for the style to be copied to the popover.
+    width.value = style.width;
+    style.width = '';
+  }
+};
+onMounted(resize);
+</script>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+$border: 1px solid #fff;
+$border-radius: 12px;
+
+.popover:has(.hover-card) { border-radius: $border-radius; }
+.hover-card { width: 290px; }
+
+.hover-card-heading {
+  background-color: #666;
+  border-inline: $border;
+  border-top: $border;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  color: #fff;
+  display: flex;
+  // Align the top of the text with the top of the icon.
+  line-height: 1;
+  padding: $padding-panel-body;
+  padding-bottom: 12px;
+
+  > [class^="icon-"] {
+    flex-shrink: 0;
+    font-size: 26px;
+    margin-right: 10px;
+  }
+
+  // Needed for .hover-card-title to truncate.
+  > div { overflow: hidden; }
+}
+
+.hover-card-title {
+  @include text-overflow-ellipsis;
+  font-size: 16px;
+  font-weight: 500;
+  // This padding has two purposes. We need space between the title and the
+  // subtitle. Since the line-height is 1, we also need space for descenders in
+  // the text. It's for the latter reason that we use padding instead of margin.
+  padding-bottom: 3px;
+}
+
+.hover-card-subtitle {
+  font-size: 12px;
+  padding-bottom: 2px;
+}
+
+.hover-card-body {
+  background-color: #fff;
+  border-inline: $border;
+
+  dl {
+    grid-template-columns: max-content 1fr;
+    margin-bottom: 0;
+    padding-block: $padding-block-dl;
+  }
+
+  dd:not(.dl-data-dd) { @include text-overflow-ellipsis; }
+
+  &.truncate-dt {
+    dl { grid-template-columns: fit-content(50%) 1fr; }
+    dt { @include text-overflow-ellipsis; }
+  }
+}
+
+.hover-card-footer {
+  background-color: #ddd;
+  border-inline: $border;
+
+  &:empty { display: none; }
+}
+
+.hover-card-footer, .hover-card:has(.hover-card-footer:empty) .hover-card-body {
+  border-bottom: $border;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}
+</style>
diff --git a/src/components/hover-cards.vue b/src/components/hover-cards.vue
new file mode 100644
index 000000000..2c55b1240
--- /dev/null
+++ b/src/components/hover-cards.vue
@@ -0,0 +1,99 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <popover ref="popoverRef"
+    :target="placement != null ? hoverCard.anchor : null" :placement="placement"
+    @hide="hoverCard.hide()">
+    <component v-if="component != null" :is="component"/>
+  </popover>
+</template>
+
+<script setup>
+// This component is what reacts to changes to the hoverCard object. When
+// hoverCard.show() is called, this component will send one or more requests,
+// then render a popover.
+
+import { inject, nextTick, ref, shallowRef, watch } from 'vue';
+
+import Popover from './popover.vue';
+
+import useHoverCardResources from '../request-data/hover-card';
+import { apiPaths } from '../util/request';
+
+/*
+To add a new type of hover card:
+
+  - Create a component for the hover card.
+  - Specify the requests to send for the hover card. If you need to use a new
+    resource, add it to useHoverCardResources().
+  - Check whether the hover card should be used in AuditRow.
+*/
+const types = {
+};
+
+const resources = useHoverCardResources();
+const resetResources = () => {
+  for (const resource of Object.values(resources)) resource.reset();
+};
+
+const hoverCard = inject('hoverCard');
+const component = shallowRef(null);
+const placement = ref(undefined);
+
+const popoverRef = ref(null);
+const positionPopover = () => {
+  const rightOfAnchor = hoverCard.anchor.getBoundingClientRect().right;
+  const componentElement = popoverRef.value.$el.children[0];
+  const componentWidth = componentElement.getBoundingClientRect().width;
+  // Subtracting 50 in order to provide some buffer.
+  const overflowsRight = rightOfAnchor + componentWidth >
+    document.documentElement.clientWidth - 50;
+  placement.value = overflowsRight ? 'left' : 'right';
+};
+const show = () => {
+  const typeConfig = types[hoverCard.type];
+  if (typeConfig == null)
+    throw new Error(`unknown type of hover card: '${hoverCard.type}'`);
+  const requests = Object.entries(typeConfig.requests(hoverCard.data))
+    .map(([resourceName, requestConfig]) => {
+      const resource = resources[resourceName];
+      if (resource == null)
+        throw new Error(`unknown resource: '${resourceName}'`);
+      return resource.request({ ...requestConfig, alert: false });
+    });
+  Promise.all(requests)
+    .then(() => {
+      component.value = typeConfig.component;
+      // Wait a tick in order to render the component. We need to measure the
+      // component's width before deciding where to place it.
+      return nextTick().then(positionPopover);
+    })
+    // If some but not all requests succeeded, we want to avoid holding onto the
+    // resources that were successful.
+    .catch(resetResources);
+};
+const hide = () => {
+  resetResources();
+  component.value = null;
+  placement.value = undefined;
+};
+watch(() => hoverCard.anchor, (anchor) => {
+  /* If hoverCard.state is `true`, then there are two possibilities. It could be
+  that hoverCard.state has changed from `false` to `true`. Or it could be that
+  it was `true` already, but hoverCard.anchor has changed. (That would be pretty
+  unusual, but it could happen if preventHide is set to `true` in
+  useHoverCard().) But most importantly, if hoverCard.state is `true`, then we
+  need to hide the current hover card before we show a new one. */
+  if (hoverCard.state) hide();
+  if (anchor != null) show();
+});
+</script>
diff --git a/src/components/popover.vue b/src/components/popover.vue
index af9eedb60..f9bc17e9b 100644
--- a/src/components/popover.vue
+++ b/src/components/popover.vue
@@ -33,7 +33,7 @@ implementation of the Bootstrap plugins. We could also consider implementing our
 own popover functionality, perhaps using Popper.
 -->
 <template>
-  <div class="popover-content-source">
+  <div class="popover-content-source" aria-hidden="true">
     <slot></slot>
   </div>
 </template>
@@ -89,7 +89,8 @@ export default {
           html: true,
           placement: this.placement,
           trigger: 'manual',
-          animation: false
+          animation: false,
+          sanitize: false
         })
         .popover('show'));
     },
@@ -122,6 +123,7 @@ export default {
 @import '../assets/scss/variables';
 
 .popover {
+  background-color: transparent;
   border: none;
   box-shadow: $box-shadow-popover;
   font-family: inherit;
@@ -132,5 +134,13 @@ export default {
 }
 
 .popover-content { padding: 0; }
-.popover-content-source { display: none; }
+
+// We don't want this element to be visible, but we also can't specify
+// `display: none`. In some cases, we need to measure the width of the content
+// that will be shown in the popover.
+.popover-content-source {
+  position: fixed;
+  left: -1000px;
+  top: 0;
+}
 </style>
diff --git a/src/composables/event-listener.js b/src/composables/event-listener.js
index c05c547df..1ec461800 100644
--- a/src/composables/event-listener.js
+++ b/src/composables/event-listener.js
@@ -16,13 +16,32 @@ except according to the terms contained in the LICENSE file.
 // over useEventListener() whenever possible. However, useEventListener() can be
 // useful for event targets like document.body or window.
 
-import { onBeforeUnmount, onMounted } from 'vue';
+import { isRef, onBeforeUnmount, shallowRef } from 'vue';
 
-export default (target, type, callback, capture = false) => {
-  onMounted(() => {
+import { watchSync } from '../util/reactivity';
+
+const useEventListener = (targetOrRef, type, callback, capture = false) => {
+  if (!isRef(targetOrRef)) {
+    useEventListener(shallowRef(targetOrRef), type, callback, capture);
+    return;
+  }
+
+  const addEventListener = (target) => {
+    if (target == null) return;
+    if (!(target === window || target === document || target instanceof HTMLElement))
+      throw new Error("Could not identify the EventTarget to add the event listener to. Note that you cannot pass a template ref of a child component: you must pass the component's root element.");
     target.addEventListener(type, callback, capture);
+  };
+  const removeEventListener = (target) => {
+    if (target != null)
+      target.removeEventListener(type, callback, capture);
+  };
+  if (targetOrRef.value != null) addEventListener(targetOrRef.value);
+  watchSync(targetOrRef, (newTarget, oldTarget) => {
+    removeEventListener(oldTarget);
+    addEventListener(newTarget);
   });
-  onBeforeUnmount(() => {
-    target.removeEventListener(type, callback, capture);
-  });
+  onBeforeUnmount(() => { removeEventListener(targetOrRef.value); });
 };
+
+export default useEventListener;
diff --git a/src/composables/hover-card.js b/src/composables/hover-card.js
new file mode 100644
index 000000000..0d4386da9
--- /dev/null
+++ b/src/composables/hover-card.js
@@ -0,0 +1,52 @@
+/*
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+
+// useHoverCard() listens for mouse events on an element. If the user hovers
+// over the element for sufficiently long, a hover card will be shown next to
+// the element.
+
+import { inject, onBeforeUnmount } from 'vue';
+
+import useEventListener from './event-listener';
+import { watchSync } from '../util/reactivity';
+
+// Set this to `true` to prevent the hover card from being hidden on mouseleave.
+// That can be useful during local development, e.g., when iterating on styles.
+const preventHide = false;
+
+export default (anchorRef, type, data) => {
+  const hoverCard = inject('hoverCard');
+  let timeoutId;
+  useEventListener(anchorRef, 'mouseenter', () => {
+    timeoutId = setTimeout(
+      () => {
+        hoverCard.show(anchorRef.value, type, data());
+        timeoutId = null;
+      },
+      350
+    );
+  });
+  const hide = (anchor = anchorRef.value) => {
+    if (hoverCard.anchor === anchor) hoverCard.hide();
+
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  useEventListener(anchorRef, 'mouseleave', () => {
+    if (!preventHide) hide();
+  });
+  // Hide the hover card if the anchor is removed or replaced.
+  watchSync(anchorRef, (_, oldAnchor) => { hide(oldAnchor); });
+  onBeforeUnmount(hide);
+};
diff --git a/src/container.js b/src/container.js
index d0f9e6bc3..aeacf654e 100644
--- a/src/container.js
+++ b/src/container.js
@@ -15,12 +15,14 @@ import { Translation } from 'vue-i18n';
 import createAlert from './alert';
 import createCentralI18n from './i18n';
 import createCentralRouter from './router';
+import createHoverCard from './container/hover-card';
 import createUnsavedChanges from './unsaved-changes';
 import { $tcn } from './util/i18n';
 import { createRequestData } from './request-data';
 
 const provide = [
   'alert',
+  'hoverCard',
   'unsavedChanges',
   'config',
   'http',
@@ -37,6 +39,7 @@ export default ({
   // passed a partial container.
   requestData = createRequestData,
   alert = createAlert(),
+  hoverCard = createHoverCard(),
   unsavedChanges = createUnsavedChanges(i18n.global),
   http = axios,
   // Adding `logger` in part in order to silence certain logging during testing.
@@ -45,6 +48,7 @@ export default ({
   const container = {
     i18n: i18n.global,
     alert,
+    hoverCard,
     unsavedChanges,
     http,
     logger
diff --git a/src/container/hover-card.js b/src/container/hover-card.js
new file mode 100644
index 000000000..e43f2bfed
--- /dev/null
+++ b/src/container/hover-card.js
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+
+/*
+This file exports a single function, createHoverCard(), which returns an object
+that manages reactive state for the hover card. There is only ever a single
+hover card shown at a time.
+
+This hover card object is how the useHoverCard() composable communicates with
+the HoverCards component. The object is included in the container object, but
+most components will not use it directly. Most components should use the
+useHoverCard() composable instead.
+*/
+
+import { readonly, shallowReactive } from 'vue';
+
+class HoverCardData {
+  #state;
+  #readonlyState;
+
+  constructor() {
+    this.#state = shallowReactive({ anchor: null, type: null, data: null });
+    this.#readonlyState = readonly(this.#state);
+  }
+
+  // Returns `true` if a hover card is shown or is in the process of being
+  // shown; returns `false` otherwise.
+  get state() { return this.#state.anchor != null; }
+
+  // The HTMLElement that the hover card is shown next to
+  get anchor() { return this.#state.anchor; }
+  // The type of hover card. Different resources (e.g., a form, an entity) have
+  // different hover cards.
+  get type() { return this.#state.type; }
+  // Additional data to pass to the hover card. Different types of hover cards
+  // expect different data. For example, the hover card for a dataset expects a
+  // projectId and name.
+  get data() { return this.#readonlyState.data; }
+
+  #set(anchor, type, data) {
+    Object.assign(this.#state, { anchor, type, data });
+  }
+
+  show(anchor, type, data = null) { this.#set(anchor, type, data); }
+  hide() { if (this.state) this.#set(null, null, null); }
+}
+
+export default () => new HoverCardData();
diff --git a/src/directives/tooltip.js b/src/directives/tooltip.js
index 9224889c0..50ac8125c 100644
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -80,6 +80,7 @@ is asynchronous, so you must use `await`. For example:
 import { computePosition, detectOverflow, flip, inline, offset } from '@floating-ui/dom';
 
 import { noop } from '../util/util';
+import { truncatesText } from '../util/dom';
 
 const types = ['text', 'aria-describedby', 'aria-label', 'sr-only', 'no-aria'];
 const placements = ['top', 'right', 'bottom', 'left'];
@@ -180,12 +181,7 @@ class Tooltip {
         // safeguard.
         if (closestBlock == null || closestBlock === document.body) return null;
       }
-      // Check whether the text is truncated.
-      if (closestBlock.scrollWidth > closestBlock.clientWidth ||
-        (closestBlock.scrollHeight > closestBlock.clientHeight &&
-        getComputedStyle(closestBlock)['-webkit-line-clamp'] !== 'none'))
-        return this.anchor.innerText;
-      return null;
+      return truncatesText(closestBlock) ? this.anchor.innerText : null;
     }
     if (this.type === 'aria-label')
       return this.anchor.getAttribute('aria-label');
diff --git a/src/request-data/hover-card.js b/src/request-data/hover-card.js
new file mode 100644
index 000000000..904efc90e
--- /dev/null
+++ b/src/request-data/hover-card.js
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+
+// The HoverCards component only uses local resources. This composable creates
+// those resources. In some cases, we shadow the names of app-wide resources,
+// e.g., `form`. For simplicity, we want the hover card resources to be
+// independent of resources used in other components.
+
+import { useRequestData } from './index';
+
+export default () => {
+  const { createResource } = useRequestData();
+  return {
+  };
+};
diff --git a/src/util/dom.js b/src/util/dom.js
index 43e20d288..692e55326 100644
--- a/src/util/dom.js
+++ b/src/util/dom.js
@@ -44,6 +44,14 @@ for (const [propName, styleName = propName] of [
 
 export const styleBox = (style) => new StyleBox(style);
 
+// Returns `true` if the text of the element is truncated and `false` if not.
+// Works with both the text-overflow and the line-clamp mixins. `element` must
+// be a block element.
+export const truncatesText = (element) =>
+  (element.scrollWidth > element.clientWidth ||
+  (element.scrollHeight > element.clientHeight &&
+  getComputedStyle(element)['-webkit-line-clamp'] !== 'none'));
+
 export const requiredLabel = (text, required) => {
   const star = required ? ' *' : '';
   return `${text}${star}`;
diff --git a/src/util/load-async.js b/src/util/load-async.js
index b888a1d9d..33a45280a 100644
--- a/src/util/load-async.js
+++ b/src/util/load-async.js
@@ -147,6 +147,10 @@ const loaders = new Map()
     /* webpackChunkName: "component-home-config-section" */
     '../components/home/config-section.vue'
   )))
+  .set('HoverCards', loader(() => import(
+    /* webpackChunkName: "component-hover-cards" */
+    '../components/hover-cards.vue'
+  )))
   .set('NotFound', loader(() => import(
     /* webpackChunkName: "component-not-found" */
     '../components/not-found.vue'
diff --git a/test/components/hover-card.spec.js b/test/components/hover-card.spec.js
new file mode 100644
index 000000000..172db4f41
--- /dev/null
+++ b/test/components/hover-card.spec.js
@@ -0,0 +1,13 @@
+import HoverCard from '../../src/components/hover-card.vue';
+
+import { mount } from '../util/lifecycle';
+
+describe('HoverCard', () => {
+  it('uses the icon prop', () => {
+    const component = mount(HoverCard, {
+      props: { icon: 'file' }
+    });
+    const icon = component.get('.hover-card-heading span');
+    icon.classes('icon-file').should.be.true;
+  });
+});
diff --git a/test/container/hover-card.spec.js b/test/container/hover-card.spec.js
new file mode 100644
index 000000000..76a80fc80
--- /dev/null
+++ b/test/container/hover-card.spec.js
@@ -0,0 +1,35 @@
+import { nextTick, watch } from 'vue';
+
+import createHoverCard from '../../src/container/hover-card';
+
+describe('createHoverCard()', () => {
+  it('updates after the hover card is shown', () => {
+    const hoverCard = createHoverCard();
+    hoverCard.show(document.body, 'foo', { bar: 'baz' });
+    hoverCard.state.should.be.true;
+    hoverCard.anchor.should.equal(document.body);
+    hoverCard.type.should.equal('foo');
+    expect(hoverCard.data).to.eql({ bar: 'baz' });
+  });
+
+  it('updates after the hover card is hidden', () => {
+    const hoverCard = createHoverCard();
+    hoverCard.show(document.body, 'foo', { bar: 'baz' });
+    hoverCard.hide();
+    hoverCard.state.should.be.false;
+    should.not.exist(hoverCard.anchor);
+    should.not.exist(hoverCard.type);
+    should.not.exist(hoverCard.data);
+  });
+
+  it('triggers reactive effects', async () => {
+    const hoverCard = createHoverCard();
+    let count = 0;
+    const increment = () => { count += 1; };
+    for (const prop of ['anchor', 'type', 'data'])
+      watch(() => hoverCard[prop], increment);
+    hoverCard.show(document.body, 'foo', { bar: 'baz' });
+    await nextTick();
+    count.should.equal(3);
+  });
+});
diff --git a/test/util/components/hover-cards.vue b/test/util/components/hover-cards.vue
new file mode 100644
index 000000000..18ba559d7
--- /dev/null
+++ b/test/util/components/hover-cards.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div id="anchor-container">
+      <component :is="anchorComponent" v-bind="anchorProps"/>
+    </div>
+    <hover-cards/>
+  </div>
+</template>
+
+<script setup>
+import HoverCards from '../../../src/components/hover-cards.vue';
+
+defineOptions({
+  name: 'TestUtilHoverCards'
+});
+defineProps({
+  anchorComponent: {
+    type: Object,
+    required: true
+  },
+  anchorProps: {
+    type: Object,
+    default: () => ({})
+  }
+});
+</script>
diff --git a/test/util/dom.js b/test/util/dom.js
index 688583dcc..400699bba 100644
--- a/test/util/dom.js
+++ b/test/util/dom.js
@@ -6,6 +6,14 @@ export const textWithout = (wrapper, selector) => {
   return without.textContent.trim();
 };
 
+
+
+////////////////////////////////////////////////////////////////////////////////
+// FINDING ELEMENTS
+
+// Returns a Vue Test Utils wrapper that does not exist.
+const nonexistentWrapper = (component) => component.find('div:not(div)');
+
 // Searches a component for a nav tab whose text matches the specified text. The
 // component must contain a PageBody component.
 export const findTab = (component, text) => {
@@ -24,6 +32,15 @@ export const findTab = (component, text) => {
     if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === text)
       return tab;
   }
-  // Return a wrapper that does not exist.
-  return component.find('div:not(div)');
+  return nonexistentWrapper(component);
+};
+
+export const findDd = (component, dtText) => {
+  const dtdd = component.findAll('dt, dd');
+  const index = dtdd.findIndex(wrapper => wrapper.element.tagName === 'DT' &&
+    wrapper.text() === dtText);
+  if (index === -1 || index === dtdd.length)
+    return nonexistentWrapper(component);
+  const dd = dtdd[index + 1];
+  return dd.element.tagName === 'DD' ? dd : nonexistentWrapper(component);
 };
diff --git a/test/util/request-data.js b/test/util/request-data.js
index a0432e66c..981da2d21 100644
--- a/test/util/request-data.js
+++ b/test/util/request-data.js
@@ -21,9 +21,7 @@ the response or response data. For example:
 */
 export const setRequestData = (requestData, responsesOrData) => {
   for (const [name, responseOrData] of Object.entries(responsesOrData)) {
-    const resource = requestData[name] != null
-      ? requestData[name]
-      : requestData.localResources[name];
+    const resource = requestData.localResources[name] ?? requestData[name];
     if (resource == null) throw new Error(`unknown resource ${name}`);
     const response = mockResponse.of(responseOrData);
     if (typeof response.data === 'object' && response.data != null)

From 79d2de94b62a90bec3e4a58686d722ac81d1910a Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:38:13 -0500
Subject: [PATCH 2/6] Add hover card to show an entity

---
 src/components/entity/link.vue           |  56 +++++++++++
 src/components/hover-card/entity.vue     |  52 ++++++++++
 src/components/hover-cards.vue           |   8 ++
 src/components/submission/feed-entry.vue |  16 ++--
 src/locales/en.json5                     |   4 +-
 src/request-data/hover-card.js           |   1 +
 test/components/hover-cards.spec.js      | 116 +++++++++++++++++++++++
 transifex/strings_en.json                |  15 ++-
 8 files changed, 256 insertions(+), 12 deletions(-)
 create mode 100644 src/components/entity/link.vue
 create mode 100644 src/components/hover-card/entity.vue
 create mode 100644 test/components/hover-cards.spec.js

diff --git a/src/components/entity/link.vue b/src/components/entity/link.vue
new file mode 100644
index 000000000..ae4841547
--- /dev/null
+++ b/src/components/entity/link.vue
@@ -0,0 +1,56 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<!-- Specifying :key so that if `to` changes, the element will be replaced. If a
+hover card is shown next to the element, it will be hidden. -->
+<template>
+  <router-link ref="link" :key="to" :to="to">
+    {{ entity.currentVersion.label }}
+  </router-link>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import useHoverCard from '../../composables/hover-card';
+import useRoutes from '../../composables/routes';
+
+defineOptions({
+  name: 'EntityLink'
+});
+const props = defineProps({
+  projectId: {
+    type: [Number, String],
+    required: true
+  },
+  dataset: {
+    type: String,
+    required: true
+  },
+  // An entity in the format of a REST API response (not OData)
+  entity: {
+    type: Object,
+    required: true
+  }
+});
+
+const { entityPath } = useRoutes();
+const to = computed(() =>
+  entityPath(props.projectId, props.dataset, props.entity.uuid));
+
+const link = ref(null);
+useHoverCard(computed(() => link.value?.$el), 'entity', () => ({
+  projectId: props.projectId,
+  dataset: props.dataset,
+  uuid: props.entity.uuid
+}));
+</script>
diff --git a/src/components/hover-card/entity.vue b/src/components/hover-card/entity.vue
new file mode 100644
index 000000000..45f17b7f1
--- /dev/null
+++ b/src/components/hover-card/entity.vue
@@ -0,0 +1,52 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <hover-card icon="cube">
+    <template #title>{{ entity.currentVersion.label }}</template>
+    <template #subtitle>{{ $t('resource.entity') }}</template>
+    <template #body>
+      <dl class="dl-horizontal">
+        <dt>{{ $t('resource.entityList') }}</dt>
+        <dd>{{ dataset.name }}</dd>
+
+        <dt>{{ $t('common.lastUpdate') }}</dt>
+        <dd><date-time :iso="entity.updatedAt ?? entity.createdAt"/></dd>
+
+        <dl-data v-for="name of propertyNames" :key="name" :name="name"
+          :value="entityData[name]"/>
+      </dl>
+    </template>
+  </hover-card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import DateTime from '../date-time.vue';
+import DlData from '../dl-data.vue';
+import HoverCard from '../hover-card.vue';
+
+import { useRequestData } from '../../request-data';
+
+defineOptions({
+  name: 'HoverCardEntity'
+});
+
+const { dataset, entity } = useRequestData();
+
+const propertyNames = computed(() => {
+  const { properties } = dataset;
+  const length = Math.min(properties.length, 5);
+  return new Array(length).fill(null).map((_, i) => properties[i].name);
+});
+const entityData = computed(() => entity.currentVersion.data);
+</script>
diff --git a/src/components/hover-cards.vue b/src/components/hover-cards.vue
index 2c55b1240..d293eca9d 100644
--- a/src/components/hover-cards.vue
+++ b/src/components/hover-cards.vue
@@ -24,6 +24,7 @@ except according to the terms contained in the LICENSE file.
 
 import { inject, nextTick, ref, shallowRef, watch } from 'vue';
 
+import HoverCardEntity from './hover-card/entity.vue';
 import Popover from './popover.vue';
 
 import useHoverCardResources from '../request-data/hover-card';
@@ -38,6 +39,13 @@ To add a new type of hover card:
   - Check whether the hover card should be used in AuditRow.
 */
 const types = {
+  entity: {
+    component: HoverCardEntity,
+    requests: ({ projectId, dataset, uuid }) => ({
+      dataset: { url: apiPaths.dataset(projectId, dataset) },
+      entity: { url: apiPaths.entity(projectId, dataset, uuid) }
+    })
+  }
 };
 
 const resources = useHoverCardResources();
diff --git a/src/components/submission/feed-entry.vue b/src/components/submission/feed-entry.vue
index 30194ed22..92f28c349 100644
--- a/src/components/submission/feed-entry.vue
+++ b/src/components/submission/feed-entry.vue
@@ -46,9 +46,9 @@ except according to the terms contained in the LICENSE file.
         <span class="icon-magic-wand entity-icon"></span>
         <i18n-t keypath="title.entity.create">
           <template #label>
-            <router-link v-if="entityDetails?.currentVersion?.label != null" :to="entityPath(projectId, entityDetails.dataset, entityDetails.uuid)">
-              {{ entityDetails.currentVersion.label }}
-            </router-link>
+            <entity-link v-if="entityDetails?.currentVersion?.label != null"
+              :project-id="projectId" :dataset="entityDetails.dataset"
+              :entity="entityDetails"/>
             <span v-else class="entity-label">{{ entityDetails.uuid }}</span>
           </template>
           <template #dataset>
@@ -62,9 +62,9 @@ except according to the terms contained in the LICENSE file.
         <span class="icon-magic-wand entity-icon"></span>
         <i18n-t keypath="title.entity.update">
           <template #label>
-            <router-link v-if="entityDetails?.currentVersion?.label != null" :to="entityPath(projectId, entityDetails.dataset, entityDetails.uuid)">
-              {{ entityDetails.currentVersion.label }}
-            </router-link>
+            <entity-link v-if="entityDetails?.currentVersion?.label != null"
+              :project-id="projectId" :dataset="entityDetails.dataset"
+              :entity="entityDetails"/>
             <span v-else class="entity-label">{{ entityDetails.uuid }}</span>
           </template>
           <template #dataset>
@@ -109,6 +109,7 @@ except according to the terms contained in the LICENSE file.
 import { last } from 'ramda';
 
 import ActorLink from '../actor-link.vue';
+import EntityLink from '../entity/link.vue';
 import FeedEntry from '../feed-entry.vue';
 import MarkdownView from '../markdown/view.vue';
 import SubmissionDiffItem from './diff-item.vue';
@@ -121,6 +122,7 @@ export default {
   name: 'SubmissionFeedEntry',
   components: {
     ActorLink,
+    EntityLink,
     FeedEntry,
     MarkdownView,
     SubmissionDiffItem,
@@ -146,7 +148,7 @@ export default {
   },
   setup() {
     const { diffs } = useRequestData();
-    const { datasetPath, entityPath } = useRoutes();
+    const { datasetPath } = useRoutes();
     return { diffs, datasetPath, entityPath };
   },
   computed: {
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index c7c6584c8..ad3b52f1b 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -295,9 +295,10 @@
     "appUser": "App User",
     "appUsers": "App Users",
     "config": "Server Configuration",
+    "entity": "Entity",
+    "entities": "Entities",
     "entityList": "Entity List",
     "entityLists": "Entity Lists",
-    "entities": "Entities",
     "form": "Form",
     "forms": "Forms",
     // @transifexKey component.FormHead.draftNav.title
@@ -401,6 +402,7 @@
     "filter": "Filter",
     // This is the text of a link that links to the ODK forum.
     "forum": "Forum",
+    "lastUpdate": "Last update",
     "loading": "Loading…",
     "no": "No",
     // This is shown if a search returned no results.
diff --git a/src/request-data/hover-card.js b/src/request-data/hover-card.js
index 904efc90e..d68f33d83 100644
--- a/src/request-data/hover-card.js
+++ b/src/request-data/hover-card.js
@@ -20,5 +20,6 @@ import { useRequestData } from './index';
 export default () => {
   const { createResource } = useRequestData();
   return {
+    entity: createResource('entity')
   };
 };
diff --git a/test/components/hover-cards.spec.js b/test/components/hover-cards.spec.js
new file mode 100644
index 000000000..e93112a63
--- /dev/null
+++ b/test/components/hover-cards.spec.js
@@ -0,0 +1,116 @@
+import sinon from 'sinon';
+import { markRaw } from 'vue';
+
+import EntityLink from '../../src/components/entity/link.vue';
+import Popover from '../../src/components/popover.vue';
+
+import TestUtilHoverCards from '../util/components/hover-cards.vue';
+
+import testData from '../data';
+import { mockHttp } from '../util/http';
+import { mockRouter } from '../util/router';
+
+const mountOptions = (anchorComponent, anchorProps = undefined) => ({
+  props: { anchorComponent: markRaw(anchorComponent), anchorProps },
+  container: { router: mockRouter('/') },
+  attachTo: document.body
+});
+const getAnchor = (component) =>
+  component.get('#anchor-container > :first-child');
+const getSubtitle = () => {
+  const subtitle = document.querySelector('.popover .hover-card-subtitle');
+  if (subtitle == null) throw new Error('subtitle not found');
+  return subtitle.textContent;
+};
+const hover = (clock) => async (component) => {
+  await getAnchor(component).trigger('mouseenter');
+  clock.tick(350);
+};
+
+// These tests test both the HoverCards component and the useHoverCard()
+// composable.
+describe('HoverCards', () => {
+  it('shows a hover card of type entity', () => {
+    const clock = sinon.useFakeTimers();
+    const dataset = testData.extendedDatasets
+      .createPast(1, { name: 'a b', entities: 1 })
+      .last();
+    const entity = testData.standardEntities
+      .createPast(1, { uuid: 'e' })
+      .last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        EntityLink,
+        { projectId: 1, dataset: 'a b', entity }
+      ))
+      .request(hover(clock))
+      .respondWithData(() => dataset)
+      .respondWithData(() => entity)
+      .testRequests([
+        { url: '/v1/projects/1/datasets/a%20b' },
+        { url: '/v1/projects/1/datasets/a%20b/entities/e' }
+      ])
+      .afterResponses(async (component) => {
+        getSubtitle().should.equal('Entity');
+        const { target } = component.getComponent(Popover).props();
+        target.should.equal(getAnchor(component).element);
+      });
+  });
+
+  it('hides the hover card on mouseleave', () => {
+    const clock = sinon.useFakeTimers();
+    const entity = testData.standardEntities.createPast(1).last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        EntityLink,
+        { projectId: 1, dataset: 'trees', entity }
+      ))
+      .request(hover(clock))
+      .respondWithData(() => testData.extendedDatasets.last())
+      .respondWithData(() => entity)
+      .afterResponses(async (component) => {
+        should.exist(document.querySelector('.popover'));
+        await getAnchor(component).trigger('mouseleave');
+        should.not.exist(document.querySelector('.popover'));
+      });
+  });
+
+  it('does not show a hover card if mouseleave quickly follows mouseenter', () => {
+    const clock = sinon.useFakeTimers();
+    const entity = testData.standardEntities.createPast(1).last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        EntityLink,
+        { projectId: 1, dataset: 'trees', entity }
+      ))
+      .testNoRequest(async (component) => {
+        const anchor = getAnchor(component);
+        await anchor.trigger('mouseenter');
+        clock.tick(300);
+        await anchor.trigger('mouseleave');
+        clock.tick(100);
+      })
+      .afterResponses(() => {
+        should.not.exist(document.querySelector('.popover'));
+      });
+  });
+
+  it('handles an error response', () => {
+    const clock = sinon.useFakeTimers();
+    const entity = testData.standardEntities.createPast(1).last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        EntityLink,
+        { projectId: 1, dataset: 'trees', entity }
+      ))
+      .request(hover(clock))
+      .respondWithData(() => testData.extendedDatasets.last())
+      .respondWithProblem(() => entity)
+      .afterResponses(async (component) => {
+        should.not.exist(document.querySelector('.popover'));
+        component.should.not.alert();
+        // Make sure that this does not result in a Vue warning.
+        await getAnchor(component).trigger('mouseleave');
+      });
+  });
+});
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index a2a6764bd..2ad0b5afd 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -628,6 +628,14 @@
       "string": "Server Configuration",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
     },
+    "entity": {
+      "string": "Entity",
+      "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
+    },
+    "entities": {
+      "string": "Entities",
+      "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
+    },
     "entityList": {
       "string": "Entity List",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
@@ -636,10 +644,6 @@
       "string": "Entity Lists",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
     },
-    "entities": {
-      "string": "Entities",
-      "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
-    },
     "form": {
       "string": "Form",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
@@ -870,6 +874,9 @@
       "string": "Forum",
       "developer_comment": "This is the text of a link that links to the ODK forum."
     },
+    "lastUpdate": {
+      "string": "Last update"
+    },
     "loading": {
       "string": "Loading…"
     },

From e338e52d7adc1b016aaf46a086a2088e0d300bde Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:38:15 -0500
Subject: [PATCH 3/6] Add hover card to show an entity list

---
 src/components/audit/row.vue                  |  9 ++-
 src/components/dataset/link.vue               | 44 +++++++++++
 src/components/dataset/row.vue                |  9 +--
 src/components/dataset/show.vue               |  3 +-
 src/components/dataset/summary/row.vue        | 14 +---
 src/components/entity/feed-entry.vue          |  7 +-
 src/components/form/overview/right-now.vue    | 20 +++--
 src/components/hover-card/dataset.vue         | 68 ++++++++++++++++
 src/components/hover-cards.vue                |  7 ++
 src/components/project/dataset-row.vue        |  9 +--
 src/components/submission/feed-entry.vue      | 14 ++--
 src/locales/en.json5                          |  2 +
 src/request-data/hover-card.js                |  1 +
 test/components/audit/table.spec.js           | 19 +++--
 test/components/dataset-summary/row.spec.js   | 28 ++++---
 test/components/dataset/link.spec.js          | 26 +++++++
 test/components/dataset/row.spec.js           |  7 +-
 test/components/entity/feed-entry.spec.js     | 13 +++-
 .../form/overview/right-now.spec.js           | 14 ++--
 test/components/hover-card/dataset.spec.js    | 53 +++++++++++++
 test/components/hover-cards.spec.js           | 21 +++++
 test/components/project/dataset-row.spec.js   |  6 +-
 test/components/submission/feed-entry.spec.js | 77 +++++++++----------
 transifex/strings_en.json                     |  4 +
 24 files changed, 353 insertions(+), 122 deletions(-)
 create mode 100644 src/components/dataset/link.vue
 create mode 100644 src/components/hover-card/dataset.vue
 create mode 100644 test/components/dataset/link.spec.js
 create mode 100644 test/components/hover-card/dataset.spec.js

diff --git a/src/components/audit/row.vue b/src/components/audit/row.vue
index d52fb2c77..5b4b7b3db 100644
--- a/src/components/audit/row.vue
+++ b/src/components/audit/row.vue
@@ -49,7 +49,10 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import { pick } from 'ramda';
+
 import ActorLink from '../actor-link.vue';
+import DatasetLink from '../dataset/link.vue';
 import DateTime from '../date-time.vue';
 import Selectable from '../selectable.vue';
 
@@ -93,7 +96,9 @@ const acteeSpeciesByCategory = {
     path: (actee, { primaryFormPath }) => primaryFormPath(actee)
   },
   dataset: {
-    title: (actee) => actee.name
+    title: (actee) => actee.name,
+    component: DatasetLink,
+    props: pick(['projectId', 'name'])
   },
   public_link: {
     title: getDisplayName
@@ -109,7 +114,7 @@ acteeSpeciesByCategory.upgrade = acteeSpeciesByCategory.form;
 
 export default {
   name: 'AuditRow',
-  components: { ActorLink, DateTime, Selectable },
+  components: { ActorLink, DatasetLink, DateTime, Selectable },
   props: {
     audit: {
       type: Object,
diff --git a/src/components/dataset/link.vue b/src/components/dataset/link.vue
new file mode 100644
index 000000000..cd93db820
--- /dev/null
+++ b/src/components/dataset/link.vue
@@ -0,0 +1,44 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<!-- Specifying :key so that if `to` changes, the element will be replaced. If a
+hover card is shown next to the element, it will be hidden. -->
+<template>
+  <router-link ref="link" :key="to" :to="to">{{ name }}</router-link>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import useHoverCard from '../../composables/hover-card';
+import useRoutes from '../../composables/routes';
+
+defineOptions({
+  name: 'DatasetLink'
+});
+const props = defineProps({
+  projectId: {
+    type: [Number, String],
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  }
+});
+
+const { datasetPath } = useRoutes();
+const to = computed(() => datasetPath(props.projectId, props.name));
+
+const link = ref(null);
+useHoverCard(computed(() => link.value?.$el), 'dataset', () => props);
+</script>
diff --git a/src/components/dataset/row.vue b/src/components/dataset/row.vue
index 540d10cc1..669fd6b53 100644
--- a/src/components/dataset/row.vue
+++ b/src/components/dataset/row.vue
@@ -12,7 +12,8 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr class="dataset-row">
     <td class="name">
-      <router-link :to="datasetOverviewPage" v-tooltip.text>{{ dataset.name }}</router-link>
+      <dataset-link :project-id="dataset.projectId" :name="dataset.name"
+        v-tooltip.text/>
     </td>
     <td class="entities">
       <span>{{ $n(dataset.entities, 'default') }}</span>
@@ -39,6 +40,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import DatasetLink from './link.vue';
 import DateTime from '../date-time.vue';
 
 import useRoutes from '../../composables/routes';
@@ -46,7 +48,7 @@ import { apiPaths } from '../../util/request';
 
 export default {
   name: 'DatasetRow',
-  components: { DateTime },
+  components: { DatasetLink, DateTime },
   props: {
     dataset: {
       type: Object,
@@ -60,9 +62,6 @@ export default {
   computed: {
     href() {
       return apiPaths.entities(this.dataset.projectId, this.dataset.name, '.csv');
-    },
-    datasetOverviewPage() {
-      return this.datasetPath(this.dataset.projectId, this.dataset.name);
     }
   }
 };
diff --git a/src/components/dataset/show.vue b/src/components/dataset/show.vue
index 5e3db9916..dc7dc1d15 100644
--- a/src/components/dataset/show.vue
+++ b/src/components/dataset/show.vue
@@ -9,7 +9,6 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
-
 <template>
   <div id="dataset-show">
     <breadcrumbs v-if="dataExists" :links="breadcrumbLinks"/>
@@ -84,7 +83,7 @@ export default {
     const { tabPath, tabClass } = useTabs(datasetPath());
     return {
       project, dataset, ...resourceStates([project, dataset]),
-      projectPath, datasetPath, tabPath, tabClass, canRoute
+      projectPath, tabPath, tabClass, canRoute
     };
   },
   computed: {
diff --git a/src/components/dataset/summary/row.vue b/src/components/dataset/summary/row.vue
index 97fde3ad1..e6fc02b58 100644
--- a/src/components/dataset/summary/row.vue
+++ b/src/components/dataset/summary/row.vue
@@ -14,9 +14,8 @@ except according to the terms contained in the LICENSE file.
     <div class="row">
       <div class="col-xs-6 dataset-name-wrap">
         <div class="dataset-name text-overflow-ellipsis" v-tooltip.text>
-          <router-link v-if="!dataset.isNew" :to="datasetPath(projectId, dataset.name)" v-tooltip.text>
-            {{ dataset.name }}
-          </router-link>
+          <dataset-link v-if="!dataset.isNew" :project-id="projectId"
+            :name="dataset.name"/>
           <template v-else>
             {{ dataset.name }}
           </template>
@@ -50,13 +49,12 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import DatasetLink from '../link.vue';
 import I18nList from '../../i18n/list.vue';
 
-import useRoutes from '../../../composables/routes';
-
 export default {
   name: 'DatasetSummaryRow',
-  components: { I18nList },
+  components: { DatasetLink, I18nList },
   props: {
     dataset: {
       type: Object,
@@ -67,10 +65,6 @@ export default {
       required: true
     }
   },
-  setup() {
-    const { datasetPath } = useRoutes();
-    return { datasetPath };
-  },
   data() {
     return {
       expanded: false
diff --git a/src/components/entity/feed-entry.vue b/src/components/entity/feed-entry.vue
index c68f0bae7..44982e4da 100644
--- a/src/components/entity/feed-entry.vue
+++ b/src/components/entity/feed-entry.vue
@@ -51,7 +51,7 @@ except according to the terms contained in the LICENSE file.
             <span class="entity-label">{{ entity.currentVersion.label }}</span>
           </template>
           <template #dataset>
-            <router-link :to="datasetPath()">{{ datasetName }}</router-link>
+            <dataset-link :project-id="projectId" :name="datasetName"/>
           </template>
         </i18n-t>
         <i18n-t v-else keypath="title.entity.create.api">
@@ -79,7 +79,7 @@ except according to the terms contained in the LICENSE file.
               <span class="entity-label">{{ entity.currentVersion.label }}</span>
             </template>
             <template #dataset>
-              <router-link :to="datasetPath()">{{ datasetName }}</router-link>
+              <dataset-link :project-id="projectId" :name="datasetName"/>
             </template>
           </i18n-t>
         </div>
@@ -143,6 +143,7 @@ import { computed, inject, provide } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ActorLink from '../actor-link.vue';
+import DatasetLink from '../dataset/link.vue';
 import EntityDiff from './diff.vue';
 import FeedEntry from '../feed-entry.vue';
 import SubmissionReviewState from '../submission/review-state.vue';
@@ -179,7 +180,7 @@ const wrapTitle = computed(() => {
 });
 
 // submission.create, entity.update.version
-const { submissionPath, datasetPath } = useRoutes();
+const { submissionPath } = useRoutes();
 const sourceSubmissionPath = computed(() => submissionPath(
   projectId,
   props.submission.xmlFormId,
diff --git a/src/components/form/overview/right-now.vue b/src/components/form/overview/right-now.vue
index d395c6eaf..56b77dfd7 100644
--- a/src/components/form/overview/right-now.vue
+++ b/src/components/form/overview/right-now.vue
@@ -52,9 +52,8 @@ except according to the terms contained in the LICENSE file.
             <tbody>
               <tr v-for="(dataset) in linkedDatasets" :key="dataset">
                 <td>
-                  <router-link :to="datasetPath(form.projectId, dataset)" v-tooltip.text>
-                    {{ dataset }}
-                  </router-link>
+                  <dataset-link :project-id="form.projectId" :name="dataset"
+                    v-tooltip.text/>
                 </td>
               </tr>
             </tbody>
@@ -80,11 +79,12 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import DatasetLink from '../../dataset/link.vue';
+import DatasetSummary from '../../dataset/summary.vue';
 import FormVersionStandardButtons from '../../form-version/standard-buttons.vue';
 import FormVersionString from '../../form-version/string.vue';
 import PageSection from '../../page/section.vue';
 import SummaryItem from '../../summary-item.vue';
-import DatasetSummary from '../../dataset/summary.vue';
 
 import useRoutes from '../../../composables/routes';
 import { useRequestData } from '../../../request-data';
@@ -92,22 +92,20 @@ import { useRequestData } from '../../../request-data';
 export default {
   name: 'FormOverviewRightNow',
   components: {
+    DatasetLink,
+    DatasetSummary,
     FormVersionStandardButtons,
     FormVersionString,
     PageSection,
-    SummaryItem,
-    DatasetSummary
+    SummaryItem
   },
   emits: ['view-xml'],
   setup() {
     // The component assumes that this data will exist when the component is
     // created.
     const { form, publishedAttachments, formDatasetDiff } = useRequestData();
-    const { formPath, datasetPath } = useRoutes();
-    return {
-      form, publishedAttachments, formDatasetDiff,
-      formPath, datasetPath
-    };
+    const { formPath } = useRoutes();
+    return { form, publishedAttachments, formDatasetDiff, formPath };
   },
   computed: {
     stateIcon() {
diff --git a/src/components/hover-card/dataset.vue b/src/components/hover-card/dataset.vue
new file mode 100644
index 000000000..da3124357
--- /dev/null
+++ b/src/components/hover-card/dataset.vue
@@ -0,0 +1,68 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <hover-card icon="database" :truncate-dt="false">
+    <template #title>{{ dataset.name }}</template>
+    <template #subtitle>{{ $t('resource.entityList') }}</template>
+    <template #body>
+      <dl class="dl-horizontal">
+        <dt>{{ $t('resource.entities') }}</dt>
+        <dd>{{ $n(dataset.entities, 'default') }}</dd>
+
+        <dt>{{ $t('resource.properties') }}</dt>
+        <dd>{{ $n(dataset.properties.length, 'default') }}</dd>
+
+        <dt>{{ $t('header.lastEntity') }}</dt>
+        <dd><date-time :iso="dataset.lastEntity"/></dd>
+      </dl>
+    </template>
+    <template #footer>
+      <div v-if="dataset.properties.length !== 0"
+        class="hover-card-dataset-property-list">
+        <div v-for="{ name } of dataset.properties" :key="name">{{ name }}</div>
+      </div>
+    </template>
+  </hover-card>
+</template>
+
+<script setup>
+import DateTime from '../date-time.vue';
+import HoverCard from '../hover-card.vue';
+
+import { useRequestData } from '../../request-data';
+
+defineOptions({
+  name: 'HoverCardDataset'
+});
+
+const { dataset } = useRequestData();
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+.hover-card-dataset-property-list {
+  display: flex;
+  overflow-x: hidden;
+  padding-block: 6px;
+
+  div {
+    font-weight: bold;
+
+    padding: 4px 6px;
+    &:first-child { padding-left: $padding-panel-body; }
+    &:last-child { padding-right: $padding-panel-body; }
+
+    + div { border-left: 1px solid #bbb; }
+  }
+}
+</style>
diff --git a/src/components/hover-cards.vue b/src/components/hover-cards.vue
index d293eca9d..44bb0e6f6 100644
--- a/src/components/hover-cards.vue
+++ b/src/components/hover-cards.vue
@@ -24,6 +24,7 @@ except according to the terms contained in the LICENSE file.
 
 import { inject, nextTick, ref, shallowRef, watch } from 'vue';
 
+import HoverCardDataset from './hover-card/dataset.vue';
 import HoverCardEntity from './hover-card/entity.vue';
 import Popover from './popover.vue';
 
@@ -39,6 +40,12 @@ To add a new type of hover card:
   - Check whether the hover card should be used in AuditRow.
 */
 const types = {
+  dataset: {
+    component: HoverCardDataset,
+    requests: ({ projectId, name }) => ({
+      dataset: { url: apiPaths.dataset(projectId, name), extended: true }
+    })
+  },
   entity: {
     component: HoverCardEntity,
     requests: ({ projectId, dataset, uuid }) => ({
diff --git a/src/components/project/dataset-row.vue b/src/components/project/dataset-row.vue
index 64d3935d3..7647a10c8 100644
--- a/src/components/project/dataset-row.vue
+++ b/src/components/project/dataset-row.vue
@@ -15,7 +15,8 @@ except according to the terms contained in the LICENSE file.
       <span v-if="showIcon" class="icon-database"></span>
     </td>
     <td colspan="2" class="dataset-name">
-      <router-link :to="datasetPath(project.id, dataset.name)" v-tooltip.text>{{ dataset.name }}</router-link>
+      <dataset-link :project-id="project.id" :name="dataset.name"
+        v-tooltip.text/>
     </td>
     <td colspan="2" class="conflicts-count">
       <span v-tooltip.no-aria="dataset.conflicts > 0 ? null : $t('common.conflicts')">
@@ -47,10 +48,11 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import { DateTime } from 'luxon';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import DatasetLink from '../dataset/link.vue';
 import DateTimeComponent from '../date-time.vue';
 
 import useRoutes from '../../composables/routes';
@@ -82,11 +84,8 @@ const lastEntityTooltip = computed(() => {
   const formatted = formatDateTime(DateTime.fromISO(lastEntity));
   return `${header}\n${formatted}`;
 });
-
 </script>
 
-
-
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
diff --git a/src/components/submission/feed-entry.vue b/src/components/submission/feed-entry.vue
index 92f28c349..238c5b692 100644
--- a/src/components/submission/feed-entry.vue
+++ b/src/components/submission/feed-entry.vue
@@ -52,9 +52,7 @@ except according to the terms contained in the LICENSE file.
             <span v-else class="entity-label">{{ entityDetails.uuid }}</span>
           </template>
           <template #dataset>
-            <router-link :to="datasetPath(projectId, entityDetails.dataset)">
-              {{ entityDetails.dataset }}
-            </router-link>
+            <dataset-link :project-id="projectId" :name="entityDetails.dataset"/>
           </template>
         </i18n-t>
       </template>
@@ -68,9 +66,7 @@ except according to the terms contained in the LICENSE file.
             <span v-else class="entity-label">{{ entityDetails.uuid }}</span>
           </template>
           <template #dataset>
-            <router-link :to="datasetPath(projectId, entityDetails.dataset)">
-              {{ entityDetails.dataset }}
-            </router-link>
+            <dataset-link :project-id="projectId" :name="entityDetails.dataset"/>
           </template>
         </i18n-t>
       </template>
@@ -109,19 +105,20 @@ except according to the terms contained in the LICENSE file.
 import { last } from 'ramda';
 
 import ActorLink from '../actor-link.vue';
+import DatasetLink from '../dataset/link.vue';
 import EntityLink from '../entity/link.vue';
 import FeedEntry from '../feed-entry.vue';
 import MarkdownView from '../markdown/view.vue';
 import SubmissionDiffItem from './diff-item.vue';
 import SubmissionReviewState from './review-state.vue';
 
-import useRoutes from '../../composables/routes';
 import { useRequestData } from '../../request-data';
 
 export default {
   name: 'SubmissionFeedEntry',
   components: {
     ActorLink,
+    DatasetLink,
     EntityLink,
     FeedEntry,
     MarkdownView,
@@ -148,8 +145,7 @@ export default {
   },
   setup() {
     const { diffs } = useRequestData();
-    const { datasetPath } = useRoutes();
-    return { diffs, datasetPath, entityPath };
+    return { diffs };
   },
   computed: {
     updateOrEdit() {
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index ad3b52f1b..a0d95b04d 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -308,6 +308,8 @@
     "projects": "Projects",
     // This is a data property of an Entity.
     "property": "Property",
+    // This refers to the data properties of an Entity.
+    "properties": "Properties",
     "publicLink": "Public Access Link",
     "user": "User",
     "users": "Users",
diff --git a/src/request-data/hover-card.js b/src/request-data/hover-card.js
index d68f33d83..f839a3f18 100644
--- a/src/request-data/hover-card.js
+++ b/src/request-data/hover-card.js
@@ -20,6 +20,7 @@ import { useRequestData } from './index';
 export default () => {
   const { createResource } = useRequestData();
   return {
+    dataset: createResource('dataset'),
     entity: createResource('entity')
   };
 };
diff --git a/test/components/audit/table.spec.js b/test/components/audit/table.spec.js
index 12e86743d..7a54b0ae8 100644
--- a/test/components/audit/table.spec.js
+++ b/test/components/audit/table.spec.js
@@ -3,6 +3,7 @@ import { RouterLinkStub } from '@vue/test-utils';
 import ActorLink from '../../../src/components/actor-link.vue';
 import AuditRow from '../../../src/components/audit/row.vue';
 import DateTime from '../../../src/components/date-time.vue';
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import Selectable from '../../../src/components/selectable.vue';
 
 import { ago } from '../../../src/util/date-time';
@@ -28,19 +29,23 @@ const testType = (row, type) => {
   else
     throw new Error('invalid type');
 };
-const testTarget = async (row, text, to = undefined) => {
+const testTarget = async (row, text, ...linkOptions) => {
   if (text === '') {
     row.get('.target').text().should.equal('');
-  } else if (to == null) {
+  } else if (linkOptions.length === 0) {
     const span = row.get('.target span');
     span.text().should.equal(text);
     await span.should.have.textTooltip();
+  } else if (typeof linkOptions[0] === 'string') {
+    testTarget(row, text, RouterLinkStub, (link) => {
+      link.props().to.should.equal(linkOptions[0]);
+    });
   } else {
-    const link = row.findAllComponents(RouterLinkStub).find(wrapper =>
-      wrapper.element.closest('.target') != null);
+    const [component, f] = linkOptions;
+    const link = row.get('.target').getComponent(component);
     link.text().should.equal(text);
     await link.should.have.textTooltip();
-    link.props().to.should.equal(to);
+    if (f != null) f(link);
   }
 };
 
@@ -292,7 +297,9 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        await testTarget(row, 'people');
+        await testTarget(row, 'people', DatasetLink, (link) => {
+          link.props().should.eql({ projectId: 1, name: 'people' });
+        });
       });
     }
   });
diff --git a/test/components/dataset-summary/row.spec.js b/test/components/dataset-summary/row.spec.js
index 2448fa6b5..0a824f8dd 100644
--- a/test/components/dataset-summary/row.spec.js
+++ b/test/components/dataset-summary/row.spec.js
@@ -1,12 +1,12 @@
-import { RouterLinkStub } from '@vue/test-utils';
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import Row from '../../../src/components/dataset/summary/row.vue';
-import Property from '../../util/ds-property-enum';
 
+import Property from '../../util/ds-property-enum';
 import testData from '../../data';
-import { mount } from '../../util/lifecycle';
 import { mockRouter } from '../../util/router';
+import { mount } from '../../util/lifecycle';
 
-describe('Dataset summary row', () => {
+describe('DatasetSummaryRow', () => {
   const theories = [
     { case: 'Case 1', isNew: true, properties: [Property.NewProperty] },
     { case: 'Case 2', isNew: false, properties: [Property.DefaultProperty] },
@@ -24,11 +24,16 @@ describe('Dataset summary row', () => {
           router: mockRouter('/')
         }
       });
-      component.get('.dataset-name').text().should.be.equal(dataset.name);
-      if (data.isNew)
-        component.find('.dataset-name a').exists().should.be.false;
-      else
-        component.getComponent(RouterLinkStub).props().to.should.be.equal(`/projects/1/entity-lists/${dataset.name}`);
+
+      const name = component.get('.dataset-name');
+      if (data.isNew) {
+        name.findComponent(DatasetLink).exists().should.be.false;
+        name.text().should.equal(dataset.name);
+      } else {
+        const link = name.getComponent(DatasetLink);
+        link.props().should.eql({ projectId: 1, name: dataset.name });
+      }
+
       component.find('.dataset-new').exists().should.be.equal(data.isNew);
       component.get('.properties-count').text().should.be.equal(`${inFormProperties.length} of ${dataset.properties.length} ${dataset.properties.length === 1 ? 'property' : 'properties'}`);
 
@@ -58,7 +63,10 @@ describe('Dataset summary row', () => {
         router: mockRouter('/')
       }
     });
-    component.getComponent(RouterLinkStub).props().to.should.be.equal(`/projects/1/entity-lists/${dataset.name}`);
+    component.getComponent(DatasetLink).props().should.eql({
+      projectId: 1,
+      name: dataset.name
+    });
     component.get('.properties-count').text().should.be.equal('0 of 0 properties');
 
     // check help text is hidden (.property-list is the parent)
diff --git a/test/components/dataset/link.spec.js b/test/components/dataset/link.spec.js
new file mode 100644
index 000000000..c79c57e16
--- /dev/null
+++ b/test/components/dataset/link.spec.js
@@ -0,0 +1,26 @@
+import { RouterLinkStub } from '@vue/test-utils';
+
+import DatasetLink from '../../../src/components/dataset/link.vue';
+
+import { mergeMountOptions, mount } from '../../util/lifecycle';
+import { mockRouter } from '../../util/router';
+
+const mountComponent = (options = undefined) =>
+  mount(DatasetLink, mergeMountOptions(options, {
+    props: { projectId: 1, name: 'trees' },
+    container: { router: mockRouter('/') }
+  }));
+
+describe('DatasetLink', () => {
+  it('shows the name of the entity list', () => {
+    mountComponent().text().should.equal('trees');
+  });
+
+  it('links to the entity list', () => {
+    const component = mountComponent({
+      props: { name: 'a b' }
+    });
+    const { to } = component.getComponent(RouterLinkStub).props();
+    to.should.equal('/projects/1/entity-lists/a%20b');
+  });
+});
diff --git a/test/components/dataset/row.spec.js b/test/components/dataset/row.spec.js
index d64b42478..691ba41c9 100644
--- a/test/components/dataset/row.spec.js
+++ b/test/components/dataset/row.spec.js
@@ -1,5 +1,6 @@
 import { RouterLinkStub } from '@vue/test-utils';
 
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import DatasetRow from '../../../src/components/dataset/row.vue';
 
 import testData from '../../data';
@@ -14,10 +15,8 @@ const mountComponent = () => mount(DatasetRow, {
 describe('DatasetRow', () => {
   it('shows the name', async () => {
     testData.extendedDatasets.createPast(1, { name: 'my_dataset' });
-    const row = mountComponent();
-    const link = row.getComponent(RouterLinkStub);
-    link.props().to.should.equal('/projects/1/entity-lists/my_dataset');
-    link.text().should.equal('my_dataset');
+    const link = mountComponent().getComponent(DatasetLink);
+    link.props().should.eql({ projectId: 1, name: 'my_dataset' });
     await link.should.have.textTooltip();
   });
 
diff --git a/test/components/entity/feed-entry.spec.js b/test/components/entity/feed-entry.spec.js
index 966f755b5..dd9ca00c0 100644
--- a/test/components/entity/feed-entry.spec.js
+++ b/test/components/entity/feed-entry.spec.js
@@ -2,6 +2,7 @@ import { RouterLinkStub } from '@vue/test-utils';
 import { last } from 'ramda';
 
 import ActorLink from '../../../src/components/actor-link.vue';
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import EntityDiff from '../../../src/components/entity/diff.vue';
 import EntityFeedEntry from '../../../src/components/entity/feed-entry.vue';
 import FeedEntry from '../../../src/components/feed-entry.vue';
@@ -217,8 +218,10 @@ describe('EntityFeedEntry', () => {
 
       it('links to the dataset', () => {
         const title = mountComponent().get('.feed-entry-title');
-        const { to } = title.getComponent(RouterLinkStub).props();
-        to.should.equal('/projects/1/entity-lists/trees');
+        title.getComponent(DatasetLink).props().should.eql({
+          projectId: '1',
+          name: 'trees'
+        });
       });
     });
 
@@ -261,8 +264,10 @@ describe('EntityFeedEntry', () => {
 
     it('links to the dataset in the top of the event block', () => {
       const title = mountComponent().get('.feed-entry-title .bulk-event');
-      const { to } = title.getComponent(RouterLinkStub).props();
-      to.should.equal('/projects/1/entity-lists/trees');
+      title.getComponent(DatasetLink).props().should.eql({
+        projectId: '1',
+        name: 'trees'
+      });
     });
 
     it('shows the correct text in bottom of event block', () => {
diff --git a/test/components/form/overview/right-now.spec.js b/test/components/form/overview/right-now.spec.js
index 2aa943c3e..f39787af0 100644
--- a/test/components/form/overview/right-now.spec.js
+++ b/test/components/form/overview/right-now.spec.js
@@ -1,5 +1,4 @@
-import { RouterLinkStub } from '@vue/test-utils';
-
+import DatasetLink from '../../../../src/components/dataset/link.vue';
 import FormOverviewRightNow from '../../../../src/components/form/overview/right-now.vue';
 import FormVersionString from '../../../../src/components/form-version/string.vue';
 import FormVersionViewXml from '../../../../src/components/form-version/view-xml.vue';
@@ -106,15 +105,14 @@ describe('FormOverviewRightNow', () => {
       should.not.exist(item);
     });
 
-    it('lists name of datasets', () => {
+    it('lists the datasets', () => {
       testData.standardFormAttachments.createPast(1, { name: 'trees.csv', datasetExists: true });
       testData.standardFormAttachments.createPast(1, { name: 'people.csv', datasetExists: true });
       const item = findItem(mountComponent(), 'linked-datasets');
-      const rows = item.findAll('tr');
-      rows[0].text().should.be.equal('people');
-      rows[0].getComponent(RouterLinkStub).props().to.should.be.equal('/projects/1/entity-lists/people');
-      rows[1].text().should.be.equal('trees');
-      rows[1].getComponent(RouterLinkStub).props().to.should.be.equal('/projects/1/entity-lists/trees');
+      const links = item.findAllComponents(DatasetLink);
+      links.length.should.equal(2);
+      links[0].props().should.eql({ projectId: 1, name: 'people' });
+      links[1].props().should.eql({ projectId: 1, name: 'trees' });
     });
   });
 });
diff --git a/test/components/hover-card/dataset.spec.js b/test/components/hover-card/dataset.spec.js
new file mode 100644
index 000000000..f3667816f
--- /dev/null
+++ b/test/components/hover-card/dataset.spec.js
@@ -0,0 +1,53 @@
+import DateTime from '../../../src/components/date-time.vue';
+import HoverCardDataset from '../../../src/components/hover-card/dataset.vue';
+
+import useHoverCardResources from '../../../src/request-data/hover-card';
+
+import testData from '../../data';
+import { findDd } from '../../util/dom';
+import { mount } from '../../util/lifecycle';
+import { testRequestData } from '../../util/request-data';
+
+const mountComponent = () => mount(HoverCardDataset, {
+  container: {
+    requestData: testRequestData([useHoverCardResources], {
+      dataset: testData.extendedDatasets.last()
+    })
+  }
+});
+
+describe('HoverCardDataset', () => {
+  it('shows the name of the entity list', () => {
+    testData.extendedDatasets.createPast(1);
+    mountComponent().get('.hover-card-title').text().should.equal('trees');
+  });
+
+  it('shows the entity count', () => {
+    testData.extendedDatasets.createPast(1, { entities: 1234 });
+    findDd(mountComponent(), 'Entities').text().should.equal('1,234');
+  });
+
+  it('shows the property count', () => {
+    testData.extendedDatasets.createPast(1, {
+      properties: [{ name: 'height' }, { name: 'circumference' }]
+    });
+    findDd(mountComponent(), 'Properties').text().should.equal('2');
+  });
+
+  it('shows the timestamp of the latest entity', () => {
+    const lastEntity = new Date().toISOString();
+    testData.extendedDatasets.createPast(1, { lastEntity });
+    const dd = findDd(mountComponent(), 'Latest Entity');
+    dd.getComponent(DateTime).props().iso.should.equal(lastEntity);
+  });
+
+  it('shows the property list', () => {
+    testData.extendedDatasets.createPast(1, {
+      properties: [{ name: 'height' }, { name: 'circumference' }]
+    });
+    const component = mountComponent();
+    const text = component.findAll('.hover-card-dataset-property-list div')
+      .map(div => div.text());
+    text.should.eql(['height', 'circumference']);
+  });
+});
diff --git a/test/components/hover-cards.spec.js b/test/components/hover-cards.spec.js
index e93112a63..1c4b222d3 100644
--- a/test/components/hover-cards.spec.js
+++ b/test/components/hover-cards.spec.js
@@ -1,6 +1,7 @@
 import sinon from 'sinon';
 import { markRaw } from 'vue';
 
+import DatasetLink from '../../src/components/dataset/link.vue';
 import EntityLink from '../../src/components/entity/link.vue';
 import Popover from '../../src/components/popover.vue';
 
@@ -30,6 +31,26 @@ const hover = (clock) => async (component) => {
 // These tests test both the HoverCards component and the useHoverCard()
 // composable.
 describe('HoverCards', () => {
+  it('shows a hover card of type dataset', () => {
+    const clock = sinon.useFakeTimers();
+    const dataset = testData.extendedDatasets
+      .createPast(1, { name: 'a b' })
+      .last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        DatasetLink,
+        { projectId: 1, name: 'a b' }
+      ))
+      .request(hover(clock))
+      .respondWithData(() => dataset)
+      .testRequests([{ url: '/v1/projects/1/datasets/a%20b', extended: true }])
+      .afterResponses(async (component) => {
+        getSubtitle().should.equal('Entity List');
+        const { target } = component.getComponent(Popover).props();
+        target.should.equal(getAnchor(component).element);
+      });
+  });
+
   it('shows a hover card of type entity', () => {
     const clock = sinon.useFakeTimers();
     const dataset = testData.extendedDatasets
diff --git a/test/components/project/dataset-row.spec.js b/test/components/project/dataset-row.spec.js
index 6e5d5082c..d3d327f41 100644
--- a/test/components/project/dataset-row.spec.js
+++ b/test/components/project/dataset-row.spec.js
@@ -1,4 +1,5 @@
 import ProjectDatasetRow from '../../../src/components/project/dataset-row.vue';
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import DateTime from '../../../src/components/date-time.vue';
 
 import useProjects from '../../../src/request-data/projects';
@@ -41,8 +42,9 @@ describe('ProjectDatasetRow', () => {
 
   it('links to dataset page', () => {
     testData.extendedDatasets.createPast(1, { name: 'people' });
-    const link = mountComponent().getComponent('.dataset-name a');
-    link.props().to.should.equal('/projects/1/entity-lists/people');
+    const component = mountComponent();
+    const link = component.get('.dataset-name').getComponent(DatasetLink);
+    link.props().should.eql({ projectId: 1, name: 'people' });
   });
 
   it('shows the correct time since the last entity', async () => {
diff --git a/test/components/submission/feed-entry.spec.js b/test/components/submission/feed-entry.spec.js
index 5a56e5b99..5a84535b2 100644
--- a/test/components/submission/feed-entry.spec.js
+++ b/test/components/submission/feed-entry.spec.js
@@ -1,7 +1,7 @@
-import { RouterLinkStub } from '@vue/test-utils';
-
 import ActorLink from '../../../src/components/actor-link.vue';
+import DatasetLink from '../../../src/components/dataset/link.vue';
 import DateTime from '../../../src/components/date-time.vue';
+import EntityLink from '../../../src/components/entity/link.vue';
 import MarkdownView from '../../../src/components/markdown/view.vue';
 import SubmissionFeedEntry from '../../../src/components/submission/feed-entry.vue';
 import SubmissionReviewState from '../../../src/components/submission/review-state.vue';
@@ -216,12 +216,21 @@ describe('SubmissionFeedEntry', () => {
             }
           }
         });
-        const links = mountComponent().findAllComponents(RouterLinkStub);
-        links.length.should.equal(2);
-        links.map(link => link.props().to).should.eql([
-          '/projects/1/entity-lists/DatasetName/entities/xyz',
-          '/projects/1/entity-lists/DatasetName'
-        ]);
+        const component = mountComponent();
+
+        const entityLink = component.getComponent(EntityLink);
+        entityLink.props().should.include({
+          projectId: '1',
+          dataset: 'DatasetName'
+        });
+        const { entity } = entityLink.props();
+        entity.uuid.should.equal('xyz');
+        entity.currentVersion.label.should.equal('EntityName');
+
+        component.getComponent(DatasetLink).props().should.eql({
+          projectId: '1',
+          name: 'DatasetName'
+        });
       });
 
       it('does not render link if entity deleted (no currentVersion.label)', () => {
@@ -231,28 +240,8 @@ describe('SubmissionFeedEntry', () => {
         });
         const component = mountComponent();
         component.get('.feed-entry-title').text().should.equal('Created Entity xyz in DatasetName Entity List');
-        const links = component.findAllComponents(RouterLinkStub);
-        links.length.should.equal(1);
-        links.map(link => link.props().to).should.eql([
-          '/projects/1/entity-lists/DatasetName'
-        ]);
-      });
-
-      it('renders okay and does not crash for action where entity details are missing', () => {
-        // This test exists because of a difference between 2022.3 and 2023.1 where the entity label
-        // was added to the audit log and used in rendering, but may not have been present in entities
-        // created in the earlier version.
-        // However, in 2023.4, we removed the label from the audit log again and dynamically compute
-        // entity.currentVersion (including currentVersion.label) for undeleted entities.
-        // Within the audit details, entity.uuid and entity.dataset have been consistently available
-        // for all entities across all versions, though this is a test that the component doesn't break
-        // catastrophically even if those are missing.
-        testData.extendedAudits.createPast(1, {
-          action: 'entity.create',
-          details: { entity: { } }
-        });
-        const title = mountComponent().get('.feed-entry-title');
-        title.text().should.equal('Created Entity  in  Entity List');
+        component.findComponent(EntityLink).exists().should.be.false;
+        component.findComponent(DatasetLink).exists().should.be.true;
       });
     });
 
@@ -283,12 +272,21 @@ describe('SubmissionFeedEntry', () => {
             }
           }
         });
-        const links = mountComponent().findAllComponents(RouterLinkStub);
-        links.length.should.equal(2);
-        links.map(link => link.props().to).should.eql([
-          '/projects/1/entity-lists/DatasetName/entities/xyz',
-          '/projects/1/entity-lists/DatasetName'
-        ]);
+        const component = mountComponent();
+
+        const entityLink = component.getComponent(EntityLink);
+        entityLink.props().should.include({
+          projectId: '1',
+          dataset: 'DatasetName'
+        });
+        const { entity } = entityLink.props();
+        entity.uuid.should.equal('xyz');
+        entity.currentVersion.label.should.equal('EntityName');
+
+        component.getComponent(DatasetLink).props().should.eql({
+          projectId: '1',
+          name: 'DatasetName'
+        });
       });
 
       it('does not render link if entity deleted (no currentVersion.label)', () => {
@@ -298,11 +296,8 @@ describe('SubmissionFeedEntry', () => {
         });
         const component = mountComponent();
         component.get('.feed-entry-title').text().should.equal('Updated Entity xyz in DatasetName Entity List');
-        const links = component.findAllComponents(RouterLinkStub);
-        links.length.should.equal(1);
-        links.map(link => link.props().to).should.eql([
-          '/projects/1/entity-lists/DatasetName'
-        ]);
+        component.findComponent(EntityLink).exists().should.be.false;
+        component.findComponent(DatasetLink).exists().should.be.true;
       });
     });
 
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 2ad0b5afd..4bd27e7c2 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -668,6 +668,10 @@
       "string": "Property",
       "developer_comment": "This is a data property of an Entity."
     },
+    "properties": {
+      "string": "Properties",
+      "developer_comment": "This refers to the data properties of an Entity."
+    },
     "publicLink": {
       "string": "Public Access Link",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."

From 1f040c7fcd68ad1ef31b60915418c216fb8e0444 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:38:17 -0500
Subject: [PATCH 4/6] Add hover card to show a form

---
 src/components/audit/row.vue                  | 10 +-
 src/components/form/link.vue                  | 50 ++++++++++
 src/components/form/row.vue                   | 17 ++--
 src/components/hover-card/form.vue            | 43 +++++++++
 src/components/hover-cards.vue                |  7 ++
 src/components/link-if-can.vue                | 12 ++-
 src/components/project/form-access/row.vue    |  5 +-
 src/components/project/form-row.vue           | 12 ++-
 src/request-data/hover-card.js                |  4 +
 test/components/audit/table.spec.js           |  7 +-
 test/components/form/link.spec.js             | 95 +++++++++++++++++++
 test/components/form/row.spec.js              | 71 ++------------
 test/components/hover-card/form.spec.js       | 51 ++++++++++
 test/components/link-if-can.spec.js           |  2 +
 .../project/form-access/row.spec.js           | 42 ++------
 test/components/project/form-row.spec.js      | 81 ++++------------
 test/data/forms.js                            |  2 +-
 17 files changed, 329 insertions(+), 182 deletions(-)
 create mode 100644 src/components/form/link.vue
 create mode 100644 src/components/hover-card/form.vue
 create mode 100644 test/components/form/link.spec.js
 create mode 100644 test/components/hover-card/form.spec.js

diff --git a/src/components/audit/row.vue b/src/components/audit/row.vue
index 5b4b7b3db..e95472334 100644
--- a/src/components/audit/row.vue
+++ b/src/components/audit/row.vue
@@ -53,6 +53,7 @@ import { pick } from 'ramda';
 
 import ActorLink from '../actor-link.vue';
 import DatasetLink from '../dataset/link.vue';
+import FormLink from '../form/link.vue';
 import DateTime from '../date-time.vue';
 import Selectable from '../selectable.vue';
 
@@ -93,7 +94,8 @@ const acteeSpeciesByCategory = {
   },
   form: {
     title: (actee) => (actee.name != null ? actee.name : actee.xmlFormId),
-    path: (actee, { primaryFormPath }) => primaryFormPath(actee)
+    component: FormLink,
+    props: (actee) => ({ form: actee })
   },
   dataset: {
     title: (actee) => actee.name,
@@ -114,7 +116,7 @@ acteeSpeciesByCategory.upgrade = acteeSpeciesByCategory.form;
 
 export default {
   name: 'AuditRow',
-  components: { ActorLink, DatasetLink, DateTime, Selectable },
+  components: { ActorLink, DatasetLink, DateTime, FormLink, Selectable },
   props: {
     audit: {
       type: Object,
@@ -123,8 +125,8 @@ export default {
   },
   setup() {
     const { actionMessage } = useAudit();
-    const { projectPath, primaryFormPath, userPath } = useRoutes();
-    return { actionMessage, projectPath, primaryFormPath, userPath };
+    const { projectPath, userPath } = useRoutes();
+    return { actionMessage, projectPath, userPath };
   },
   computed: {
     // When an audit log action has multiple parts/segments, we treat it as
diff --git a/src/components/form/link.vue b/src/components/form/link.vue
new file mode 100644
index 000000000..105d1b2f2
--- /dev/null
+++ b/src/components/form/link.vue
@@ -0,0 +1,50 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<!-- Specifying :key so that if the link path changes, the element will be
+replaced. If a hover card is shown next to the element, it will be hidden. -->
+<template>
+  <link-if-can v-if="to == null" ref="link" :key="toDefault" :to="toDefault">
+    {{ form.name ?? form.xmlFormId }}
+  </link-if-can>
+  <router-link v-else ref="link" :key="to" :to="to">
+    {{ form.name ?? form.xmlFormId }}
+  </router-link>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import LinkIfCan from '../link-if-can.vue';
+
+import useHoverCard from '../../composables/hover-card';
+import useRoutes from '../../composables/routes';
+
+defineOptions({
+  name: 'FormLink'
+});
+const props = defineProps({
+  // This may be a transformed form resource, but it is not required to be. For
+  // example, props.form.nameOrId may or may not be defined.
+  form: {
+    type: Object,
+    required: true
+  },
+  to: String
+});
+
+const { primaryFormPath } = useRoutes();
+const toDefault = computed(() => primaryFormPath(props.form));
+
+const link = ref(null);
+useHoverCard(computed(() => link.value?.$el), 'form', () => props.form);
+</script>
diff --git a/src/components/form/row.vue b/src/components/form/row.vue
index 1285b6b0e..bc910433f 100644
--- a/src/components/form/row.vue
+++ b/src/components/form/row.vue
@@ -12,9 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr class="form-row">
     <td class="name">
-      <link-if-can :to="primaryFormPath(form)">
-        {{ form.nameOrId }}
-      </link-if-can>
+      <form-link :form="form"/>
       <span v-if="showIdForDuplicateName" class="duplicate-form-id">({{ form.xmlFormId }})</span>
     </td>
 
@@ -89,6 +87,7 @@ import { DateTime } from 'luxon';
 import DateTimeComponent from '../date-time.vue';
 import EnketoFill from '../enketo/fill.vue';
 import EnketoPreview from '../enketo/preview.vue';
+import FormLink from './link.vue';
 import LinkIfCan from '../link-if-can.vue';
 
 import useReviewState from '../../composables/review-state';
@@ -98,7 +97,13 @@ import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormRow',
-  components: { DateTime: DateTimeComponent, EnketoFill, EnketoPreview, LinkIfCan },
+  components: {
+    DateTime: DateTimeComponent,
+    EnketoFill,
+    EnketoPreview,
+    FormLink,
+    LinkIfCan
+  },
   props: {
     form: {
       type: Object,
@@ -111,11 +116,11 @@ export default {
   },
   setup() {
     const { project, duplicateFormNames } = useRequestData();
-    const { formPath, primaryFormPath } = useRoutes();
+    const { formPath } = useRoutes();
     const { reviewStateIcon } = useReviewState();
     return {
       project, duplicateFormNames,
-      formPath, primaryFormPath,
+      formPath,
       reviewStateIcon
     };
   },
diff --git a/src/components/hover-card/form.vue b/src/components/hover-card/form.vue
new file mode 100644
index 000000000..95add02cf
--- /dev/null
+++ b/src/components/hover-card/form.vue
@@ -0,0 +1,43 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <hover-card icon="file" :truncate-dt="false">
+    <template #title>{{ form.nameOrId }}</template>
+    <template #subtitle>{{ $t('resource.form') }}</template>
+    <template #body>
+      <dl class="dl-horizontal">
+        <dt>{{ $t('common.version') }}</dt>
+        <dd><form-version-string :version="form.version"/></dd>
+
+        <dt>{{ $t('resource.submissions') }}</dt>
+        <dd>{{ $n(form.submissions, 'default') }}</dd>
+
+        <dt>{{ $t('header.lastSubmission') }}</dt>
+        <dd><date-time :iso="form.lastSubmission"/></dd>
+      </dl>
+    </template>
+  </hover-card>
+</template>
+
+<script setup>
+import DateTime from '../date-time.vue';
+import FormVersionString from '../form-version/string.vue';
+import HoverCard from '../hover-card.vue';
+
+import { useRequestData } from '../../request-data';
+
+defineOptions({
+  name: 'HoverCardForm'
+});
+
+const { form } = useRequestData();
+</script>
diff --git a/src/components/hover-cards.vue b/src/components/hover-cards.vue
index 44bb0e6f6..e7c68a416 100644
--- a/src/components/hover-cards.vue
+++ b/src/components/hover-cards.vue
@@ -26,6 +26,7 @@ import { inject, nextTick, ref, shallowRef, watch } from 'vue';
 
 import HoverCardDataset from './hover-card/dataset.vue';
 import HoverCardEntity from './hover-card/entity.vue';
+import HoverCardForm from './hover-card/form.vue';
 import Popover from './popover.vue';
 
 import useHoverCardResources from '../request-data/hover-card';
@@ -40,6 +41,12 @@ To add a new type of hover card:
   - Check whether the hover card should be used in AuditRow.
 */
 const types = {
+  form: {
+    component: HoverCardForm,
+    requests: ({ projectId, xmlFormId }) => ({
+      form: { url: apiPaths.form(projectId, xmlFormId), extended: true }
+    })
+  },
   dataset: {
     component: HoverCardDataset,
     requests: ({ projectId, name }) => ({
diff --git a/src/components/link-if-can.vue b/src/components/link-if-can.vue
index a341c5168..18a0c7a6f 100644
--- a/src/components/link-if-can.vue
+++ b/src/components/link-if-can.vue
@@ -10,15 +10,17 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <router-link v-if="canRoute(to)" :to="to" class="link-if-can">
+  <router-link v-if="canRoute(to)" ref="link" :to="to" class="link-if-can">
     <slot></slot>
   </router-link>
-  <span v-else class="link-if-can">
+  <span v-else ref="span" class="link-if-can">
     <slot></slot>
   </span>
 </template>
 
 <script setup>
+import { computed, ref } from 'vue';
+
 import useRoutes from '../composables/routes';
 
 defineProps({
@@ -29,6 +31,12 @@ defineProps({
 });
 
 const { canRoute } = useRoutes();
+
+const link = ref(null);
+const span = ref(null);
+const $el = computed(() => (link.value != null ? link.value.$el : span.value));
+
+defineExpose({ $el });
 </script>
 
 <style lang="scss">
diff --git a/src/components/project/form-access/row.vue b/src/components/project/form-access/row.vue
index 1ade31a64..53bb8d600 100644
--- a/src/components/project/form-access/row.vue
+++ b/src/components/project/form-access/row.vue
@@ -14,7 +14,7 @@ except according to the terms contained in the LICENSE file.
     <template v-if="frozen">
       <td class="project-form-access-row-form-name">
         <span v-if="form.publishedAt == null" class="icon-edit" v-tooltip.sr-only></span>
-        <router-link :to="primaryFormPath(form)" v-tooltip.text>{{ form.nameOrId }}</router-link>
+        <form-link :form="form" v-tooltip.text/>
         <span v-if="form.publishedAt == null" class="sr-only">&nbsp;{{ $t('draftTitle') }}</span>
       </td>
       <td>
@@ -50,11 +50,14 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import FormLink from '../../form/link.vue';
+
 import useRoutes from '../../../composables/routes';
 import { useRequestData } from '../../../request-data';
 
 export default {
   name: 'ProjectFormAccessRow',
+  components: { FormLink },
   props: {
     form: {
       type: Object,
diff --git a/src/components/project/form-row.vue b/src/components/project/form-row.vue
index 86025fe5d..30fc4d844 100644
--- a/src/components/project/form-row.vue
+++ b/src/components/project/form-row.vue
@@ -16,10 +16,10 @@ except according to the terms contained in the LICENSE file.
     </td>
     <td class="form-name">
       <template v-if="canLinkToFormOverview">
-        <router-link :to="primaryFormPath(form)">{{ form.nameOrId }}</router-link>
+        <form-link :form="form"/>
       </template>
       <template v-else-if="canLinkToSubmissions">
-        <router-link :to="submissionsPath.all">{{ form.nameOrId }}</router-link>
+        <form-link :form="form" :to="submissionsPath.all"/>
       </template>
       <template v-else>
         <template v-if="canLinkToEnketo">
@@ -29,6 +29,7 @@ except according to the terms contained in the LICENSE file.
           {{ form.nameOrId }}
         </template>
       </template>
+
       <span v-if="showIdForDuplicateName" class="duplicate-form-id">({{ form.xmlFormId }})</span>
     </td>
     <template v-if="form.publishedAt != null">
@@ -93,6 +94,7 @@ except according to the terms contained in the LICENSE file.
 import { DateTime } from 'luxon';
 
 import DateTimeComponent from '../date-time.vue';
+import FormLink from '../form/link.vue';
 
 import useReviewState from '../../composables/review-state';
 import useRoutes from '../../composables/routes';
@@ -102,7 +104,7 @@ import { useRequestData } from '../../request-data';
 
 export default {
   name: 'ProjectFormRow',
-  components: { DateTime: DateTimeComponent },
+  components: { DateTime: DateTimeComponent, FormLink },
   props: {
     form: {
       type: Object,
@@ -122,11 +124,11 @@ export default {
   setup() {
     const { projects } = useRequestData();
     const { duplicateFormNamesPerProject } = projects.toRefs();
-    const { formPath, primaryFormPath } = useRoutes();
+    const { formPath } = useRoutes();
     const { reviewStateIcon } = useReviewState();
     return {
       duplicateFormNamesPerProject,
-      formPath, primaryFormPath,
+      formPath,
       reviewStateIcon
     };
   },
diff --git a/src/request-data/hover-card.js b/src/request-data/hover-card.js
index f839a3f18..51628220f 100644
--- a/src/request-data/hover-card.js
+++ b/src/request-data/hover-card.js
@@ -15,11 +15,15 @@ except according to the terms contained in the LICENSE file.
 // e.g., `form`. For simplicity, we want the hover card resources to be
 // independent of resources used in other components.
 
+import { transformForm } from './util';
 import { useRequestData } from './index';
 
 export default () => {
   const { createResource } = useRequestData();
   return {
+    form: createResource('form', () => ({
+      transformResponse: ({ data }) => transformForm(data)
+    })),
     dataset: createResource('dataset'),
     entity: createResource('entity')
   };
diff --git a/test/components/audit/table.spec.js b/test/components/audit/table.spec.js
index 7a54b0ae8..eeb38ef5c 100644
--- a/test/components/audit/table.spec.js
+++ b/test/components/audit/table.spec.js
@@ -3,6 +3,7 @@ import { RouterLinkStub } from '@vue/test-utils';
 import ActorLink from '../../../src/components/actor-link.vue';
 import AuditRow from '../../../src/components/audit/row.vue';
 import DateTime from '../../../src/components/date-time.vue';
+import FormLink from '../../../src/components/form/link.vue';
 import DatasetLink from '../../../src/components/dataset/link.vue';
 import Selectable from '../../../src/components/selectable.vue';
 
@@ -186,12 +187,14 @@ describe('AuditTable', () => {
           actor: testData.extendedUsers.first(),
           action,
           actee: testData.standardForms
-            .createPast(1, { xmlFormId: 'a b', name: 'My Form' })
+            .createPast(1, { name: 'My Form' })
             .last()
         });
         const row = mountComponent();
         testType(row, type);
-        await testTarget(row, 'My Form', '/projects/1/forms/a%20b');
+        await testTarget(row, 'My Form', FormLink, (link) => {
+          link.props().form.xmlFormId.should.equal('f');
+        });
       });
     }
 
diff --git a/test/components/form/link.spec.js b/test/components/form/link.spec.js
new file mode 100644
index 000000000..71ec6c5c8
--- /dev/null
+++ b/test/components/form/link.spec.js
@@ -0,0 +1,95 @@
+import { RouterLinkStub } from '@vue/test-utils';
+
+import FormLink from '../../../src/components/form/link.vue';
+import LinkIfCan from '../../../src/components/link-if-can.vue';
+
+import testData from '../../data';
+import { mergeMountOptions, mount } from '../../util/lifecycle';
+import { mockLogin } from '../../util/session';
+import { mockRouter } from '../../util/router';
+
+const mountComponent = (options = undefined) =>
+  mount(FormLink, mergeMountOptions(options, {
+    props: { form: testData.extendedForms.last() },
+    container: {
+      router: mockRouter('/projects/1'),
+      requestData: { project: testData.extendedProjects.last() }
+    }
+  }));
+
+describe('FormLink', () => {
+  describe('text', () => {
+    it("shows the form's name if it has one", () => {
+      testData.extendedForms.createPast(1, { name: 'My Form' });
+      mountComponent().text().should.equal('My Form');
+    });
+
+    it('shows the xmlFormId if the form does not have a name', () => {
+      testData.extendedForms.createPast(1);
+      mountComponent().text().should.equal('f');
+    });
+  });
+
+  describe('link', () => {
+    describe('administrator', () => {
+      beforeEach(mockLogin);
+
+      it('links to form overview for a form with a published version', () => {
+        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
+        const { to } = mountComponent().getComponent(LinkIfCan).props();
+        to.should.equal('/projects/1/forms/a%20b');
+      });
+
+      it('links to .../draft for a form without a published version', () => {
+        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
+        const { to } = mountComponent().getComponent(LinkIfCan).props();
+        to.should.equal('/projects/1/forms/a%20b/draft');
+      });
+    });
+
+    describe('project viewer', () => {
+      beforeEach(() => {
+        mockLogin({ role: 'none' });
+        testData.extendedProjects.createPast(1, { role: 'viewer', forms: 1 });
+      });
+
+      it('links to .../submissions for a form with a published version', () => {
+        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
+        const { to } = mountComponent().getComponent(LinkIfCan).props();
+        to.should.equal('/projects/1/forms/a%20b/submissions');
+      });
+
+      it('links to .../draft/testing for form without published version', () => {
+        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
+        const { to } = mountComponent().getComponent(LinkIfCan).props();
+        to.should.equal('/projects/1/forms/a%20b/draft/testing');
+      });
+    });
+
+    describe('Data Collector', () => {
+      beforeEach(() => {
+        mockLogin({ role: 'none' });
+        testData.extendedProjects.createPast(1, { role: 'formfill', forms: 1 });
+        testData.extendedForms.createPast(1, { name: 'My Form' });
+      });
+
+      it('does not render a link', () => {
+        const component = mountComponent();
+        component.find('a').exists().should.be.false;
+        component.text().should.equal('My Form');
+      });
+    });
+  });
+
+  it('uses the to prop', () => {
+    testData.extendedForms.createPast(1, { name: 'My Form' });
+    const component = mountComponent({
+      props: { to: '/users' }
+    });
+    component.findComponent(LinkIfCan).exists().should.be.false;
+    const link = component.findComponent(RouterLinkStub);
+    link.exists().should.be.true;
+    link.props().to.should.equal('/users');
+    link.text().should.equal('My Form');
+  });
+});
diff --git a/test/components/form/row.spec.js b/test/components/form/row.spec.js
index 337125fdb..02931197e 100644
--- a/test/components/form/row.spec.js
+++ b/test/components/form/row.spec.js
@@ -1,8 +1,8 @@
 import DateTime from '../../../src/components/date-time.vue';
 import EnketoFill from '../../../src/components/enketo/fill.vue';
 import EnketoPreview from '../../../src/components/enketo/preview.vue';
+import FormLink from '../../../src/components/form/link.vue';
 import FormRow from '../../../src/components/form/row.vue';
-import LinkIfCan from '../../../src/components/link-if-can.vue';
 
 import useProject from '../../../src/request-data/project';
 
@@ -32,70 +32,11 @@ const mountComponent = () => {
 };
 
 describe('FormRow', () => {
-  describe('form name', () => {
-    beforeEach(mockLogin);
-
-    it("shows the form's name if it has one", () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'f', name: 'My Form' });
-      mountComponent().get('.name a').text().should.equal('My Form');
-    });
-
-    it('shows the xmlFormId if the form does not have a name', () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'f', name: null });
-      mountComponent().get('.name a').text().should.equal('f');
-    });
-  });
-
-  describe('form link', () => {
-    describe('administrator', () => {
-      beforeEach(mockLogin);
-
-      it('links to form overview for a form with a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-        const { to } = mountComponent().getComponent(LinkIfCan).props();
-        to.should.equal('/projects/1/forms/a%20b');
-      });
-
-      it('links to .../draft for a form without a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
-        const { to } = mountComponent().getComponent(LinkIfCan).props();
-        to.should.equal('/projects/1/forms/a%20b/draft');
-      });
-    });
-
-    describe('project viewer', () => {
-      beforeEach(() => {
-        mockLogin({ role: 'none' });
-        testData.extendedProjects.createPast(1, { role: 'viewer', forms: 1 });
-      });
-
-      it('links to .../submissions for a form with a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-        const { to } = mountComponent().getComponent(LinkIfCan).props();
-        to.should.equal('/projects/1/forms/a%20b/submissions');
-      });
-
-      it('links to .../draft/testing for form without published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
-        const { to } = mountComponent().getComponent(LinkIfCan).props();
-        to.should.equal('/projects/1/forms/a%20b/draft/testing');
-      });
-    });
-
-    describe('Data Collector', () => {
-      beforeEach(() => {
-        mockLogin({ role: 'none' });
-        testData.extendedProjects.createPast(1, { role: 'formfill', forms: 1 });
-        testData.extendedForms.createPast(1, { name: 'My Form' });
-      });
-
-      it('does not render a link', () => {
-        const row = mountComponent();
-        const name = row.get('.name');
-        name.find('a').exists().should.be.false;
-        name.text().should.equal('My Form');
-      });
-    });
+  it("shows the form's name", () => {
+    mockLogin();
+    testData.extendedForms.createPast(1, { name: 'My Form' });
+    const link = mountComponent().get('.name').getComponent(FormLink);
+    link.props().form.name.should.equal('My Form');
   });
 
   describe('review state counts', () => {
diff --git a/test/components/hover-card/form.spec.js b/test/components/hover-card/form.spec.js
new file mode 100644
index 000000000..ec788c505
--- /dev/null
+++ b/test/components/hover-card/form.spec.js
@@ -0,0 +1,51 @@
+import DateTime from '../../../src/components/date-time.vue';
+import FormVersionString from '../../../src/components/form-version/string.vue';
+import HoverCardForm from '../../../src/components/hover-card/form.vue';
+
+import useHoverCardResources from '../../../src/request-data/hover-card';
+
+import testData from '../../data';
+import { findDd } from '../../util/dom';
+import { mount } from '../../util/lifecycle';
+import { testRequestData } from '../../util/request-data';
+
+const mountComponent = () => mount(HoverCardForm, {
+  container: {
+    requestData: testRequestData([useHoverCardResources], {
+      form: testData.extendedForms.last()
+    })
+  }
+});
+
+describe('HoverCardForm', () => {
+  describe('title', () => {
+    it("shows the form's name if it has one", () => {
+      testData.extendedForms.createPast(1, { name: 'My Form' });
+      mountComponent().get('.hover-card-title').text().should.equal('My Form');
+    });
+
+    it('shows the xmlFormId if the form does not have a name', () => {
+      testData.extendedForms.createPast(1);
+      mountComponent().get('.hover-card-title').text().should.equal('f');
+    });
+  });
+
+  it('shows the form version string', () => {
+    testData.extendedForms.createPast(1);
+    const component = mountComponent();
+    const { version } = component.getComponent(FormVersionString).props();
+    version.should.equal('v1');
+  });
+
+  it('shows the submission count', () => {
+    testData.extendedForms.createPast(1, { submissions: 1234 });
+    findDd(mountComponent(), 'Submissions').text().should.equal('1,234');
+  });
+
+  it('shows the timestamp of the latest submission', () => {
+    const lastSubmission = new Date().toISOString();
+    testData.extendedForms.createPast(1, { lastSubmission });
+    const dd = findDd(mountComponent(), 'Latest Submission');
+    dd.getComponent(DateTime).props().iso.should.equal(lastSubmission);
+  });
+});
diff --git a/test/components/link-if-can.spec.js b/test/components/link-if-can.spec.js
index df7e85c0a..5d611aa09 100644
--- a/test/components/link-if-can.spec.js
+++ b/test/components/link-if-can.spec.js
@@ -19,6 +19,7 @@ describe('LinkIfCan', () => {
     const link = component.getComponent(RouterLinkStub);
     link.props().to.should.equal('/users');
     link.get('span').text().should.equal('Some span text');
+    component.vm.$el.should.equal(link.element);
   });
 
   it('renders a span if the user cannot navigate to the location', () => {
@@ -31,6 +32,7 @@ describe('LinkIfCan', () => {
     component.findComponent(RouterLinkStub).exists().should.be.false;
     component.element.tagName.should.equal('SPAN');
     component.get('span').text().should.equal('Some span text');
+    component.vm.$el.should.equal(component.element);
   });
 
   it('hides an .icon-angle-right if user cannot navigate to location', () => {
diff --git a/test/components/project/form-access/row.spec.js b/test/components/project/form-access/row.spec.js
index f0da578c5..7ccdc3dee 100644
--- a/test/components/project/form-access/row.spec.js
+++ b/test/components/project/form-access/row.spec.js
@@ -1,3 +1,4 @@
+import FormLink from '../../../../src/components/form/link.vue';
 import ProjectFormAccessRow from '../../../../src/components/project/form-access/row.vue';
 
 import testData from '../../../data';
@@ -23,40 +24,13 @@ describe('ProjectFormAccessRow', () => {
     });
   });
 
-  describe('form name and xmlFormId', () => {
-    it("shows the form's name if the form has one", async () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'f', name: 'My Form' });
-      const app = await load('/projects/1/form-access');
-      const a = app.get('.project-form-access-row-form-name a');
-      a.text().should.equal('My Form');
-      await a.should.have.textTooltip();
-    });
-
-    it('shows the xmlFormId if the form does not have a name', async () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'my_form', name: null });
-      const app = await load('/projects/1/form-access');
-      const a = app.get('.project-form-access-row-form-name a');
-      a.text().should.equal('my_form');
-      await a.should.have.textTooltip();
-    });
-  });
-
-  describe('form link', () => {
-    it('links to the form overview for a form with a published version', () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-      return load('/projects/1/form-access').then(app => {
-        const a = app.get('.project-form-access-row-form-name a');
-        a.attributes().href.should.endWith('/projects/1/forms/a%20b');
-      });
-    });
-
-    it('links to .../draft for a form without a published version', () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
-      return load('/projects/1/form-access').then(app => {
-        const a = app.get('.project-form-access-row-form-name a');
-        a.attributes().href.should.endWith('/projects/1/forms/a%20b/draft');
-      });
-    });
+  it("shows the form's name", async () => {
+    testData.extendedForms.createPast(1, { name: 'My Form' });
+    const app = await load('/projects/1/form-access');
+    const link = app.get('.project-form-access-row-form-name')
+      .getComponent(FormLink);
+    link.props().form.name.should.equal('My Form');
+    await link.should.have.textTooltip();
   });
 
   it('shows the form state', () => {
diff --git a/test/components/project/form-row.spec.js b/test/components/project/form-row.spec.js
index 1f49378f8..75cd84c5f 100644
--- a/test/components/project/form-row.spec.js
+++ b/test/components/project/form-row.spec.js
@@ -1,7 +1,6 @@
-import { RouterLinkStub } from '@vue/test-utils';
-
 import ProjectFormRow from '../../../src/components/project/form-row.vue';
 import DateTime from '../../../src/components/date-time.vue';
+import FormLink from '../../../src/components/form/link.vue';
 
 import useProjects from '../../../src/request-data/projects';
 
@@ -28,71 +27,29 @@ const mountComponent = (showIcon = false) => {
 };
 
 describe('ProjectFormRow', () => {
-  describe('form name', () => {
-    beforeEach(mockLogin);
-
-    it('renders the form name correctly', () => {
-      testData.extendedForms.createPast(1, { name: 'My Form', xmlFormId: 'f' });
-      const link = mountComponent().find('.form-name a');
-      link.text().should.equal('My Form');
-    });
-
-    it('shows the xmlFormId if the form does not have a name', () => {
-      testData.extendedForms.createPast(1, { name: null, xmlFormId: 'f' });
-      const link = mountComponent().getComponent(RouterLinkStub);
-      link.text().should.equal('f');
-    });
-  });
-
   describe('form link', () => {
-    describe('Administrator', () => {
-      beforeEach(mockLogin);
-
-      it('links to form overview for a form with a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-        const link = mountComponent().getComponent('.form-name a');
-        link.props().to.should.equal('/projects/1/forms/a%20b');
-      });
-
-      it('links to .../draft for a form without a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
-        const link = mountComponent().getComponent('.form-name a');
-        link.props().to.should.equal('/projects/1/forms/a%20b/draft');
-      });
+    it('renders a FormLink for a sitewide administrator', () => {
+      mockLogin();
+      testData.extendedForms.createPast(1);
+      const link = mountComponent().get('.form-name').getComponent(FormLink);
+      link.props().form.xmlFormId.should.equal('f');
     });
 
-    describe('Project Manager', () => {
-      beforeEach(() => {
-        mockLogin({ role: 'none' });
-        testData.extendedProjects.createPast(1, { role: 'manager', forms: 1 });
-      });
-
-      it('links to form overview for a form with a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-        const link = mountComponent().getComponent('.form-name a');
-        link.props().to.should.equal('/projects/1/forms/a%20b');
-      });
-
-      it('links to .../draft for a form without a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b', draft: true });
-        const link = mountComponent().getComponent('.form-name a');
-        link.props().to.should.equal('/projects/1/forms/a%20b/draft');
-      });
+    it('renders a FormLink for a project manager', () => {
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'manager', forms: 1 });
+      testData.extendedForms.createPast(1);
+      const link = mountComponent().get('.form-name').getComponent(FormLink);
+      link.props().form.xmlFormId.should.equal('f');
     });
 
-    describe('Project Viewer', () => {
-      beforeEach(() => {
-        mockLogin({ role: 'none' });
-        testData.extendedProjects.createPast(1, { role: 'viewer', forms: 1 });
-      });
-
-      it('links to .../submissions for a form with a published version', () => {
-        testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
-        const link = mountComponent().getComponent('.form-name a');
-        link.props().to.should.equal('/projects/1/forms/a%20b/submissions');
-      });
-
-      // draft forms not shown in project-form-row to project viewers
+    // Note that draft forms are not shown in ProjectFormRow to project viewers.
+    it('renders a FormLink for a project viewer', () => {
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'viewer', forms: 1 });
+      testData.extendedForms.createPast(1);
+      const link = mountComponent().get('.form-name').getComponent(FormLink);
+      link.props().form.xmlFormId.should.equal('f');
     });
 
     describe('Data Collector', () => {
diff --git a/test/data/forms.js b/test/data/forms.js
index b39024e60..63f16193a 100644
--- a/test/data/forms.js
+++ b/test/data/forms.js
@@ -55,7 +55,7 @@ const forms = dataStore({
         })
         .last(),
     xmlFormId = `f${id !== 1 ? id : ''}`,
-    name = faker.random.boolean() ? faker.name.findName() : null,
+    name = null,
     enketoId = 'xyz',
     draft = !inPast,
     publishedAt = undefined,

From 898aa14e72f8941ff31ae0d5e356d00d49718dc3 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:38:19 -0500
Subject: [PATCH 5/6] Add hover card to show a submission

---
 src/components/entity/basic-details.vue       | 11 ++--
 src/components/entity/feed-entry.vue          | 18 ++----
 src/components/hover-card/submission.vue      | 63 +++++++++++++++++++
 src/components/hover-cards.vue                | 12 ++++
 src/components/submission/link.vue            | 58 +++++++++++++++++
 src/locales/en.json5                          |  1 +
 src/request-data/hover-card.js                |  3 +
 src/request-data/submission.js                | 12 ++--
 test/components/entity/basic-details.spec.js  | 38 +++--------
 test/components/entity/feed-entry.spec.js     | 34 ++++++----
 test/components/hover-card/submission.spec.js | 63 +++++++++++++++++++
 test/components/hover-cards.spec.js           | 33 ++++++++++
 test/components/submission/link.spec.js       | 39 ++++++++++++
 test/request-data/submission.spec.js          | 16 +++--
 transifex/strings_en.json                     |  4 ++
 15 files changed, 329 insertions(+), 76 deletions(-)
 create mode 100644 src/components/hover-card/submission.vue
 create mode 100644 src/components/submission/link.vue
 create mode 100644 test/components/hover-card/submission.spec.js
 create mode 100644 test/components/submission/link.spec.js

diff --git a/src/components/entity/basic-details.vue b/src/components/entity/basic-details.vue
index 5358c88f6..ad4b2e326 100644
--- a/src/components/entity/basic-details.vue
+++ b/src/components/entity/basic-details.vue
@@ -21,10 +21,9 @@ except according to the terms contained in the LICENSE file.
         <div v-if="submission != null">
           <dt>{{ $t('creatingSubmission') }}</dt>
           <dd id="entity-basic-details-creating-submission">
-            <router-link v-if="submission.currentVersion != null"
-              :to="submissionPath(projectId, submission.xmlFormId, submission.instanceId)">
-              {{ submission.currentVersion.instanceName ?? submission.instanceId }}
-            </router-link>
+            <submission-link v-if="submission.currentVersion != null"
+              :project-id="projectId" :xml-form-id="submission.xmlFormId"
+              :submission="submission"/>
             <template v-else>
               <span class="icon-trash" v-tooltip.sr-only></span>
               <span>{{ submission.instanceId }}</span>
@@ -55,8 +54,8 @@ import { inject, ref, watchEffect } from 'vue';
 import ActorLink from '../actor-link.vue';
 import DateTime from '../date-time.vue';
 import PageSection from '../page/section.vue';
+import SubmissionLink from '../submission/link.vue';
 
-import useRoutes from '../../composables/routes';
 import { useRequestData } from '../../request-data';
 
 defineOptions({
@@ -83,8 +82,6 @@ watchEffect(() => {
   submission.value = audit.details.source?.submission;
   source.value = audit.details.source;
 });
-
-const { submissionPath } = useRoutes();
 </script>
 
 <style lang="scss">
diff --git a/src/components/entity/feed-entry.vue b/src/components/entity/feed-entry.vue
index 44982e4da..26f9ce0ae 100644
--- a/src/components/entity/feed-entry.vue
+++ b/src/components/entity/feed-entry.vue
@@ -18,9 +18,8 @@ except according to the terms contained in the LICENSE file.
         <i18n-t v-if="submission.currentVersion != null"
           keypath="title.submission.create.notDeleted">
           <template #instanceName>
-            <router-link :to="sourceSubmissionPath">
-              {{ submission.currentVersion.instanceName ?? submission.instanceId }}
-            </router-link>
+            <submission-link :project-id="projectId"
+              :xml-form-id="submission.xmlFormId" :submission="submission"/>
           </template>
           <template #submitter><actor-link :actor="submission.submitter"/></template>
         </i18n-t>
@@ -98,9 +97,8 @@ except according to the terms contained in the LICENSE file.
           <i18n-t v-if="submission.currentVersion != null"
             keypath="title.entity.update_version.submission.notDeleted">
             <template #instanceName>
-              <router-link :to="sourceSubmissionPath">
-                {{ submission.currentVersion.instanceName ?? submission.instanceId }}
-              </router-link>
+              <submission-link :project-id="projectId"
+                :xml-form-id="submission.xmlFormId" :submission="submission"/>
             </template>
           </i18n-t>
           <i18n-t v-else keypath="title.entity.update_version.submission.deleted.full">
@@ -146,9 +144,9 @@ import ActorLink from '../actor-link.vue';
 import DatasetLink from '../dataset/link.vue';
 import EntityDiff from './diff.vue';
 import FeedEntry from '../feed-entry.vue';
+import SubmissionLink from '../submission/link.vue';
 import SubmissionReviewState from '../submission/review-state.vue';
 
-import useRoutes from '../../composables/routes';
 import { useRequestData } from '../../request-data';
 
 defineOptions({
@@ -180,12 +178,6 @@ const wrapTitle = computed(() => {
 });
 
 // submission.create, entity.update.version
-const { submissionPath } = useRoutes();
-const sourceSubmissionPath = computed(() => submissionPath(
-  projectId,
-  props.submission.xmlFormId,
-  props.submission.instanceId
-));
 const { t } = useI18n();
 const deletedSubmission = (key) => t(key, { id: props.submission.instanceId });
 
diff --git a/src/components/hover-card/submission.vue b/src/components/hover-card/submission.vue
new file mode 100644
index 000000000..15b94a3e9
--- /dev/null
+++ b/src/components/hover-card/submission.vue
@@ -0,0 +1,63 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <hover-card icon="tag" :truncate-dt="false">
+    <template #title>
+      <template v-if="submission.instanceName != null">
+        {{ submission.instanceName }}
+      </template>
+      <template v-else>
+        <span v-for="(part, index) in idParts" :key="index">{{ part }}</span>
+      </template>
+    </template>
+    <template #subtitle>{{ $t('resource.submission') }}</template>
+    <template #body>
+      <dl class="dl-horizontal">
+        <dt>{{ $t('resource.form') }}</dt>
+        <dd>{{ form.nameOrId }}</dd>
+
+        <dt>{{ $t('header.submitterName') }}</dt>
+        <dd>{{ submission.__system.submitterName }}</dd>
+
+        <dt>{{ $t('header.submissionDate') }}</dt>
+        <dd><date-time :iso="submission.__system.submissionDate"/></dd>
+
+        <dt>{{ $t('common.reviewState') }}</dt>
+        <dd>
+          <submission-review-state :value="submission.__system.reviewState"/>
+        </dd>
+      </dl>
+    </template>
+  </hover-card>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import DateTime from '../date-time.vue';
+import HoverCard from '../hover-card.vue';
+import SubmissionReviewState from '../submission/review-state.vue';
+
+import { useRequestData } from '../../request-data';
+
+defineOptions({
+  name: 'HoverCardSubmission'
+});
+
+const { form, submission } = useRequestData();
+
+const idParts = computed(() => {
+  const id = submission.__id;
+  const match = id.match(/^((?:uuid:)?[0-9a-f]{8})[0-9a-f-]+([0-9a-f]{8})$/);
+  return match != null ? [match[1], '…', match[2]] : [id];
+});
+</script>
diff --git a/src/components/hover-cards.vue b/src/components/hover-cards.vue
index e7c68a416..401a042ea 100644
--- a/src/components/hover-cards.vue
+++ b/src/components/hover-cards.vue
@@ -27,6 +27,7 @@ import { inject, nextTick, ref, shallowRef, watch } from 'vue';
 import HoverCardDataset from './hover-card/dataset.vue';
 import HoverCardEntity from './hover-card/entity.vue';
 import HoverCardForm from './hover-card/form.vue';
+import HoverCardSubmission from './hover-card/submission.vue';
 import Popover from './popover.vue';
 
 import useHoverCardResources from '../request-data/hover-card';
@@ -47,6 +48,17 @@ const types = {
       form: { url: apiPaths.form(projectId, xmlFormId), extended: true }
     })
   },
+  submission: {
+    component: HoverCardSubmission,
+    requests: ({ projectId, xmlFormId, instanceId }) => ({
+      form: { url: apiPaths.form(projectId, xmlFormId) },
+      submission: {
+        url: apiPaths.odataSubmission(projectId, xmlFormId, instanceId, {
+          $select: '__id,__system,meta'
+        })
+      }
+    })
+  },
   dataset: {
     component: HoverCardDataset,
     requests: ({ projectId, name }) => ({
diff --git a/src/components/submission/link.vue b/src/components/submission/link.vue
new file mode 100644
index 000000000..869e29c40
--- /dev/null
+++ b/src/components/submission/link.vue
@@ -0,0 +1,58 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<!-- Specifying :key so that if `to` changes, the element will be replaced. If a
+hover card is shown next to the element, it will be hidden. -->
+<template>
+  <router-link ref="link" :key="to" :to="to">
+    {{ submission.currentVersion.instanceName ?? submission.instanceId }}
+  </router-link>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import useHoverCard from '../../composables/hover-card';
+import useRoutes from '../../composables/routes';
+
+defineOptions({
+  name: 'SubmissionLink'
+});
+const props = defineProps({
+  projectId: {
+    type: [Number, String],
+    required: true
+  },
+  xmlFormId: {
+    type: String,
+    required: true
+  },
+  // A submission in the format of a REST API response (not OData). It is not
+  // expected to be a transformed submission resource. For example,
+  // props.submission.instanceNameOrId is not expected to be defined.
+  submission: {
+    type: Object,
+    required: true
+  }
+});
+
+const { submissionPath } = useRoutes();
+const to = computed(() =>
+  submissionPath(props.projectId, props.xmlFormId, props.submission.instanceId));
+
+const link = ref(null);
+useHoverCard(computed(() => link.value?.$el), 'submission', () => ({
+  projectId: props.projectId,
+  xmlFormId: props.xmlFormId,
+  instanceId: props.submission.instanceId
+}));
+</script>
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index a0d95b04d..a0db5005d 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -316,6 +316,7 @@
     "webUser": "Web User",
     "webUsers": "Web Users",
     "session": "Session",
+    "submission": "Submission",
     "submissions": "Submissions",
     "projectRoles": "Project Roles",
     "formPreview": "Form Preview"
diff --git a/src/request-data/hover-card.js b/src/request-data/hover-card.js
index 51628220f..d5f7b9b87 100644
--- a/src/request-data/hover-card.js
+++ b/src/request-data/hover-card.js
@@ -15,15 +15,18 @@ except according to the terms contained in the LICENSE file.
 // e.g., `form`. For simplicity, we want the hover card resources to be
 // independent of resources used in other components.
 
+import useSubmission from './submission';
 import { transformForm } from './util';
 import { useRequestData } from './index';
 
 export default () => {
   const { createResource } = useRequestData();
+  const { submission } = useSubmission();
   return {
     form: createResource('form', () => ({
       transformResponse: ({ data }) => transformForm(data)
     })),
+    submission,
     dataset: createResource('dataset'),
     entity: createResource('entity')
   };
diff --git a/src/request-data/submission.js b/src/request-data/submission.js
index a384afafb..4d566e533 100644
--- a/src/request-data/submission.js
+++ b/src/request-data/submission.js
@@ -22,12 +22,14 @@ export default () => {
       result.__system = reactive(result.__system);
       return result;
     },
-    instanceNameOrId: computeIfExists(() => {
+    instanceName: computeIfExists(() => {
       const { meta } = submission;
-      return meta != null && typeof meta.instanceName === 'string'
-        ? meta.instanceName
-        : submission.__id;
-    })
+      if (meta == null || typeof meta !== 'object') return null;
+      const { instanceName } = meta;
+      return typeof instanceName === 'string' ? instanceName : null;
+    }),
+    instanceNameOrId: computeIfExists(() =>
+      submission.instanceName ?? submission.__id)
   }));
   const submissionVersion = createResource('submissionVersion');
   const audits = createResource('audits');
diff --git a/test/components/entity/basic-details.spec.js b/test/components/entity/basic-details.spec.js
index 512a48fb3..ed238b7b1 100644
--- a/test/components/entity/basic-details.spec.js
+++ b/test/components/entity/basic-details.spec.js
@@ -1,8 +1,7 @@
-import { RouterLinkStub } from '@vue/test-utils';
-
 import ActorLink from '../../../src/components/actor-link.vue';
 import DateTime from '../../../src/components/date-time.vue';
 import EntityBasicDetails from '../../../src/components/entity/basic-details.vue';
+import SubmissionLink from '../../../src/components/submission/link.vue';
 
 import useEntity from '../../../src/request-data/entity';
 
@@ -41,11 +40,10 @@ describe('EntityBasicDetails', () => {
 
   describe('creating submission', () => {
     const createEntityFromSubmission = ({
-      deleted: submissionDeleted = false,
-      ...submissionOptions
+      deleted: submissionDeleted = false
     } = {}) => {
       const submission = testData.extendedSubmissions
-        .createPast(1, { instanceId: 's', ...submissionOptions })
+        .createPast(1, { instanceId: 's' })
         .last();
       testData.extendedEntities.createPast(1, { uuid: 'e' });
       const details = {
@@ -66,34 +64,12 @@ describe('EntityBasicDetails', () => {
     };
 
     it('shows creating submission if there is a submission in audit log', () => {
-      createEntityFromSubmission();
-      const component = mountComponent();
-      const dd = component.find('#entity-basic-details-creating-submission');
-      dd.exists().should.be.true;
-    });
-
-    it('shows the instance name if the submission has one', () => {
-      createEntityFromSubmission({
-        meta: { instanceName: 'My Submission' }
-      });
-      const component = mountComponent();
-      const dd = component.get('#entity-basic-details-creating-submission');
-      dd.text().should.equal('My Submission');
-    });
-
-    it('falls back to showing the instance ID', () => {
-      createEntityFromSubmission();
-      const component = mountComponent();
-      const dd = component.get('#entity-basic-details-creating-submission');
-      dd.text().should.equal('s');
-    });
-
-    it('links to the submission', () => {
       createEntityFromSubmission();
       const component = mountComponent();
       const dd = component.get('#entity-basic-details-creating-submission');
-      const { to } = dd.getComponent(RouterLinkStub).props();
-      to.should.equal('/projects/1/forms/f/submissions/s');
+      const link = dd.getComponent(SubmissionLink);
+      link.props().should.include({ projectId: '1', xmlFormId: 'f' });
+      link.props().submission.instanceId.should.equal('s');
     });
 
     describe('submission was deleted', () => {
@@ -101,7 +77,7 @@ describe('EntityBasicDetails', () => {
         createEntityFromSubmission({ deleted: true });
         const component = mountComponent();
         const dd = component.get('#entity-basic-details-creating-submission');
-        dd.findComponent(RouterLinkStub).exists().should.be.false;
+        dd.findComponent(SubmissionLink).exists().should.be.false;
       });
 
       it('shows a trash icon with a tooltip', async () => {
diff --git a/test/components/entity/feed-entry.spec.js b/test/components/entity/feed-entry.spec.js
index dd9ca00c0..a2215acf3 100644
--- a/test/components/entity/feed-entry.spec.js
+++ b/test/components/entity/feed-entry.spec.js
@@ -6,6 +6,7 @@ import DatasetLink from '../../../src/components/dataset/link.vue';
 import EntityDiff from '../../../src/components/entity/diff.vue';
 import EntityFeedEntry from '../../../src/components/entity/feed-entry.vue';
 import FeedEntry from '../../../src/components/feed-entry.vue';
+import SubmissionLink from '../../../src/components/submission/link.vue';
 import SubmissionReviewState from '../../../src/components/submission/review-state.vue';
 
 import useEntity from '../../../src/request-data/entity';
@@ -100,10 +101,17 @@ describe('EntityFeedEntry', () => {
       });
 
       it('links to the submission', () => {
-        const component = mountComponent({ props: createSubmission() });
+        const component = mountComponent({
+          props: createSubmission({
+            meta: { instanceName: 'Some Name' }
+          })
+        });
         const title = component.get('.feed-entry-title');
-        const { to } = title.getComponent(RouterLinkStub).props();
-        to.should.equal('/projects/1/forms/f/submissions/s');
+        const link = title.getComponent(SubmissionLink);
+        link.props().should.include({ projectId: '1', xmlFormId: 'f' });
+        const { submission } = link.props();
+        submission.instanceId.should.equal('s');
+        submission.currentVersion.instanceName.should.equal('Some Name');
       });
 
       it('links to the submitter', () => {
@@ -136,9 +144,7 @@ describe('EntityFeedEntry', () => {
         const component = mountComponent({
           props: createSubmission({ deleted: true })
         });
-        const links = component.findAllComponents(RouterLinkStub);
-        links.length.should.equal(1);
-        links[0].props().to.should.startWith('/users/');
+        component.findComponent(SubmissionLink).exists().should.be.false;
       });
     });
   });
@@ -385,10 +391,17 @@ describe('EntityFeedEntry', () => {
       });
 
       it('links to the submission', () => {
-        const component = mountComponent({ props: updateEntityFromSubmission() });
+        const component = mountComponent({
+          props: updateEntityFromSubmission({
+            meta: { instanceName: 'Some Name' }
+          })
+        });
         const title = component.get('.feed-entry-title');
-        const { to } = title.getComponent(RouterLinkStub).props();
-        to.should.equal('/projects/1/forms/f/submissions/s');
+        const link = title.getComponent(SubmissionLink);
+        link.props().should.include({ projectId: '1', xmlFormId: 'f' });
+        const { submission } = link.props();
+        submission.instanceId.should.equal('s');
+        submission.currentVersion.instanceName.should.equal('Some Name');
       });
 
       it('shows the correct text with deleted submission instance id', () => {
@@ -402,8 +415,7 @@ describe('EntityFeedEntry', () => {
         const component = mountComponent({
           props: updateEntityFromSubmission({ deleted: true })
         });
-        const links = component.findAllComponents(RouterLinkStub);
-        links.length.should.equal(1); // only link is anchor link on version tag
+        component.findComponent(SubmissionLink).exists().should.be.false;
       });
     });
   });
diff --git a/test/components/hover-card/submission.spec.js b/test/components/hover-card/submission.spec.js
new file mode 100644
index 000000000..6a954cb4b
--- /dev/null
+++ b/test/components/hover-card/submission.spec.js
@@ -0,0 +1,63 @@
+import DateTime from '../../../src/components/date-time.vue';
+import HoverCardSubmission from '../../../src/components/hover-card/submission.vue';
+
+import useHoverCardResources from '../../../src/request-data/hover-card';
+
+import testData from '../../data';
+import { findDd } from '../../util/dom';
+import { mount } from '../../util/lifecycle';
+import { testRequestData } from '../../util/request-data';
+
+const mountComponent = () => mount(HoverCardSubmission, {
+  container: {
+    requestData: testRequestData([useHoverCardResources], {
+      form: testData.standardForms.last(),
+      submission: testData.submissionOData()
+    })
+  }
+});
+
+describe('HoverCardSubmission', () => {
+  describe('title', () => {
+    it('shows the instance name if the submission has one', () => {
+      testData.extendedSubmissions.createPast(1, {
+        meta: { instanceName: 'My Submission' }
+      });
+      const text = mountComponent().get('.hover-card-title').text();
+      text.should.equal('My Submission');
+    });
+
+    it('falls back to showing the instance ID', () => {
+      testData.extendedSubmissions.createPast(1, {
+        instanceId: 'uuid:12345678-1111-2222-3333-123456789abc'
+      });
+      const text = mountComponent().get('.hover-card-title').text();
+      text.should.equal('uuid:12345678…56789abc');
+    });
+  });
+
+  describe('form', () => {
+    it("shows the form's name if it has one", () => {
+      testData.extendedForms.createPast(1, { name: 'My Form' });
+      testData.extendedSubmissions.createPast(1);
+      findDd(mountComponent(), 'Form').text().should.equal('My Form');
+    });
+
+    it('shows the xmlFormId if the form does not have a name', () => {
+      testData.extendedSubmissions.createPast(1);
+      findDd(mountComponent(), 'Form').text().should.equal('f');
+    });
+  });
+
+  it('shows the submitter name', () => {
+    testData.extendedUsers.createPast(1, { displayName: 'Alice' });
+    testData.extendedSubmissions.createPast(1);
+    findDd(mountComponent(), 'Submitted by').text().should.equal('Alice');
+  });
+
+  it('shows the submission date', () => {
+    const { createdAt } = testData.extendedSubmissions.createPast(1).last();
+    const dd = findDd(mountComponent(), 'Submitted at');
+    dd.getComponent(DateTime).props().iso.should.equal(createdAt);
+  });
+});
diff --git a/test/components/hover-cards.spec.js b/test/components/hover-cards.spec.js
index 1c4b222d3..143ec934f 100644
--- a/test/components/hover-cards.spec.js
+++ b/test/components/hover-cards.spec.js
@@ -3,6 +3,7 @@ import { markRaw } from 'vue';
 
 import DatasetLink from '../../src/components/dataset/link.vue';
 import EntityLink from '../../src/components/entity/link.vue';
+import SubmissionLink from '../../src/components/submission/link.vue';
 import Popover from '../../src/components/popover.vue';
 
 import TestUtilHoverCards from '../util/components/hover-cards.vue';
@@ -31,6 +32,38 @@ const hover = (clock) => async (component) => {
 // These tests test both the HoverCards component and the useHoverCard()
 // composable.
 describe('HoverCards', () => {
+  it('shows a hover card of type submission', () => {
+    const clock = sinon.useFakeTimers();
+    const form = testData.standardForms
+      .createPast(1, { xmlFormId: 'a b' })
+      .last();
+    const submission = testData.standardSubmissions
+      .createPast(1, { instanceId: 'c d' })
+      .last();
+    return mockHttp()
+      .mount(TestUtilHoverCards, mountOptions(
+        SubmissionLink,
+        { projectId: 1, xmlFormId: 'a b', submission }
+      ))
+      .request(hover(clock))
+      .respondWithData(() => form)
+      .respondWithData(testData.submissionOData)
+      .testRequests([
+        { url: '/v1/projects/1/forms/a%20b' },
+        {
+          url: ({ pathname, searchParams }) => {
+            pathname.should.equal("/v1/projects/1/forms/a%20b.svc/Submissions('c%20d')");
+            searchParams.get('$select').should.equal('__id,__system,meta');
+          }
+        }
+      ])
+      .afterResponses(async (component) => {
+        getSubtitle().should.equal('Submission');
+        const { target } = component.getComponent(Popover).props();
+        target.should.equal(getAnchor(component).element);
+      });
+  });
+
   it('shows a hover card of type dataset', () => {
     const clock = sinon.useFakeTimers();
     const dataset = testData.extendedDatasets
diff --git a/test/components/submission/link.spec.js b/test/components/submission/link.spec.js
new file mode 100644
index 000000000..37de62095
--- /dev/null
+++ b/test/components/submission/link.spec.js
@@ -0,0 +1,39 @@
+import { RouterLinkStub } from '@vue/test-utils';
+
+import SubmissionLink from '../../../src/components/submission/link.vue';
+
+import testData from '../../data';
+import { mockRouter } from '../../util/router';
+import { mount } from '../../util/lifecycle';
+
+const mountComponent = () => mount(SubmissionLink, {
+  props: {
+    projectId: 1,
+    xmlFormId: testData.extendedForms.last().xmlFormId,
+    submission: testData.extendedSubmissions.last()
+  },
+  container: { router: mockRouter('/') }
+});
+
+describe('SubmissionLink', () => {
+  describe('text', () => {
+    it('shows the instance name if the submission has one', () => {
+      testData.extendedSubmissions.createPast(1, {
+        meta: { instanceName: 'My Submission' }
+      });
+      mountComponent().text().should.equal('My Submission');
+    });
+
+    it('falls back to showing the instance ID', () => {
+      testData.extendedSubmissions.createPast(1, { instanceId: 's' });
+      mountComponent().text().should.equal('s');
+    });
+  });
+
+  it('links to the submission', () => {
+    testData.extendedForms.createPast(1, { xmlFormId: 'a b', submissions: 1 });
+    testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
+    const { to } = mountComponent().getComponent(RouterLinkStub).props();
+    to.should.equal('/projects/1/forms/a%20b/submissions/c%20d');
+  });
+});
diff --git a/test/request-data/submission.spec.js b/test/request-data/submission.spec.js
index dae4649f1..10dfc0ed3 100644
--- a/test/request-data/submission.spec.js
+++ b/test/request-data/submission.spec.js
@@ -14,21 +14,20 @@ const createResource = () => {
 };
 
 describe('useSubmission()', () => {
-  describe('instanceNameOrId', () => {
+  describe('instanceName', () => {
     it('returns the instance name if it is string', () => {
       testData.extendedSubmissions.createPast(1, {
-        instanceId: 's',
         meta: { instanceName: 'My Submission' }
       });
-      createResource().instanceNameOrId.should.equal('My Submission');
+      createResource().instanceName.should.equal('My Submission');
     });
 
-    it('returns the instance ID if there is no instance name', () => {
-      testData.extendedSubmissions.createPast(1, { instanceId: 's' });
-      createResource().instanceNameOrId.should.equal('s');
+    it('returns null if there is no instance name', () => {
+      testData.extendedSubmissions.createPast(1);
+      expect(createResource().instanceName).to.be.null;
     });
 
-    it('returns the instance ID if /meta/instanceName is not a string', () => {
+    it('returns null if /meta/instanceName is not a string', () => {
       testData.extendedForms.createPast(1, {
         fields: [
           testData.fields.group('/meta'),
@@ -38,10 +37,9 @@ describe('useSubmission()', () => {
         submissions: 1
       });
       testData.extendedSubmissions.createPast(1, {
-        instanceId: 's',
         meta: { instanceName: 1 }
       });
-      createResource().instanceNameOrId.should.equal('s');
+      expect(createResource().instanceName).to.be.null;
     });
   });
 });
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 4bd27e7c2..689a14e82 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -696,6 +696,10 @@
       "string": "Session",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
     },
+    "submission": {
+      "string": "Submission",
+      "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."
+    },
     "submissions": {
       "string": "Submissions",
       "developer_comment": "This text appears on its own and is not part of a longer sentence. It may be shown as a title, for example, at the top of the page."

From 12afaf1b2559f5980071915cb30cb51a42fb500c Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:40:07 -0500
Subject: [PATCH 6/6] Make small changes related to hover cards

---
 src/container/hover-card.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/container/hover-card.js b/src/container/hover-card.js
index e43f2bfed..5d8d3fccd 100644
--- a/src/container/hover-card.js
+++ b/src/container/hover-card.js
@@ -16,7 +16,7 @@ that manages reactive state for the hover card. There is only ever a single
 hover card shown at a time.
 
 This hover card object is how the useHoverCard() composable communicates with
-the HoverCards component. The object is included in the container object, but
+the HoverCards component. The object is included in the `container` object, but
 most components will not use it directly. Most components should use the
 useHoverCard() composable instead.
 */
@@ -51,7 +51,7 @@ class HoverCardData {
   }
 
   show(anchor, type, data = null) { this.#set(anchor, type, data); }
-  hide() { if (this.state) this.#set(null, null, null); }
+  hide() { this.#set(null, null, null); }
 }
 
 export default () => new HoverCardData();