From 54ed37e0f7c7dea76ca82f4b691f93be716d3890 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:19:50 -0400
Subject: [PATCH 01/11] Add useRowChanged() composable to highlight row that
 has changed

---
 src/assets/scss/app.scss                   | 12 ++++++++
 src/components/submission/metadata-row.vue | 16 +++++------
 src/composables/row-changed.js             | 18 ++++++++++++
 test/composables/row-changed.spec.js       | 33 ++++++++++++++++++++++
 test/util/components/row-changed.vue       | 26 +++++++++++++++++
 5 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 src/composables/row-changed.js
 create mode 100644 test/composables/row-changed.spec.js
 create mode 100644 test/util/components/row-changed.vue

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 7ddafe256..51a6cf588 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -825,3 +825,15 @@ becomes more complicated.
     }
   }
 }
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// useRowChanged()
+
+[data-use-row-changed="false"] { transition: background-color 0.6s 6s; }
+
+[data-use-row-changed="true"] {
+  background-color: #faf1cd;
+  transition: none;
+}
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index 585d401e4..ea9ec4590 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr class="submission-metadata-row">
+  <tr ref="el" class="submission-metadata-row">
     <!-- ^^^ SubmissionTable assumes that this element does not have a class
     binding. -->
 
@@ -56,11 +56,14 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import { ref } from 'vue';
+
 import DateTime from '../date-time.vue';
 
 import useReviewState from '../../composables/review-state';
 import useRoutes from '../../composables/routes';
 import { apiPaths } from '../../util/request';
