Add hover card to show an entity list

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,

src/components/dataset/link.vue

@@ -0,0 +1,41 @@
+<!--
+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>
+  <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>

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,14 +40,15 @@ 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';
 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);
     }
   }
 };

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">
     <page-back v-show="dataExists" :to="[projectPath(), projectPath('entity-lists')]">
@@ -87,7 +86,7 @@ export default {
     const { tabPath, tabClass } = useTabs(datasetPath());
     return {
       project, dataset, ...resourceStates([project, dataset]),
-      projectPath, datasetPath, tabPath, tabClass, canRoute
+      projectPath, tabPath, tabClass, canRoute
     };
   },
   created() {

src/components/dataset/summary/row.vue

@@ -13,10 +13,9 @@ except according to the terms contained in the LICENSE file.
   <div class="dataset-summary-row">
     <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>
+        <div class="dataset-name text-overflow-ellipsis">
+          <dataset-link v-if="!dataset.isNew" :project-id="projectId"
+            :name="dataset.name" v-tooltip.text/>
           <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

src/components/entity/feed-entry.vue

@@ -52,7 +52,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">
@@ -80,7 +80,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>
@@ -144,6 +144,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';
 
@@ -180,7 +181,7 @@ const wrapTitle = computed(() => {
 });
 
 // submission.create, entity.update.version
-const { submissionPath, datasetPath } = useRoutes();
+const { submissionPath } = useRoutes();
 const sourceSubmissionPath = computed(() => submissionPath(
   projectId,
   props.submission.xmlFormId,

src/components/form/overview/right-now.vue

@@ -50,11 +50,10 @@ except according to the terms contained in the LICENSE file.
           <p>{{ $tc('datasetsLinked', linkedDatasets.length) }}</p>
           <table v-if="linkedDatasets.length > 0" class="table">
             <tbody>
-              <tr v-for="(dataset) in linkedDatasets" :key="dataset">
+              <tr v-for="dataset of 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,34 +79,33 @@ 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';
 
 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() {

src/components/hover-card/dataset.vue

@@ -0,0 +1,71 @@
+<!--
+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">
+    <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) }}</dd>
+
+        <dt>{{ $t('header.lastEntity') }}</dt>
+        <dd><date-time :iso="dataset.lastEntity"/></dd>
+
+        <dt>{{ $t('resource.properties') }}</dt>
+        <dd>{{ $n(dataset.properties.length) }}</dd>
+      </dl>
+    </template>
+    <template #footer>
+      <div v-if="dataset.properties.length !== 0"
+        class="hover-card-dataset-properties">
+        <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';
+
+defineOptions({
+  name: 'HoverCardDataset'
+});
+defineProps({
+  dataset: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+.hover-card-dataset-properties {
+  display: flex;
+  margin-inline: -$padding-hover-card;
+  overflow-x: hidden;
+  padding-block: 6px;
+
+  div {
+    font-weight: bold;
+
+    padding: 4px 6px;
+    &:first-child { padding-left: $padding-hover-card; }
+    &:last-child { padding-right: $padding-hover-card; }
+
+    + div { border-left: 1px solid #bbb; }
+  }
+}
+</style>

src/components/hover-cards.vue

@@ -23,13 +23,20 @@ except according to the terms contained in the LICENSE file.
 
 import { inject, shallowRef, watch } from 'vue';
 
+import HoverCardDataset from './hover-card/dataset.vue';
 import HoverCardEntity from './hover-card/entity.vue';
 import Popover from './popover.vue';
 
 import { apiPaths } from '../util/request';
 import { createResource } from '../request-data/resource';
 
 const types = {
+  dataset: {
+    component: HoverCardDataset,
+    requests: ({ projectId, name }) => ({
+      dataset: { url: apiPaths.dataset(projectId, name), extended: true }
+    })
+  },
   entity: {
     component: HoverCardEntity,
     requests: ({ projectId, dataset, uuid }) => ({

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';