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] 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."