+import { useRowChanged } from '../../composables/row-changed';
 
 export default {
   name: 'SubmissionMetadataRow',
@@ -88,6 +91,10 @@ export default {
   setup() {
     const { reviewStateIcon } = useReviewState();
     const { submissionPath } = useRoutes();
+
+    const el = ref(null);
+    useRowChanged(el);
+
     return { reviewStateIcon, submissionPath };
   },
   computed: {
@@ -126,13 +133,6 @@ export default {
 @import '../../assets/scss/mixins';
 
 .submission-metadata-row {
-  transition: background-color 0.6s 6s;
-
-  &.updated {
-    background-color: #faf1cd;
-    transition: none;
-  }
-
   .row-number {
     color: #999;
     font-size: 11px;
diff --git a/src/composables/row-changed.js b/src/composables/row-changed.js
new file mode 100644
index 000000000..a7775cb22
--- /dev/null
+++ b/src/composables/row-changed.js
@@ -0,0 +1,18 @@
+import { watchSync } from '../util/reactivity';
+
+export const useRowChanged = (tr) => {
+  watchSync(tr, () => {
+    if (tr.value != null)
+      // eslint-disable-next-line no-param-reassign
+      tr.value.dataset.useRowChanged = 'false';
+  });
+};
+
+export const rowsChanged = (trs) => {
+  for (const tr of trs) tr.dataset.useRowChanged = 'true';
+  setTimeout(() => {
+    for (const tr of trs) tr.dataset.useRowChanged = 'false';
+  });
+};
+
+export const rowChanged = (tr) => { rowsChanged([tr]); };
diff --git a/test/composables/row-changed.spec.js b/test/composables/row-changed.spec.js
new file mode 100644
index 000000000..894f70c4c
--- /dev/null
+++ b/test/composables/row-changed.spec.js
@@ -0,0 +1,33 @@
+import { rowChanged, rowsChanged } from '../../src/composables/row-changed';
+
+import RowChanged from '../util/components/row-changed.vue';
+
+import { mount } from '../util/lifecycle';
+import { wait } from '../util/util';
+
+describe('useRowChanged()', () => {
+  it('toggles data-use-row-changed for a single row', async () => {
+    const table = mount(RowChanged, {
+      props: { rowCount: 1 }
+    });
+    const row = table.get('tr').element;
+    row.dataset.useRowChanged.should.equal('false');
+    rowChanged(row);
+    row.dataset.useRowChanged.should.equal('true');
+    await wait();
+    row.dataset.useRowChanged.should.equal('false');
+  });
+
+  it('toggles data-use-row-changed for multiple rows', async () => {
+    const table = mount(RowChanged, {
+      props: { rowCount: 2 }
+    });
+    const rows = table.findAll('tr').map(wrapper => wrapper.element);
+    rowsChanged(rows);
+    rows[0].dataset.useRowChanged.should.equal('true');
+    rows[1].dataset.useRowChanged.should.equal('true');
+    await wait();
+    rows[0].dataset.useRowChanged.should.equal('false');
+    rows[1].dataset.useRowChanged.should.equal('false');
+  });
+});
diff --git a/test/util/components/row-changed.vue b/test/util/components/row-changed.vue
new file mode 100644
index 000000000..e3f754002
--- /dev/null
+++ b/test/util/components/row-changed.vue
@@ -0,0 +1,26 @@
+<template>
+  <table>
+    <tbody>
+      <tr v-for="(_, index) of new Array(rowCount)" :key="index" ref="rows">
+        <td>foo</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import { useRowChanged } from '../../../src/composables/row-changed';
+
+const props = defineProps({
+  rowCount: {
+    type: Number,
+    required: true
+  }
+});
+
+const rows = ref([]);
+for (let i = 0; i < props.rowCount; i += 1)
+  useRowChanged(computed(() => rows.value[i]));
+</script>

From 8c21c1255e9c3e498fd6256fad8afeceffcd1c2f Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:19:51 -0400
Subject: [PATCH 02/11] Add component for table with frozen columns

---
 src/assets/scss/app.scss                      |  20 --
 src/components/entity/table.vue               | 102 +++-----
 src/components/project/form-access/table.vue  |  90 ++++---
 src/components/submission/metadata-row.vue    |  85 ++-----
 src/components/submission/table.vue           | 227 +++++-------------
 src/components/table-freeze.vue               | 204 ++++++++++++++++
 .../submission/metadata-row.spec.js           |  16 +-
 test/components/submission/table.spec.js      |  49 ----
 test/components/table-freeze.spec.js          |  73 ++++++
 9 files changed, 436 insertions(+), 430 deletions(-)
 create mode 100644 src/components/table-freeze.vue
 create mode 100644 test/components/table-freeze.spec.js

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 51a6cf588..f5257d74f 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -574,26 +574,6 @@ select {
   }
 }
 
-.table-frozen {
-  float: left;
-  width: auto;
-}
-
-.table-container {
-  // Placing the margin here rather than on the table so that the horizontal
-  // scrollbar appears immediately below the table, above the margin.
-  margin-bottom: $margin-bottom-table;
-  overflow-x: auto;
-
-  .table {
-    margin-bottom: 0;
-  }
-}
-
-.table-actions {
-  margin-bottom: 20px;
-}
-
 .empty-table-message {
   color: #555;
   font-size: 15px;
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 4e3623193..9c697a0a9 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -10,85 +10,59 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div>
-    <table id="entity-table-metadata" class="table table-frozen">
-      <thead>
-        <tr>
-          <th><!-- Row number --></th>
-          <th>{{ $t('header.createdBy') }}</th>
-          <th>{{ $t('header.createdAt') }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-if="odataEntities.dataExists">
-          <entity-metadata-row v-for="(entity, index) in odataEntities.value"
-            :key="entity.__id" :entity="entity"
-            :row-number="odataEntities.value.length - index"/>
-        </template>
-      </tbody>
-    </table>
-    <div class="table-container">
-      <table id="entity-table-data" class="table">
-        <thead>
-          <tr v-if="properties != null">
-            <th v-for="property of properties" :key="property.id">
-              <span v-tooltip.text>{{ property.name }}</span>
-            </th>
-            <th>{{ $t('entity.label') }}</th>
-            <th>{{ $t('entity.entityId') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-if="odataEntities.dataExists && properties != null">
-            <entity-data-row v-for="(entity) in odataEntities.value"
-              :key="entity.__id" :entity="entity"
-              :properties="properties"/>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze :data="odataEntities.value" key-prop="__id"
+    :frozen-only="properties == null"
+    ids="entity-table-metadata entity-table-data" divider>
+    <template #head-frozen>
+      <th><!-- Row number --></th>
+      <th>{{ $t('header.createdBy') }}</th>
+      <th>{{ $t('header.createdAt') }}</th>
+    </template>
+    <template #head-scrolling>
+      <template v-if="properties != null">
+        <th v-for="property of properties" :key="property.id">
+          <span v-tooltip.text>{{ property.name }}</span>
+        </th>
+      </template>
+      <th>{{ $t('entity.label') }}</th>
+      <th>{{ $t('entity.entityId') }}</th>
+    </template>
+
+    <template #data-frozen="{ data, index }">
+      <entity-metadata-row :entity="data"
+        :row-number="odataEntities.value.length - index"/>
+    </template>
+    <template #data-scrolling="{ data }">
+      <entity-data-row :entity="data" :properties="properties"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
+export default {
+  name: 'EntityTable'
+};
+</script>
+<script setup>
 import EntityDataRow from './data-row.vue';
 import EntityMetadataRow from './metadata-row.vue';
+import TableFreeze from '../table-freeze.vue';
 
 import { useRequestData } from '../../request-data';
 
+defineProps({
+  properties: Array
+});
 
-export default {
-  name: 'EntityTable',
-  components: { EntityDataRow, EntityMetadataRow },
-  props: {
-    properties: Array
-  },
-  setup() {
-    // The component does not assume that this data will exist when the
-    // component is created.
-    const { odataEntities } = useRequestData();
-    return { odataEntities };
-  }
-};
+// The component does not assume that this data will exist when the component is
+// created.
+const { odataEntities } = useRequestData();
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#entity-table-metadata {
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
-  position: relative;
-  // Adding z-index so that the background color of the other table's thead does
-  // not overlay the box shadow.
-  z-index: 1;
-
-  th:last-child { border-right: $border-bottom-table-heading; }
-  td:last-child { border-right: $border-top-table-data; }
-}
-
 #entity-table-data {
-  width: auto;
-
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
diff --git a/src/components/project/form-access/table.vue b/src/components/project/form-access/table.vue
index 6b163551e..46a7cedfc 100644
--- a/src/components/project/form-access/table.vue
+++ b/src/components/project/form-access/table.vue
@@ -10,56 +10,49 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div id="project-form-access-table" class="clearfix">
-    <table class="table table-frozen"
-      :class="{ 'no-field-keys': fieldKeys.withToken.length === 0 }">
-      <thead>
-        <tr>
-          <th>{{ $t('header.form') }}</th>
-          <th>
-            <span>{{ $t('header.state') }}</span>
-            <button type="button" class="btn btn-link"
-              @click="$emit('show-states')">
-              <span class="icon-question-circle"></span>
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody v-if="forms.length !== 0">
-        <project-form-access-row v-for="form of forms" :key="form.xmlFormId"
-          :form="form" :changes="changesByForm[form.xmlFormId]" frozen
-          @update:state="updateState"/>
-      </tbody>
-    </table>
-    <div v-if="fieldKeys.withToken.length !== 0" class="table-container">
-      <table class="table">
-        <thead>
-          <tr>
-            <th><div>{{ $t('resource.appUsers') }}</div></th>
-            <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
-              <div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
-            </th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody v-if="forms.length !== 0">
-          <project-form-access-row v-for="form of forms" :key="form.xmlFormId"
-            :form="form" :changes="changesByForm[form.xmlFormId]"
-            @update:field-key-access="updateFieldKeyAccess"/>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze id="project-form-access-table"
+    :class="{ 'no-field-keys': noFieldKeys }" :data="forms.data"
+    key-prop="xmlFormId" :frozen-only="noFieldKeys">
+    <template #head-frozen>
+      <th>{{ $t('header.form') }}</th>
+      <th>
+        <span>{{ $t('header.state') }}</span>
+        <button type="button" class="btn btn-link"
+          @click="$emit('show-states')">
+          <span class="icon-question-circle"></span>
+        </button>
+      </th>
+    </template>
+    <template #head-scrolling>
+      <th><div>{{ $t('resource.appUsers') }}</div></th>
+      <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
+        <div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
+      </th>
+      <th></th>
+    </template>
+
+    <template #data-frozen="{ data: form }">
+      <project-form-access-row :form="form"
+        :changes="changesByForm[form.xmlFormId]" frozen
+        @update:state="updateState"/>
+    </template>
+    <template #data-scrolling="{ data: form }">
+      <project-form-access-row :form="form"
+        :changes="changesByForm[form.xmlFormId]"
+        @update:field-key-access="updateFieldKeyAccess"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
 import ProjectFormAccessRow from './row.vue';
+import TableFreeze from '../../table-freeze.vue';
 
 import { useRequestData } from '../../../request-data';
 
 export default {
   name: 'ProjectFormAccessTable',
-  components: { ProjectFormAccessRow },
+  components: { ProjectFormAccessRow, TableFreeze },
   props: {
     changesByForm: {
       type: Object,
@@ -71,6 +64,11 @@ export default {
     const { forms, fieldKeys } = useRequestData();
     return { forms, fieldKeys };
   },
+  computed: {
+    noFieldKeys() {
+      return this.fieldKeys.dataExists && this.fieldKeys.withToken.length === 0;
+    }
+  },
   methods: {
     updateState(form, state) {
       this.$emit('update:state', form, state);
@@ -87,14 +85,14 @@ export default {
 
 #project-form-access-table {
   // Space above the tables
-  .table-frozen {
+  .table-freeze-frozen {
     margin-top: 70px;
 
     &.no-field-keys {
       margin-top: 0;
     }
   }
-  .table-container {
+  .table-freeze-scrolling-container {
     // Using padding rather than margin so that the rotated column header text
     // does not overflow the container, which would cause the text to be hidden.
     padding-top: 70px;
@@ -111,7 +109,7 @@ export default {
     }
   }
 
-  .table-frozen {
+  .table-freeze-frozen {
     $form-name-width: 250px;
     $state-width: 200px;
 
@@ -133,9 +131,7 @@ export default {
     }
   }
 
-  .table-container .table {
-    width: auto;
-
+  .table-freeze-scrolling {
     thead {
       background-color: transparent;
     }
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index ea9ec4590..f7d6bd167 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -11,21 +11,22 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <tr ref="el" class="submission-metadata-row">
-    <!-- ^^^ SubmissionTable assumes that this element does not have a class
-    binding. -->
-
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td v-if="!draft" class="submitter-name">
       <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
     </td>
     <td><date-time :iso="submission.__system.submissionDate"/></td>
     <td v-if="!draft" class="state-and-actions">
-      <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
-      <span v-if="submission.__system.edits !== 0" class="edits">
-        <span class="icon-pencil"></span>
-        <span>{{ $n(submission.__system.edits, 'default') }}</span>
-      </span>
-      <span class="icon-angle-right"></span>
+      <div class="col-content">
+        <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
+        <span class="edits">
+          <template v-if="submission.__system.edits !== 0">
+            <span class="icon-pencil"></span>
+            <span>{{ $n(submission.__system.edits, 'default') }}</span>
+          </template>
+        </span>
+        <span class="icon-angle-right"></span>
+      </div>
       <div class="btn-group">
         <template v-if="canUpdate">
           <button type="button" class="review-button btn btn-default"
@@ -146,26 +147,10 @@ export default {
     max-width: 250px;
   }
 
-  .state-and-actions {
-    min-width: 205px;
-    position: relative;
-
-    > .icon-angle-right {
-      bottom: #{$padding-bottom-table-data + 1px};
-      color: $color-accent-primary;
-      font-size: 20px;
-      // Using `position: absolute` rather than `float: right` so that the icon
-      // does not increase the row's height.
-      position: absolute;
-      right: $padding-right-table-data;
-    }
-  }
-
-  $edits-and-angle-width: 48px;
+  .state-and-actions { min-width: 205px; }
+  .col-content { display: flex; }
   .state {
-    // Ensure that there is space for the edit count and angle icon if the
-    // column exceeds its min width.
-    margin-right: #{$edits-and-angle-width + 15px};
+    margin-right: 15px;
 
     .icon-comments { margin-right: $margin-right-icon; }
     .icon-circle-o, .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
@@ -179,50 +164,16 @@ export default {
     .icon-check-circle { color: $color-success; }
     .icon-times-circle { color: $color-danger; }
   }
-
   .edits {
     color: #777;
-    // Positioning from the left rather than the right so that the icon is
-    // aligned across rows.
-    left: calc(100% - #{$edits-and-angle-width + $padding-right-table-data});
-    position: absolute;
+    margin-left: auto;
+    width: 41px;
 
     .icon-pencil { margin-right: 5px; }
   }
-
-  .btn-group {
-    // Setting the background color in case the edit button is disabled.
-    background-color: $color-page-background;
-    left: -1000px;
-    position: absolute;
-    top: 4px;
-  }
-
-  .btn {
-    .icon-check { margin-right: -1px; }
-
-    .icon-pencil {
-      margin-left: 1px;
-      margin-right: 0;
-    }
-  }
-
-  .more-button {
-    span:first-child { margin-right: 13px; }
-
-    .icon-angle-right {
-      font-size: 18px;
-      position: absolute;
-      right: $hpadding-btn;
-      top: #{$padding-top-btn - 2px};
-    }
+  .col-content .icon-angle-right {
+    color: $color-accent-primary;
+    font-size: 20px;
   }
 }
-
-.submission-table-actions-trigger-hover tr:hover .btn-group,
-.submission-table-actions-trigger-hover .data-hover .btn-group,
-.submission-table-actions-trigger-focus .btn-group:focus-within {
-  left: auto;
-  right: $padding-right-table-data;
-}
 </style>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 539bf90f4..667b31108 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -10,196 +10,87 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div>
-    <table id="submission-table-metadata" class="table table-frozen">
-      <thead>
-        <tr>
-          <th><!-- Row number --></th>
-          <th v-if="!draft">{{ $t('header.submitterName') }}</th>
-          <th>{{ $t('header.submissionDate') }}</th>
-          <th v-if="!draft">{{ $t('header.stateAndActions') }}</th>
-        </tr>
-      </thead>
-      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
-      <tbody ref="metadataBody"
-        :class="`submission-table-actions-trigger-${actionsTrigger}`"
-        @mousemove="setActionsTrigger('hover')"
-        @focusin="setActionsTrigger('focus')" @click="review">
-        <template v-if="odata.dataExists">
-          <submission-metadata-row v-for="(submission, index) in chunkyOData"
-            :key="submission.__id" :project-id="projectId"
-            :xml-form-id="xmlFormId" :draft="draft" :submission="submission"
-            :row-number="odata.originalCount - index" :can-update="canUpdate"
-            :data-index="index"/>
-        </template>
-      </tbody>
-    </table>
-    <div class="table-container">
-      <table id="submission-table-data" class="table">
-        <thead>
-          <tr v-if="fields != null">
-            <th v-for="field of fields" :key="field.path">
-              <span v-tooltip.text>{{ field.header }}</span>
-            </th>
-            <th>{{ $t('header.instanceId') }}</th>
-          </tr>
-        </thead>
-        <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
-        <tbody @mousemove="setActionsTrigger('hover')"
-          @mouseover="toggleHoverClass" @mouseleave="removeHoverClass">
-          <template v-if="odata.dataExists && fields != null">
-            <submission-data-row v-for="(submission, index) in chunkyOData"
-              :key="submission.__id" :project-id="projectId"
-              :xml-form-id="xmlFormId" :draft="draft" :submission="submission"
-              :fields="fields" :data-index="index"/>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze ref="table" :data="chunkyOData" key-prop="__id"
+    :frozen-only="fields == null"
+    ids="submission-table-metadata submission-table-data" divider
+    @action="review">
+    <template #head-frozen>
+      <th><!-- Row number --></th>
+      <th v-if="!draft">{{ $t('header.submitterName') }}</th>
+      <th>{{ $t('header.submissionDate') }}</th>
+      <th v-if="!draft">{{ $t('header.stateAndActions') }}</th>
+    </template>
+    <template #head-scrolling>
+      <template v-if="fields != null">
+        <th v-for="field of fields" :key="field.path">
+          <span v-tooltip.text>{{ field.header }}</span>
+        </th>
+      </template>
+      <th>{{ $t('header.instanceId') }}</th>
+    </template>
+
+    <template #data-frozen="{ data, index }">
+      <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
+        :draft="draft" :submission="data"
+        :row-number="odata.originalCount - index" :can-update="canUpdate"/>
+    </template>
+    <template #data-scrolling="{ data }">
+      <submission-data-row :project-id="projectId" :xml-form-id="xmlFormId"
+        :draft="draft" :submission="data" :fields="fields"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
-import { computed } from 'vue';
+export default {
+  name: 'SubmissionTable'
+};
+</script>
+<script setup>
+import { computed, ref } from 'vue';
 
 import SubmissionDataRow from './data-row.vue';
 import SubmissionMetadataRow from './metadata-row.vue';
+import TableFreeze from '../table-freeze.vue';
 
 import useChunkyArray from '../../composables/chunky-array';
+import { rowsChanged } from '../../composables/row-changed';
 import { useRequestData } from '../../request-data';
 
-// We may render many rows, so this component makes use of event delegation and
-// other optimizations.
-
-export default {
-  name: 'SubmissionTable',
-  components: { SubmissionDataRow, SubmissionMetadataRow },
-  props: {
-    projectId: {
-      type: String,
-      required: true
-    },
-    xmlFormId: {
-      type: String,
-      required: true
-    },
-    draft: Boolean,
-    fields: Array
+defineProps({
+  projectId: {
+    type: String,
+    required: true
   },
-  emits: ['review'],
-  setup() {
-    // The component does not assume that this data will exist when the
-    // component is created.
-    const { project, odata } = useRequestData();
-    const chunkyOData = useChunkyArray(computed(() => odata.value));
-    return { project, odata, chunkyOData };
+  xmlFormId: {
+    type: String,
+    required: true
   },
-  data() {
-    return {
-      /*
-      Actions are shown for a row if the cursor is over the row or if one of the
-      actions is focused. However, it is possible for the cursor to be over one
-      row while an action is focused in a different row. In that case, we show
-      the actions for one of the two rows depending on the type of the most
-      recent event.
-
-      I tried other approaches before landing on this one. However, sequences of
-      events like the following were a challenge:
+  draft: Boolean,
+  fields: Array
+});
+const emit = defineEmits(['review']);
 
-        - Click the More button for a row.
-        - Next, press tab to focus the Review button in the next row.
-        - Actions are shown for the next row and are no longer shown beneath the
-          cursor. However, that will trigger a mouseover event, which depending
-          on the approach may cause actions to be shown beneath the cursor
-          again.
-      */
-      actionsTrigger: 'hover',
-      dataHover: null
-    };
-  },
-  computed: {
-    canUpdate() {
-      return this.project.dataExists && this.project.permits('submission.update');
-    }
-  },
-  watch: {
-    /*
-    We remove the data-hover class after the submissions are refreshed, with the
-    following cases in mind:
+// The component does not assume that this data will exist when the component is
+// created.
+const { project, odata } = useRequestData();
 
-      - There may be fewer submissions after the refresh than before. In that
-        case, it is possible that this.odata.value.length <= this.dataHover.
-      - A submission may be in a different row after the refresh. For example,
-        if the user hovers over the first row, and after the refresh, that
-        submission is in the second row, then the second row will incorrectly
-        have the data-hover class.
+const chunkyOData = useChunkyArray(computed(() => odata.value));
+const canUpdate = computed(() =>
+  project.dataExists && project.permits('submission.update'));
 
-    In some cases, it would be ideal not to remove the class or to add the class
-    to the row for a different submission. That logic is not in place right now.
-    */
-    'odata.data': 'removeHoverClass'
-  },
-  methods: {
-    setActionsTrigger(trigger) {
-      this.actionsTrigger = trigger;
-    },
-    toggleHoverClass(event) {
-      const dataRow = event.target.closest('tr');
-      const index = Number.parseInt(dataRow.dataset.index, 10);
-      if (index === this.dataHover) return;
-      const { metadataBody } = this.$refs;
-      if (this.dataHover != null)
-        metadataBody.querySelector('.data-hover').classList.remove('data-hover');
-      const metadataRow = metadataBody.querySelector(`tr:nth-child(${index + 1})`);
-      // The SubmissionMetadataRow element does not have a class binding, so I
-      // think we can add this class without Vue removing it.
-      metadataRow.classList.add('data-hover');
-      this.dataHover = index;
-    },
-    removeHoverClass() {
-      if (this.dataHover != null) {
-        const tr = this.$refs.metadataBody.querySelector('.data-hover');
-        tr.classList.remove('data-hover');
-        this.dataHover = null;
-      }
-    },
-    review(event) {
-      if (!this.canUpdate) return;
-      const tr = event.target.closest('tr');
-      if (tr.querySelector('.review-button').contains(event.target))
-        this.$emit('review', this.odata.value[tr.dataset.index]);
-    },
-    // Using a method instead of a prop in case the same submission is updated
-    // twice in a row.
-    afterReview(index) {
-      const { metadataBody } = this.$refs;
-      const tr = metadataBody.querySelector(`tr:nth-child(${index + 1})`);
-      tr.classList.add('updated');
-      setTimeout(() => {
-        tr.classList.remove('updated');
-      });
-    }
-  }
+const review = ({ target, data }) => {
+  if (target.classList.contains('review-button')) emit('review', data);
 };
+const table = ref(null);
+const afterReview = (index) => { rowsChanged(table.value.getRowPair(index)); };
+defineExpose({ afterReview });
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#submission-table-metadata {
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
-  position: relative;
-  // Adding z-index so that the background color of the other table's thead does
-  // not overlay the box shadow.
-  z-index: 1;
-
-  th:last-child { border-right: $border-bottom-table-heading; }
-  td:last-child { border-right: $border-top-table-data; }
-}
-
 #submission-table-data {
-  width: auto;
-
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
diff --git a/src/components/table-freeze.vue b/src/components/table-freeze.vue
new file mode 100644
index 000000000..4754d00d3
--- /dev/null
+++ b/src/components/table-freeze.vue
@@ -0,0 +1,204 @@
+<!--
+Copyright 2023 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 class="table-freeze">
+    <table :id="idsSplit[0]" class="table table-freeze-frozen"
+      :class="{ divider }">
+      <thead>
+        <tr>
+          <slot name="head-frozen"></slot>
+        </tr>
+      </thead>
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+      <tbody v-if="data != null" ref="frozenBody"
+        :class="`actions-trigger-${actionsTrigger}`"
+        @mousemove="setActionsTrigger('hover')"
+        @focusin="setActionsTrigger('focus')" @click="actionClick">
+        <slot v-for="(element, index) in data" :key="element[keyProp]"
+          name="data-frozen" :data="element" :index="index">
+        </slot>
+      </tbody>
+    </table>
+    <div v-if="!frozenOnly" class="table-freeze-scrolling-container">
+      <table :id="idsSplit[1]" class="table table-freeze-scrolling">
+        <thead>
+          <tr>
+            <slot name="head-scrolling"></slot>
+          </tr>
+        </thead>
+        <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
+        <tbody v-if="data != null" ref="scrollingBody"
+          @mousemove="setActionsTrigger('hover')" @mouseover="toggleHoverClass"
+          @mouseleave="removeHoverClass">
+          <slot v-for="(element, index) in data" :key="element[keyProp]"
+            name="data-scrolling" :data="element" :index="index">
+          </slot>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, shallowRef, watch } from 'vue';
+
+// We may render many rows, so this component makes use of event delegation and
+// other optimizations.
+
+const props = defineProps({
+  data: Array,
+  keyProp: {
+    type: String,
+    required: true
+  },
+  frozenOnly: Boolean,
+  ids: String,
+  divider: Boolean
+});
+const emit = defineEmits(['action']);
+
+const idsSplit = computed(() =>
+  (props.ids != null ? props.ids.split(' ') : []));
+
+/*
+Actions are shown for a row if the cursor is over the row or if one of the
+actions is focused. However, it is possible for the cursor to be over one row
+while an action is focused in a different row. In that case, we show the actions
+for one of the two rows depending on the type of the most recent event.
+
+I tried other approaches before landing on this one. However, some sequences of
+events were a challenge. For example, in SubmissionTable:
+
+  - Click the More button for a row.
+  - Next, press tab to focus the Review button in the next row.
+  - Actions are shown for the next row and are no longer shown beneath the
+    cursor. However, that will trigger a mouseover event, which depending on the
+    approach may cause actions to be shown beneath the cursor again.
+*/
+const actionsTrigger = ref('hover');
+const setActionsTrigger = (trigger) => { actionsTrigger.value = trigger; };
+
+// When hovering over a row of the scrolling table, add a class to the
+// corresponding row of the frozen table. Note that the class may be overwritten
+// if the <tr> element in the data-frozen slot uses v-bind:class.
+const correspondingRow = shallowRef(null);
+const frozenBody = ref(null);
+const toggleHoverClass = (event) => {
+  const scrollingRow = event.target.closest('tr');
+  if (correspondingRow.value != null) {
+    if (scrollingRow.rowIndex === correspondingRow.value.rowIndex) return;
+    correspondingRow.value.classList.remove('scrolling-hover');
+  }
+  correspondingRow.value = frozenBody.value.rows[scrollingRow.rowIndex - 1];
+  correspondingRow.value.classList.add('scrolling-hover');
+};
+const removeHoverClass = () => {
+  if (correspondingRow.value != null) {
+    correspondingRow.value.classList.remove('scrolling-hover');
+    correspondingRow.value = null;
+  }
+};
+/*
+We remove the scrolling-hover class after the table is refreshed, with the
+following cases in mind:
+
+  - There may be fewer rows after the refresh than before.
+  - The rows may be reordered.
+*/
+watch(() => props.data, removeHoverClass);
+
+const actionClick = (event) => {
+  const action = event.target.closest('.btn-group :is(button, a)');
+  if (action != null) {
+    const index = action.closest('tr').rowIndex - 1;
+    emit('action', { target: action, data: props.data[index], index });
+  }
+};
+
+const scrollingBody = ref(null);
+const getRowPair = (index) =>
+  [frozenBody.value.rows[index], scrollingBody.value.rows[index]];
+defineExpose({ getRowPair });
+</script>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+.table-freeze { @include clearfix; }
+
+.table-freeze-frozen {
+  float: left;
+  width: auto;
+}
+
+.table-freeze-scrolling-container {
+  // Placing the margin here rather than on the table so that the horizontal
+  // scrollbar appears immediately below the table, above the margin.
+  margin-bottom: $margin-bottom-table;
+  overflow-x: auto;
+
+  .table {
+    margin-bottom: 0;
+    width: auto;
+  }
+}
+
+.table-freeze-frozen.divider {
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
+  position: relative;
+  // Adding z-index so that the background color of the other table's thead does
+  // not overlay the box shadow.
+  z-index: 1;
+
+  th:last-child { border-right: $border-bottom-table-heading; }
+  td:last-child { border-right: $border-top-table-data; }
+}
+
+// Styles related to actions (buttons and links). If there are actions, they
+// should be in a .btn-group.
+.table-freeze-frozen {
+  // If the table has a .btn-group, it will probably be in the last column.
+  td:last-child { position: relative; }
+
+  .btn-group {
+    // Setting the background color in case an action is transparent.
+    background-color: $color-page-background;
+    left: -1000px;
+    position: absolute;
+    top: 4px;
+  }
+
+  .actions-trigger-hover tr:hover .btn-group,
+  .actions-trigger-hover .scrolling-hover .btn-group,
+  .actions-trigger-focus .btn-group:focus-within {
+    left: auto;
+    right: $padding-right-table-data;
+  }
+
+  .btn-group .btn {
+    [class^="icon-"] { margin-right: 0; }
+    .icon-check { margin-right: -1px; }
+    .icon-pencil { margin-left: 1px; }
+  }
+
+  .more-button {
+    span:first-child { margin-right: 13px; }
+
+    .icon-angle-right {
+      font-size: 18px;
+      position: absolute;
+      right: $hpadding-btn;
+      top: #{$padding-top-btn - 2px};
+    }
+  }
+}
+</style>
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index d88c4e5f5..658e38bbc 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -1,9 +1,7 @@
-import sinon from 'sinon';
 import { RouterLinkStub } from '@vue/test-utils';
 
 import DateTime from '../../../src/components/date-time.vue';
 import SubmissionMetadataRow from '../../../src/components/submission/metadata-row.vue';
-import SubmissionTable from '../../../src/components/submission/table.vue';
 import SubmissionUpdateReviewState from '../../../src/components/submission/update-review-state.vue';
 
 import testData from '../../data';
@@ -133,7 +131,7 @@ describe('SubmissionMetadataRow', () => {
 
     it('does not show the count if there has not been an edit', () => {
       testData.extendedSubmissions.createPast(1, { edits: 0 });
-      mountComponent().find('.edits').exists().should.be.false();
+      mountComponent().get('.edits').text().should.equal('');
     });
   });
 
@@ -190,18 +188,6 @@ describe('SubmissionMetadataRow', () => {
         submission.__id.should.equal('foo');
         submission.__system.submitterId.should.equal('1');
       });
-
-      it('calls SubmissionTable.methods.afterReview()', () => {
-        const afterReview = sinon.fake();
-        return submit()
-          .beforeAnyResponse(component => {
-            const table = component.getComponent(SubmissionTable);
-            sinon.replace(table.vm, 'afterReview', afterReview);
-          })
-          .afterResponse(() => {
-            afterReview.called.should.be.true();
-          });
-      });
     });
   });
 
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index 487d8a418..ff9d23687 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -132,53 +132,4 @@ describe('SubmissionTable', () => {
       row.props().canUpdate.should.be.false();
     });
   });
-
-  describe('visibility of actions', () => {
-    it('shows actions if user hovers over a SubmissionDataRow', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      await component.getComponent(SubmissionDataRow).trigger('mouseover');
-      const metadataRows = component.findAllComponents(SubmissionMetadataRow);
-      metadataRows[0].classes('data-hover').should.be.true();
-      metadataRows[1].classes('data-hover').should.be.false();
-    });
-
-    it('toggles actions if user hovers over a new SubmissionDataRow', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      const dataRows = component.findAllComponents(SubmissionDataRow);
-      await dataRows[0].trigger('mouseover');
-      await dataRows[1].trigger('mouseover');
-      const metadataRows = component.findAllComponents(SubmissionMetadataRow);
-      metadataRows[0].classes('data-hover').should.be.false();
-      metadataRows[1].classes('data-hover').should.be.true();
-    });
-
-    it('hides the actions if the cursor leaves the table', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      await component.getComponent(SubmissionDataRow).trigger('mouseover');
-      await component.get('#submission-table-data tbody').trigger('mouseleave');
-      const metadataRow = component.getComponent(SubmissionMetadataRow);
-      metadataRow.classes('data-hover').should.be.false();
-    });
-
-    it('adds a class for the actions trigger', async () => {
-      testData.extendedSubmissions.createPast(1);
-      const component = mountComponent({ attachTo: document.body });
-      const tbody = component.get('#submission-table-metadata tbody');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-      const btn = tbody.findAll('.btn');
-      await btn[0].trigger('focusin');
-      tbody.classes('submission-table-actions-trigger-focus').should.be.true();
-      await component.getComponent(SubmissionMetadataRow).trigger('mousemove');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-      await btn[1].trigger('focusin');
-      await component.getComponent(SubmissionDataRow).trigger('mousemove');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-    });
-  });
 });
diff --git a/test/components/table-freeze.spec.js b/test/components/table-freeze.spec.js
new file mode 100644
index 000000000..4405ce042
--- /dev/null
+++ b/test/components/table-freeze.spec.js
@@ -0,0 +1,73 @@
+import TableFreeze from '../../src/components/table-freeze.vue';
+
+import { mergeMountOptions, mount } from '../util/lifecycle';
+
+const mountComponent = (options) =>
+  mount(TableFreeze, mergeMountOptions(options, {
+    props: {
+      data: [{ id: 1, name: 'foo' }, { id: 1, name: 'bar' }],
+      keyProp: 'id'
+    },
+    slots: {
+      headFrozen: '<th>id</th>',
+      headScrolling: '<th>name</th>',
+      dataFrozen: '<tr><td>{{ params.id }}</td></tr>',
+      dataScrolling: '<tr><td>{{ params.name }}</td></tr>'
+    }
+  }));
+
+describe('TableFreeze', () => {
+  describe('visibility of actions', () => {
+    const slots = {
+      headFrozen: '<th>Actions</th>',
+      dataFrozen: `<tr>
+        <td>
+          Hover or focus to see actions
+          <div class="btn-group">
+            <button type="button" class="btn btn-default">Some button</button>
+          </div>
+        </td>
+      </tr>`
+    };
+
+    it('shows actions if user hovers over a scrolling row', async () => {
+      const component = mountComponent({ slots });
+      await component.get('.table-freeze-scrolling td').trigger('mouseover');
+      const frozenRows = component.findAll('.table-freeze-frozen tr');
+      frozenRows[0].classes('scrolling-hover').should.be.true();
+      frozenRows[1].classes('scrolling-hover').should.be.false();
+    });
+
+    it('toggles actions if user hovers over a new scrolling row', async () => {
+      const component = mountComponent({ slots });
+      const scrollingRows = component.findAll('.table-freeze-scrolling tr');
+      await scrollingRows[0].trigger('mouseover');
+      await scrollingRows[1].trigger('mouseover');
+      const frozenRows = component.findAll('.table-freeze-frozen tr');
+      frozenRows[0].classes('scrolling-hover').should.be.false();
+      frozenRows[1].classes('scrolling-hover').should.be.true();
+    });
+
+    it('hides the actions if the cursor leaves the table', async () => {
+      const component = mountComponent({ slots });
+      await component.get('.table-freeze-scrolling td').trigger('mouseover');
+      await component.get('.table-freeze-scrolling tbody').trigger('mouseleave');
+      const frozenRow = component.get('.table-freeze-frozen tr');
+      frozenRow.classes('scrolling-hover').should.be.false();
+    });
+
+    it('adds a class for the actions trigger', async () => {
+      const component = mountComponent({ slots, attachTo: document.body });
+      const tbody = component.get('.table-freeze-frozen tbody');
+      tbody.classes('actions-trigger-hover').should.be.true();
+      const btn = tbody.findAll('.btn');
+      await btn[0].trigger('focusin');
+      tbody.classes('actions-trigger-focus').should.be.true();
+      await tbody.get('td').trigger('mousemove');
+      tbody.classes('actions-trigger-hover').should.be.true();
+      await btn[1].trigger('focusin');
+      await component.get('.table-freeze-scrolling td').trigger('mousemove');
+      tbody.classes('actions-trigger-hover').should.be.true();
+    });
+  });
+});

From 774f3736830206aa65294f637efec089e6832273 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:19:53 -0400
Subject: [PATCH 03/11] Add "Last Updated / Actions" column to EntityTable

The edit button will come in the next commit.
---
 src/components/entity/metadata-row.vue      | 46 +++++++++++++++++---
 src/components/entity/table.vue             | 14 ++++++
 test/components/entity/metadata-row.spec.js | 47 ++++++++++++++++++++-
 test/components/entity/table.spec.js        |  4 +-
 test/data/entities.js                       |  6 ++-
 transifex/strings_en.json                   |  8 ++++
 6 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/src/components/entity/metadata-row.vue b/src/components/entity/metadata-row.vue
index f429a03fa..0679ecee4 100644
--- a/src/components/entity/metadata-row.vue
+++ b/src/components/entity/metadata-row.vue
@@ -11,16 +11,32 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <tr class="entity-metadata-row">
-    <td class="row-number">
-      <router-link v-slot="{ href }"
-        :to="entityPath(projectId, datasetName, entity.__id)" custom>
-        <a :href="href" target="_blank">{{ $n(rowNumber, 'noGrouping') }}</a>
-      </router-link>
-    </td>
+    <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td class="creator-name">
       <span v-tooltip.text>{{ entity.__system.creatorName }}</span>
     </td>
     <td><date-time :iso="entity.__system.createdAt"/></td>
+    <td>
+      <div class="col-content">
+        <date-time :iso="entity.__system.updatedAt" class="updated-at"/>
+        <span class="updates">
+          <template v-if="entity.__system.updates !== 0">
+            <span class="icon-pencil"></span>
+            <span>{{ $n(entity.__system.updates, 'default') }}</span>
+          </template>
+        </span>
+        <span class="icon-angle-right"></span>
+      </div>
+      <div class="btn-group">
+        <router-link v-slot="{ href }"
+          :to="entityPath(projectId, datasetName, entity.__id)" custom>
+          <a class="more-button btn btn-default" :href="href" target="_blank">
+            <span>{{ $t('action.more') }}</span>
+            <span class="icon-angle-right"></span>
+          </a>
+        </router-link>
+      </div>
+    </td>
   </tr>
 </template>
 
@@ -69,5 +85,23 @@ const { entityPath } = useRoutes();
     @include text-overflow-ellipsis;
     max-width: 250px;
   }
+
+  .col-content { display: flex; }
+  .updated-at {
+    margin-right: 21px;
+
+    &:empty { width: 75px; }
+  }
+  .updates {
+    color: #777;
+    margin-left: auto;
+    width: 41px;
+
+    .icon-pencil { margin-right: 5px; }
+  }
+  .col-content .icon-angle-right {
+    color: $color-accent-primary;
+    font-size: 20px;
+  }
 }
 </style>
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 9c697a0a9..272cc8fed 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -17,6 +17,7 @@ except according to the terms contained in the LICENSE file.
       <th><!-- Row number --></th>
       <th>{{ $t('header.createdBy') }}</th>
       <th>{{ $t('header.createdAt') }}</th>
+      <th>{{ $t('header.updatedAtAndActions') }}</th>
     </template>
     <template #head-scrolling>
       <template v-if="properties != null">
@@ -70,3 +71,16 @@ const { odataEntities } = useRequestData();
   }
 }
 </style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "header": {
+      // This is the text of a column header of a table of Entities. The column
+      // shows when each Entity was last updated, as well as actions that can be
+      // taken on the Entity.
+      "updatedAtAndActions": "Last Updated / Actions"
+    }
+  }
+}
+</i18n>
diff --git a/test/components/entity/metadata-row.spec.js b/test/components/entity/metadata-row.spec.js
index e218f8c53..33572e626 100644
--- a/test/components/entity/metadata-row.spec.js
+++ b/test/components/entity/metadata-row.spec.js
@@ -3,6 +3,8 @@ import EntityMetadataRow from '../../../src/components/entity/metadata-row.vue';
 import DateTime from '../../../src/components/date-time.vue';
 
 import testData from '../../data';
+import { load } from '../../util/http';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 
@@ -18,7 +20,7 @@ const mountComponent = (props = undefined) => {
     },
     props: mergedProps,
     container: {
-      router: mockRouter('/projects/1/datasets/trees/entities/e')
+      router: mockRouter('/projects/1/datasets/trees/entities')
     }
   });
 };
@@ -48,4 +50,47 @@ describe('EntityMetadataRow', () => {
     const { createdAt } = testData.extendedEntities.createPast(1).last();
     mountComponent().getComponent(DateTime).props().iso.should.equal(createdAt);
   });
+
+  describe('latest updated', () => {
+    it('shows the date', () => {
+      const { updatedAt } = testData.extendedEntities.createPast(1)
+        .update(-1, { updates: 1 });
+      should.exist(updatedAt);
+      const dateTimes = mountComponent().findAllComponents(DateTime);
+      dateTimes.length.should.equal(2);
+      dateTimes[1].classes('updated-at').should.be.true();
+      dateTimes[1].props().iso.should.equal(updatedAt);
+    });
+
+    it('does not show anything if there has not been an update', () => {
+      testData.extendedEntities.createPast(1);
+      mountComponent().get('.updated-at').text().should.equal('');
+    });
+  });
+
+  describe('update count', () => {
+    it('shows the count if there has been an update', () => {
+      testData.extendedSubmissions.createPast(1)
+        .update(-1, { updates: 1000 });
+      mountComponent().get('.edits').text().should.equal('1,000');
+    });
+
+    it('does not show the count if there has not been an update', () => {
+      testData.extendedSubmissions.createPast(1);
+      mountComponent().get('.edits').text().should.equal('');
+    });
+  });
+
+  it('renders the More button correctly', async () => {
+    mockLogin();
+    testData.extendedDatasets.createPast(1, { name: 'á', entities: 1 });
+    testData.extendedEntities.createPast(1, { uuid: 'e' });
+    // Using load() rather than mountComponent() because RouterLinkStub doesn't
+    // use the <router-link> slot.
+    const app = await load('/projects/1/datasets/%C3%A1/entities');
+    const btn = app.get('.entity-metadata-row .more-button');
+    btn.element.tagName.should.equal('A');
+    btn.attributes('target').should.equal('_blank');
+    btn.attributes('href').should.equal('/projects/1/datasets/%C3%A1/entities/e');
+  });
 });
diff --git a/test/components/entity/table.spec.js b/test/components/entity/table.spec.js
index 9acf9403c..55f19aa08 100644
--- a/test/components/entity/table.spec.js
+++ b/test/components/entity/table.spec.js
@@ -31,12 +31,12 @@ const headers = (table) => table.findAll('th').map(th => th.text());
 
 describe('EntityTable', () => {
   describe('metadata headers', () => {
-    it('renders the correct headers for a form', () => {
+    it('renders the correct headers', () => {
       testData.extendedDatasets.createPast(1);
       testData.extendedEntities.createPast(1);
       const component = mountComponent();
       const table = component.get('#entity-table-metadata');
-      headers(table).should.eql(['', 'Created by', 'Created at']);
+      headers(table).should.eql(['', 'Created by', 'Created at', 'Last Updated / Actions']);
     });
   });
 
diff --git a/test/data/entities.js b/test/data/entities.js
index 11344df8e..097ba0de8 100644
--- a/test/data/entities.js
+++ b/test/data/entities.js
@@ -23,6 +23,8 @@ export const extendedEntities = dataStore({
 
     uuid = faker.random.uuid(),
     label = faker.random.word(),
+    updates = 0,
+    updatedAt = null,
     ...options
   }) => {
     if (extendedDatasets.size === 0) {
@@ -43,10 +45,11 @@ export const extendedEntities = dataStore({
     return {
       uuid,
       currentVersion: { label, data, current: true },
+      updates,
       creatorId: creator.id,
       creator: toActor(creator),
       createdAt,
-      updatedAt: null
+      updatedAt
     };
   },
   sort: comparator((entity1, entity2) =>
@@ -69,6 +72,7 @@ export const entityOData = (top = 250, skip = 0) => {
         label: entity.currentVersion.label,
         __id: entity.uuid,
         __system: {
+          updates: entity.updates,
           creatorId: entity.creator.id.toString(),
           creatorName: entity.creator.displayName,
           createdAt: entity.createdAt,
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 08769e225..c68820646 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -1528,6 +1528,14 @@
         }
       }
     },
+    "EntityTable": {
+      "header": {
+        "updatedAtAndActions": {
+          "string": "Last Updated / Actions",
+          "developer_comment": "This is the text of a column header of a table of Entities. The column shows when each Entity was last updated, as well as actions that can be taken on the Entity."
+        }
+      }
+    },
     "EntityUpdate": {
       "title": {
         "string": "Update {label}",

From 2cec5fb57b987bb677f096572a7fbfc26df407d6 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:19:54 -0400
Subject: [PATCH 04/11] Add edit button to EntityTable

---
 src/components/entity/list.vue              |  62 ++++++++-
 src/components/entity/metadata-row.vue      |  23 +++-
 src/components/entity/table.vue             |  21 ++-
 test/components/entity/list.spec.js         | 140 ++++++++++++++++++++
 test/components/entity/metadata-row.spec.js |   9 +-
 5 files changed, 238 insertions(+), 17 deletions(-)

diff --git a/src/components/entity/list.vue b/src/components/entity/list.vue
index f1daf5ece..9fb2ead1a 100644
--- a/src/components/entity/list.vue
+++ b/src/components/entity/list.vue
@@ -23,21 +23,24 @@ except according to the terms contained in the LICENSE file.
       </a>
     </div>
     <entity-table v-show="odataEntities.dataExists && odataEntities.value.length !== 0"
-      :properties="dataset.properties"/>
+      ref="table" :properties="dataset.properties" @update="showUpdate"/>
     <p v-show="odataEntities.dataExists && odataEntities.value.length === 0"
       class="empty-table-message">
       {{ $t('noEntities') }}
     </p>
     <loading :state="odataEntities.initiallyLoading"/>
+
+    <entity-update v-bind="update" @hide="hideUpdate" @success="afterUpdate"/>
   </div>
 </template>
 
 <script>
-
 import Loading from '../loading.vue';
 import Spinner from '../spinner.vue';
 import EntityTable from './table.vue';
+import EntityUpdate from './update.vue';
 
+import modal from '../../mixins/modal';
 import useEntities from '../../request-data/entities';
 import { useRequestData } from '../../request-data';
 import { apiPaths } from '../../util/request';
@@ -48,8 +51,11 @@ export default {
   components: {
     Loading,
     Spinner,
-    EntityTable
+    EntityTable,
+    EntityUpdate
   },
+  mixins: [modal()],
+  inject: ['alert'],
   provide() {
     return { projectId: this.projectId, datasetName: this.datasetName };
   },
@@ -72,7 +78,14 @@ export default {
   },
   data() {
     return {
-      refreshing: false
+      refreshing: false,
+      // The index of the entity being updated
+      updateIndex: null,
+      // Data to pass to the update modal
+      update: {
+        state: false,
+        entity: null
+      }
     };
   },
   computed: {
@@ -101,6 +114,47 @@ export default {
       })
         .finally(() => { this.refreshing = false; })
         .catch(noop);
+    },
+    showUpdate(index) {
+      if (this.refreshing) return;
+      this.updateIndex = index;
+      const odataEntity = this.odataEntities.value[index];
+      const data = Object.create(null);
+      for (const { name, odataName } of this.dataset.properties)
+        data[name] = odataEntity[odataName];
+      this.update.entity = {
+        uuid: odataEntity.__id,
+        currentVersion: { label: odataEntity.label, data }
+      };
+      this.showModal('update');
+    },
+    hideUpdate() {
+      this.hideModal('update');
+      this.update.entity = null;
+      this.updateIndex = null;
+    },
+    afterUpdate(updatedEntity) {
+      const index = this.updateIndex;
+      this.hideUpdate();
+      this.alert.success(this.$t('alert.updateEntity'));
+
+      // Update the OData using the REST response.
+      const oldOData = this.odataEntities.value[index];
+      const newOData = Object.assign(Object.create(null), {
+        __id: oldOData.__id,
+        label: updatedEntity.currentVersion.label,
+        __system: {
+          ...oldOData.__system,
+          updates: oldOData.__system.updates + 1,
+          updatedAt: updatedEntity.updatedAt
+        }
+      });
+      const { data: updatedData } = updatedEntity.currentVersion;
+      for (const { name, odataName } of this.dataset.properties)
+        newOData[odataName] = updatedData[name];
+      this.odataEntities.value[index] = newOData;
+
+      this.$refs.table.afterUpdate(index);
     }
   }
 };
diff --git a/src/components/entity/metadata-row.vue b/src/components/entity/metadata-row.vue
index 0679ecee4..8b01c3270 100644
--- a/src/components/entity/metadata-row.vue
+++ b/src/components/entity/metadata-row.vue
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr class="entity-metadata-row">
+  <tr ref="el" class="entity-metadata-row">
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td class="creator-name">
       <span v-tooltip.text>{{ entity.__system.creatorName }}</span>
@@ -28,6 +28,11 @@ except according to the terms contained in the LICENSE file.
         <span class="icon-angle-right"></span>
       </div>
       <div class="btn-group">
+        <button v-if="canUpdate" type="button"
+          class="update-button btn btn-default" :aria-label="updateLabel"
+          v-tooltip.aria-label>
+          <span class="icon-pencil"></span>
+        </button>
         <router-link v-slot="{ href }"
           :to="entityPath(projectId, datasetName, entity.__id)" custom>
           <a class="more-button btn btn-default" :href="href" target="_blank">
@@ -46,13 +51,14 @@ export default {
 };
 </script>
 <script setup>
-import { inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import DateTime from '../date-time.vue';
 
 import useRoutes from '../../composables/routes';
+import { useRowChanged } from '../../composables/row-changed';
 
-defineProps({
+const props = defineProps({
   entity: {
     type: Object,
     required: true
@@ -60,11 +66,20 @@ defineProps({
   rowNumber: {
     type: Number,
     required: true
-  }
+  },
+  canUpdate: Boolean
 });
 const projectId = inject('projectId');
 const datasetName = inject('datasetName');
 
+const el = ref(null);
+useRowChanged(el);
+
+const { i18n } = inject('container');
+const updateLabel = computed(() => i18n.t('submission.action.edit', {
+  count: i18n.n(props.entity.__system.updates, 'default')
+}));
+
 const { entityPath } = useRoutes();
 </script>
 
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 272cc8fed..98e61955f 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -10,9 +10,9 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <table-freeze :data="odataEntities.value" key-prop="__id"
+  <table-freeze ref="table" :data="odataEntities.value" key-prop="__id"
     :frozen-only="properties == null"
-    ids="entity-table-metadata entity-table-data" divider>
+    ids="entity-table-metadata entity-table-data" divider @action="update">
     <template #head-frozen>
       <th><!-- Row number --></th>
       <th>{{ $t('header.createdBy') }}</th>
@@ -31,7 +31,8 @@ except according to the terms contained in the LICENSE file.
 
     <template #data-frozen="{ data, index }">
       <entity-metadata-row :entity="data"
-        :row-number="odataEntities.value.length - index"/>
+        :row-number="odataEntities.value.length - index"
+        :can-update="canUpdate"/>
     </template>
     <template #data-scrolling="{ data }">
       <entity-data-row :entity="data" :properties="properties"/>
@@ -45,19 +46,31 @@ export default {
 };
 </script>
 <script setup>
+import { computed, ref } from 'vue';
+
 import EntityDataRow from './data-row.vue';
 import EntityMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
+import { rowsChanged } from '../../composables/row-changed';
 import { useRequestData } from '../../request-data';
 
 defineProps({
   properties: Array
 });
+const emit = defineEmits(['update']);
 
 // The component does not assume that this data will exist when the component is
 // created.
-const { odataEntities } = useRequestData();
+const { project, odataEntities } = useRequestData();
+
+const canUpdate = computed(() => project.permits(['entity.update']));
+const update = ({ target, index }) => {
+  if (target.classList.contains('update-button')) emit('update', index);
+};
+const table = ref(null);
+const afterUpdate = (index) => { rowsChanged(table.value.getRowPair(index)); };
+defineExpose({ afterUpdate });
 </script>
 
 <style lang="scss">
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 86d844e0f..9c5e068fc 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -1,6 +1,8 @@
+import DateTime from '../../../src/components/date-time.vue';
 import EntityDataRow from '../../../src/components/entity/data-row.vue';
 import EntityList from '../../../src/components/entity/list.vue';
 import EntityMetadataRow from '../../../src/components/entity/metadata-row.vue';
+import EntityUpdate from '../../../src/components/entity/update.vue';
 
 import testData from '../../data';
 import { load } from '../../util/http';
@@ -61,4 +63,142 @@ describe('EntityList', () => {
         .respondWithData(testData.entityOData);
     });
   });
+
+  describe('update', () => {
+    it('toggles the Modal', () => {
+      testData.extendedEntities.createPast(1);
+      return load('/projects/1/datasets/trees/entities', { root: false })
+        .testModalToggles({
+          modal: EntityUpdate,
+          show: '.entity-metadata-row .update-button',
+          hide: ['.btn-link']
+        });
+    });
+
+    it('passes the correct entity to the modal', async () => {
+      testData.extendedEntities
+        .createPast(1, { uuid: 'e1' })
+        .createPast(1, { uuid: 'e2' });
+      const component = await load('/projects/1/datasets/trees/entities', {
+        root: false
+      });
+      const modal = component.getComponent(EntityUpdate);
+      should.not.exist(modal.props().entity);
+      const buttons = component.findAll('.entity-metadata-row .update-button');
+      buttons.length.should.equal(2);
+      await buttons[0].trigger('click');
+      modal.props().entity.uuid.should.equal('e2');
+      await modal.get('.btn-link').trigger('click');
+      await buttons[1].trigger('click');
+      modal.props().entity.uuid.should.equal('e1');
+    });
+
+    it('passes a REST-format entity to the modal', async () => {
+      testData.extendedDatasets.createPast(1, {
+        properties: [
+          { name: 'height' },
+          { name: 'circumference.cm', odataName: 'circumference_cm' }
+        ]
+      });
+      testData.extendedEntities.createPast(1, {
+        uuid: 'abc',
+        label: 'My Entity',
+        data: { height: '1', 'circumference.cm': 2 }
+      });
+      const component = await load('/projects/1/datasets/trees/entities', {
+        root: false
+      });
+      await component.get('.entity-metadata-row .update-button').trigger('click');
+      component.getComponent(EntityUpdate).props().entity.should.eql({
+        uuid: 'abc',
+        currentVersion: {
+          label: 'My Entity',
+          data: Object.assign(Object.create(null), {
+            height: '1',
+            'circumference.cm': 2
+          })
+        }
+      });
+    });
+
+    it('does not show the modal during a refresh', () => {
+      testData.extendedEntities.createPast(1);
+      return load('/projects/1/datasets/trees/entities', { root: false })
+        .complete()
+        .request(component =>
+          component.get('#entity-list-refresh-button').trigger('click'))
+        .beforeEachResponse(async (component) => {
+          await component.get('.entity-metadata-row .update-button').trigger('click');
+          component.getComponent(EntityUpdate).props().state.should.be.false();
+        })
+        .respondWithData(testData.entityOData)
+        .afterResponse(component => {
+          component.getComponent(EntityUpdate).props().state.should.be.false();
+        });
+    });
+
+    describe('after a successful response', () => {
+      const submit = () => {
+        testData.extendedDatasets.createPast(1, {
+          properties: [
+            { name: 'height' },
+            { name: 'circumference.cm', odataName: 'circumference_cm' }
+          ]
+        });
+        testData.extendedEntities.createPast(1, { uuid: 'e1' });
+        testData.extendedEntities.createPast(1, {
+          uuid: 'e2',
+          label: 'My Entity',
+          data: { height: '1', 'circumference.cm': 2 }
+        });
+        testData.extendedEntities.createPast(1, { uuid: 'e3' });
+        return load('/projects/1/datasets/trees/entities', { root: false })
+          .complete()
+          .request(async (component) => {
+            const form = component.get('#entity-update form');
+            const textareas = form.findAll('textarea');
+            textareas.length.should.equal(3);
+            await textareas[0].setValue('Updated Entity');
+            await textareas[1].setValue('3');
+            await textareas[2].setValue('4');
+            return form.trigger('submit');
+          })
+          .respondWithData(() => {
+            const { currentVersion } = testData.extendedEntities.get(1);
+            testData.extendedEntities.update(1, {
+              currentVersion: {
+                ...currentVersion,
+                label: 'Updated Entity',
+                data: { height: '3', 'circumference.cm': 4 }
+              }
+            });
+            return testData.standardEntities.get(1);
+          });
+      };
+
+      it('hides the modal', async () => {
+        const component = await submit();
+        component.getComponent(EntityUpdate).props().state.should.be.false();
+      });
+
+      it('shows a success alert', async () => {
+        const component = await submit();
+        component.should.alert('success');
+      });
+
+      it('updates the EntityDataRow', async () => {
+        const component = await submit();
+        const tds = component.findAll('#entity-table-data tr:nth-child(2) td');
+        tds.map(td => td.text()).should.eql(['3', '4', 'Updated Entity', 'e2']);
+      });
+
+      it('updates the EntityMetadataRow', async () => {
+        const component = await submit();
+        const td = component.get('.entity-metadata-row:nth-child(2) td:last-child');
+        should.exist(td.getComponent(DateTime).props().iso);
+        td.get('.updates').text().should.equal('1');
+        td.get('.update-button').attributes('aria-label').should.equal('Edit (1)');
+      });
+    });
+  });
 });
diff --git a/test/components/entity/metadata-row.spec.js b/test/components/entity/metadata-row.spec.js
index 33572e626..11e9935e7 100644
--- a/test/components/entity/metadata-row.spec.js
+++ b/test/components/entity/metadata-row.spec.js
@@ -70,14 +70,13 @@ describe('EntityMetadataRow', () => {
 
   describe('update count', () => {
     it('shows the count if there has been an update', () => {
-      testData.extendedSubmissions.createPast(1)
-        .update(-1, { updates: 1000 });
-      mountComponent().get('.edits').text().should.equal('1,000');
+      testData.extendedEntities.createPast(1).update(-1, { updates: 1000 });
+      mountComponent().get('.updates').text().should.equal('1,000');
     });
 
     it('does not show the count if there has not been an update', () => {
-      testData.extendedSubmissions.createPast(1);
-      mountComponent().get('.edits').text().should.equal('');
+      testData.extendedEntities.createPast(1);
+      mountComponent().get('.updates').text().should.equal('');
     });
   });
 

From 1efca101ad9c8554315922cba220682d4363f551 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:53:33 -0400
Subject: [PATCH 05/11] Add file header to useRowChanged()

---
 src/composables/row-changed.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/composables/row-changed.js b/src/composables/row-changed.js
index a7775cb22..1bf37bb96 100644
--- a/src/composables/row-changed.js
+++ b/src/composables/row-changed.js
@@ -1,3 +1,14 @@
+/*
+Copyright 2023 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.
+*/
 import { watchSync } from '../util/reactivity';
 
 export const useRowChanged = (tr) => {

From 4a800b19a7746e60f7a8038edf85e9662a655f4c Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 25 May 2023 15:55:50 -0400
Subject: [PATCH 06/11] Fix failing tests after adding actions to
 EntityMetadataRow

---
 test/components/entity/list.spec.js  |  7 ++++---
 test/components/table-freeze.spec.js | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 9c5e068fc..8cb820999 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -103,7 +103,7 @@ describe('EntityList', () => {
       testData.extendedEntities.createPast(1, {
         uuid: 'abc',
         label: 'My Entity',
-        data: { height: '1', 'circumference.cm': 2 }
+        data: { height: '1', 'circumference.cm': '2' }
       });
       const component = await load('/projects/1/datasets/trees/entities', {
         root: false
@@ -115,7 +115,7 @@ describe('EntityList', () => {
           label: 'My Entity',
           data: Object.assign(Object.create(null), {
             height: '1',
-            'circumference.cm': 2
+            'circumference.cm': '2'
           })
         }
       });
@@ -149,12 +149,13 @@ describe('EntityList', () => {
         testData.extendedEntities.createPast(1, {
           uuid: 'e2',
           label: 'My Entity',
-          data: { height: '1', 'circumference.cm': 2 }
+          data: { height: '1', 'circumference.cm': '2' }
         });
         testData.extendedEntities.createPast(1, { uuid: 'e3' });
         return load('/projects/1/datasets/trees/entities', { root: false })
           .complete()
           .request(async (component) => {
+            await component.get('.entity-metadata-row:nth-child(2) .update-button').trigger('click');
             const form = component.get('#entity-update form');
             const textareas = form.findAll('textarea');
             textareas.length.should.equal(3);
diff --git a/test/components/table-freeze.spec.js b/test/components/table-freeze.spec.js
index 4405ce042..ad31ac442 100644
--- a/test/components/table-freeze.spec.js
+++ b/test/components/table-freeze.spec.js
@@ -9,18 +9,18 @@ const mountComponent = (options) =>
       keyProp: 'id'
     },
     slots: {
-      headFrozen: '<th>id</th>',
-      headScrolling: '<th>name</th>',
-      dataFrozen: '<tr><td>{{ params.id }}</td></tr>',
-      dataScrolling: '<tr><td>{{ params.name }}</td></tr>'
+      'head-frozen': '<th>id</th>',
+      'head-scrolling': '<th>name</th>',
+      'data-frozen': '<tr><td>{{ params.id }}</td></tr>',
+      'data-scrolling': '<tr><td>{{ params.name }}</td></tr>'
     }
   }));
 
 describe('TableFreeze', () => {
   describe('visibility of actions', () => {
     const slots = {
-      headFrozen: '<th>Actions</th>',
-      dataFrozen: `<tr>
+      'head-frozen': '<th>Actions</th>',
+      'data-frozen': `<tr>
         <td>
           Hover or focus to see actions
           <div class="btn-group">
@@ -33,17 +33,17 @@ describe('TableFreeze', () => {
     it('shows actions if user hovers over a scrolling row', async () => {
       const component = mountComponent({ slots });
       await component.get('.table-freeze-scrolling td').trigger('mouseover');
-      const frozenRows = component.findAll('.table-freeze-frozen tr');
+      const frozenRows = component.findAll('.table-freeze-frozen tbody tr');
       frozenRows[0].classes('scrolling-hover').should.be.true();
       frozenRows[1].classes('scrolling-hover').should.be.false();
     });
 
     it('toggles actions if user hovers over a new scrolling row', async () => {
       const component = mountComponent({ slots });
-      const scrollingRows = component.findAll('.table-freeze-scrolling tr');
+      const scrollingRows = component.findAll('.table-freeze-scrolling tbody tr');
       await scrollingRows[0].trigger('mouseover');
       await scrollingRows[1].trigger('mouseover');
-      const frozenRows = component.findAll('.table-freeze-frozen tr');
+      const frozenRows = component.findAll('.table-freeze-frozen tbody tr');
       frozenRows[0].classes('scrolling-hover').should.be.false();
       frozenRows[1].classes('scrolling-hover').should.be.true();
     });
@@ -52,7 +52,7 @@ describe('TableFreeze', () => {
       const component = mountComponent({ slots });
       await component.get('.table-freeze-scrolling td').trigger('mouseover');
       await component.get('.table-freeze-scrolling tbody').trigger('mouseleave');
-      const frozenRow = component.get('.table-freeze-frozen tr');
+      const frozenRow = component.get('.table-freeze-frozen tbody tr');
       frozenRow.classes('scrolling-hover').should.be.false();
     });
 

From f33e669faf4e28ee9941c0376dfd29b46a370ca7 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 26 May 2023 16:15:50 -0400
Subject: [PATCH 07/11] Make changes related to entity table actions after code
 review

---
 src/components/entity/data-row.vue       |  4 ++--
 src/components/entity/table.vue          | 13 ++++++-------
 src/components/submission/data-row.vue   |  2 +-
 src/components/submission/table.vue      | 12 +++++-------
 src/components/table-freeze.vue          | 11 +++--------
 src/composables/row-changed.js           |  6 ++++--
 test/components/entity/list.spec.js      |  2 +-
 test/components/entity/table.spec.js     |  4 ++--
 test/components/submission/table.spec.js |  8 ++++----
 test/composables/row-changed.spec.js     |  6 +++---
 10 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/components/entity/data-row.vue b/src/components/entity/data-row.vue
index fa156b6b7..35f5c592f 100644
--- a/src/components/entity/data-row.vue
+++ b/src/components/entity/data-row.vue
@@ -10,8 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr>
-    <td v-for="property of properties" :key="property.id">
+  <tr class="entity-data-row">
+    <td v-for="property of properties" :key="property.name">
       <span v-tooltip.text>{{ entity[property.odataName] }}</span>
     </td>
     <td><span v-tooltip.text>{{ entity.label }}</span></td>
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 98e61955f..083d3330e 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -10,9 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <table-freeze ref="table" :data="odataEntities.value" key-prop="__id"
-    :frozen-only="properties == null"
-    ids="entity-table-metadata entity-table-data" divider @action="update">
+  <table-freeze id="entity-table" ref="table" :data="odataEntities.value"
+    key-prop="__id" :frozen-only="properties == null" divider @action="update">
     <template #head-frozen>
       <th><!-- Row number --></th>
       <th>{{ $t('header.createdBy') }}</th>
@@ -21,7 +20,7 @@ except according to the terms contained in the LICENSE file.
     </template>
     <template #head-scrolling>
       <template v-if="properties != null">
-        <th v-for="property of properties" :key="property.id">
+        <th v-for="property of properties" :key="property.name">
           <span v-tooltip.text>{{ property.name }}</span>
         </th>
       </template>
@@ -52,7 +51,7 @@ import EntityDataRow from './data-row.vue';
 import EntityMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
-import { rowsChanged } from '../../composables/row-changed';
+import { markRowsChanged } from '../../composables/row-changed';
 import { useRequestData } from '../../request-data';
 
 defineProps({
@@ -69,14 +68,14 @@ const update = ({ target, index }) => {
   if (target.classList.contains('update-button')) emit('update', index);
 };
 const table = ref(null);
-const afterUpdate = (index) => { rowsChanged(table.value.getRowPair(index)); };
+const afterUpdate = (index) => { markRowsChanged(table.value.getRowPair(index)); };
 defineExpose({ afterUpdate });
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#entity-table-data {
+#entity-table .table-freeze-scrolling {
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
diff --git a/src/components/submission/data-row.vue b/src/components/submission/data-row.vue
index 6c54ecc12..828c33af8 100644
--- a/src/components/submission/data-row.vue
+++ b/src/components/submission/data-row.vue
@@ -176,7 +176,7 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-#submission-table-data {
+#submission-table {
   .int-field, .decimal-field { text-align: right; }
   .geopoint-field { max-width: 500px; }
 
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 667b31108..aa83208b6 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -10,10 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <table-freeze ref="table" :data="chunkyOData" key-prop="__id"
-    :frozen-only="fields == null"
-    ids="submission-table-metadata submission-table-data" divider
-    @action="review">
+  <table-freeze id="submission-table" ref="table" :data="chunkyOData"
+    key-prop="__id" :frozen-only="fields == null" divider @action="review">
     <template #head-frozen>
       <th><!-- Row number --></th>
       <th v-if="!draft">{{ $t('header.submitterName') }}</th>
@@ -54,7 +52,7 @@ import SubmissionMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
 import useChunkyArray from '../../composables/chunky-array';
-import { rowsChanged } from '../../composables/row-changed';
+import { markRowsChanged } from '../../composables/row-changed';
 import { useRequestData } from '../../request-data';
 
 defineProps({
@@ -83,14 +81,14 @@ const review = ({ target, data }) => {
   if (target.classList.contains('review-button')) emit('review', data);
 };
 const table = ref(null);
-const afterReview = (index) => { rowsChanged(table.value.getRowPair(index)); };
+const afterReview = (index) => { markRowsChanged(table.value.getRowPair(index)); };
 defineExpose({ afterReview });
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#submission-table-data {
+#submission-table .table-freeze-scrolling {
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
diff --git a/src/components/table-freeze.vue b/src/components/table-freeze.vue
index 4754d00d3..60a4712bd 100644
--- a/src/components/table-freeze.vue
+++ b/src/components/table-freeze.vue
@@ -11,8 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div class="table-freeze">
-    <table :id="idsSplit[0]" class="table table-freeze-frozen"
-      :class="{ divider }">
+    <table class="table table-freeze-frozen" :class="{ divider }">
       <thead>
         <tr>
           <slot name="head-frozen"></slot>
@@ -29,7 +28,7 @@ except according to the terms contained in the LICENSE file.
       </tbody>
     </table>
     <div v-if="!frozenOnly" class="table-freeze-scrolling-container">
-      <table :id="idsSplit[1]" class="table table-freeze-scrolling">
+      <table class="table table-freeze-scrolling">
         <thead>
           <tr>
             <slot name="head-scrolling"></slot>
@@ -49,7 +48,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { computed, ref, shallowRef, watch } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 
 // We may render many rows, so this component makes use of event delegation and
 // other optimizations.
@@ -61,14 +60,10 @@ const props = defineProps({
     required: true
   },
   frozenOnly: Boolean,
-  ids: String,
   divider: Boolean
 });
 const emit = defineEmits(['action']);
 
-const idsSplit = computed(() =>
-  (props.ids != null ? props.ids.split(' ') : []));
-
 /*
 Actions are shown for a row if the cursor is over the row or if one of the
 actions is focused. However, it is possible for the cursor to be over one row
diff --git a/src/composables/row-changed.js b/src/composables/row-changed.js
index 1bf37bb96..0835afc54 100644
--- a/src/composables/row-changed.js
+++ b/src/composables/row-changed.js
@@ -19,11 +19,13 @@ export const useRowChanged = (tr) => {
   });
 };
 
-export const rowsChanged = (trs) => {
+export const markRowsChanged = (trs) => {
   for (const tr of trs) tr.dataset.useRowChanged = 'true';
+  // Toggling data-use-row-changed from 'true' to 'false' will trigger a CSS
+  // transition: see app.scss. The CSS specifies the duration of the transition.
   setTimeout(() => {
     for (const tr of trs) tr.dataset.useRowChanged = 'false';
   });
 };
 
-export const rowChanged = (tr) => { rowsChanged([tr]); };
+export const markRowChanged = (tr) => { markRowsChanged([tr]); };
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 8cb820999..80bfe8b4f 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -189,7 +189,7 @@ describe('EntityList', () => {
 
       it('updates the EntityDataRow', async () => {
         const component = await submit();
-        const tds = component.findAll('#entity-table-data tr:nth-child(2) td');
+        const tds = component.findAll('.entity-data-row:nth-child(2) td');
         tds.map(td => td.text()).should.eql(['3', '4', 'Updated Entity', 'e2']);
       });
 
diff --git a/test/components/entity/table.spec.js b/test/components/entity/table.spec.js
index 55f19aa08..3d8c58f85 100644
--- a/test/components/entity/table.spec.js
+++ b/test/components/entity/table.spec.js
@@ -35,7 +35,7 @@ describe('EntityTable', () => {
       testData.extendedDatasets.createPast(1);
       testData.extendedEntities.createPast(1);
       const component = mountComponent();
-      const table = component.get('#entity-table-metadata');
+      const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['', 'Created by', 'Created at', 'Last Updated / Actions']);
     });
   });
@@ -48,7 +48,7 @@ describe('EntityTable', () => {
       });
       testData.extendedEntities.createPast(1);
 
-      const table = mountComponent().get('#entity-table-data');
+      const table = mountComponent().get('.table-freeze-scrolling');
       headers(table).should.eql(['p1', 'p2', 'Label', 'Entity ID']);
     });
   });
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index ff9d23687..2279e0ac5 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -49,7 +49,7 @@ describe('SubmissionTable', () => {
       const component = mountComponent({
         props: { draft: false }
       });
-      const table = component.get('#submission-table-metadata');
+      const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['', 'Submitted by', 'Submitted at', 'State and actions']);
     });
 
@@ -59,7 +59,7 @@ describe('SubmissionTable', () => {
       const component = mountComponent({
         props: { draft: true }
       });
-      const table = component.get('#submission-table-metadata');
+      const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['', 'Submitted at']);
     });
   });
@@ -71,7 +71,7 @@ describe('SubmissionTable', () => {
         submissions: 1
       });
       testData.extendedSubmissions.createPast(1);
-      const table = mountComponent().get('#submission-table-data');
+      const table = mountComponent().get('.table-freeze-scrolling');
       headers(table).should.eql(['s1', 's2', 'Instance ID']);
     });
 
@@ -83,7 +83,7 @@ describe('SubmissionTable', () => {
       testData.extendedForms.createPast(1, { fields, submissions: 1 });
       testData.extendedSubmissions.createPast(1);
       const component = mountComponent();
-      const table = component.get('#submission-table-data');
+      const table = component.get('.table-freeze-scrolling');
       headers(table).should.eql(['g-s', 'Instance ID']);
     });
   });
diff --git a/test/composables/row-changed.spec.js b/test/composables/row-changed.spec.js
index 894f70c4c..4823e2504 100644
--- a/test/composables/row-changed.spec.js
+++ b/test/composables/row-changed.spec.js
@@ -1,4 +1,4 @@
-import { rowChanged, rowsChanged } from '../../src/composables/row-changed';
+import { markRowChanged, markRowsChanged } from '../../src/composables/row-changed';
 
 import RowChanged from '../util/components/row-changed.vue';
 
@@ -12,7 +12,7 @@ describe('useRowChanged()', () => {
     });
     const row = table.get('tr').element;
     row.dataset.useRowChanged.should.equal('false');
-    rowChanged(row);
+    markRowChanged(row);
     row.dataset.useRowChanged.should.equal('true');
     await wait();
     row.dataset.useRowChanged.should.equal('false');
@@ -23,7 +23,7 @@ describe('useRowChanged()', () => {
       props: { rowCount: 2 }
     });
     const rows = table.findAll('tr').map(wrapper => wrapper.element);
-    rowsChanged(rows);
+    markRowsChanged(rows);
     rows[0].dataset.useRowChanged.should.equal('true');
     rows[1].dataset.useRowChanged.should.equal('true');
     await wait();

From a1334ab7f0fb853208c166abbd1d66c6a43c539b Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 26 May 2023 16:15:52 -0400
Subject: [PATCH 08/11] Replace useRowChanged() composable with function

---
 src/assets/scss/app.scss                   | 10 ++----
 src/components/entity/metadata-row.vue     |  8 ++---
 src/components/entity/table.vue            |  2 +-
 src/components/submission/metadata-row.vue |  9 +----
 src/components/submission/table.vue        |  2 +-
 src/composables/row-changed.js             | 31 -----------------
 src/util/dom.js                            | 10 ++++++
 test/composables/row-changed.spec.js       | 33 ------------------
 test/unit/dom.js                           | 40 +++++++++++++++++++++-
 test/util/components/row-changed.vue       | 26 --------------
 10 files changed, 57 insertions(+), 114 deletions(-)
 delete mode 100644 src/composables/row-changed.js
 delete mode 100644 test/composables/row-changed.spec.js
 delete mode 100644 test/util/components/row-changed.vue

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index f5257d74f..0f5260398 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -809,11 +809,7 @@ becomes more complicated.
 
 
 ////////////////////////////////////////////////////////////////////////////////
-// useRowChanged()
+// markRowsChanged()
 
-[data-use-row-changed="false"] { transition: background-color 0.6s 6s; }
-
-[data-use-row-changed="true"] {
-  background-color: #faf1cd;
-  transition: none;
-}
+[data-mark-rows-changed="false"] { transition: background-color 0.6s 6s; }
+[data-mark-rows-changed="true"] { background-color: #faf1cd; }
diff --git a/src/components/entity/metadata-row.vue b/src/components/entity/metadata-row.vue
index 8b01c3270..32171a8f9 100644
--- a/src/components/entity/metadata-row.vue
+++ b/src/components/entity/metadata-row.vue
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr ref="el" class="entity-metadata-row">
+  <tr class="entity-metadata-row">
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td class="creator-name">
       <span v-tooltip.text>{{ entity.__system.creatorName }}</span>
@@ -51,12 +51,11 @@ export default {
 };
 </script>
 <script setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject } from 'vue';
 
 import DateTime from '../date-time.vue';
 
 import useRoutes from '../../composables/routes';
-import { useRowChanged } from '../../composables/row-changed';
 
 const props = defineProps({
   entity: {
@@ -72,9 +71,6 @@ const props = defineProps({
 const projectId = inject('projectId');
 const datasetName = inject('datasetName');
 
-const el = ref(null);
-useRowChanged(el);
-
 const { i18n } = inject('container');
 const updateLabel = computed(() => i18n.t('submission.action.edit', {
   count: i18n.n(props.entity.__system.updates, 'default')
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 083d3330e..8055d438c 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -51,7 +51,7 @@ import EntityDataRow from './data-row.vue';
 import EntityMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
-import { markRowsChanged } from '../../composables/row-changed';
+import { markRowsChanged } from '../../util/dom';
 import { useRequestData } from '../../request-data';
 
 defineProps({
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index f7d6bd167..d3efc67e4 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr ref="el" class="submission-metadata-row">
+  <tr class="submission-metadata-row">
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td v-if="!draft" class="submitter-name">
       <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
@@ -57,14 +57,11 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
-import { ref } from 'vue';
-
 import DateTime from '../date-time.vue';
 
 import useReviewState from '../../composables/review-state';
 import useRoutes from '../../composables/routes';
 import { apiPaths } from '../../util/request';
-import { useRowChanged } from '../../composables/row-changed';
 
 export default {
   name: 'SubmissionMetadataRow',
@@ -92,10 +89,6 @@ export default {
   setup() {
     const { reviewStateIcon } = useReviewState();
     const { submissionPath } = useRoutes();
-
-    const el = ref(null);
-    useRowChanged(el);
-
     return { reviewStateIcon, submissionPath };
   },
   computed: {
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index aa83208b6..8c667771f 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -52,7 +52,7 @@ import SubmissionMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
 import useChunkyArray from '../../composables/chunky-array';
-import { markRowsChanged } from '../../composables/row-changed';
+import { markRowsChanged } from '../../util/dom';
 import { useRequestData } from '../../request-data';
 
 defineProps({
diff --git a/src/composables/row-changed.js b/src/composables/row-changed.js
deleted file mode 100644
index 0835afc54..000000000
--- a/src/composables/row-changed.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
-Copyright 2023 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.
-*/
-import { watchSync } from '../util/reactivity';
-
-export const useRowChanged = (tr) => {
-  watchSync(tr, () => {
-    if (tr.value != null)
-      // eslint-disable-next-line no-param-reassign
-      tr.value.dataset.useRowChanged = 'false';
-  });
-};
-
-export const markRowsChanged = (trs) => {
-  for (const tr of trs) tr.dataset.useRowChanged = 'true';
-  // Toggling data-use-row-changed from 'true' to 'false' will trigger a CSS
-  // transition: see app.scss. The CSS specifies the duration of the transition.
-  setTimeout(() => {
-    for (const tr of trs) tr.dataset.useRowChanged = 'false';
-  });
-};
-
-export const markRowChanged = (tr) => { markRowsChanged([tr]); };
diff --git a/src/util/dom.js b/src/util/dom.js
index 1930b3730..a6f5b56d3 100644
--- a/src/util/dom.js
+++ b/src/util/dom.js
@@ -48,3 +48,13 @@ export const requiredLabel = (text, required) => {
   const star = required ? ' *' : '';
   return `${text}${star}`;
 };
+
+export const markRowsChanged = (trs) => {
+  for (const tr of trs) tr.dataset.markRowsChanged = 'true';
+  // Toggling data-mark-rows-changed from 'true' to 'false' will trigger a CSS
+  // transition: see app.scss. The CSS specifies the duration of the transition.
+  setTimeout(() => {
+    for (const tr of trs) tr.dataset.markRowsChanged = 'false';
+  });
+};
+export const markRowChanged = (tr) => { markRowsChanged([tr]); };
diff --git a/test/composables/row-changed.spec.js b/test/composables/row-changed.spec.js
deleted file mode 100644
index 4823e2504..000000000
--- a/test/composables/row-changed.spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { markRowChanged, markRowsChanged } from '../../src/composables/row-changed';
-
-import RowChanged from '../util/components/row-changed.vue';
-
-import { mount } from '../util/lifecycle';
-import { wait } from '../util/util';
-
-describe('useRowChanged()', () => {
-  it('toggles data-use-row-changed for a single row', async () => {
-    const table = mount(RowChanged, {
-      props: { rowCount: 1 }
-    });
-    const row = table.get('tr').element;
-    row.dataset.useRowChanged.should.equal('false');
-    markRowChanged(row);
-    row.dataset.useRowChanged.should.equal('true');
-    await wait();
-    row.dataset.useRowChanged.should.equal('false');
-  });
-
-  it('toggles data-use-row-changed for multiple rows', async () => {
-    const table = mount(RowChanged, {
-      props: { rowCount: 2 }
-    });
-    const rows = table.findAll('tr').map(wrapper => wrapper.element);
-    markRowsChanged(rows);
-    rows[0].dataset.useRowChanged.should.equal('true');
-    rows[1].dataset.useRowChanged.should.equal('true');
-    await wait();
-    rows[0].dataset.useRowChanged.should.equal('false');
-    rows[1].dataset.useRowChanged.should.equal('false');
-  });
-});
diff --git a/test/unit/dom.js b/test/unit/dom.js
index 07fd618df..b987746f4 100644
--- a/test/unit/dom.js
+++ b/test/unit/dom.js
@@ -1,4 +1,7 @@
-import { px, requiredLabel, styleBox } from '../../src/util/dom';
+import { markRowChanged, markRowsChanged, px, requiredLabel, styleBox } from '../../src/util/dom';
+
+import { mount } from '../util/lifecycle';
+import { wait } from '../util/util';
 
 describe('util/dom', () => {
   describe('px()', () => {
@@ -33,4 +36,39 @@ describe('util/dom', () => {
       requiredLabel('My Label', false).should.equal('My Label');
     });
   });
+
+  describe('markRowChanged(), markRowsChanged()', () => {
+    it('toggles data-use-row-changed for a single row', async () => {
+      const table = mount({
+        template: `<table>
+          <tbody>
+            <tr><td>foo</td></tr>
+          </tbody>
+        </table>`
+      });
+      const row = table.get('tr').element;
+      markRowChanged(row);
+      row.dataset.useRowChanged.should.equal('true');
+      await wait();
+      row.dataset.useRowChanged.should.equal('false');
+    });
+
+    it('toggles data-mark-rows-changed for multiple rows', async () => {
+      const table = mount({
+        template: `<table>
+          <tbody>
+            <tr><td>foo</td></tr>
+            <tr><td>bar</td></tr>
+          </tbody>
+        </table>`
+      });
+      const rows = table.findAll('tr').map(wrapper => wrapper.element);
+      markRowsChanged(rows);
+      rows[0].dataset.useRowChanged.should.equal('true');
+      rows[1].dataset.useRowChanged.should.equal('true');
+      await wait();
+      rows[0].dataset.useRowChanged.should.equal('false');
+      rows[1].dataset.useRowChanged.should.equal('false');
+    });
+  });
 });
diff --git a/test/util/components/row-changed.vue b/test/util/components/row-changed.vue
deleted file mode 100644
index e3f754002..000000000
--- a/test/util/components/row-changed.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <table>
-    <tbody>
-      <tr v-for="(_, index) of new Array(rowCount)" :key="index" ref="rows">
-        <td>foo</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue';
-
-import { useRowChanged } from '../../../src/composables/row-changed';
-
-const props = defineProps({
-  rowCount: {
-    type: Number,
-    required: true
-  }
-});
-
-const rows = ref([]);
-for (let i = 0; i < props.rowCount; i += 1)
-  useRowChanged(computed(() => rows.value[i]));
-</script>

From 25211e05b096d13aa14c6f917471871fac3619da Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 26 May 2023 16:15:53 -0400
Subject: [PATCH 09/11] Wait a tick before resizing elements in EntityUpdate

---
 src/components/entity/update.vue          | 16 +++++++++++-----
 test/components/entity/update.spec.js     |  1 +
 test/components/entity/update/row.spec.js |  1 +
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/entity/update.vue b/src/components/entity/update.vue
index 11be7454b..b5d8e5304 100644
--- a/src/components/entity/update.vue
+++ b/src/components/entity/update.vue
@@ -59,7 +59,7 @@ export default {
 };
 </script>
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import EntityUpdateRow from './update/row.vue';
 import Modal from '../modal.vue';
@@ -108,12 +108,18 @@ const { resize: resizeLabelCells } = useColumnGrow(labelCellHeader, 1.5);
 const labelRow = ref(null);
 const propertyRows = ref([]);
 const afterShown = () => {
-  resizeLabelCells();
+  labelRow.value.textarea.focus();
 
-  labelRow.value.textarea.resize();
-  for (const row of propertyRows.value) row.textarea.resize();
+  // Resize elements. We wait a tick in case props.entity was changed at the
+  // same time as props.state. If a change to props.entity results in changes to
+  // the DOM, we need those changes to the DOM to be made before resizing
+  // elements based on content in the DOM.
+  nextTick(() => {
+    resizeLabelCells();
 
-  labelRow.value.textarea.focus();
+    labelRow.value.textarea.resize();
+    for (const row of propertyRows.value) row.textarea.resize();
+  });
 };
 
 const noEntity = {
diff --git a/test/components/entity/update.spec.js b/test/components/entity/update.spec.js
index 2ac92d607..f4e422fda 100644
--- a/test/components/entity/update.spec.js
+++ b/test/components/entity/update.spec.js
@@ -83,6 +83,7 @@ describe('EntityUpdate', () => {
     const textareas = modal.findAll('textarea');
     textareas.map(({ element }) => element.style.height).should.eql(['', '']);
     await modal.setProps({ state: true });
+    await modal.vm.$nextTick();
     const heights = textareas.map(({ element }) => element.style.height);
     heights[0].should.not.equal('');
     heights[1].should.not.equal('');
diff --git a/test/components/entity/update/row.spec.js b/test/components/entity/update/row.spec.js
index 01c675aed..1c5609e87 100644
--- a/test/components/entity/update/row.spec.js
+++ b/test/components/entity/update/row.spec.js
@@ -137,6 +137,7 @@ describe('EntityUpdateRow', () => {
       attachTo: document.body
     });
     await modal.vm.$nextTick();
+    await modal.vm.$nextTick();
     const minHeights = modal.findAllComponents(TextareaAutosize)
       .map(textarea => textarea.props().minHeight);
     should.exist(minHeights[0]);

From 7ba5a2a6a7158a81ed0e488c119e514819a29d0d Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 28 May 2023 23:28:07 -0400
Subject: [PATCH 10/11] Rename test/unit/dom.js to *.spec.js so that it is run

---
 test/unit/{dom.js => dom.spec.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename test/unit/{dom.js => dom.spec.js} (100%)

diff --git a/test/unit/dom.js b/test/unit/dom.spec.js
similarity index 100%
rename from test/unit/dom.js
rename to test/unit/dom.spec.js

From 25a47f9445b206b5670bb1b83daa244d9297f6e3 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 28 May 2023 23:28:09 -0400
Subject: [PATCH 11/11] Make more small changes related to entity table actions

---
 src/components/entity/metadata-row.vue      |  6 +++++-
 src/components/submission/metadata-row.vue  |  6 +++++-
 src/components/table-freeze.vue             |  2 +-
 test/components/entity/list.spec.js         |  4 ++--
 test/components/entity/metadata-row.spec.js | 11 +++++++++--
 test/components/entity/table.spec.js        | 22 ++++++++++++++++++++-
 test/unit/dom.spec.js                       | 16 +++++++--------
 7 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/components/entity/metadata-row.vue b/src/components/entity/metadata-row.vue
index 32171a8f9..78c553132 100644
--- a/src/components/entity/metadata-row.vue
+++ b/src/components/entity/metadata-row.vue
@@ -97,7 +97,10 @@ const { entityPath } = useRoutes();
     max-width: 250px;
   }
 
-  .col-content { display: flex; }
+  .col-content {
+    align-items: flex-start;
+    display: flex;
+  }
   .updated-at {
     margin-right: 21px;
 
@@ -113,6 +116,7 @@ const { entityPath } = useRoutes();
   .col-content .icon-angle-right {
     color: $color-accent-primary;
     font-size: 20px;
+    margin-top: -1px;
   }
 }
 </style>
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index d3efc67e4..4cb4fc743 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -141,7 +141,10 @@ export default {
   }
 
   .state-and-actions { min-width: 205px; }
-  .col-content { display: flex; }
+  .col-content {
+    align-items: flex-start;
+    display: flex;
+  }
   .state {
     margin-right: 15px;
 
@@ -167,6 +170,7 @@ export default {
   .col-content .icon-angle-right {
     color: $color-accent-primary;
     font-size: 20px;
+    margin-top: -1px;
   }
 }
 </style>
diff --git a/src/components/table-freeze.vue b/src/components/table-freeze.vue
index 60a4712bd..187eb0ada 100644
--- a/src/components/table-freeze.vue
+++ b/src/components/table-freeze.vue
@@ -112,7 +112,7 @@ following cases in mind:
 watch(() => props.data, removeHoverClass);
 
 const actionClick = (event) => {
-  const action = event.target.closest('.btn-group :is(button, a)');
+  const action = event.target.closest('.btn-group .btn');
   if (action != null) {
     const index = action.closest('tr').rowIndex - 1;
     emit('action', { target: action, data: props.data[index], index });
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 80bfe8b4f..bee22359b 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -121,7 +121,7 @@ describe('EntityList', () => {
       });
     });
 
-    it('does not show the modal during a refresh', () => {
+    it('does not show the modal during a refresh of the table', () => {
       testData.extendedEntities.createPast(1);
       return load('/projects/1/datasets/trees/entities', { root: false })
         .complete()
@@ -170,7 +170,7 @@ describe('EntityList', () => {
               currentVersion: {
                 ...currentVersion,
                 label: 'Updated Entity',
-                data: { height: '3', 'circumference.cm': 4 }
+                data: { height: '3', 'circumference.cm': '4' }
               }
             });
             return testData.standardEntities.get(1);
diff --git a/test/components/entity/metadata-row.spec.js b/test/components/entity/metadata-row.spec.js
index 11e9935e7..f3bb3d672 100644
--- a/test/components/entity/metadata-row.spec.js
+++ b/test/components/entity/metadata-row.spec.js
@@ -51,7 +51,7 @@ describe('EntityMetadataRow', () => {
     mountComponent().getComponent(DateTime).props().iso.should.equal(createdAt);
   });
 
-  describe('latest updated', () => {
+  describe('last updated date', () => {
     it('shows the date', () => {
       const { updatedAt } = testData.extendedEntities.createPast(1)
         .update(-1, { updates: 1 });
@@ -62,7 +62,7 @@ describe('EntityMetadataRow', () => {
       dateTimes[1].props().iso.should.equal(updatedAt);
     });
 
-    it('does not show anything if there has not been an update', () => {
+    it('does not show a date if there has not been an update', () => {
       testData.extendedEntities.createPast(1);
       mountComponent().get('.updated-at').text().should.equal('');
     });
@@ -80,6 +80,13 @@ describe('EntityMetadataRow', () => {
     });
   });
 
+  it('renders the edit button correctly', async () => {
+    testData.extendedEntities.createPast(1).update(-1, { updates: 1000 });
+    const button = mountComponent({ canUpdate: true }).get('.update-button');
+    button.attributes('aria-label').should.equal('Edit (1,000)');
+    await button.should.have.tooltip('Edit (1,000)');
+  });
+
   it('renders the More button correctly', async () => {
     mockLogin();
     testData.extendedDatasets.createPast(1, { name: 'á', entities: 1 });
diff --git a/test/components/entity/table.spec.js b/test/components/entity/table.spec.js
index 3d8c58f85..d8cc0c955 100644
--- a/test/components/entity/table.spec.js
+++ b/test/components/entity/table.spec.js
@@ -6,6 +6,7 @@ import useProject from '../../../src/request-data/project';
 import useEntities from '../../../src/request-data/entities';
 
 import testData from '../../data';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 import { testRequestData } from '../../util/request-data';
@@ -19,7 +20,7 @@ const mountComponent = (props = undefined) => mount(EntityTable, {
     ...props
   },
   container: {
-    router: mockRouter('/projects/1/datasets/trees/entities/e'),
+    router: mockRouter('/projects/1/datasets/trees/entities'),
     requestData: testRequestData([useProject, useEntities], {
       project: testData.extendedProjects.last(),
       odataEntities: testData.entityOData()
@@ -69,4 +70,23 @@ describe('EntityTable', () => {
     const rows = component.findAllComponents(EntityMetadataRow);
     rows.map(row => row.props().rowNumber).should.eql([3, 2, 1]);
   });
+
+  describe('visibility of edit buttons', () => {
+    it('renders the button for a sitewide administrator', () => {
+      mockLogin();
+      testData.extendedEntities.createPast(1);
+      const row = mountComponent().getComponent(EntityMetadataRow);
+      row.props().canUpdate.should.be.true();
+      row.find('.update-button').exists().should.be.true();
+    });
+
+    it('does not render the button for a project viewer', () => {
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'viewer', datasets: 1 });
+      testData.extendedEntities.createPast(1);
+      const row = mountComponent().getComponent(EntityMetadataRow);
+      row.props().canUpdate.should.be.false();
+      row.find('.update-button').exists().should.be.false();
+    });
+  });
 });
diff --git a/test/unit/dom.spec.js b/test/unit/dom.spec.js
index b987746f4..1a1bf5b1f 100644
--- a/test/unit/dom.spec.js
+++ b/test/unit/dom.spec.js
@@ -38,7 +38,7 @@ describe('util/dom', () => {
   });
 
   describe('markRowChanged(), markRowsChanged()', () => {
-    it('toggles data-use-row-changed for a single row', async () => {
+    it('toggles data-mark-rows-changed for a single row', async () => {
       const table = mount({
         template: `<table>
           <tbody>
@@ -48,9 +48,9 @@ describe('util/dom', () => {
       });
       const row = table.get('tr').element;
       markRowChanged(row);
-      row.dataset.useRowChanged.should.equal('true');
+      row.dataset.markRowsChanged.should.equal('true');
       await wait();
-      row.dataset.useRowChanged.should.equal('false');
+      row.dataset.markRowsChanged.should.equal('false');
     });
 
     it('toggles data-mark-rows-changed for multiple rows', async () => {
@@ -62,13 +62,13 @@ describe('util/dom', () => {
           </tbody>
         </table>`
       });
-      const rows = table.findAll('tr').map(wrapper => wrapper.element);
+      const rows = table.findAll('tr').map(row => row.element);
       markRowsChanged(rows);
-      rows[0].dataset.useRowChanged.should.equal('true');
-      rows[1].dataset.useRowChanged.should.equal('true');
+      rows[0].dataset.markRowsChanged.should.equal('true');
+      rows[1].dataset.markRowsChanged.should.equal('true');
       await wait();
-      rows[0].dataset.useRowChanged.should.equal('false');
-      rows[1].dataset.useRowChanged.should.equal('false');
+      rows[0].dataset.markRowsChanged.should.equal('false');
+      rows[1].dataset.markRowsChanged.should.equal('false');
     });
   });
 });