From 66f0b00038433744b5e06619bdfc6d65657ee8f0 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Mon, 18 Mar 2024 18:45:09 -0400
Subject: [PATCH 01/27] Add icons for pagination

---
 icomoon.json               | 109 ++++++++++++++++++++++++++++++++-----
 public/fonts/icomoon.svg   |   3 +
 public/fonts/icomoon.ttf   | Bin 14896 -> 15504 bytes
 public/fonts/icomoon.woff  | Bin 14972 -> 15580 bytes
 src/assets/css/icomoon.css |  17 ++++--
 5 files changed, 111 insertions(+), 18 deletions(-)

diff --git a/icomoon.json b/icomoon.json
index 4b328baea..6b73f8b38 100644
--- a/icomoon.json
+++ b/icomoon.json
@@ -1699,14 +1699,14 @@
       "attrs": [],
       "properties": {
         "name": "info-circle",
-        "id": 89,
+        "id": 61,
         "order": 5,
         "prevSize": 28,
         "code": 61530
       },
-      "setIdx": 1,
-      "setId": 3,
-      "iconIdx": 89
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 61
     },
     {
       "icon": {
@@ -1726,14 +1726,14 @@
       "attrs": [],
       "properties": {
         "name": "exclamation-circle",
-        "id": 101,
+        "id": 62,
         "order": 4,
         "prevSize": 28,
         "code": 61546
       },
-      "setIdx": 1,
-      "setId": 3,
-      "iconIdx": 101
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 62
     },
     {
       "icon": {
@@ -1753,14 +1753,14 @@
       "attrs": [],
       "properties": {
         "name": "random",
-        "id": 110,
+        "id": 63,
         "order": 2,
         "prevSize": 28,
         "code": 61556
       },
-      "setIdx": 1,
-      "setId": 3,
-      "iconIdx": 110
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 63
     },
     {
       "icon": {
@@ -1780,14 +1780,95 @@
       "attrs": [],
       "properties": {
         "name": "external-link-square",
-        "id": 298,
+        "id": 64,
         "order": 6,
         "prevSize": 28,
         "code": 61772
       },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 64
+    },
+    {
+      "icon": {
+        "paths": [
+          "M358.286 786.286c0 4.571-2.286 9.714-5.714 13.143l-28.571 28.571c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-266.286-266.286c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l266.286-266.286c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714l28.571 28.571c3.429 3.429 5.714 8.571 5.714 13.143s-2.286 9.714-5.714 13.143l-224.571 224.571 224.571 224.571c3.429 3.429 5.714 8.571 5.714 13.143zM577.714 786.286c0 4.571-2.286 9.714-5.714 13.143l-28.571 28.571c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-266.286-266.286c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l266.286-266.286c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714l28.571 28.571c3.429 3.429 5.714 8.571 5.714 13.143s-2.286 9.714-5.714 13.143l-224.571 224.571 224.571 224.571c3.429 3.429 5.714 8.571 5.714 13.143z"
+        ],
+        "width": 603.4285714285714,
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "angle-double-left"
+        ],
+        "defaultCode": 61696,
+        "grid": 14
+      },
+      "attrs": [],
+      "properties": {
+        "name": "angle-double-left",
+        "id": 229,
+        "order": 3,
+        "prevSize": 28,
+        "code": 61696
+      },
+      "setIdx": 1,
+      "setId": 3,
+      "iconIdx": 229
+    },
+    {
+      "icon": {
+        "paths": [
+          "M340 548.571c0 4.571-2.286 9.714-5.714 13.143l-266.286 266.286c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-28.571-28.571c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l224.571-224.571-224.571-224.571c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l28.571-28.571c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714l266.286 266.286c3.429 3.429 5.714 8.571 5.714 13.143zM559.429 548.571c0 4.571-2.286 9.714-5.714 13.143l-266.286 266.286c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-28.571-28.571c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l224.571-224.571-224.571-224.571c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l28.571-28.571c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714l266.286 266.286c3.429 3.429 5.714 8.571 5.714 13.143z"
+        ],
+        "width": 566.8571428571428,
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "angle-double-right"
+        ],
+        "defaultCode": 61697,
+        "grid": 14
+      },
+      "attrs": [],
+      "properties": {
+        "name": "angle-double-right",
+        "id": 230,
+        "order": 4,
+        "prevSize": 28,
+        "code": 61697
+      },
+      "setIdx": 1,
+      "setId": 3,
+      "iconIdx": 230
+    },
+    {
+      "icon": {
+        "paths": [
+          "M358.286 310.857c0 4.571-2.286 9.714-5.714 13.143l-224.571 224.571 224.571 224.571c3.429 3.429 5.714 8.571 5.714 13.143s-2.286 9.714-5.714 13.143l-28.571 28.571c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-266.286-266.286c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l266.286-266.286c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714l28.571 28.571c3.429 3.429 5.714 8 5.714 13.143z"
+        ],
+        "width": 384,
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "angle-left"
+        ],
+        "defaultCode": 61700,
+        "grid": 14
+      },
+      "attrs": [],
+      "properties": {
+        "name": "angle-left",
+        "id": 233,
+        "order": 2,
+        "prevSize": 28,
+        "code": 61700
+      },
       "setIdx": 1,
       "setId": 3,
-      "iconIdx": 298
+      "iconIdx": 233
     }
   ],
   "height": 1024,
diff --git a/public/fonts/icomoon.svg b/public/fonts/icomoon.svg
index 26d9e950c..260f94ac1 100644
--- a/public/fonts/icomoon.svg
+++ b/public/fonts/icomoon.svg
@@ -55,6 +55,9 @@
 <glyph unicode="&#xf0e6;" glyph-name="comments-o" d="M402.286 731.428c-178.286 0-329.143-100.571-329.143-219.429 0-62.857 42.286-123.429 115.429-165.714l55.429-32-20-48c12 6.857 24 14.286 35.429 22.286l25.143 17.714 30.286-5.714c28.571-5.143 57.714-8 87.429-8 178.286 0 329.143 100.571 329.143 219.429s-150.857 219.429-329.143 219.429zM402.286 804.571c222.286 0 402.286-130.857 402.286-292.571s-180-292.571-402.286-292.571c-34.857 0-68.571 3.429-100.571 9.143-47.429-33.714-101.143-58.286-158.857-73.143-15.429-4-32-6.857-49.143-9.143h-1.714c-8.571 0-16.571 6.857-18.286 16.571v0c-2.286 10.857 5.143 17.714 11.429 25.143 22.286 25.143 47.429 47.429 66.857 94.857-92.571 53.714-152 136.571-152 229.143 0 161.714 180 292.571 402.286 292.571zM872 136.571c19.429-47.429 44.571-69.714 66.857-94.857 6.286-7.429 13.714-14.286 11.429-25.143v0c-2.286-10.286-10.857-17.714-20-16.571-17.143 2.286-33.714 5.143-49.143 9.143-57.714 14.857-111.429 39.429-158.857 73.143-32-5.714-65.714-9.143-100.571-9.143-103.429 0-198.286 28.571-269.714 75.429 16.571-1.143 33.714-2.286 50.286-2.286 122.857 0 238.857 35.429 327.429 99.429 95.429 69.714 148 164 148 266.286 0 29.714-4.571 58.857-13.143 86.857 96.571-53.143 159.429-137.714 159.429-233.143 0-93.143-59.429-175.429-152-229.143z" />
 <glyph unicode="&#xf0ec;" glyph-name="exchange" d="M1024 274.286v-109.714c0-9.714-8.571-18.286-18.286-18.286h-786.286v-109.714c0-9.714-8-18.286-18.286-18.286-5.143 0-9.714 2.286-13.714 5.714l-182.286 182.857c-3.429 3.429-5.143 8-5.143 12.571 0 5.143 1.714 9.714 5.143 13.143l182.857 182.857c3.429 3.429 8.571 5.143 13.143 5.143 9.714 0 18.286-8 18.286-18.286v-109.714h786.286c9.714 0 18.286-8 18.286-18.286zM1024 585.143c0-4.571-1.714-9.714-5.143-13.143l-182.857-182.857c-3.429-3.429-8.571-5.143-13.143-5.143-9.714 0-18.286 8.571-18.286 18.286v109.714h-786.286c-9.714 0-18.286 8.571-18.286 18.286v109.714c0 9.714 8.571 18.286 18.286 18.286h786.286v109.714c0 10.286 8 18.286 18.286 18.286 5.143 0 9.714-2.286 13.714-5.714l182.286-182.286c3.429-3.429 5.143-8.571 5.143-13.143z" />
 <glyph unicode="&#xf0ee;" glyph-name="cloud-upload" horiz-adv-x="1097" d="M731.429 457.143c0 4.571-1.714 9.714-5.143 13.143l-201.143 201.143c-3.429 3.429-8 5.143-13.143 5.143-4.571 0-9.714-1.714-13.143-5.143l-200.571-200.571c-3.429-4-5.714-8.571-5.714-13.714 0-10.286 8-18.286 18.286-18.286h128v-201.143c0-9.714 8.571-18.286 18.286-18.286h109.714c9.714 0 18.286 8.571 18.286 18.286v201.143h128c10.286 0 18.286 8.571 18.286 18.286zM1097.143 292.571c0-121.143-98.286-219.429-219.429-219.429h-621.714c-141.143 0-256 114.857-256 256 0 99.429 57.714 189.714 147.429 231.429-0.571 8.571-1.143 16.571-1.143 24.571 0 161.714 130.857 292.571 292.571 292.571 118.857 0 225.714-72 270.857-181.714 26.286 22.857 60 35.429 94.857 35.429 80.571 0 146.286-65.714 146.286-146.286 0-28-8-55.429-23.429-78.857 99.429-23.429 169.714-112 169.714-213.714z" />
+<glyph unicode="&#xf100;" glyph-name="angle-double-left" horiz-adv-x="603" d="M358.286 164.571c0-4.571-2.286-9.714-5.714-13.143l-28.571-28.571c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-266.286 266.286c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l266.286 266.286c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l28.571-28.571c3.429-3.429 5.714-8.571 5.714-13.143s-2.286-9.714-5.714-13.143l-224.571-224.571 224.571-224.571c3.429-3.429 5.714-8.571 5.714-13.143zM577.714 164.571c0-4.571-2.286-9.714-5.714-13.143l-28.571-28.571c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-266.286 266.286c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l266.286 266.286c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l28.571-28.571c3.429-3.429 5.714-8.571 5.714-13.143s-2.286-9.714-5.714-13.143l-224.571-224.571 224.571-224.571c3.429-3.429 5.714-8.571 5.714-13.143z" />
+<glyph unicode="&#xf101;" glyph-name="angle-double-right" horiz-adv-x="567" d="M340 402.286c0-4.571-2.286-9.714-5.714-13.143l-266.286-266.286c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-28.571 28.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l224.571 224.571-224.571 224.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l28.571 28.571c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l266.286-266.286c3.429-3.429 5.714-8.571 5.714-13.143zM559.429 402.286c0-4.571-2.286-9.714-5.714-13.143l-266.286-266.286c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-28.571 28.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l224.571 224.571-224.571 224.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l28.571 28.571c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l266.286-266.286c3.429-3.429 5.714-8.571 5.714-13.143z" />
+<glyph unicode="&#xf104;" glyph-name="angle-left" horiz-adv-x="384" d="M358.286 640c0-4.571-2.286-9.714-5.714-13.143l-224.571-224.571 224.571-224.571c3.429-3.429 5.714-8.571 5.714-13.143s-2.286-9.714-5.714-13.143l-28.571-28.571c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-266.286 266.286c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l266.286 266.286c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l28.571-28.571c3.429-3.429 5.714-8 5.714-13.143z" />
 <glyph unicode="&#xf105;" glyph-name="angle-right" horiz-adv-x="347" d="M340 402.286c0-4.571-2.286-9.714-5.714-13.143l-266.286-266.286c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-28.571 28.571c-3.429 3.429-5.714 8-5.714 13.143 0 4.571 2.286 9.714 5.714 13.143l224.571 224.571-224.571 224.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l28.571 28.571c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l266.286-266.286c3.429-3.429 5.714-8.571 5.714-13.143z" />
 <glyph unicode="&#xf106;" glyph-name="angle-up" horiz-adv-x="658" d="M614.286 274.286c0-4.571-2.286-9.714-5.714-13.143l-28.571-28.571c-3.429-3.429-8-5.714-13.143-5.714-4.571 0-9.714 2.286-13.143 5.714l-224.571 224.571-224.571-224.571c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-28.571 28.571c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l266.286 266.286c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l266.286-266.286c3.429-3.429 5.714-8.571 5.714-13.143z" />
 <glyph unicode="&#xf107;" glyph-name="angle-down" horiz-adv-x="658" d="M614.286 530.286c0-4.571-2.286-9.714-5.714-13.143l-266.286-266.286c-3.429-3.429-8.571-5.714-13.143-5.714s-9.714 2.286-13.143 5.714l-266.286 266.286c-3.429 3.429-5.714 8.571-5.714 13.143s2.286 9.714 5.714 13.143l28.571 28.571c3.429 3.429 8 5.714 13.143 5.714 4.571 0 9.714-2.286 13.143-5.714l224.571-224.571 224.571 224.571c3.429 3.429 8.571 5.714 13.143 5.714s9.714-2.286 13.143-5.714l28.571-28.571c3.429-3.429 5.714-8.571 5.714-13.143z" />
diff --git a/public/fonts/icomoon.ttf b/public/fonts/icomoon.ttf
index 00bd096d9d7eb2fcc34b3bc085e52064db8280fb..d3d6f177138f33c4131527713135d140a2ec0165 100644
GIT binary patch
delta 808
zcma)4O=uHA6n-<aX4i!5if)qTuLey`bI>hmnp6p*A{wPwr0GQwU25B4lQtzew1^~l
zsPv#z2SdfPpa(_Cr3Vk86zrjg9D33fOiv05?V*AQjc>CEUbGGjZ@%yS?EBun*QJHo
zG7tc8Km{1|3=U~AWxtX^<}KbEBYC|reShL3014pzI<6NB$nOJS5?X0IH#_#_$G|<r
z$n`zXj_Nlf-_~yd^e>@5kwrqv2u~4jA`WNsrJ2nXzTmiu^+LI+k<)tP&awe;B982%
zygpNaVR(#q6>(@%&yPO2xc4XG&zLY*m@1aAQ9LQLkq|JJdsx5iXdo!SDcA!&{2aMV
z2(OZ923rD`Xx<-JVv45t<t=$bUXowQ^Kw?cCJ#7YIOq8TTCBC``>rwtXw~T%R);WL
z0O(R}3X#d-Lq{Uy80m{AlH?@mjkyn!PU13s9<;sx6GX-s4Kk4lBHh`hj8WpCqJTuu
z1kEO824lgp#qE4&c!=GK51OFaWbBzBvcR7ntbxfvDlsO}=BIY}ZV@;mOQiN&BvEam
zB~s(VqRZ|v#i1yX@IlefZPAGIftg*40)H9x@}to(*P`Jvu1u?ry3APt7O|%BuVI)&
zFs1%|6tuFN5>Y?}=DOC5?nP%{=-u6k>q=@H9Bm#pI?v;tK-=;K{9kFlnrPVRRg|5?
zyb7---)L73tf_W2t<I?{E}yI9GThznMYrKO>sjf@bX2_oZ^L)Vw{Cq1(zVI{W%3Iy
Cu$#O9

delta 363
zcmbPGxuK+<fsuiMft#U$ftkU;KUm+0Ux+^yD6$8L6OwZi3#QHuOJiVQlmX%=>50V!
zKyd*Epkg54NYANE3-zlv0rEK*7>rXgQWI0uQf}>HU@*%8%9~{X1vo-jW&oK>fP9sV
z+>(k{S|F`vCxGUO<m4wiCeATkv5A4f{0>mGCpWR8fFX!sDg%Q>29U3imzbM6(~I*r
zklz8+&{mLNTmrG%3g`$11qNp3+KC6Mxq+rJ<S{rfurlaPc4G{jJd?42k##Z;Q?9H&
zzYf0y-#fnhd|UZe^R@A%@<s7^@-E|T0~*6Pc_CBA<PA*hn>m?psBTu(p3N(>=44Z1
zJipCX25uIhnG6gMBTp;C=*f31%o$xLi&$Qm{K0a)x|(o`@FL+KB0(a%MA<~kM0bfP
ci7gU05-$<|C9zIYM{*N5Xk9m-vpU2G04&m6#sB~S

diff --git a/public/fonts/icomoon.woff b/public/fonts/icomoon.woff
index 9a817a38587f2ecb1bb4085e690246b213ff8f9a..9be8d5d7a5b8cf4ccde1682101b1ac83af37b7b1 100644
GIT binary patch
delta 879
zcma)4O=uHA82x4@>Bgkl2;FSbG--nx(});p)5f1DB2uH&iW))uK|^gDY+_RyFhwN6
zLrV{Wc2Fuk3wjYG7m*%9DR}XaLl1&0WOEY~+Cv4Yw0^Uz;zjGiW9EDFX6Acu=X*h$
zRPUVa>jMJ#B{Xmt<3k`^r|P4<Ev3|8E}aJ;8N_FS@du+HN756>u@s7JKe2rzJ2{Np
zRe+x70-wJ1PiKbGHvtY>P}3_A{<3^4gCueZtal06QkMBlu24ko2A&@jSi#lo*dXc#
z4wV65R-kroQOl)^c=2Hc>!5*)@c4E*H-uaaH%<vWJ-ux`KQ>W7KMTKg3}=jGc{91|
zsNp;h$G{5v`7Aj{2yc*a2CEjHqPdQktIHL2waKe;Lw+s4lxO6Od`<3mzHrU}GjhrD
z6>6=VVedmF3b0wF$5|D<oB{|bO)esnojZ1i$v)B(>y4A6q`OP)Ann90);u_N|Br|a
zGa6tLvq*GfjWR}wgGv@80;14$$~49TC6n9u%J3t0Qy&n8t~2(`A~FA;D|iNO4p19o
zHmcVR`Bn<d$}}1MWs)dOl4&x^k3@V{^dk{IFSYUWk#O(>6Ac@!8h6+0q65F#8aBX-
zkr2PMr<qSjyd`{fn^m+b;sZR_4Cr6^h+KsGzo$dXTbYx@dlWCe(ixd^`Y*h_KYHDj
zSObT_L!<rVx)6wwYxoP3T#480^a>^s$9-kqh`)+nZh5EJm83GIEV+H|f?HEN)j3u3
bobW7pQ{E@7{??jrz_)B(1j)*q1B>JbL*S)w

delta 399
zcmcap`KLsz+~3WOfsp|StZEpz!L$Jb<K&M_ViR?Q>r<0+6AKs^7&CzQ2?$S}8<v)y
zSPT?n_5mv9fMS94oXRwySO^1yaS8~B`qi6cq$UE{W;=jt%s^Nz<<_nYpdgU>0mxSY
zVU7@%85y}H6$}jKB0%%O_>~p|Lr#7&P@SKJ22fEC2+uKHu_-sP0%)<t79d{%jDr}a
z<|XE)0>!QXHMfEAOfSyg1^LA#K>x(R)iDEE%*?fuc^Ip?PXO6@3=Rye40@9%F$PY4
z%2>e2Iyr(VS5lu}hhKv49p8Pvt$eHb+W1oWqWC;{m+`hue!x_`Ih6T^>gGc2*}O7q
zPBtaR^V@u7;AR1u#lY||^0YFHo~&VM&geQh!Scdn8>{u|YQibPi-doO1c~etWfLtE
f-6f_Zwn*GayhQw$#5zeG$xYy(cik*yeTWeNUvXiQ

diff --git a/src/assets/css/icomoon.css b/src/assets/css/icomoon.css
index 238279fdf..f9be7a540 100644
--- a/src/assets/css/icomoon.css
+++ b/src/assets/css/icomoon.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'icomoon';
   src:
-    url('/fonts/icomoon.ttf?chm9v') format('truetype'),
-    url('/fonts/icomoon.woff?chm9v') format('woff'),
-    url('/fonts/icomoon.svg?chm9v#icomoon') format('svg');
+    url('/fonts/icomoon.ttf?z7okxk') format('truetype'),
+    url('/fonts/icomoon.woff?z7okxk') format('woff'),
+    url('/fonts/icomoon.svg?z7okxk#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -251,4 +251,13 @@
 }
 .icon-external-link-square:before {
   content: "\f14c";
-}
\ No newline at end of file
+}
+.icon-angle-double-left:before {
+  content: "\f100";
+}
+.icon-angle-double-right:before {
+  content: "\f101";
+}
+.icon-angle-left:before {
+  content: "\f104";
+}

From 6ddb404b4642d0e9f9138e7606103adfbb0c65bc Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Mon, 18 Mar 2024 18:45:11 -0400
Subject: [PATCH 02/27] Add tables to EntityUpload

---
 src/assets/scss/_mixins.scss                  |   5 +
 src/assets/scss/_variables.scss               |   2 -
 src/assets/scss/app.scss                      |  13 +-
 .../dataset/overview/connection-to-forms.vue  |   2 +-
 src/components/dataset/summary/row.vue        |   2 +-
 src/components/entity/list.vue                |   9 +-
 src/components/entity/upload.vue              | 109 ++++++++-
 src/components/entity/upload/file-select.vue  |   1 +
 src/components/entity/upload/table.vue        | 172 ++++++++++++++
 src/components/file-drop-zone.vue             |   2 +-
 src/components/form/new.vue                   |   2 +-
 src/components/modal.vue                      |  20 +-
 src/components/pagination.vue                 | 214 ++++++++++++++++++
 src/locales/en.json5                          |   9 +-
 src/util/odata.js                             |  24 +-
 test/components/entity/list.spec.js           |  19 +-
 test/components/entity/upload.spec.js         |  39 +++-
 test/components/modal.spec.js                 |   3 +-
 transifex/strings_en.json                     |  55 ++++-
 19 files changed, 633 insertions(+), 69 deletions(-)
 create mode 100644 src/components/entity/upload/table.vue
 create mode 100644 src/components/pagination.vue

diff --git a/src/assets/scss/_mixins.scss b/src/assets/scss/_mixins.scss
index 5f1e59f46..c2d90fc30 100644
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@@ -27,6 +27,11 @@
   li { margin-bottom: 5px; }
 }
 
+@mixin form-control-background {
+  background-color: #eee;
+  .panel-body &, .modal-body & { background-color: #f7f7f7; }
+}
+
 @mixin clearfix {
   &::before, &::after {
     content: " ";
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 0d88bc59a..d9e855336 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -51,8 +51,6 @@ $color-action-background-disabled: #999;
 $color-action-overlay: #0096c1;
 $color-input: #555;
 $color-input-inactive: #777;
-$color-input-background: #eee;
-$color-panel-input-background: #f7f7f7;
 $font-size-btn: 12px;
 $hpadding-btn: 10px;
 $padding-bottom-btn: 5px;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 9e8ff33fe..a145aa120 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -353,7 +353,7 @@ $form-group-padding-bottom: 15px;
 
   $form-control-z-index: 1;
   .form-control {
-    background: $color-input-background;
+    @include form-control-background;
     border: none;
     border-bottom: 1px solid $color-input-inactive;
     border-radius: 0;
@@ -576,6 +576,11 @@ tr.uncommitted-change { background-color: #ffef67; }
   }
 }
 
+.data-loading {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .row-number {
   color: #999;
   font-size: 11px;
@@ -662,12 +667,6 @@ becomes more complicated.
       letter-spacing: -0.02em;
     }
   }
-
-  .panel-body {
-    .form-group .form-control {
-      background-color: $color-panel-input-background;
-    }
-  }
 }
 
 .panel-main {
diff --git a/src/components/dataset/overview/connection-to-forms.vue b/src/components/dataset/overview/connection-to-forms.vue
index c249a0029..15c052b64 100644
--- a/src/components/dataset/overview/connection-to-forms.vue
+++ b/src/components/dataset/overview/connection-to-forms.vue
@@ -30,7 +30,7 @@ except according to the terms contained in the LICENSE file.
           <template #details>
             <span v-for="(property, index) in form.properties" :key="property" class="property-list">
               {{ property }}<template v-if="index < form.properties.length - 1">{{
-                $t('common.punctuations.comma')
+                $t('punctuation.comma')
               }}<sentence-separator/></template>
             </span>
             <span v-if="form.properties.length === 0" class="no-properties">{{ $t('entity.noProperties') }}</span>
diff --git a/src/components/dataset/summary/row.vue b/src/components/dataset/summary/row.vue
index 5486153b1..66a9fb1c6 100644
--- a/src/components/dataset/summary/row.vue
+++ b/src/components/dataset/summary/row.vue
@@ -41,7 +41,7 @@ except according to the terms contained in the LICENSE file.
         <span>{{ property.name }}</span>
         <span v-if="property.isNew" class="icon-plus-circle property-new" v-tooltip.sr-only></span>
         <span class="sr-only">&nbsp;{{ $t('addedByThisDraft') }}</span>
-        <template v-if="index < inFormProperties.length - 1">{{ $t('common.punctuations.comma') }}<sentence-separator/></template>
+        <template v-if="index < inFormProperties.length - 1">{{ $t('punctuation.comma') }}<sentence-separator/></template>
       </span>
       <span v-if="inFormProperties.length === 0" class="no-properties">{{ $t('entity.noProperties') }}</span>
     </div>
diff --git a/src/components/entity/list.vue b/src/components/entity/list.vue
index 2d130d086..5b8860105 100644
--- a/src/components/entity/list.vue
+++ b/src/components/entity/list.vue
@@ -61,6 +61,7 @@ import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { modalData } from '../../util/reactivity';
 import { noop } from '../../util/util';
+import { odataEntityToRest } from '../../util/odata';
 import { useRequestData } from '../../request-data';
 
 export default {
@@ -213,14 +214,8 @@ export default {
       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.show({
-        entity: {
-          uuid: odataEntity.__id,
-          currentVersion: { label: odataEntity.label, version: odataEntity.__system.version, data }
-        }
+        entity: odataEntityToRest(odataEntity, this.dataset.properties)
       });
     },
     hideUpdate() {
diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 4b6426351..ed19f2208 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -11,11 +11,28 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <modal id="entity-upload" :state="state" :hideable="!uploading" size="full"
-    backdrop @hide="$emit('hide')">
+    backdrop @hide="$emit('hide')" @resize="setTableHeight">
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <div :class="{ backdrop: uploading }">
+        <entity-upload-table :ref="setTable(0)"
+          :title="$t('table.server', dataset)" :entities="serverEntities.value"
+          :row-index="serverRow" :page-size="serverPage.size"
+          :awaiting-response="serverEntities.awaitingResponse"
+          :max-height="tableHeight"/>
         <loading :state="serverEntities.initiallyLoading"/>
+        <p v-if="serverEntities.dataExists && serverEntities.value.length === 0"
+          class="empty-table-message">
+          {{ $t('noEntities') }}
+        </p>
+        <pagination v-if="serverPage.count !== 0" v-model:page="serverPage.page"
+          v-model:size="serverPage.size" :count="serverPage.count"
+          :size-options="pageSizeOptions"
+          :spinner="serverEntities.awaitingResponse"/>
+
+        <entity-upload-table :ref="setTable(1)" :title="$t('table.file')"
+          :page-size="defaultPageSize" :max-height="tableHeight"/>
+
         <entity-upload-file-select v-show="file == null" @change="selectFile">
           <div>
             <span>{{ $t('headersNote') }}</span>
@@ -45,18 +62,22 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, reactive, ref, watch } from 'vue';
 
 import EntityUploadDataTemplate from './upload/data-template.vue';
 import EntityUploadFileSelect from './upload/file-select.vue';
 import EntityUploadPopup from './upload/popup.vue';
+import EntityUploadTable from './upload/table.vue';
 import Loading from '../loading.vue';
 import Modal from '../modal.vue';
+import Pagination from '../pagination.vue';
 import SentenceSeparator from '../sentence-separator.vue';
 
+import useEventListener from '../../composables/event-listener';
 import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
+import { odataEntityToRest } from '../../util/odata';
 import { useRequestData } from '../../request-data';
 
 defineOptions({
@@ -67,23 +88,62 @@ const props = defineProps({
 });
 const emit = defineEmits(['hide', 'success']);
 
-const defaultPageSize = 5;
-
 const { dataset, createResource } = useRequestData();
-const serverEntities = createResource('serverEntities');
+
+const pageSizeOptions = [5, 10, 20, 50];
+const defaultPageSize = pageSizeOptions[0];
+
+// SERVER DATA
+const serverEntities = createResource('serverEntities', () => ({
+  transformResponse: ({ data }) => ({
+    value: data.value.map(entity =>
+      odataEntityToRest(entity, dataset.properties).currentVersion),
+    count: data['@odata.count']
+  })
+}));
+/* We set serverPage.count after requesting the first page of serverEntities,
+then keep it fixed. That way, the pagination controls won't change while the
+user is navigating the table, even if another user modifies the entity list.
+Newly created entities will be excluded using the $filter OData query parameter.
+However, one downside of this approach is that if entities are deleted, it is
+possible for the table to have blank pages. */
+const serverPage = reactive({ count: 0, page: -1, size: defaultPageSize });
+let odataFilter;
+// The 0-indexed row number of the first entity of serverEntities.value
+const serverRow = ref(-1);
 watch(() => props.state, (state) => {
   if (state) {
-    if (dataset.entities === 0) return;
-    serverEntities.request({
-      url: apiPaths.odataEntities(dataset.projectId, dataset.name, {
-        $orderby: '__system/createdAt asc',
-        $top: defaultPageSize
-      })
-    }).catch(noop);
+    if (dataset.entities !== 0) {
+      serverPage.page = 0;
+      const now = new Date().toISOString();
+      odataFilter = `__system/createdAt le ${now}`;
+    }
   } else {
     serverEntities.reset();
+    Object.assign(serverPage, { count: 0, page: -1, size: defaultPageSize });
+    serverRow.value = -1;
   }
 });
+watch([() => serverPage.page, () => serverPage.size], () => {
+  const { count, page, size } = serverPage;
+  if (page === -1) return;
+  const first = count === 0;
+  serverEntities.request({
+    url: apiPaths.odataEntities(dataset.projectId, dataset.name, {
+      $filter: odataFilter,
+      $orderby: '__system/createdAt asc',
+      $top: size,
+      $skip: page * size,
+      $count: first
+    }),
+    clear: false
+  })
+    .then(() => {
+      if (first) serverPage.count = serverEntities.count;
+      serverRow.value = page * size;
+    })
+    .catch(noop);
+});
 
 const file = ref(null);
 const selectFile = (value) => { file.value = value; };
@@ -107,6 +167,23 @@ const upload = () => {
     .finally(() => { uploadProgress.value = 0; })
     .catch(noop);
 };
+
+// The max height of a table
+const tableHeight = ref(0);
+const setTableHeight = (heightOfModalBody) => {
+  tableHeight.value = heightOfModalBody / 2;
+};
+
+// Resize the last column of the tables.
+const tables = [null, null];
+const setTable = (i) => (el) => { tables[i] = el; };
+const resizeLastColumn = () => {
+  for (const table of tables) table.resizeLastColumn();
+};
+watch([() => props.state, file], () => { nextTick(resizeLastColumn); });
+useEventListener(window, 'resize', () => {
+  if (props.state) resizeLastColumn();
+});
 </script>
 
 <style lang="scss">
@@ -138,6 +215,14 @@ const upload = () => {
   "en": {
     // This is the title at the top of a pop-up.
     "title": "Import Data from File",
+    "table": {
+      // This is shown above a list of Entities on the server. {name} is the
+      // name of the Entity List.
+      "server": "{name} server data",
+      "file": "Data to import"
+    },
+    // @transifexKey component.EntityList.noEntities
+    "noEntities": "There are no Entities to show.",
     "headersNote": "The first row in your data file must exactly match the table header you see above.",
     "action": {
       "append": "Append data"
diff --git a/src/components/entity/upload/file-select.vue b/src/components/entity/upload/file-select.vue
index c1cc8356f..e804c123b 100644
--- a/src/components/entity/upload/file-select.vue
+++ b/src/components/entity/upload/file-select.vue
@@ -46,6 +46,7 @@ const changeInput = (event) => {
 <style lang="scss">
 #entity-upload-file-select {
   border-radius: 5px;
+  margin-top: 27px;
   padding-bottom: 10px;
   padding-top: 10px;
   text-align: left;
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
new file mode 100644
index 000000000..fdf5f7696
--- /dev/null
+++ b/src/components/entity/upload/table.vue
@@ -0,0 +1,172 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div class="entity-upload-table panel panel-simple">
+    <div class="panel-heading"><h1 class="panel-title">{{ title }}</h1></div>
+    <div class="panel-body">
+      <div ref="container" class="table-container"
+      :style="{ minHeight, maxHeight: px(maxHeight) }">
+      <table class="table">
+        <thead>
+          <tr>
+            <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
+            <th>label</th>
+            <th v-for="{ name } of dataset.properties" :key="name" v-tooltip.text>
+              {{ name }}
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="entities != null && entities.length !== 0"
+          :class="{ 'data-loading': awaitingResponse }">
+          <tr v-for="(entity, entityIndex) of entities" :key="entityIndex">
+            <td class="row-number">
+              {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
+            </td>
+            <td v-tooltip.text>{{ entity.label }}</td>
+            <td v-for="{ name } of dataset.properties" :key="name" v-tooltip.text>
+              {{ entity.data[name] }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, ref, watchEffect } from 'vue';
+
+import { px } from '../../../util/dom';
+import { useRequestData } from '../../../request-data';
+
+defineOptions({
+  name: 'EntityUploadTable'
+});
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  entities: Array,
+  rowIndex: Number,
+  pageSize: {
+    type: Number,
+    required: true
+  },
+  awaitingResponse: Boolean,
+  maxHeight: {
+    type: Number,
+    required: true
+  }
+});
+
+// The component assumes that this data will exist when the component is
+// created.
+const { dataset } = useRequestData();
+
+// Prevent the table container from shrinking on the last page.
+const container = ref(null);
+const minHeight = ref('auto');
+watchEffect(() => {
+  if (props.awaitingResponse) return;
+  if (props.entities != null && props.entities.length !== 0 &&
+    props.entities.length < props.pageSize) {
+    nextTick(() => {
+      const containerHeight = container.value.getBoundingClientRect().height;
+      const firstRow = container.value.querySelector('tbody tr');
+      const rowHeight = firstRow.getBoundingClientRect().height;
+      minHeight.value = px(Math.min(
+        containerHeight + rowHeight * (props.pageSize - props.entities.length),
+        props.maxHeight
+      ));
+    });
+  } else {
+    minHeight.value = 'auto';
+  }
+});
+
+const resizeLastColumn = () => {
+  if (container.value.clientWidth === 0) return;
+
+  // Undo previous resizing.
+  const th = container.value.querySelector('th:last-child');
+  th.style.width = '';
+
+  // Ensure that the column is not obscured by the pop-ups.
+  const popups = container.value.closest('.modal-body')
+    .querySelector('#entity-uploads-popups');
+  if (popups != null) {
+    const popupsRect = popups.getBoundingClientRect();
+    const containerRect = container.value.getBoundingClientRect();
+    if (popupsRect.top > containerRect.bottom) {
+      const overlap = containerRect.right - popupsRect.left;
+      // Adding 10px for some extra space between the column and the pop-up.
+      th.style.width = px(th.clientWidth + overlap + 10);
+    }
+  }
+
+  // If the container fits the table without scrolling horizontally, then the
+  // columns probably have room to grow. In that case, we allocate the extra
+  // width to the last column rather than distributing it evenly among the
+  // columns.
+  if (container.value.scrollWidth === container.value.clientWidth)
+    th.style.width = 'auto';
+};
+defineExpose({ resizeLastColumn });
+</script>
+
+<style lang="scss">
+@import '../../../assets/scss/mixins';
+
+.entity-upload-table {
+  margin-bottom: $margin-bottom-table;
+  &:has(tbody) { margin-bottom: 0; }
+
+  .panel-heading {
+    background-color: #ccc;
+    border-bottom: none;
+  }
+
+  .panel-body { padding: 0; }
+  .table-container { overflow: auto; }
+
+  table {
+    margin-bottom: 0;
+    table-layout: fixed;
+  }
+
+  th, td { @include text-overflow-ellipsis; }
+
+  th {
+    width: 160px;
+    // Wide enough to fit a 6-digit number.
+    &:first-child { width: 54px; }
+  }
+
+  // Provide extra room for the row number in case it is large.
+  td:first-child { padding-left: 0; }
+
+  ~ .pagination { margin-left: $padding-left-table-data; }
+}
+
+.entity-upload-table ~ .entity-upload-table {
+  margin-top: 12px;
+
+  .panel-heading {
+    background-color: $color-action-background;
+    color: #fff;
+  }
+
+  thead { background-color: #c5dfe7; }
+}
+</style>
diff --git a/src/components/file-drop-zone.vue b/src/components/file-drop-zone.vue
index 6379d31b9..380a015e8 100644
--- a/src/components/file-drop-zone.vue
+++ b/src/components/file-drop-zone.vue
@@ -74,8 +74,8 @@ const dragging = computed(() => depth.value !== 0);
 @import '../assets/scss/mixins';
 
 .file-drop-zone.styled {
+  @include form-control-background;
   @include clearfix;
-  background-color: $color-panel-input-background;
   border: 1px dashed $color-subpanel-border;
   padding: $padding-file-drop-zone;
   text-align: center;
diff --git a/src/components/form/new.vue b/src/components/form/new.vue
index 14277c575..0053526b7 100644
--- a/src/components/form/new.vue
+++ b/src/components/form/new.vue
@@ -268,7 +268,7 @@ export default {
 }
 
 #form-new-filename {
-  background-color: $color-input-background;
+  background-color: #eee;
   border-top: 1px solid #ddd;
   font-family: $font-family-monospace;
   margin-bottom: -$padding-file-drop-zone;
diff --git a/src/components/modal.vue b/src/components/modal.vue
index b3015dc26..4d57d3229 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -71,7 +71,7 @@ export default {
     },
     backdrop: Boolean
   },
-  emits: ['shown', 'hide'],
+  emits: ['shown', 'hide', 'resize'],
   setup(props) {
     const alert = inject('alert');
     let oldAlertAt;
@@ -87,6 +87,7 @@ export default {
       // `true` if the modal vertically overflows the viewport, causing it to
       // scroll; `false` if not.
       hasScroll: false,
+      bodyHeight: 0,
       // The modal() method of the Boostrap plugin
       bs: null,
       observer: markRaw(new MutationObserver(() => {
@@ -139,8 +140,13 @@ export default {
       this.hasScroll = this.$el.scrollHeight > this.$el.clientHeight;
     },
     handleHeightChange() {
-      this.bs('handleUpdate');
-      this.checkScroll();
+      const newHeight = this.$refs.body.getBoundingClientRect().height;
+      if (newHeight !== this.bodyHeight) {
+        this.bs('handleUpdate');
+        this.checkScroll();
+        this.bodyHeight = newHeight;
+        this.$emit('resize', newHeight);
+      }
     },
     handleWindowResize() {
       // Most of the time, a window resize won't affect the height of the modal.
@@ -150,6 +156,8 @@ export default {
     show() {
       this.bs('show');
       this.checkScroll();
+      this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
+      this.$emit('resize', this.bodyHeight);
       this.observer.observe(this.$refs.body, {
         subtree: true,
         childList: true,
@@ -241,11 +249,7 @@ export default {
   }
 }
 
-.modal-body {
-  padding: $padding-modal-body;
-
-  .form-group .form-control { background-color: $color-panel-input-background; }
-}
+.modal-body { padding: $padding-modal-body; }
 
 .modal-actions {
   background: $color-subpanel-background;
diff --git a/src/components/pagination.vue b/src/components/pagination.vue
new file mode 100644
index 000000000..59a0506be
--- /dev/null
+++ b/src/components/pagination.vue
@@ -0,0 +1,214 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div class="pagination">
+    <form class="form-inline">
+      <button type="button" class="btn btn-link" :aria-label="$t('action.first')"
+        :aria-disabled="page === 0" v-tooltip.aria-label
+        @click="$emit('update:page', 0)">
+        <span class="icon-angle-double-left"></span>
+      </button>
+      <button type="button" class="btn btn-link" :aria-label="$t('action.previous')"
+        :aria-disabled="page === 0" v-tooltip.aria-label
+        @click="$emit('update:page', page - 1)">
+        <span class="icon-angle-left"></span>
+      </button>
+      <button type="button" class="btn btn-link" :aria-label="$t('action.next')"
+        :aria-disabled="page === lastPage" v-tooltip.aria-label
+        @click="$emit('update:page', page + 1)">
+        <span class="icon-angle-right"></span>
+      </button>
+      <button type="button" class="btn btn-link" :aria-label="$t('action.last')"
+        :aria-disabled="page === lastPage" v-tooltip.aria-label
+        @click="$emit('update:page', lastPage)">
+        <span class="icon-angle-double-right"></span>
+      </button>
+      <i18n-t tag="div" keypath="rows" :plural="sizeOfCurrentPage"
+        class="form-group">
+        <template #range>
+          <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
+          <select v-if="lastPage > 0 && lastPage < 20" v-model="pageModel"
+            class="form-control">
+            <option v-for="[value, text] of options" :key="value" :value="value">
+              {{ text }}
+            </option>
+          </select>
+          <template v-else>{{ pageRange(page) }}</template>
+        </template>
+        <template #count>{{ $n(count, 'default') }}</template>
+      </i18n-t>
+      <label class="form-group">
+        <select v-model="sizeModel" class="form-control">
+          <option v-for="x of sizeOptions" :key="x" :value="x">
+            {{ $n(x, 'noGrouping') }}
+          </option>
+        </select>
+        <span>{{ $t('field.size') }}</span>
+      </label>
+    </form>
+    <spinner :state="spinner" inline/>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+
+import Spinner from './spinner.vue';
+
+const props = defineProps({
+  count: {
+    type: Number,
+    required: true
+  },
+  page: {
+    type: Number,
+    required: true
+  },
+  size: {
+    type: Number,
+    required: true
+  },
+  sizeOptions: {
+    type: Array,
+    required: true
+  },
+  spinner: Boolean
+});
+const emit = defineEmits(['update:page', 'update:size']);
+
+const lastPage = computed(() => Math.ceil(props.count / props.size) - 1);
+
+const pageModel = computed({
+  get: () => props.page,
+  set: (value) => { emit('update:page', value); }
+});
+const { i18n } = inject('container');
+// Returns the formatted range of rows associated with a page.
+const pageRange = (page) => {
+  const start = page * props.size + 1;
+  const end = page < lastPage.value ? start + props.size - 1 : props.count;
+  // `start` may equal `end` on the last page.
+  return start === end
+    ? i18n.n(start, 'noGrouping')
+    : i18n.t('punctuation.range', {
+      start: i18n.n(start, 'noGrouping'),
+      end: i18n.n(end, 'noGrouping')
+    });
+};
+const options = computed(() => {
+  const result = new Array(lastPage.value + 1);
+  for (let i = 0; i <= lastPage.value; i += 1) result[i] = [i, pageRange(i)];
+  return result;
+});
+const sizeOfCurrentPage = computed(() => {
+  if (props.page < lastPage.value) return props.size;
+  const r = props.count % props.size;
+  return r === 0 ? props.size : r;
+});
+
+const sizeModel = computed({
+  get: () => props.size,
+  set: (value) => {
+    emit('update:size', value);
+    emit('update:page', 0);
+  }
+});
+</script>
+
+<i18n lang="json5">
+{
+  "en": {
+    "action": {
+      "first": "First page",
+      "previous": "Previous page",
+      "next": "Next page",
+      "last": "Last page"
+    },
+    // {range} is a range of row numbers, for example, 1-5. {count} is the total
+    // number of rows. The string will be pluralized based on the number of rows
+    // in the range.
+    "rows": "Row {range} of {count} | Rows {range} of {count}",
+    "field": {
+      // This is shown next to a field to select the number of rows to show on
+      // each page.
+      "size": "per page"
+    }
+  }
+}
+</i18n>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+.pagination {
+  // Stretch the buttons in order to expand the click target.
+  align-items: stretch;
+  display: flex;
+
+  .form-inline, .form-control { font-size: 12px; }
+
+  .btn {
+    &, &:hover { color: $color-action-background; }
+
+    // The button will be stretched, so it doesn't need vertical padding.
+    padding: 0 6px;
+    &:nth-child(1) { padding-left: 0; }
+    &:nth-child(4) { padding-right: 0; }
+  }
+
+  [class^="icon-"] {
+    font-size: 15px;
+
+    &:first-child { margin-right: 0; }
+  }
+
+  .form-inline {
+    @include form-control-background;
+    align-items: center;
+    display: flex;
+    border-radius: 5px;
+    margin-bottom: 0;
+    padding: 6px 10px;
+  }
+
+  .form-control {
+    height: auto;
+    padding: 2px;
+    padding-right: 0;
+    vertical-align: baseline;
+  }
+  .form-group .form-control { background-color: #fff; }
+
+  .btn + .form-group {
+    margin-left: 18px;
+
+    .form-control {
+      margin-left: 1px;
+      margin-right: 1px;
+    }
+  }
+
+  .form-group + .form-group {
+    margin-left: 21px;
+
+    .form-control { margin-right: 5px; }
+  }
+
+  .spinner { margin-left: 7px; }
+
+  .table ~ & {
+    margin-top: -$margin-bottom-table;
+
+    .form-inline { margin-left: $padding-left-table-data; }
+  }
+}
+</style>
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index 079b4b449..1f4382a02 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -350,6 +350,12 @@
     "noEntity": "(none)",
     "conflictsCount": "{count} conflict | {count} conflicts"
   },
+  "punctuation": {
+    // @transifexKey common.punctuations.comma
+    "comma": ",",
+    // This is a range of numbers. {start} and {end} are numbers.
+    "range": "{start}-{end}"
+  },
   "common": {
     // This is a title shown above a section of the page.
     "activity": "Activity",
@@ -400,9 +406,6 @@
     },
     "total": "Total",
     "totalSubmissions": "Total Submissions",
-    "punctuations": {
-      "comma": ","
-    },
     // {inform} is the number of Entity Properties defined by the form.
     // {count} is the total number of Properties. The string will be pluralized based on {count}.
     "propertiesCount": "{inform} of {count} property | {inform} of {count} properties",
diff --git a/src/util/odata.js b/src/util/odata.js
index 9707b769a..af98f9c6a 100644
--- a/src/util/odata.js
+++ b/src/util/odata.js
@@ -9,9 +9,31 @@ 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 { pick } from 'ramda';
 
 // Converts a string value or `null` to an OData literal value.
-// eslint-disable-next-line import/prefer-default-export
 export const odataLiteral = (value) => (value != null
   ? `'${value.replaceAll("'", "''")}'`
   : 'null');
+
+// Converts the OData for an entity to an entity in the format of a REST
+// response.
+export const odataEntityToRest = (odata, properties) => {
+  const propertyData = Object.create(null);
+  for (const { name, odataName } of properties) {
+    const value = odata[odataName];
+    if (value != null) propertyData[name] = value;
+  }
+  return {
+    uuid: odata.__id,
+    ...pick(
+      ['conflict', 'updates', 'creatorId', 'createdAt', 'updatedAt'],
+      odata.__system
+    ),
+    currentVersion: {
+      version: odata.__system.version,
+      label: odata.label,
+      data: propertyData
+    }
+  };
+};
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index c45b243e0..89afda1a6 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -161,16 +161,15 @@ describe('EntityList', () => {
         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',
-          version: 1,
-          data: Object.assign(Object.create(null), {
-            height: '1',
-            'circumference.cm': '2'
-          })
-        }
+      const { entity } = component.getComponent(EntityUpdate).props();
+      entity.uuid.should.equal('abc');
+      entity.currentVersion.should.eql({
+        label: 'My Entity',
+        version: 1,
+        data: Object.assign(Object.create(null), {
+          height: '1',
+          'circumference.cm': '2'
+        })
       });
     });
 
diff --git a/test/components/entity/upload.spec.js b/test/components/entity/upload.spec.js
index 36c26574c..8025031d8 100644
--- a/test/components/entity/upload.spec.js
+++ b/test/components/entity/upload.spec.js
@@ -1,9 +1,11 @@
+import { DateTime } from 'luxon';
+
 import EntityFilters from '../../../src/components/entity/filters.vue';
 import EntityUpload from '../../../src/components/entity/upload.vue';
 import EntityUploadPopup from '../../../src/components/entity/upload/popup.vue';
 import OdataLoadingMessage from '../../../src/components/odata-loading-message.vue';
 
-import { queryString } from '../../../src/util/request';
+import { relativeUrl } from '../../util/request';
 
 import testData from '../../data';
 import { mockHttp, load } from '../../util/http';
@@ -24,6 +26,12 @@ const showModal = () => {
       : series));
 };
 const csv = (text = 'label\ndogwood') => new File([text], 'my_data.csv');
+const parseFilterTime = (filter) => {
+  const match = filter.match(/^__system\/createdAt le (.+)/);
+  return match == null
+    ? NaN
+    : DateTime.fromISO(match[1]).toMillis();
+};
 
 describe('EntityUpload', () => {
   it('toggles the modal', () => {
@@ -52,10 +60,15 @@ describe('EntityUpload', () => {
     it('sends the correct request', () => {
       testData.extendedDatasets.createPast(1, { name: 'á', entities: 1 });
       testData.extendedEntities.createPast(1);
-      const qs = queryString({ $orderby: '__system/createdAt asc', $top: 5 });
-      return showModal().testRequests([
-        { url: `/v1/projects/1/datasets/%C3%A1.svc/Entities${qs}` }
-      ]);
+      return showModal().beforeEachResponse((_, { url }) => {
+        url.should.startWith('/v1/projects/1/datasets/%C3%A1.svc/Entities?');
+        const params = relativeUrl(url).searchParams;
+        const millis = parseFilterTime(params.get('$filter'));
+        (Date.now() - millis).should.be.below(2000);
+        params.get('$top').should.equal('5');
+        params.get('$skip').should.equal('0');
+        params.get('$count').should.equal('true');
+      });
     });
 
     it('does not send a request if there are no entities', () => {
@@ -65,17 +78,25 @@ describe('EntityUpload', () => {
 
     it('sends a new request if the modal is hidden, then shown again', () => {
       testData.extendedEntities.createPast(1);
-      const qs = queryString({ $orderby: '__system/createdAt asc', $top: 5 });
+      let firstTime;
       return showModal()
+        .beforeEachResponse((_, { url }) => {
+          const params = relativeUrl(url).searchParams;
+          firstTime = parseFilterTime(params.get('$filter'));
+        })
         .complete()
         .request(async (modal) => {
           await modal.setProps({ state: false });
           await modal.setProps({ state: true });
         })
         .respondWithData(() => testData.entityOData(5, 0, true))
-        .testRequests([
-          { url: `/v1/projects/1/datasets/trees.svc/Entities${qs}` }
-        ]);
+        .beforeEachResponse((_, { url }) => {
+          url.should.startWith('/v1/projects/1/datasets/trees.svc/Entities?');
+          const params = relativeUrl(url).searchParams;
+          const millis = parseFilterTime(params.get('$filter'));
+          millis.should.be.above(firstTime);
+          (Date.now() - millis).should.be.below(2000);
+        });
     });
   });
 
diff --git a/test/components/modal.spec.js b/test/components/modal.spec.js
index cf18b25c9..57c35dd53 100644
--- a/test/components/modal.spec.js
+++ b/test/components/modal.spec.js
@@ -106,7 +106,8 @@ describe('Modal', () => {
     });
   });
 
-  it("updates the modal's position after its body changes", async () => {
+  // TODO
+  it.skip("updates the modal's position after its body changes", async () => {
     const modal = mountComponent({
       slots: {
         body: { template: '<p>Some text</p>' }
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index aa178ea15..ba92263f0 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -764,6 +764,12 @@
       "string": "{count, plural, one {{count} conflict} other {{count} conflicts}}"
     }
   },
+  "punctuation": {
+    "range": {
+      "string": "{start}-{end}",
+      "developer_comment": "This is a range of numbers. {start} and {end} are numbers."
+    }
+  },
   "common": {
     "activity": {
       "string": "Activity",
@@ -865,11 +871,6 @@
     "totalSubmissions": {
       "string": "Total Submissions"
     },
-    "punctuations": {
-      "comma": {
-        "string": ","
-      }
-    },
     "propertiesCount": {
       "string": "{count, plural, one {{inform} of {count} property} other {{inform} of {count} properties}}",
       "developer_comment": "{inform} is the number of Entity Properties defined by the form. {count} is the total number of Properties. The string will be pluralized based on {count}."
@@ -883,6 +884,11 @@
     "versionShort": {
       "string": "v{version}",
       "developer_comment": "A short identifier of an Entity version. \"v\" is short for \"version\". {version} is a version number."
+    },
+    "punctuations": {
+      "comma": {
+        "string": ","
+      }
     }
   },
   "mixin": {
@@ -1948,6 +1954,15 @@
         "string": "Import Data from File",
         "developer_comment": "This is the title at the top of a pop-up."
       },
+      "table": {
+        "server": {
+          "string": "{name} server data",
+          "developer_comment": "This is shown above a list of Entities on the server. {name} is the name of the Entity List."
+        },
+        "file": {
+          "string": "Data to import"
+        }
+      },
       "headersNote": {
         "string": "The first row in your data file must exactly match the table header you see above."
       },
@@ -3309,6 +3324,36 @@
         }
       }
     },
+    "Pagination": {
+      "action": {
+        "first": {
+          "string": "First page",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        },
+        "previous": {
+          "string": "Previous page",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        },
+        "next": {
+          "string": "Next page",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        },
+        "last": {
+          "string": "Last page",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        }
+      },
+      "rows": {
+        "string": "{count, plural, one {Row {range} of {count}} other {Rows {range} of {count}}}",
+        "developer_comment": "{range} is a range of row numbers, for example, 1-5. {count} is the total number of rows. The string will be pluralized based on the number of rows in the range."
+      },
+      "field": {
+        "size": {
+          "string": "per page",
+          "developer_comment": "This is shown next to a field to select the number of rows to show on each page."
+        }
+      }
+    },
     "ProjectArchive": {
       "title": {
         "string": "Archiving Project",

From f9972ba8621bad84b2e347b5014f87bfa72f4d4d Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Tue, 19 Mar 2024 11:02:00 -0400
Subject: [PATCH 03/27] Make changes related to tables in EntityUpload

---
 src/components/entity/upload.vue       |  51 ++++++++--
 src/components/entity/upload/table.vue | 129 +++++++++++++++----------
 src/components/modal.vue               |  39 ++++++--
 src/components/pagination.vue          |  18 ++--
 src/util/util.js                       |  17 ++++
 test/components/modal.spec.js          |  68 ++++++++++---
 6 files changed, 229 insertions(+), 93 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index ed19f2208..cd8e02313 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -11,7 +11,8 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <modal id="entity-upload" :state="state" :hideable="!uploading" size="full"
-    backdrop @hide="$emit('hide')" @resize="setTableHeight">
+    backdrop @hide="$emit('hide')" @resize="setTableHeight"
+    @mutate="resizeColumnUnlessAnimating">
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <div :class="{ backdrop: uploading }">
@@ -51,7 +52,9 @@ except according to the terms contained in the LICENSE file.
           {{ $t('action.cancel') }}
         </button>
       </div>
-      <div v-if="file != null" id="entity-upload-popups">
+      <div v-if="file != null" id="entity-upload-popups"
+        @animationstart="animatePopup(true)"
+        @animationend="animatePopup(false)">
         <!-- TODO. Pass the actual count. -->
         <entity-upload-popup :filename="file.name" :count="1"
           :awaiting-response="uploading" :progress="uploadProgress"
@@ -76,7 +79,7 @@ import SentenceSeparator from '../sentence-separator.vue';
 import useEventListener from '../../composables/event-listener';
 import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
-import { noop } from '../../util/util';
+import { noop, throttle } from '../../util/util';
 import { odataEntityToRest } from '../../util/odata';
 import { useRequestData } from '../../request-data';
 
@@ -109,7 +112,10 @@ However, one downside of this approach is that if entities are deleted, it is
 possible for the table to have blank pages. */
 const serverPage = reactive({ count: 0, page: -1, size: defaultPageSize });
 let odataFilter;
-// The 0-indexed row number of the first entity of serverEntities.value
+// serverRow.value holds the 0-indexed row number of the first entity of
+// serverEntities.value. Usually, that will be the same as the first row of the
+// page (i.e., serverPage.page * serverPage.count). However, the two may differ
+// while a request for entities is in progress.
 const serverRow = ref(-1);
 watch(() => props.state, (state) => {
   if (state) {
@@ -117,10 +123,13 @@ watch(() => props.state, (state) => {
       serverPage.page = 0;
       const now = new Date().toISOString();
       odataFilter = `__system/createdAt le ${now}`;
+    } else {
+      serverEntities.data = { value: [] };
     }
   } else {
     serverEntities.reset();
     Object.assign(serverPage, { count: 0, page: -1, size: defaultPageSize });
+    odataFilter = null;
     serverRow.value = -1;
   }
 });
@@ -170,9 +179,23 @@ const upload = () => {
 
 // The max height of a table
 const tableHeight = ref(0);
-const setTableHeight = (heightOfModalBody) => {
-  tableHeight.value = heightOfModalBody / 2;
-};
+// Use throttle() to prevent a loop such that a change to the height of the
+// table changes the height of the modal, which changes the height of the table,
+// and so on.
+const setTableHeight = throttle(heightOfModalBody => {
+  tableHeight.value = heightOfModalBody === 0
+    ? 0
+    : Math.max(
+      Math.min(heightOfModalBody, document.documentElement.clientHeight) / 2,
+      250
+    );
+});
+
+const popupAnimating = ref(false);
+const animatePopup = (value) => { popupAnimating.value = value; };
+watch(file, (value) => {
+  if (value == null) popupAnimating.value = false;
+});
 
 // Resize the last column of the tables.
 const tables = [null, null];
@@ -180,9 +203,17 @@ const setTable = (i) => (el) => { tables[i] = el; };
 const resizeLastColumn = () => {
   for (const table of tables) table.resizeLastColumn();
 };
-watch([() => props.state, file], () => { nextTick(resizeLastColumn); });
-useEventListener(window, 'resize', () => {
-  if (props.state) resizeLastColumn();
+watch(() => props.state, () => { nextTick(resizeLastColumn); });
+watch(popupAnimating, (value) => { if (!value) resizeLastColumn(); });
+const resizeColumnUnlessAnimating = throttle(() => {
+  if (props.state && !popupAnimating.value) resizeLastColumn();
+});
+useEventListener(window, 'resize', resizeColumnUnlessAnimating);
+
+watch(() => props.state, (state) => {
+  if (!state) {
+    for (const table of tables) table.resetScroll();
+  }
 });
 </script>
 
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index fdf5f7696..bc86b1e32 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -10,41 +10,44 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div class="entity-upload-table panel panel-simple">
-    <div class="panel-heading"><h1 class="panel-title">{{ title }}</h1></div>
+  <div class="entity-upload-table panel panel-simple"
+    :class="{ 'overlaps-popups': overlapsPopups }">
+    <div class="panel-heading">
+      <h1 class="panel-title" v-tooltip.text>{{ title }}</h1>
+    </div>
     <div class="panel-body">
       <div ref="container" class="table-container"
-      :style="{ minHeight, maxHeight: px(maxHeight) }">
-      <table class="table">
-        <thead>
-          <tr>
-            <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
-            <th>label</th>
-            <th v-for="{ name } of dataset.properties" :key="name" v-tooltip.text>
-              {{ name }}
-            </th>
-          </tr>
-        </thead>
-        <tbody v-if="entities != null && entities.length !== 0"
-          :class="{ 'data-loading': awaitingResponse }">
-          <tr v-for="(entity, entityIndex) of entities" :key="entityIndex">
-            <td class="row-number">
-              {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
-            </td>
-            <td v-tooltip.text>{{ entity.label }}</td>
-            <td v-for="{ name } of dataset.properties" :key="name" v-tooltip.text>
-              {{ entity.data[name] }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+        :style="{ minHeight, maxHeight: px(maxHeight) }">
+        <table class="table">
+          <thead>
+            <tr>
+              <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
+              <th>label</th>
+              <th v-for="{ name } of dataset.properties" :key="name">
+                <div v-tooltip.text>{{ name }}</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody v-if="entities != null && entities.length !== 0"
+            :class="{ 'data-loading': awaitingResponse }">
+            <tr v-for="(entity, entityIndex) of entities" :key="entityIndex">
+              <td class="row-number">
+                {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
+              </td>
+              <td><div v-tooltip.text>{{ entity.label }}</div></td>
+              <td v-for="{ name } of dataset.properties" :key="name">
+                <div v-tooltip.text>{{ entity.data[name] }}</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { nextTick, ref, watchEffect } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
 import { px } from '../../../util/dom';
 import { useRequestData } from '../../../request-data';
@@ -58,6 +61,7 @@ const props = defineProps({
     required: true
   },
   entities: Array,
+  // The 0-indexed row number of the first row of the table
   rowIndex: Number,
   pageSize: {
     type: Number,
@@ -77,38 +81,42 @@ const { dataset } = useRequestData();
 // Prevent the table container from shrinking on the last page.
 const container = ref(null);
 const minHeight = ref('auto');
-watchEffect(() => {
-  if (props.awaitingResponse) return;
-  if (props.entities != null && props.entities.length !== 0 &&
-    props.entities.length < props.pageSize) {
+// The page size and height of the last full page that was rendered
+const lastFullPage = { size: 0, height: 0 };
+watch(() => props.entities, () => {
+  if (props.entities == null) {
+    minHeight.value = 'auto';
+    Object.assign(lastFullPage, { size: 0, height: 0 });
+  } else if (props.entities.length === props.pageSize) {
+    minHeight.value = 'auto';
     nextTick(() => {
-      const containerHeight = container.value.getBoundingClientRect().height;
-      const firstRow = container.value.querySelector('tbody tr');
-      const rowHeight = firstRow.getBoundingClientRect().height;
-      minHeight.value = px(Math.min(
-        containerHeight + rowHeight * (props.pageSize - props.entities.length),
-        props.maxHeight
-      ));
+      lastFullPage.size = props.pageSize;
+      lastFullPage.height = container.value.getBoundingClientRect().height;
     });
-  } else {
-    minHeight.value = 'auto';
+  } else if (props.pageSize === lastFullPage.size) {
+    minHeight.value = px(lastFullPage.height);
   }
 });
 
+const overlapsPopups = ref(false);
 const resizeLastColumn = () => {
-  if (container.value.clientWidth === 0) return;
-
   // Undo previous resizing.
   const th = container.value.querySelector('th:last-child');
   th.style.width = '';
 
-  // Ensure that the column is not obscured by the pop-ups.
+  if (container.value.clientWidth === 0) {
+    overlapsPopups.value = false;
+    return;
+  }
+
+  // Check whether the column is obscured by the pop-ups.
   const popups = container.value.closest('.modal-body')
-    .querySelector('#entity-uploads-popups');
+    .querySelector('#entity-upload-popups');
   if (popups != null) {
     const popupsRect = popups.getBoundingClientRect();
     const containerRect = container.value.getBoundingClientRect();
-    if (popupsRect.top > containerRect.bottom) {
+    overlapsPopups.value = popupsRect.top < containerRect.bottom;
+    if (overlapsPopups.value) {
       const overlap = containerRect.right - popupsRect.left;
       // Adding 10px for some extra space between the column and the pop-up.
       th.style.width = px(th.clientWidth + overlap + 10);
@@ -122,17 +130,23 @@ const resizeLastColumn = () => {
   if (container.value.scrollWidth === container.value.clientWidth)
     th.style.width = 'auto';
 };
-defineExpose({ resizeLastColumn });
+
+const resetScroll = () => { container.value.scroll(0, 0); };
+
+defineExpose({ resizeLastColumn, resetScroll });
 </script>
 
 <style lang="scss">
 @import '../../../assets/scss/mixins';
 
 .entity-upload-table {
-  margin-bottom: $margin-bottom-table;
+  // The margin before text, e.g., the .empty-table-message
+  margin-bottom: 10px;
+  // The margin before the Pagination component or the next table
   &:has(tbody) { margin-bottom: 0; }
 
   .panel-heading {
+    @include text-overflow-ellipsis;
     background-color: #ccc;
     border-bottom: none;
   }
@@ -145,10 +159,20 @@ defineExpose({ resizeLastColumn });
     table-layout: fixed;
   }
 
-  th, td { @include text-overflow-ellipsis; }
+  $col-width: 160px;
+  th, td {
+    div { @include text-overflow-ellipsis; }
+  }
+  &.overlaps-popups {
+    th, td {
+      &:last-child div {
+        width: #{$col-width - $padding-left-table-data - $padding-right-table-data};
+      }
+    }
+  }
 
   th {
-    width: 160px;
+    width: $col-width;
     // Wide enough to fit a 6-digit number.
     &:first-child { width: 54px; }
   }
@@ -160,8 +184,6 @@ defineExpose({ resizeLastColumn });
 }
 
 .entity-upload-table ~ .entity-upload-table {
-  margin-top: 12px;
-
   .panel-heading {
     background-color: $color-action-background;
     color: #fff;
@@ -169,4 +191,9 @@ defineExpose({ resizeLastColumn });
 
   thead { background-color: #c5dfe7; }
 }
+
+// The margin after text, e.g., the .empty-table-message
+.entity-upload-table ~ .entity-upload-table { margin-top: 20px; }
+// The margin after the Pagination component
+.pagination ~ .entity-upload-table { margin-top: 12px; }
 </style>
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 4d57d3229..4f3bd0bf3 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -9,8 +9,12 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
+
+<!-- This component should not use v-bind:class on the .modal element. Bootstrap
+may add the `in` class to the element, and the checkScroll() method may add the
+`has-scroll` class. -->
 <template>
-  <div class="modal" :class="{ 'has-scroll': hasScroll }" tabindex="-1"
+  <div class="modal" tabindex="-1"
     :data-backdrop="backdrop ? 'static' : 'false'" data-keyboard="false"
     role="dialog" :aria-labelledby="titleId" @mousedown="modalMousedown"
     @click="modalClick" @keydown.esc="hideIfCan" @focusout="refocus">
@@ -71,7 +75,7 @@ export default {
     },
     backdrop: Boolean
   },
-  emits: ['shown', 'hide', 'resize'],
+  emits: ['shown', 'hide', 'resize', 'mutate'],
   setup(props) {
     const alert = inject('alert');
     let oldAlertAt;
@@ -84,14 +88,14 @@ export default {
     id += 1;
     return {
       id,
-      // `true` if the modal vertically overflows the viewport, causing it to
-      // scroll; `false` if not.
-      hasScroll: false,
       bodyHeight: 0,
       // The modal() method of the Boostrap plugin
       bs: null,
       observer: markRaw(new MutationObserver(() => {
-        if (this.state) this.handleHeightChange();
+        if (this.state) {
+          this.handleHeightChange();
+          this.$emit('mutate');
+        }
       })),
       mousedownOutsideDialog: false
     };
@@ -136,14 +140,29 @@ export default {
     if (this.state) this.hide();
   },
   methods: {
+    // checkScroll() checks whether the modal vertically overflows the viewport,
+    // causing it to scroll. The method toggles the has-scroll class based on
+    // whether the modal overflows.
     checkScroll() {
-      this.hasScroll = this.$el.scrollHeight > this.$el.clientHeight;
+      /* Before checking whether the modal overflows the viewport, we add the
+      has-scroll class. The default assumption is that the modal may
+      overflow. It's necessary to add the class, because if the modal currently
+      doesn't have the class, and its content has just changed, it could be that
+      its content doesn't overflow the viewport, yet does flow underneath
+      .modal-actions. In that case, once we add the class, .modal-actions will
+      be repositioned, and the content will start to overflow the viewport: the
+      modal will be allowed to scroll as it should. */
+      this.$el.classList.add('has-scroll');
+      if (this.$el.scrollHeight === this.$el.clientHeight)
+        this.$el.classList.remove('has-scroll');
     },
     handleHeightChange() {
+      // Call checkScroll() before measuring the height, as the has-scroll class
+      // can affect the height.
+      this.checkScroll();
       const newHeight = this.$refs.body.getBoundingClientRect().height;
       if (newHeight !== this.bodyHeight) {
         this.bs('handleUpdate');
-        this.checkScroll();
         this.bodyHeight = newHeight;
         this.$emit('resize', newHeight);
       }
@@ -170,7 +189,9 @@ export default {
     hide() {
       this.observer.disconnect();
       this.bs('hide');
-      this.hasScroll = false;
+      this.$el.classList.remove('has-scroll');
+      this.bodyHeight = 0;
+      this.$emit('resize', 0);
       window.removeEventListener('resize', this.handleWindowResize);
 
       const selection = getSelection();
diff --git a/src/components/pagination.vue b/src/components/pagination.vue
index 59a0506be..92c76f242 100644
--- a/src/components/pagination.vue
+++ b/src/components/pagination.vue
@@ -49,7 +49,7 @@ except according to the terms contained in the LICENSE file.
       <label class="form-group">
         <select v-model="sizeModel" class="form-control">
           <option v-for="x of sizeOptions" :key="x" :value="x">
-            {{ $n(x, 'noGrouping') }}
+            {{ $n(x, 'default') }}
           </option>
         </select>
         <span>{{ $t('field.size') }}</span>
@@ -98,10 +98,10 @@ const pageRange = (page) => {
   const end = page < lastPage.value ? start + props.size - 1 : props.count;
   // `start` may equal `end` on the last page.
   return start === end
-    ? i18n.n(start, 'noGrouping')
+    ? i18n.n(start, 'default')
     : i18n.t('punctuation.range', {
-      start: i18n.n(start, 'noGrouping'),
-      end: i18n.n(end, 'noGrouping')
+      start: i18n.n(start, 'default'),
+      end: i18n.n(end, 'default')
     });
 };
 const options = computed(() => {
@@ -150,17 +150,17 @@ const sizeModel = computed({
 @import '../assets/scss/mixins';
 
 .pagination {
-  // Stretch the buttons in order to expand the click target.
-  align-items: stretch;
+  align-items: center;
   display: flex;
 
   .form-inline, .form-control { font-size: 12px; }
 
   .btn {
-    &, &:hover { color: $color-action-background; }
+    &:not([aria-disabled="true"]) {
+      &, &:hover { color: $color-action-background; }
+    }
 
-    // The button will be stretched, so it doesn't need vertical padding.
-    padding: 0 6px;
+    padding: 2px 6px;
     &:nth-child(1) { padding-left: 0; }
     &:nth-child(4) { padding-right: 0; }
   }
diff --git a/src/util/util.js b/src/util/util.js
index 8563b6eef..a08898b88 100644
--- a/src/util/util.js
+++ b/src/util/util.js
@@ -14,4 +14,21 @@ export const enketoBasePath = '/-';
 
 export const noop = () => {};
 export const noargs = (f) => () => f();
+
 export const sumUnderThreshold = (list, threshold) => list.reduce((acc, i) => acc + Math.min(i, threshold), 0);
+
+/* throttle() returns a function that manages calls to the provided function
+f(). It prevents f() from being called more than once within a given interval.
+If the throttled function is called within `delay` milliseconds of the last call
+to f(), then it will simply ignore the call and will not call f(). Note that
+this means that it is not guaranteed that every call to the throttled function
+will eventually be followed by a call to f(). */
+export const throttle = (f, delay = 200) => {
+  let timeOfLastCall = -Infinity;
+  return (...args) => {
+    if (Date.now() - timeOfLastCall >= delay) {
+      f(...args);
+      timeOfLastCall = Date.now();
+    }
+  };
+};
diff --git a/test/components/modal.spec.js b/test/components/modal.spec.js
index 57c35dd53..b60c8b735 100644
--- a/test/components/modal.spec.js
+++ b/test/components/modal.spec.js
@@ -74,6 +74,16 @@ describe('Modal', () => {
       await modal.setProps({ state: true });
       modal.should.not.alert();
     });
+
+    it('emits a resize event', () => {
+      const modal = mountComponent({
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        },
+        attachTo: document.body
+      });
+      modal.emitted().resize.should.eql([[40]]);
+    });
   });
 
   describe('after the state prop changes to false', () => {
@@ -104,23 +114,53 @@ describe('Modal', () => {
       await modal.setProps({ state: false });
       modal.should.alert();
     });
+
+    it('emits a resize event', async () => {
+      const modal = mountComponent({
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        },
+        attachTo: document.body
+      });
+      await modal.setProps({ state: false });
+      modal.emitted().resize.should.eql([[40], [0]]);
+    });
   });
 
-  // TODO
-  it.skip("updates the modal's position after its body changes", async () => {
-    const modal = mountComponent({
-      slots: {
-        body: { template: '<p>Some text</p>' }
-      },
-      attachTo: document.body
+  describe('height of the modal changes', () => {
+    it("updates the modal's position", async () => {
+      const modal = mountComponent({
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        },
+        attachTo: document.body
+      });
+      const bs = sinon.fake(modal.vm.bs);
+      modal.setData({ bs });
+
+      const div = modal.get('#div').element;
+      div.setAttribute('style', 'height: 20px;');
+      await nextTick();
+      bs.calledWith('handleUpdate').should.be.true();
+
+      // bs() should not called if the content of the modal changes, but its
+      // height stays the same.
+      div.textContent = 'Some text';
+      await nextTick();
+      bs.callCount.should.equal(1);
+    });
+
+    it('emits a resize event', async () => {
+      const modal = mountComponent({
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        },
+        attachTo: document.body
+      });
+      modal.get('#div').element.setAttribute('style', 'height: 20px;');
+      await nextTick();
+      modal.emitted().resize.should.eql([[40], [50]]);
     });
-    const bs = sinon.fake(modal.vm.bs);
-    modal.setData({ bs });
-    modal.vm.$container.alert.info('Some alert');
-    await modal.vm.$nextTick();
-    modal.get('.modal-body p').element.textContent = 'New text';
-    await modal.vm.$nextTick();
-    bs.args.should.eql([['handleUpdate'], ['handleUpdate']]);
   });
 
   describe('size prop', () => {

From 4e2dcf1035f1684f01a429d04267ede670ffee91 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Tue, 19 Mar 2024 11:02:02 -0400
Subject: [PATCH 04/27] Parse entities CSV file

---
 src/assets/css/bootstrap.css                  |  35 ----
 src/assets/scss/_variables.scss               |   1 +
 src/assets/scss/app.scss                      |  40 ++--
 src/components/entity/conflict-summary.vue    |   2 +-
 src/components/entity/upload.vue              | 181 +++++++++++++++---
 .../entity/upload/data-template.vue           |   9 +-
 src/components/entity/upload/errors.vue       | 139 ++++++++++++++
 src/components/entity/upload/file-select.vue  |  62 ++++--
 src/components/entity/upload/help.vue         |  79 ++++++++
 src/components/file-drop-zone.vue             |   1 +
 src/components/spinner.vue                    |   5 +-
 src/util/csv.js                               |   2 +-
 test/components/entity/upload.spec.js         |  31 +--
 test/util/http/common.js                      |  29 +--
 transifex/strings_en.json                     |  44 ++++-
 15 files changed, 539 insertions(+), 121 deletions(-)
 create mode 100644 src/components/entity/upload/errors.vue
 create mode 100644 src/components/entity/upload/help.vue

diff --git a/src/assets/css/bootstrap.css b/src/assets/css/bootstrap.css
index 73411fb05..df9a02ecd 100644
--- a/src/assets/css/bootstrap.css
+++ b/src/assets/css/bootstrap.css
@@ -591,20 +591,6 @@ dt {
 dd {
   margin-left: 0;
 }
-@media (min-width: 768px) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    clear: left;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
@@ -3947,24 +3933,6 @@ button.list-group-item-danger.active:focus {
 .panel-warning > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #faebcc;
 }
-.panel-danger {
-  border-color: #ebccd1;
-}
-.panel-danger > .panel-heading {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1;
-}
-.panel-danger > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #ebccd1;
-}
-.panel-danger > .panel-heading .badge {
-  color: #f2dede;
-  background-color: #a94442;
-}
-.panel-danger > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #ebccd1;
-}
 .embed-responsive {
   position: relative;
   display: block;
@@ -4620,8 +4588,6 @@ button.close {
 }
 .clearfix:before,
 .clearfix:after,
-.dl-horizontal dd:before,
-.dl-horizontal dd:after,
 .container:before,
 .container:after,
 .container-fluid:before,
@@ -4646,7 +4612,6 @@ button.close {
   content: " ";
 }
 .clearfix:after,
-.dl-horizontal dd:after,
 .container:after,
 .container-fluid:after,
 .row:after,
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index d9e855336..98ec31e4e 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -79,6 +79,7 @@ $padding-top-table-data: 8px;
 
 // Panels
 $box-shadow-panel-main: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+$padding-panel-body: 15px;
 
 // Navs
 $hpadding-nav-tab: 8px;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index a145aa120..1ab250785 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -40,11 +40,9 @@ h1, .h1 {
 
 p { @include text-block; }
 
-dl div {
-  display: flex;
-  flex-direction: column-reverse;
-
+dl > div {
   border-bottom: 1px solid #ddd;
+  display: flex;
   padding-bottom: 10px;
   padding-top: 10px;
 
@@ -55,13 +53,25 @@ dl div {
     padding-bottom: 0;
   }
 }
+dl:not(.dl-horizontal) {
+  > div { flex-direction: column-reverse; }
 
-dt {
-  color: #666;
-  font-weight: normal;
+  dt {
+    color: #666;
+    font-weight: normal;
+  }
+
+  dd { font-size: 16px; }
 }
+.dl-horizontal {
+  dt {
+    @include text-overflow-ellipsis;
+    flex-shrink: 0;
+    width: 160px;
+  }
 
-dd { font-size: 16px; }
+  dd { margin-left: 20px; }
+}
 
 .dfn { border-bottom: 2px dotted #999; }
 
@@ -728,16 +738,23 @@ becomes more complicated.
   }
 }
 
-.panel-hazard {
-  border-color: $color-danger;
+.panel-danger {
+  // This is needed in case a component adds a border radius to the bottom of
+  // .panel-body.
+  background-color: transparent;
 
   &> .panel-heading {
     color: white;
     background-color: $color-danger;
-    border-color: $color-danger;
+    border-bottom-color: $color-danger;
+
+    .btn-danger { border: 1px solid #fff; }
   }
+
   &> .panel-body {
+    background-color: #fff;
     border: 1px solid $color-danger;
+    border-top: none;
 
     &> .panel-footer {
       margin: 0 -15px -15px -15px;
@@ -745,7 +762,6 @@ becomes more complicated.
       color: white;
     }
   }
-  
 }
 
 .panel-dialog {
diff --git a/src/components/entity/conflict-summary.vue b/src/components/entity/conflict-summary.vue
index 73050ef6f..66adee5f6 100644
--- a/src/components/entity/conflict-summary.vue
+++ b/src/components/entity/conflict-summary.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>
-  <div id="entity-conflict-summary" class="panel panel-hazard">
+  <div id="entity-conflict-summary" class="panel panel-danger">
     <div class="panel-heading">
       <span class="icon-exclamation-circle"></span>
       <div>
diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index cd8e02313..72fada030 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -32,19 +32,20 @@ except according to the terms contained in the LICENSE file.
           :spinner="serverEntities.awaitingResponse"/>
 
         <entity-upload-table :ref="setTable(1)" :title="$t('table.file')"
-          :page-size="defaultPageSize" :max-height="tableHeight"/>
+          :entities="csvSlice" :row-index="csvRow" :page-size="csvPage.size"
+          :max-height="tableHeight"/>
+        <pagination v-if="csvEntities != null" v-model:page="csvPage.page"
+          v-model:size="csvPage.size" :count="csvEntities.length"
+          :size-options="pageSizeOptions"/>
 
-        <entity-upload-file-select v-show="file == null" @change="selectFile">
-          <div>
-            <span>{{ $t('headersNote') }}</span>
-            <sentence-separator/>
-            <entity-upload-data-template/>
-          </div>
+        <entity-upload-file-select v-show="csvEntities == null"
+          :parsing="parsing" @change="selectFile">
+          <entity-upload-help :errors="csvErrors"/>
         </entity-upload-file-select>
       </div>
       <div class="modal-actions">
         <button type="button" class="btn btn-primary"
-          :aria-disabled="file == null || uploading" @click="upload">
+          :aria-disabled="csvEntities == null || uploading" @click="upload">
           {{ $t('action.append') }}
         </button>
         <button type="button" class="btn btn-link" :aria-disabled="uploading"
@@ -52,11 +53,10 @@ except according to the terms contained in the LICENSE file.
           {{ $t('action.cancel') }}
         </button>
       </div>
-      <div v-if="file != null" id="entity-upload-popups"
+      <div v-if="csvEntities != null" id="entity-upload-popups"
         @animationstart="animatePopup(true)"
         @animationend="animatePopup(false)">
-        <!-- TODO. Pass the actual count. -->
-        <entity-upload-popup :filename="file.name" :count="1"
+        <entity-upload-popup :filename="fileMetadata.name" :count="csvEntities.length"
           :awaiting-response="uploading" :progress="uploadProgress"
           @clear="clearFile"/>
       </div>
@@ -65,20 +65,21 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { nextTick, reactive, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import EntityUploadDataTemplate from './upload/data-template.vue';
 import EntityUploadFileSelect from './upload/file-select.vue';
+import EntityUploadHelp from './upload/help.vue';
 import EntityUploadPopup from './upload/popup.vue';
 import EntityUploadTable from './upload/table.vue';
 import Loading from '../loading.vue';
 import Modal from '../modal.vue';
 import Pagination from '../pagination.vue';
-import SentenceSeparator from '../sentence-separator.vue';
 
 import useEventListener from '../../composables/event-listener';
 import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
+import { formatCSVRow, parseCSV, parseCSVHeader } from '../../util/csv';
 import { noop, throttle } from '../../util/util';
 import { odataEntityToRest } from '../../util/odata';
 import { useRequestData } from '../../request-data';
@@ -154,10 +155,139 @@ watch([() => serverPage.page, () => serverPage.size], () => {
     .catch(noop);
 });
 
-const file = ref(null);
-const selectFile = (value) => { file.value = value; };
-const clearFile = () => { file.value = null; };
-watch(() => props.state, (state) => { if (!state) clearFile(); });
+// FILE SELECTION AND PARSING
+// Entities from the CSV file
+const csvEntities = shallowRef(null);
+// Metadata about the CSV file
+const fileMetadata = shallowRef(null);
+// If the CSV file is invalid, then either an alert is shown, or
+// EntityUploadErrors is rendered. If an alert is shown, then alertedAt is set,
+// allowing the alert to be hidden later. If EntityUploadErrors is rendered,
+// then csvErrors is set with props for the component.
+let alertedAt;
+const csvErrors = shallowRef(null);
+const parsing = ref(false);
+// Function to abort parsing in progress
+let abortParse = noop;
+// Validates the column header of the CSV file, setting csvErrors if the header
+// is invalid. Returns `true` if the header is valid and `false` if not.
+const validateHeader = ({ columns, errors }, file) => {
+  const details = {};
+  // If there are errors from Papa Parse, just surface those and don't check for
+  // other errors. If there are errors from Papa, then there is something pretty
+  // wrong that may need to be addressed first.
+  if (errors.length !== 0) {
+    details.invalidQuotes = errors.some(({ type }) => type === 'Quotes');
+  } else {
+    const columnSet = new Set();
+    for (const column of columns) {
+      if (/^\s*$/.test(column))
+        details.emptyColumn = true;
+      else if (columnSet.has(column))
+        details.duplicateColumn = true;
+      else
+        columnSet.add(column);
+    }
+    const hasLabel = columnSet.has('label');
+    details.missingLabel = !hasLabel;
+    const columnProperties = dataset.properties.reduce(
+      (count, { name }) => (columnSet.has(name) ? count + 1 : count),
+      0
+    );
+    details.missingProperty = columnProperties !== dataset.properties.length;
+    details.unknownProperty = columnSet.size !== columnProperties +
+      (hasLabel ? 1 : 0);
+  }
+  if (!Object.values(details).includes(true)) return true;
+  csvErrors.value = {
+    filename: file.name,
+    header: formatCSVRow(columns),
+    ...details
+  };
+  return false;
+};
+const { t } = useI18n();
+// noPropertyData is used to minimize the JSON sent to Backend: the JSON won't
+// specify a `data` property for an entity without property data.
+const noPropertyData = { toJSON: () => undefined };
+const rowToEntity = (values, columns) => {
+  const obj = Object.create(null);
+  let hasProperty = false;
+  for (const [i, value] of values.entries()) {
+    if (value === '') continue; // eslint-disable-line no-continue
+    const column = columns[i];
+    obj[column] = value;
+    if (column !== 'label') hasProperty = true;
+  }
+  const { label } = obj;
+  if (label == null || /^\s+$/.test(label))
+    throw new Error(t('alert.blankLabel'));
+  if (hasProperty) {
+    delete obj.label;
+    return { label, data: obj };
+  }
+  obj.data = noPropertyData;
+  return obj;
+};
+const { i18n: globalI18n, alert } = inject('container');
+const parseEntities = async (file, columns, signal) => {
+  const { data } = await parseCSV(globalI18n, file, columns, {
+    transformRow: rowToEntity,
+    signal
+  });
+  if (data.length === 0) throw new Error(t('alert.noCSVData'));
+  csvEntities.value = data;
+  fileMetadata.value = { name: file.name, size: file.size };
+};
+const selectFile = async (file) => {
+  // Hide any previous errors.
+  if (alert.state && alert.at === alertedAt) {
+    alert.blank();
+    alertedAt = null;
+  }
+  csvErrors.value = null;
+
+  parsing.value = true;
+  const abortController = new AbortController();
+  abortParse = () => { abortController.abort(); };
+  const { signal } = abortController;
+  try {
+    const headerResults = await parseCSVHeader(globalI18n, file, signal);
+    if (validateHeader(headerResults, file))
+      await parseEntities(file, headerResults.columns, signal);
+  } catch (error) {
+    if (!signal.aborted) {
+      alert.danger(error.message);
+      alertedAt = alert.at;
+    }
+  } finally {
+    parsing.value = false;
+    abortParse = noop;
+  }
+};
+const clearFile = () => {
+  csvEntities.value = null;
+  fileMetadata.value = null;
+};
+watch(() => props.state, (state) => {
+  if (state) return;
+  abortParse();
+  csvEntities.value = null;
+  fileMetadata.value = null;
+  alertedAt = null;
+  csvErrors.value = null;
+});
+onBeforeUnmount(() => { abortParse(); });
+
+const csvPage = reactive({ page: 0, size: defaultPageSize });
+const csvRow = computed(() =>
+  (csvEntities.value != null ? csvPage.page * csvPage.size : null));
+const csvSlice = computed(() => (csvEntities.value != null
+  ? csvEntities.value.slice(csvRow.value, csvRow.value + csvPage.size)
+  : null));
+watch(csvEntities, (value) => {
+  if (value == null) Object.assign(csvPage, { page: 0, size: defaultPageSize });
+});
 
 const { request, awaitingResponse: uploading } = useRequest();
 const uploadProgress = ref(0);
@@ -165,14 +295,10 @@ const upload = () => {
   request({
     method: 'POST',
     url: apiPaths.entities(dataset.projectId, dataset.name),
-    data: {
-      source: { name: file.value.name, size: file.value.size },
-      entities: []
-    },
+    data: { source: fileMetadata.value, entities: csvEntities.value },
     onUploadProgress: (event) => { uploadProgress.value = event.progress ?? 0; }
   })
-    // TODO. Emit the correct count.
-    .then(() => { emit('success', 1); })
+    .then(() => { emit('success', csvEntities.value.length); })
     .finally(() => { uploadProgress.value = 0; })
     .catch(noop);
 };
@@ -193,7 +319,7 @@ const setTableHeight = throttle(heightOfModalBody => {
 
 const popupAnimating = ref(false);
 const animatePopup = (value) => { popupAnimating.value = value; };
-watch(file, (value) => {
+watch(csvEntities, (value) => {
   if (value == null) popupAnimating.value = false;
 });
 
@@ -254,9 +380,12 @@ watch(() => props.state, (state) => {
     },
     // @transifexKey component.EntityList.noEntities
     "noEntities": "There are no Entities to show.",
-    "headersNote": "The first row in your data file must exactly match the table header you see above.",
     "action": {
       "append": "Append data"
+    },
+    "alert": {
+      "blankLabel": "The label is missing.",
+      "noCSVData": "Your CSV file does not contain any data."
     }
   }
 }
diff --git a/src/components/entity/upload/data-template.vue b/src/components/entity/upload/data-template.vue
index 9c39b21a5..09a3e1039 100644
--- a/src/components/entity/upload/data-template.vue
+++ b/src/components/entity/upload/data-template.vue
@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <i18n-t tag="span" keypath="text.full">
     <template #downloadTemplate>
-      <a class="btn btn-default" :href="href"
+      <a class="btn" :class="error ? 'btn-danger' : 'btn-default'" :href="href"
         :download="`${dataset.name} template.csv`">
         <span class="icon-download"></span>{{ $t('text.downloadTemplate') }}
       </a>
@@ -25,6 +25,13 @@ import { computed } from 'vue';
 
 import { useRequestData } from '../../../request-data';
 
+defineOptions({
+  name: 'EntityUploadDataTemplate'
+});
+defineProps({
+  error: Boolean
+});
+
 // The component assumes that this data will exist when the component is
 // created.
 const { dataset } = useRequestData();
diff --git a/src/components/entity/upload/errors.vue b/src/components/entity/upload/errors.vue
new file mode 100644
index 000000000..64438d7c7
--- /dev/null
+++ b/src/components/entity/upload/errors.vue
@@ -0,0 +1,139 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <dl id="entity-upload-errors" class="dl-horizontal">
+    <div>
+      <dt>{{ $t('expectedHeader') }}</dt>
+      <dd :ref="setHeaderElement(0)" class="csv-header" @scroll="scrollHeader">
+        {{ expectedHeader }}
+      </dd>
+    </div>
+    <div>
+      <dt v-tooltip.text>{{ filename }}</dt>
+      <dd :ref="setHeaderElement(1)" class="csv-header" @scroll="scrollHeader">
+        {{ header }}
+      </dd>
+    </div>
+    <div v-if="hasSuggestion" id="entity-upload-errors-suggestions">
+      <dt>{{ $t('suggestions.title') }}</dt>
+      <dd>
+        <p v-if="invalidQuotes">{{ $t('suggestions.invalidQuotes') }}</p>
+        <i18n-t v-if="missingLabel" tag="p" keypath="suggestions.missingLabel">
+          <template #label>
+            <span id="entity-upload-errors-label">label</span>
+          </template>
+        </i18n-t>
+        <p v-if="unknownProperty">{{ $t('suggestions.unknownProperty') }}</p>
+        <p v-if="duplicateColumn">{{ $t('suggestions.duplicateColumn') }}</p>
+        <p v-if="emptyColumn">{{ $t('suggestions.emptyColumn') }}</p>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+import { useRequestData } from '../../../request-data';
+
+defineOptions({
+  name: 'EntityUploadErrors'
+});
+const props = defineProps({
+  filename: {
+    type: String,
+    required: true
+  },
+  header: {
+    type: String,
+    required: true
+  },
+  invalidQuotes: Boolean,
+  missingLabel: Boolean,
+  missingProperty: Boolean,
+  unknownProperty: Boolean,
+  duplicateColumn: Boolean,
+  emptyColumn: Boolean
+});
+
+// The component assumes that this data will exist when the component is
+// created.
+const { dataset } = useRequestData();
+const expectedHeader = computed(() => {
+  const columns = dataset.properties.map(({ name }) => name);
+  columns.unshift('label');
+  return columns.join(',');
+});
+
+const headerElements = ref([]);
+const setHeaderElement = (i) => (el) => { headerElements.value[i] = el; };
+const scrollHeader = (event) => {
+  const { target } = event;
+  for (const header of headerElements.value) {
+    if (header !== target) header.scroll(target.scrollLeft, 0);
+  }
+};
+
+// There isn't a suggestion for missing properties.
+const hasSuggestion = computed(() =>
+  Object.entries(props).some(([name, value]) =>
+    value === true && name !== 'missingProperty'));
+</script>
+
+<style lang="scss">
+@import '../../../assets/scss/variables';
+
+#entity-upload-errors {
+  margin-bottom: 0;
+
+  div {
+    padding-left: $padding-panel-body;
+    padding-right: $padding-panel-body;
+  }
+
+  .csv-header {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    display: -webkit-box;
+    font-family: $font-family-monospace;
+    overflow: auto hidden;
+    white-space: break-spaces;
+  }
+}
+
+#entity-upload-errors-suggestions {
+  color: $color-danger;
+
+  p:last-child { margin-bottom: 0; }
+}
+
+#entity-upload-errors-label { font-family: $font-family-monospace; }
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "expectedHeader": "Expected header",
+    "suggestions": {
+      // Suggestions to fix an error
+      "title": "Suggestions",
+      "invalidQuotes": "A quoted field is invalid. Check the header row of your CSV file to see if there are any unusual values.",
+      // {label} will have the text "label" and refers to the "label" property.
+      // The name of the property is not translated.
+      "missingLabel": "A {label} property is required. The label indicates the name to use for each Entity throughout Central and elsewhere.",
+      "unknownProperty": "If you want to add properties to this Entity List, you can do so in the Entity Properties section on the Overview page of this Entity List, or you can upload and publish a Form that references the property.",
+      "duplicateColumn": "It looks like two or more columns have the same header. Please make sure column headers are unique.",
+      "emptyColumn": "It looks like you have an empty cell in the header. Please remove any empty columns in your CSV file."
+    }
+  }
+}
+</i18n>
diff --git a/src/components/entity/upload/file-select.vue b/src/components/entity/upload/file-select.vue
index e804c123b..7517012b8 100644
--- a/src/components/entity/upload/file-select.vue
+++ b/src/components/entity/upload/file-select.vue
@@ -10,18 +10,22 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <file-drop-zone id="entity-upload-file-select"
+  <file-drop-zone id="entity-upload-file-select" :disabled="parsing"
     @drop="$emit('change', $event.dataTransfer.files[0])">
-    <i18n-t tag="div" keypath="text.full">
-      <template #chooseOne>
-        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
-        <input v-show="false" ref="input" type="file" accept=".csv"
-          @change="changeInput">
-        <button type="button" class="btn btn-primary" @click="input.click()">
-          <span class="icon-folder-open"></span>{{ $t('text.chooseOne') }}
-        </button>
-      </template>
-    </i18n-t>
+    <div id="entity-upload-file-select-heading">
+      <i18n-t tag="div" keypath="text.full">
+        <template #chooseOne>
+          <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
+          <input v-show="false" ref="input" type="file" accept=".csv"
+            @change="changeInput">
+          <button type="button" class="btn btn-primary" :aria-disabled="parsing"
+            @click="input.click()">
+            <span class="icon-folder-open"></span>{{ $t('text.chooseOne') }}
+          </button>
+        </template>
+      </i18n-t>
+      <div v-show="parsing"><spinner inline/>{{ $t('parsing') }}</div>
+    </div>
     <slot></slot>
   </file-drop-zone>
 </template>
@@ -30,10 +34,14 @@ except according to the terms contained in the LICENSE file.
 import { ref } from 'vue';
 
 import FileDropZone from '../../file-drop-zone.vue';
+import Spinner from '../../spinner.vue';
 
 defineOptions({
   name: 'EntityUploadFileSelect'
 });
+defineProps({
+  parsing: Boolean
+});
 const emit = defineEmits(['change']);
 
 const input = ref(null);
@@ -47,13 +55,32 @@ const changeInput = (event) => {
 #entity-upload-file-select {
   border-radius: 5px;
   margin-top: 27px;
-  padding-bottom: 10px;
-  padding-top: 10px;
   text-align: left;
 
-  > :first-child {
-    font-size: 16px;
-    margin-bottom: 1px;
+  &.disabled { opacity: 1; }
+
+  > :first-child { margin-top: -4px; }
+  > :last-child { margin-bottom: -4px; }
+}
+
+#entity-upload-file-select-heading {
+  font-size: 16px;
+  margin-bottom: 1px;
+  position: relative;
+
+  .disabled > & {
+    > :first-child { opacity: 0.09; }
+
+    > :nth-child(2) {
+      left: 0;
+      position: absolute;
+      top: 1px;
+    }
+  }
+
+  .spinner {
+    margin-right: 6px;
+    top: 1px;
   }
 }
 </style>
@@ -64,7 +91,8 @@ const changeInput = (event) => {
     "text": {
       "full": "Drag a .csv file here, or {chooseOne} to import.",
       "chooseOne": "choose one"
-    }
+    },
+    "parsing": "Reading data…"
   }
 }
 </i18n>
diff --git a/src/components/entity/upload/help.vue b/src/components/entity/upload/help.vue
new file mode 100644
index 000000000..09e7f6436
--- /dev/null
+++ b/src/components/entity/upload/help.vue
@@ -0,0 +1,79 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div id="entity-upload-help"
+    :class="{ panel: hasError, 'panel-danger': hasError }">
+    <div :class="{ 'panel-heading': hasError }">
+      <span>{{ $t('headersNote') }}</span>
+      <sentence-separator/>
+      <entity-upload-data-template :error="hasError"/>
+    </div>
+    <div v-if="hasError" class="panel-body">
+      <entity-upload-errors v-bind="errors"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import EntityUploadDataTemplate from './data-template.vue';
+import EntityUploadErrors from './errors.vue';
+import SentenceSeparator from '../../sentence-separator.vue';
+
+defineOptions({
+  name: 'EntityUploadHelp'
+});
+const props = defineProps({
+  errors: Object
+});
+
+const hasError = computed(() => props.errors != null);
+</script>
+
+<style lang="scss">
+$border-radius: 3px;
+
+#entity-upload-help {
+  margin-top: 1px;
+
+  &.panel-danger {
+    box-shadow: none;
+    margin-bottom: 0;
+    margin-top: 10px;
+  }
+
+  .panel-heading {
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    padding-bottom: 4px;
+    padding-top: 6px;
+  }
+
+  .panel-body {
+    border: none;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    // @transifexKey component.EntityUpload.headersNote
+    "headersNote": "The first row in your data file must exactly match the table header you see above."
+  }
+}
+</i18n>
diff --git a/src/components/file-drop-zone.vue b/src/components/file-drop-zone.vue
index 380a015e8..857b24de6 100644
--- a/src/components/file-drop-zone.vue
+++ b/src/components/file-drop-zone.vue
@@ -77,6 +77,7 @@ const dragging = computed(() => depth.value !== 0);
   @include form-control-background;
   @include clearfix;
   border: 1px dashed $color-subpanel-border;
+  margin-bottom: 20px;
   padding: $padding-file-drop-zone;
   text-align: center;
 
diff --git a/src/components/spinner.vue b/src/components/spinner.vue
index 74ac45018..c24cff46e 100644
--- a/src/components/spinner.vue
+++ b/src/components/spinner.vue
@@ -18,7 +18,10 @@ except according to the terms contained in the LICENSE file.
 <script setup>
 defineProps({
   // Determines whether the spinner is shown or not.
-  state: Boolean,
+  state: {
+    type: Boolean,
+    default: true
+  },
   /* By default, a spinner is positioned in the center of its closest positioned
   ancestor. However, in some cases, a spinner should not be positioned and
   should be rendered inline. A spinner is sometimes rendered inline
diff --git a/src/util/csv.js b/src/util/csv.js
index 9bd88df09..faf279f8a 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -169,7 +169,7 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
         expected: i18n.n(columns.length, 'default'),
         actual: i18n.n(values.length, 'default')
       };
-      throw new Error(i18n.t('util.csv.dataWithoutHeader', counts, columns.length));
+      throw new Error(i18n.tc('util.csv.dataWithoutHeader', columns.length, counts));
     }
 
     data.push(transformRow(values, columns));
diff --git a/test/components/entity/upload.spec.js b/test/components/entity/upload.spec.js
index 8025031d8..01e16f5ad 100644
--- a/test/components/entity/upload.spec.js
+++ b/test/components/entity/upload.spec.js
@@ -11,6 +11,7 @@ import testData from '../../data';
 import { mockHttp, load } from '../../util/http';
 import { mockLogin } from '../../util/session';
 import { setFiles } from '../../util/trigger';
+import { waitUntil } from '../../util/util';
 
 const showModal = () => {
   const dataset = testData.extendedDatasets.last();
@@ -32,6 +33,12 @@ const parseFilterTime = (filter) => {
     ? NaN
     : DateTime.fromISO(match[1]).toMillis();
 };
+const selectFile = async (modal, file = csv()) => {
+  if (modal.element.id !== 'entity-upload')
+    throw new Error('expected EntityUpload');
+  await setFiles(modal.get('input'), [file]);
+  return waitUntil(() => !modal.vm.parsing);
+};
 
 describe('EntityUpload', () => {
   it('toggles the modal', () => {
@@ -41,7 +48,7 @@ describe('EntityUpload', () => {
       .testModalToggles({
         modal: EntityUpload,
         show: '#dataset-entities-upload-button',
-        hide: '.btn-link'
+        hide: '.modal-actions .btn-link'
       });
   });
 
@@ -107,7 +114,7 @@ describe('EntityUpload', () => {
 
     it('shows the pop-up', async () => {
       const modal = await showModal();
-      await setFiles(modal.get('input'), [csv()]);
+      await selectFile(modal);
       const popup = modal.getComponent(EntityUploadPopup);
       popup.props().filename.should.equal('my_data.csv');
       popup.props().count.should.equal(1);
@@ -117,7 +124,7 @@ describe('EntityUpload', () => {
       const modal = await showModal();
       const dropZone = modal.get('#entity-upload-file-select');
       dropZone.should.be.visible();
-      await setFiles(dropZone.get('input'), [csv()]);
+      await selectFile(modal);
       dropZone.should.be.hidden();
     });
 
@@ -125,13 +132,13 @@ describe('EntityUpload', () => {
       const modal = await showModal();
       const button = modal.get('.modal-actions .btn-primary');
       button.attributes('aria-disabled').should.equal('true');
-      await setFiles(modal.get('input'), [csv()]);
+      await selectFile(modal);
       button.attributes('aria-disabled').should.equal('false');
     });
 
     it('resets after the clear button is clicked', async () => {
       const modal = await showModal();
-      await setFiles(modal.get('input'), [csv()]);
+      await selectFile(modal);
       await modal.get('#entity-upload-popup .close').trigger('click');
       modal.findComponent(EntityUploadPopup).exists().should.be.false();
       modal.get('#entity-upload-file-select').should.be.visible();
@@ -141,7 +148,7 @@ describe('EntityUpload', () => {
 
     it('resets after the modal is hidden', async () => {
       const modal = await showModal();
-      await setFiles(modal.get('input'), [csv()]);
+      await selectFile(modal);
       await modal.setProps({ state: false });
       await modal.setProps({ state: true });
       modal.findComponent(EntityUploadPopup).exists().should.be.false();
@@ -156,7 +163,7 @@ describe('EntityUpload', () => {
     return showModal()
       .complete()
       .request(async (modal) => {
-        await setFiles(modal.get('input'), [csv()]);
+        await selectFile(modal);
         return modal.get('.modal-actions .btn-primary').trigger('click');
       })
       .respondWithProblem()
@@ -165,7 +172,7 @@ describe('EntityUpload', () => {
         url: '/v1/projects/1/datasets/%C3%A1/entities',
         data: {
           source: { name: 'my_data.csv', size: 13 },
-          entities: []
+          entities: [{ label: 'dogwood' }]
         }
       }]);
   });
@@ -173,10 +180,10 @@ describe('EntityUpload', () => {
   it('implements some standard button things', () => {
     testData.extendedDatasets.createPast(1);
     return showModal()
-      .afterResponses(modal => setFiles(modal.get('input'), [csv()]))
+      .afterResponses(selectFile)
       .testStandardButton({
         button: '.modal-actions .btn-primary',
-        disabled: ['.btn-link'],
+        disabled: ['.modal-actions .btn-link'],
         modal: true,
         spinner: false
       });
@@ -189,7 +196,7 @@ describe('EntityUpload', () => {
         modal.find('.backdrop').exists().should.be.false();
       })
       .request(async (modal) => {
-        await setFiles(modal.get('input'), [csv()]);
+        await selectFile(modal);
         return modal.get('.modal-actions .btn-primary').trigger('click');
       })
       .beforeAnyResponse(modal => {
@@ -212,7 +219,7 @@ describe('EntityUpload', () => {
         .request(async (component) => {
           await component.get('#dataset-entities-upload-button').trigger('click');
           const modal = component.getComponent(EntityUpload);
-          await setFiles(modal.get('input'), [csv()]);
+          await selectFile(modal);
           return modal.get('.modal-actions .btn-primary').trigger('click');
         })
         .respondWithSuccess()
diff --git a/test/util/http/common.js b/test/util/http/common.js
index 6a5443d70..7bda36f42 100644
--- a/test/util/http/common.js
+++ b/test/util/http/common.js
@@ -1,7 +1,5 @@
 // Common tests for a series of request-response cycles
 
-import { pick } from 'ramda';
-
 import Modal from '../../../src/components/modal.vue';
 import Spinner from '../../../src/components/spinner.vue';
 
@@ -18,24 +16,31 @@ export function testRequests(expectedConfigs) {
       // expectedConfigs[i] == null, the request is intentionally not checked
       // (presumably because it is checked elsewhere).
       if (i < expectedConfigs.length && expectedConfigs[i] != null) {
-        const normalized = pick(['method', 'url', 'headers', 'data'], config);
-        if (normalized.method == null) normalized.method = 'GET';
-        if (normalized.headers == null) normalized.headers = {};
-
         const { extended = false, ...expectedConfig } = expectedConfigs[i];
-        if (expectedConfig.method == null) expectedConfig.method = 'GET';
+        (config.method ?? 'GET').should.equal(expectedConfig.method ?? 'GET');
+        config.url.should.equal(expectedConfig.url);
+
+        try {
+          should(config.data).eql(expectedConfig.data);
+        } catch (error) {
+          try {
+            should(JSON.stringify(config.data)).equal(JSON.stringify(expectedConfig.data));
+          } catch (_) {
+            throw error;
+          }
+        }
+
         if (extended) {
           expectedConfig.headers = {
             ...expectedConfig.headers,
             'X-Extended-Metadata': 'true'
           };
         }
-        const expectedWithAuth = withAuth(expectedConfig, component != null
+        const token = component != null
           ? component.vm.$container.requestData.session.token
-          : null);
-        if (expectedWithAuth.headers == null) expectedWithAuth.headers = {};
-
-        normalized.should.eql(expectedWithAuth);
+          : null;
+        const { headers: expectedHeaders = {} } = withAuth(expectedConfig, token);
+        (config.headers ?? {}).should.eql(expectedHeaders);
       }
     })
     .afterResponses(() => {
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 42680052e..7a2fd5fc5 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -1981,14 +1981,22 @@
           "string": "Data to import"
         }
       },
-      "headersNote": {
-        "string": "The first row in your data file must exactly match the table header you see above."
-      },
       "action": {
         "append": {
           "string": "Append data",
           "developer_comment": "This is the text for an action, for example, the text of a button."
         }
+      },
+      "alert": {
+        "blankLabel": {
+          "string": "The label is missing."
+        },
+        "noCSVData": {
+          "string": "Your CSV file does not contain any data."
+        }
+      },
+      "headersNote": {
+        "string": "The first row in your data file must exactly match the table header you see above."
       }
     },
     "EntityUploadDataTemplate": {
@@ -2003,6 +2011,33 @@
         }
       }
     },
+    "EntityUploadErrors": {
+      "expectedHeader": {
+        "string": "Expected header"
+      },
+      "suggestions": {
+        "title": {
+          "string": "Suggestions",
+          "developer_comment": "Suggestions to fix an error"
+        },
+        "invalidQuotes": {
+          "string": "A quoted field is invalid. Check the header row of your CSV file to see if there are any unusual values."
+        },
+        "missingLabel": {
+          "string": "A {label} property is required. The label indicates the name to use for each Entity throughout Central and elsewhere.",
+          "developer_comment": "{label} will have the text \"label\" and refers to the \"label\" property. The name of the property is not translated."
+        },
+        "unknownProperty": {
+          "string": "If you want to add properties to this Entity List, you can do so in the Entity Properties section on the Overview page of this Entity List, or you can upload and publish a Form that references the property."
+        },
+        "duplicateColumn": {
+          "string": "It looks like two or more columns have the same header. Please make sure column headers are unique."
+        },
+        "emptyColumn": {
+          "string": "It looks like you have an empty cell in the header. Please remove any empty columns in your CSV file."
+        }
+      }
+    },
     "EntityUploadFileSelect": {
       "text": {
         "full": {
@@ -2013,6 +2048,9 @@
           "string": "choose one",
           "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {chooseOne} is in the following text:\n\nDrag a .csv file here, or {chooseOne} to import."
         }
+      },
+      "parsing": {
+        "string": "Reading data…"
       }
     },
     "EntityUploadPopup": {

From 5c93766eb558c113a6389f7d035d3bde3fe2261f Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 27 Mar 2024 00:43:31 -0400
Subject: [PATCH 05/27] Handle empty rows

---
 src/locales/en.json5      |  1 +
 src/util/csv.js           | 27 ++++++++++++++++++++++-----
 transifex/strings_en.json |  3 +++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/locales/en.json5 b/src/locales/en.json5
index f97115a93..6eefa40c6 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -442,6 +442,7 @@
       // This is an error that is shown for a CSV file. The field may be any
       // cell in the file.
       "invalidQuotes": "A quoted field is invalid. Check the row to see if there are any unusual values.",
+      "emptyRow": "The row is empty.",
       // This is an error that is shown for a data file. {expected} and {actual}
       // are each a number of columns. The string will be pluralized based on
       // {expected}.
diff --git a/src/util/csv.js b/src/util/csv.js
index faf279f8a..4523ec800 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -158,12 +158,26 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
   } = options;
 
   const data = [];
+  let emptyRow = -1;
   const warnings = [raggedRowsWarning(columns), largeCellWarning()];
 
-  let rowIndex = 0;
-  const processRow = (values) => {
+  const processRow = (values, index) => {
     // Remove trailing empty cells.
     while (values.length > columns.length && last(values) === '') values.pop();
+
+    // Skip trailing empty rows and do not check them for warnings. Throw for an
+    // empty row that is not trailing.
+    if (values.every(value => value === '')) {
+      if (emptyRow === -1) emptyRow = index;
+      return;
+    }
+    if (emptyRow !== -1) {
+      const error = new Error(i18n.t('util.csv.emptyRow'));
+      error.row = emptyRow;
+      throw error;
+    }
+
+    // Throw if there are too many cells.
     if (values.length > columns.length) {
       const counts = {
         expected: i18n.n(columns.length, 'default'),
@@ -173,10 +187,10 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
     }
 
     data.push(transformRow(values, columns));
-    for (const warning of warnings) warning.pushRow(values, rowIndex, columns);
-    rowIndex += 1;
+    for (const warning of warnings) warning.pushRow(values, index, columns);
   };
 
+  let rowIndex = 0;
   try {
     await promiseParse(i18n, file, signal, {
       chunk: ({ data: chunkData, errors }) => {
@@ -198,7 +212,10 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
           rowIndex += 1;
         }
 
-        for (const values of chunkData) processRow(values);
+        for (const values of chunkData) {
+          processRow(values, rowIndex);
+          rowIndex += 1;
+        }
       },
       worker: true
     });
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 7a2fd5fc5..046239ab7 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -922,6 +922,9 @@
         "string": "A quoted field is invalid. Check the row to see if there are any unusual values.",
         "developer_comment": "This is an error that is shown for a CSV file. The field may be any cell in the file."
       },
+      "emptyRow": {
+        "string": "The row is empty."
+      },
       "dataWithoutHeader": {
         "string": "{count, plural, one {Expected {expected} column, but found {actual}.} other {Expected {expected} columns, but found {actual}.}}",
         "developer_comment": "This is an error that is shown for a data file. {expected} and {actual} are each a number of columns. The string will be pluralized based on {expected}."

From 5c92fddcd0c116e37911224cdc966bd2cfaa5530 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:00 -0400
Subject: [PATCH 06/27] Handle empty file when parsing header

---
 src/util/csv.js       | 2 +-
 test/unit/csv.spec.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/util/csv.js b/src/util/csv.js
index 4523ec800..644dcf250 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -81,7 +81,7 @@ export const parseCSVHeader = async (i18n, file, signal = undefined) => {
   const { data, errors } = await promiseParse(i18n, file, signal, {
     preview: 1
   });
-  const columns = data[0];
+  const columns = data.length !== 0 ? data[0] : [];
   if (errors.length === 0) {
     // Trailing empty cells are not uncommon, so we remove them. But if there
     // was an error, we preserve the empty cells so that the user can be shown
diff --git a/test/unit/csv.spec.js b/test/unit/csv.spec.js
index d571f9d20..c735c8fd0 100644
--- a/test/unit/csv.spec.js
+++ b/test/unit/csv.spec.js
@@ -16,6 +16,11 @@ describe('util/csv', () => {
       columns.should.eql(['a', 'b,c', 'd\ne']);
     });
 
+    it('returns an empty array for an empty file', async () => {
+      const { columns } = await parseCSVHeader(i18n, createCSV(''));
+      columns.should.eql([]);
+    });
+
     it('does not return trailing empty cells', async () => {
       const { columns } = await parseCSVHeader(i18n, createCSV('a,"",'));
       columns.should.eql(['a']);

From d5dd800be54e20618afe5989a4ff4126de2734b5 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:02 -0400
Subject: [PATCH 07/27] Support additional delimiters

---
 src/assets/css/bootstrap.css                 | 15 -----
 src/assets/scss/app.scss                     | 11 +++-
 src/components/entity/upload.vue             | 16 ++---
 src/components/entity/upload/errors.vue      | 26 ++++++--
 src/components/entity/upload/file-select.vue |  2 +-
 src/locales/en.json5                         |  8 +--
 src/util/csv.js                              | 42 ++++++++++---
 test/unit/csv.spec.js                        | 65 ++++++++++++++++++--
 transifex/strings_en.json                    | 17 ++---
 9 files changed, 149 insertions(+), 53 deletions(-)

diff --git a/src/assets/css/bootstrap.css b/src/assets/css/bootstrap.css
index df9a02ecd..345b7c515 100644
--- a/src/assets/css/bootstrap.css
+++ b/src/assets/css/bootstrap.css
@@ -658,13 +658,6 @@ pre,
 samp {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
-code {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #c7254e;
-  background-color: #f9f2f4;
-  border-radius: 4px;
-}
 kbd {
   padding: 2px 4px;
   font-size: 90%;
@@ -694,14 +687,6 @@ pre {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-pre code {
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border-radius: 0;
-}
 .pre-scrollable {
   max-height: 340px;
   overflow-y: scroll;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 1ab250785..904ec3eb2 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -78,8 +78,17 @@ dl:not(.dl-horizontal) {
 pre {
   background-color: $color-subpanel-background;
   border-color: $color-subpanel-border;
+}
+
+code {
+  padding: 2px 4px;
+  font-size: 90%;
 
-  code { white-space: pre; }
+  pre & {
+    padding: 0;
+    font-size: inherit;
+    white-space: pre;
+  }
 }
 
 em:lang(ja) {
diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 72fada030..0194c8004 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -171,7 +171,7 @@ const parsing = ref(false);
 let abortParse = noop;
 // Validates the column header of the CSV file, setting csvErrors if the header
 // is invalid. Returns `true` if the header is valid and `false` if not.
-const validateHeader = ({ columns, errors }, file) => {
+const validateHeader = ({ columns, errors, meta }, file) => {
   const details = {};
   // If there are errors from Papa Parse, just surface those and don't check for
   // other errors. If there are errors from Papa, then there is something pretty
@@ -201,7 +201,8 @@ const validateHeader = ({ columns, errors }, file) => {
   if (!Object.values(details).includes(true)) return true;
   csvErrors.value = {
     filename: file.name,
-    header: formatCSVRow(columns),
+    header: formatCSVRow(columns, { delimiter: meta.delimiter }),
+    delimiter: meta.delimiter,
     ...details
   };
   return false;
@@ -230,12 +231,13 @@ const rowToEntity = (values, columns) => {
   return obj;
 };
 const { i18n: globalI18n, alert } = inject('container');
-const parseEntities = async (file, columns, signal) => {
-  const { data } = await parseCSV(globalI18n, file, columns, {
+const parseEntities = async (file, headerResults, signal) => {
+  const { data } = await parseCSV(globalI18n, file, headerResults.columns, {
+    delimiter: headerResults.meta.delimiter,
     transformRow: rowToEntity,
     signal
   });
-  if (data.length === 0) throw new Error(t('alert.noCSVData'));
+  if (data.length === 0) throw new Error(t('alert.noData'));
   csvEntities.value = data;
   fileMetadata.value = { name: file.name, size: file.size };
 };
@@ -254,7 +256,7 @@ const selectFile = async (file) => {
   try {
     const headerResults = await parseCSVHeader(globalI18n, file, signal);
     if (validateHeader(headerResults, file))
-      await parseEntities(file, headerResults.columns, signal);
+      await parseEntities(file, headerResults, signal);
   } catch (error) {
     if (!signal.aborted) {
       alert.danger(error.message);
@@ -385,7 +387,7 @@ watch(() => props.state, (state) => {
     },
     "alert": {
       "blankLabel": "The label is missing.",
-      "noCSVData": "Your CSV file does not contain any data."
+      "noData": "Your file does not contain any data."
     }
   }
 }
diff --git a/src/components/entity/upload/errors.vue b/src/components/entity/upload/errors.vue
index 64438d7c7..7538c6758 100644
--- a/src/components/entity/upload/errors.vue
+++ b/src/components/entity/upload/errors.vue
@@ -35,6 +35,12 @@ except according to the terms contained in the LICENSE file.
         <p v-if="unknownProperty">{{ $t('suggestions.unknownProperty') }}</p>
         <p v-if="duplicateColumn">{{ $t('suggestions.duplicateColumn') }}</p>
         <p v-if="emptyColumn">{{ $t('suggestions.emptyColumn') }}</p>
+        <i18n-t v-if="delimiter !== ','" tag="p"
+          keypath="suggestions.delimiterNotComma">
+          <template #delimiter>
+            <code>{{ formattedDelimiter }}</code>
+          </template>
+        </i18n-t>
       </dd>
     </div>
   </dl>
@@ -43,6 +49,7 @@ except according to the terms contained in the LICENSE file.
 <script setup>
 import { computed, ref } from 'vue';
 
+import { formatCSVDelimiter, formatCSVRow } from '../../../util/csv';
 import { useRequestData } from '../../../request-data';
 
 defineOptions({
@@ -57,6 +64,11 @@ const props = defineProps({
     type: String,
     required: true
   },
+  delimiter: {
+    type: String,
+    required: true
+  },
+  // Props for specific errors
   invalidQuotes: Boolean,
   missingLabel: Boolean,
   missingProperty: Boolean,
@@ -71,7 +83,7 @@ const { dataset } = useRequestData();
 const expectedHeader = computed(() => {
   const columns = dataset.properties.map(({ name }) => name);
   columns.unshift('label');
-  return columns.join(',');
+  return formatCSVRow(columns, { delimiter: props.delimiter });
 });
 
 const headerElements = ref([]);
@@ -83,10 +95,11 @@ const scrollHeader = (event) => {
   }
 };
 
-// There isn't a suggestion for missing properties.
-const hasSuggestion = computed(() =>
+const hasSuggestion = computed(() => props.delimiter !== ',' ||
   Object.entries(props).some(([name, value]) =>
+    // There isn't a suggestion for missing properties.
     value === true && name !== 'missingProperty'));
+const formattedDelimiter = computed(() => formatCSVDelimiter(props.delimiter));
 </script>
 
 <style lang="scss">
@@ -114,6 +127,8 @@ const hasSuggestion = computed(() =>
   color: $color-danger;
 
   p:last-child { margin-bottom: 0; }
+
+  code { border: 1px solid $color-danger; }
 }
 
 #entity-upload-errors-label { font-family: $font-family-monospace; }
@@ -126,13 +141,14 @@ const hasSuggestion = computed(() =>
     "suggestions": {
       // Suggestions to fix an error
       "title": "Suggestions",
-      "invalidQuotes": "A quoted field is invalid. Check the header row of your CSV file to see if there are any unusual values.",
+      "invalidQuotes": "A quoted field is invalid. Check the header row of your file to see if there are any unusual values.",
       // {label} will have the text "label" and refers to the "label" property.
       // The name of the property is not translated.
       "missingLabel": "A {label} property is required. The label indicates the name to use for each Entity throughout Central and elsewhere.",
       "unknownProperty": "If you want to add properties to this Entity List, you can do so in the Entity Properties section on the Overview page of this Entity List, or you can upload and publish a Form that references the property.",
       "duplicateColumn": "It looks like two or more columns have the same header. Please make sure column headers are unique.",
-      "emptyColumn": "It looks like you have an empty cell in the header. Please remove any empty columns in your CSV file."
+      "emptyColumn": "It looks like you have an empty cell in the header. Please remove any empty columns in your file.",
+      "delimiterNotComma": "It’s not clear what delimiter separates cells in a row from each other in your file. Based on analysis, {delimiter} was used as the best guess."
     }
   }
 }
diff --git a/src/components/entity/upload/file-select.vue b/src/components/entity/upload/file-select.vue
index 7517012b8..b761caaee 100644
--- a/src/components/entity/upload/file-select.vue
+++ b/src/components/entity/upload/file-select.vue
@@ -16,7 +16,7 @@ except according to the terms contained in the LICENSE file.
       <i18n-t tag="div" keypath="text.full">
         <template #chooseOne>
           <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
-          <input v-show="false" ref="input" type="file" accept=".csv"
+          <input v-show="false" ref="input" type="file" accept=".csv,.tsv"
             @change="changeInput">
           <button type="button" class="btn btn-primary" :aria-disabled="parsing"
             @click="input.click()">
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index 6eefa40c6..3c50aa624 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -436,11 +436,11 @@
   "util": {
     "csv": {
       // {message} is a description of the problem.
-      "readError": "There was a problem reading your CSV file: {message}",
+      "readError": "There was a problem reading your file: {message}",
       // {row} is a row number. {message} is a description of the problem.
-      "rowError": "There is a problem on row {row} of the CSV file: {message}",
-      // This is an error that is shown for a CSV file. The field may be any
-      // cell in the file.
+      "rowError": "There is a problem on row {row} of the file: {message}",
+      // This is an error that is shown for a spreadsheet. The field may be any
+      // cell in the spreadsheet.
       "invalidQuotes": "A quoted field is invalid. Check the row to see if there are any unusual values.",
       "emptyRow": "The row is empty.",
       // This is an error that is shown for a data file. {expected} and {actual}
diff --git a/src/util/csv.js b/src/util/csv.js
index 644dcf250..7d7e626df 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -34,7 +34,6 @@ const promiseParse = (i18n, file, signal = mockSignal(), papaOptions = {}) => {
     if (signal.aborted) return;
     let hasError = false;
     const fullOptions = {
-      delimiter: ',',
       // Called for a FileReader error.
       error: (error) => {
         if (signal.aborted) return;
@@ -78,17 +77,24 @@ const promiseParse = (i18n, file, signal = mockSignal(), papaOptions = {}) => {
 
 // `signal` is an AbortSignal.
 export const parseCSVHeader = async (i18n, file, signal = undefined) => {
-  const { data, errors } = await promiseParse(i18n, file, signal, {
+  const { data, errors, meta } = await promiseParse(i18n, file, signal, {
+    delimitersToGuess: [',', ';', '\t', '|'],
     preview: 1
   });
   const columns = data.length !== 0 ? data[0] : [];
-  if (errors.length === 0) {
+  const unhandledErrors = errors.filter(error =>
+    error.code !== 'UndetectableDelimiter');
+  if (unhandledErrors.length === 0) {
     // Trailing empty cells are not uncommon, so we remove them. But if there
     // was an error, we preserve the empty cells so that the user can be shown
     // something closer to the exact header as it is.
     while (columns.length !== 0 && last(columns) === '') columns.pop();
   }
-  return { columns, errors };
+  return {
+    columns,
+    errors: unhandledErrors,
+    meta: { delimiter: meta.delimiter }
+  };
 };
 
 // Each of these warning functions returns an object to check a CSV file for a
@@ -114,7 +120,7 @@ const raggedRowsWarning = (columns) => {
     get details() { return ragged; }
   };
 };
-const largeCellWarning = () => {
+const largeCellWarning = (delimiter) => {
   // The size and 0-indexed row number of the largest cell containing a comma or
   // newline
   const largestCell = { size: 0, row: -1 };
@@ -124,7 +130,8 @@ const largeCellWarning = () => {
     let rowSize = 0;
     for (const value of values) {
       rowSize += value.length;
-      if (value.length > largestCell.size && value.search(/[,\n\r]/) !== -1) {
+      if (value.length > largestCell.size &&
+        (value.includes(delimiter) || value.search(/[\n\r]/) !== -1)) {
         largestCell.size = value.length;
         largestCell.row = i;
       }
@@ -150,6 +157,7 @@ const largeCellWarning = () => {
 // `columns` is the CSV header as an array.
 export const parseCSV = async (i18n, file, columns, options = {}) => {
   const {
+    delimiter = ',',
     // Function to validate and transform the data of a row. If the function
     // throws an error, it will result in a rejected promise.
     transformRow = identity,
@@ -159,7 +167,7 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
 
   const data = [];
   let emptyRow = -1;
-  const warnings = [raggedRowsWarning(columns), largeCellWarning()];
+  const warnings = [raggedRowsWarning(columns), largeCellWarning(delimiter)];
 
   const processRow = (values, index) => {
     // Remove trailing empty cells.
@@ -193,6 +201,7 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
   let rowIndex = 0;
   try {
     await promiseParse(i18n, file, signal, {
+      delimiter,
       chunk: ({ data: chunkData, errors }) => {
         if (errors.length !== 0) {
           const error = errors[0];
@@ -237,6 +246,9 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
   return { data, warnings: warningDetails };
 };
 
+export const formatCSVDelimiter = (delimiter) =>
+  (delimiter === '\t' ? '⇥' : delimiter);
+
 // truncateRow() truncates an array of strings, returning a new array whose
 // number of elements and combined size do not exceed the maximum.
 const truncateRow = (values, { maxLength = 10000, maxSize = 10000 }) => {
@@ -261,5 +273,17 @@ const truncateRow = (values, { maxLength = 10000, maxSize = 10000 }) => {
 
 // formatCSVRow() formats an array of strings as a CSV row. It is intended for
 // display purposes only: the data may be truncated.
-export const formatCSVRow = (values, options = {}) =>
-  Papa.unparse([truncateRow(values, options)]);
+export const formatCSVRow = (values, options = {}) => {
+  const { maxLength, maxSize, ...papaOptions } = options;
+  const truncated = truncateRow(values, { maxLength, maxSize });
+
+  if (papaOptions.delimiter == null) papaOptions.delimiter = ',';
+  const formattedDelimiter = formatCSVDelimiter(papaOptions.delimiter);
+  if (formattedDelimiter !== papaOptions.delimiter) {
+    for (const [i, value] of truncated.entries())
+      truncated[i] = value.replaceAll(papaOptions.delimiter, formattedDelimiter);
+    papaOptions.delimiter = formattedDelimiter;
+  }
+
+  return Papa.unparse([truncated], papaOptions);
+};
diff --git a/test/unit/csv.spec.js b/test/unit/csv.spec.js
index c735c8fd0..1ac0cd182 100644
--- a/test/unit/csv.spec.js
+++ b/test/unit/csv.spec.js
@@ -2,7 +2,7 @@ import sinon from 'sinon';
 import { identity } from 'ramda';
 
 import createCentralI18n from '../../src/i18n';
-import { formatCSVRow, parseCSV, parseCSVHeader } from '../../src/util/csv';
+import { formatCSVDelimiter, formatCSVRow, parseCSV, parseCSVHeader } from '../../src/util/csv';
 import { noop } from '../../src/util/util';
 
 const i18n = createCentralI18n().global;
@@ -26,6 +26,28 @@ describe('util/csv', () => {
       columns.should.eql(['a']);
     });
 
+    describe('delimiter', () => {
+      it('returns the delimiter', async () => {
+        const { meta } = await parseCSVHeader(i18n, createCSV('a,b\n1,2'));
+        meta.delimiter.should.equal(',');
+      });
+
+      it('auto-detects a semicolon delimiter', async () => {
+        const { meta } = await parseCSVHeader(i18n, createCSV('a;b\n1;2'));
+        meta.delimiter.should.equal(';');
+      });
+
+      it('defaults to a comma if the delimiter is undectectable', async () => {
+        const { meta } = await parseCSVHeader(i18n, createCSV('a\n1'));
+        meta.delimiter.should.equal(',');
+      });
+
+      it('does not return an error for an undetectable delimiter', async () => {
+        const { errors } = await parseCSVHeader(i18n, createCSV('a\n1'));
+        errors.length.should.equal(0);
+      });
+    });
+
     describe('error', () => {
       it('returns an error for a missing quote', async () => {
         const { errors } = await parseCSVHeader(i18n, createCSV('"a\n1'));
@@ -83,7 +105,7 @@ describe('util/csv', () => {
     describe('quote error', () => {
       it('returns a rejected promise', () => {
         const promise = parseCSV(i18n, createCSV('a\n"1"2"'), ['a']);
-        return promise.should.be.rejectedWith('There is a problem on row 2 of the CSV file: A quoted field is invalid. Check the row to see if there are any unusual values.');
+        return promise.should.be.rejectedWith('There is a problem on row 2 of the file: A quoted field is invalid. Check the row to see if there are any unusual values.');
       });
 
       it('indicates correct row number if error is not in first row', () => {
@@ -106,7 +128,7 @@ describe('util/csv', () => {
 
       it('returns a rejected promise if there are too many cells', async () => {
         const promise = parseCSV(i18n, createCSV('a\n1,2'), ['a']);
-        return promise.should.be.rejectedWith('There is a problem on row 2 of the CSV file: Expected 1 column, but found 2.');
+        return promise.should.be.rejectedWith('There is a problem on row 2 of the file: Expected 1 column, but found 2.');
       });
 
       it('does not reject for an empty cell after last column', async () => {
@@ -121,6 +143,13 @@ describe('util/csv', () => {
       });
     });
 
+    it('uses the specified delimiter', async () => {
+      const { data } = await parseCSV(i18n, createCSV('a;b\n1;2'), ['a', 'b'], {
+        delimiter: ';'
+      });
+      data.should.eql([['1', '2']]);
+    });
+
     describe('transformRow option', () => {
       it('transforms the data', async () => {
         const csv = createCSV('a,b\n1,2\n3,4');
@@ -194,13 +223,21 @@ describe('util/csv', () => {
           warnings.should.eql({ count: 1, largeCell: 2 });
         });
 
+        it('returns row of a relatively large cell that contains specified delimiter', async () => {
+          const csv = createCSV('a\n1\n"2;3"');
+          const { warnings } = await parseCSV(i18n, csv, ['a'], {
+            delimiter: ';'
+          });
+          warnings.should.eql({ count: 1, largeCell: 2 });
+        });
+
         it('returns the row of a relatively large cell that contains a newline', async () => {
           const csv = createCSV('a\n1\n"2\n3"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
           warnings.should.eql({ count: 1, largeCell: 2 });
         });
 
-        it('ignores cells that do not contain a comma or newline', async () => {
+        it('ignores cells that do not contain a delimiter or newline', async () => {
           const csv = createCSV('a\n1\n"2.3"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
           warnings.should.eql({ count: 0 });
@@ -215,6 +252,16 @@ describe('util/csv', () => {
     });
   });
 
+  describe('formatCSVDelimiter()', () => {
+    it('returns ⇥ for tab', () => {
+      formatCSVDelimiter('\t').should.equal('⇥');
+    });
+
+    it('returns a comma as-is', () => {
+      formatCSVDelimiter(',').should.equal(',');
+    });
+  });
+
   describe('formatCSVRow()', () => {
     it('returns a CSV string', () => {
       formatCSVRow(['1', '2']).should.eql('1,2');
@@ -228,6 +275,16 @@ describe('util/csv', () => {
       formatCSVRow(['1', '2"3', '4']).should.eql('1,"2""3",4');
     });
 
+    describe('delimiter', () => {
+      it('uses the specified delimiter', () => {
+        formatCSVRow(['1', '2;3'], { delimiter: ';' }).should.equal('1;"2;3"');
+      });
+
+      it('uses ⇥ instead of tab', () => {
+        formatCSVRow(['1', '2\t3'], { delimiter: '\t' }).should.equal('1⇥"2⇥3"');
+      });
+    });
+
     it('truncates the string if there are too many elements', () => {
       formatCSVRow(['1', '2', '3', '4'], { maxLength: 2 }).should.eql('1,2,…');
     });
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 046239ab7..3e8559231 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -911,16 +911,16 @@
   "util": {
     "csv": {
       "readError": {
-        "string": "There was a problem reading your CSV file: {message}",
+        "string": "There was a problem reading your file: {message}",
         "developer_comment": "{message} is a description of the problem."
       },
       "rowError": {
-        "string": "There is a problem on row {row} of the CSV file: {message}",
+        "string": "There is a problem on row {row} of the file: {message}",
         "developer_comment": "{row} is a row number. {message} is a description of the problem."
       },
       "invalidQuotes": {
         "string": "A quoted field is invalid. Check the row to see if there are any unusual values.",
-        "developer_comment": "This is an error that is shown for a CSV file. The field may be any cell in the file."
+        "developer_comment": "This is an error that is shown for a spreadsheet. The field may be any cell in the spreadsheet."
       },
       "emptyRow": {
         "string": "The row is empty."
@@ -1994,8 +1994,8 @@
         "blankLabel": {
           "string": "The label is missing."
         },
-        "noCSVData": {
-          "string": "Your CSV file does not contain any data."
+        "noData": {
+          "string": "Your file does not contain any data."
         }
       },
       "headersNote": {
@@ -2024,7 +2024,7 @@
           "developer_comment": "Suggestions to fix an error"
         },
         "invalidQuotes": {
-          "string": "A quoted field is invalid. Check the header row of your CSV file to see if there are any unusual values."
+          "string": "A quoted field is invalid. Check the header row of your file to see if there are any unusual values."
         },
         "missingLabel": {
           "string": "A {label} property is required. The label indicates the name to use for each Entity throughout Central and elsewhere.",
@@ -2037,7 +2037,10 @@
           "string": "It looks like two or more columns have the same header. Please make sure column headers are unique."
         },
         "emptyColumn": {
-          "string": "It looks like you have an empty cell in the header. Please remove any empty columns in your CSV file."
+          "string": "It looks like you have an empty cell in the header. Please remove any empty columns in your file."
+        },
+        "delimiterNotComma": {
+          "string": "It’s not clear what delimiter separates cells in a row from each other in your file. Based on analysis, {delimiter} was used as the best guess."
         }
       }
     },

From 4b55f6ce080f85c745098fec052b6f7003912681 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:04 -0400
Subject: [PATCH 08/27] Replace .close with .icon-trash

---
 src/components/entity/upload/popup.vue      | 18 ++++++++++--------
 test/components/entity/upload.spec.js       |  2 +-
 test/components/entity/upload/popup.spec.js |  4 ++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/entity/upload/popup.vue b/src/components/entity/upload/popup.vue
index 237107820..6ed0880db 100644
--- a/src/components/entity/upload/popup.vue
+++ b/src/components/entity/upload/popup.vue
@@ -13,9 +13,9 @@ except according to the terms contained in the LICENSE file.
   <div id="entity-upload-popup">
     <div id="entity-upload-popup-heading">
       <div v-tooltip.text>{{ filename }}</div>
-      <button v-show="!awaitingResponse" type="button" class="close"
+      <button v-show="!awaitingResponse" type="button" class="btn btn-link"
         :aria-label="$t('action.clear')" @click="$emit('clear')">
-        <span aria-hidden="true">&times;</span>
+        <span class="icon-trash"></span>
       </button>
     </div>
     <div id="entity-upload-popup-count">{{ $tcn('rowCount', count) }}</div>
@@ -70,7 +70,7 @@ const status = computed(() => (props.progress < 1
 }
 
 #entity-upload-popup-heading {
-  align-items: baseline;
+  align-items: center;
   display: flex;
 
   > div {
@@ -79,12 +79,14 @@ const status = computed(() => (props.progress < 1
     font-weight: bold;
   }
 
-  .close {
+  .btn-link {
     flex-shrink: 0;
-    margin-left: 6px;
-    opacity: 0.5;
-
-    &:hover, &:focus { opacity: 0.2; }
+    margin-left: 9px;
+    padding: 0;
+  }
+  .icon-trash {
+    color: $color-danger;
+    margin-right: 0;
   }
 }
 
diff --git a/test/components/entity/upload.spec.js b/test/components/entity/upload.spec.js
index 01e16f5ad..9cf3d14a3 100644
--- a/test/components/entity/upload.spec.js
+++ b/test/components/entity/upload.spec.js
@@ -139,7 +139,7 @@ describe('EntityUpload', () => {
     it('resets after the clear button is clicked', async () => {
       const modal = await showModal();
       await selectFile(modal);
-      await modal.get('#entity-upload-popup .close').trigger('click');
+      await modal.get('#entity-upload-popup .btn-link').trigger('click');
       modal.findComponent(EntityUploadPopup).exists().should.be.false();
       modal.get('#entity-upload-file-select').should.be.visible();
       const button = modal.get('.modal-actions .btn-primary');
diff --git a/test/components/entity/upload/popup.spec.js b/test/components/entity/upload/popup.spec.js
index 99365981e..6b779f8a3 100644
--- a/test/components/entity/upload/popup.spec.js
+++ b/test/components/entity/upload/popup.spec.js
@@ -17,7 +17,7 @@ describe('EntityUploadPopup', () => {
   describe('clear button', () => {
     it('emits a clear event if it is clicked', async () => {
       const component = mountComponent();
-      await component.get('.close').trigger('click');
+      await component.get('.btn-link').trigger('click');
       component.emitted().clear.should.eql([[]]);
     });
 
@@ -25,7 +25,7 @@ describe('EntityUploadPopup', () => {
       const component = mountComponent({
         props: { awaitingResponse: true }
       });
-      component.get('.close').should.be.hidden();
+      component.get('.btn-link').should.be.hidden();
     });
   });
 

From 113875952a599d7114906ada14d314a06b5cdb5d Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:06 -0400
Subject: [PATCH 09/27] Add timestamp to filename of data template

---
 src/components/entity/upload/data-template.vue      |  7 ++++++-
 test/components/entity/upload/data-template.spec.js | 13 ++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/entity/upload/data-template.vue b/src/components/entity/upload/data-template.vue
index 09a3e1039..8946d30c6 100644
--- a/src/components/entity/upload/data-template.vue
+++ b/src/components/entity/upload/data-template.vue
@@ -13,7 +13,7 @@ except according to the terms contained in the LICENSE file.
   <i18n-t tag="span" keypath="text.full">
     <template #downloadTemplate>
       <a class="btn" :class="error ? 'btn-danger' : 'btn-default'" :href="href"
-        :download="`${dataset.name} template.csv`">
+        @click="setFilename">
         <span class="icon-download"></span>{{ $t('text.downloadTemplate') }}
       </a>
     </template>
@@ -21,6 +21,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
+import { DateTime } from 'luxon';
 import { computed } from 'vue';
 
 import { useRequestData } from '../../../request-data';
@@ -42,6 +43,10 @@ const href = computed(() => {
   const csv = headers.join(',');
   return `data:text/csv;charset=UTF-8,${encodeURIComponent(csv)}`;
 });
+const setFilename = (event) => {
+  const now = DateTime.local().toFormat('yyyyMMddHHmmss');
+  event.target.setAttribute('download', `${dataset.name} ${now}.csv`);
+};
 </script>
 
 <i18n lang="json5">
diff --git a/test/components/entity/upload/data-template.spec.js b/test/components/entity/upload/data-template.spec.js
index e85989043..6b32d0742 100644
--- a/test/components/entity/upload/data-template.spec.js
+++ b/test/components/entity/upload/data-template.spec.js
@@ -1,3 +1,5 @@
+import sinon from 'sinon';
+
 import EntityUploadDataTemplate from '../../../../src/components/entity/upload/data-template.vue';
 
 import testData from '../../../data';
@@ -21,9 +23,14 @@ describe('EntityUploadDataTemplate', () => {
     content.should.equal('label,hauteur,circonférence');
   });
 
-  it('has the correct filename', () => {
+  it('has the correct filename', async () => {
+    const clock = sinon.useFakeTimers(Date.parse('2024-12-31T01:23:45'));
     testData.extendedDatasets.createPast(1);
-    const { download } = mountComponent().get('a').attributes();
-    download.should.equal('trees template.csv');
+    const a = mountComponent().get('a');
+    await a.trigger('click');
+    a.attributes().download.should.equal('trees 20241231012345.csv');
+    clock.tick(1000);
+    await a.trigger('click');
+    a.attributes().download.should.equal('trees 20241231012346.csv');
   });
 });

From 097e07130e6d941ce3db19701e8ad5b0b5583c22 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:08 -0400
Subject: [PATCH 10/27] Make small changes

---
 src/components/entity/upload/errors.vue | 1 +
 src/components/entity/upload/popup.vue  | 2 +-
 src/components/entity/upload/table.vue  | 6 ++++--
 src/util/csv.js                         | 2 +-
 transifex/strings_en.json               | 3 ++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/entity/upload/errors.vue b/src/components/entity/upload/errors.vue
index 7538c6758..31fd1b445 100644
--- a/src/components/entity/upload/errors.vue
+++ b/src/components/entity/upload/errors.vue
@@ -137,6 +137,7 @@ const formattedDelimiter = computed(() => formatCSVDelimiter(props.delimiter));
 <i18n lang="json5">
 {
   "en": {
+    // This refers to the header row of a spreadsheet.
     "expectedHeader": "Expected header",
     "suggestions": {
       // Suggestions to fix an error
diff --git a/src/components/entity/upload/popup.vue b/src/components/entity/upload/popup.vue
index 6ed0880db..9722a38d9 100644
--- a/src/components/entity/upload/popup.vue
+++ b/src/components/entity/upload/popup.vue
@@ -20,7 +20,7 @@ except according to the terms contained in the LICENSE file.
     </div>
     <div id="entity-upload-popup-count">{{ $tcn('rowCount', count) }}</div>
     <div v-show="awaitingResponse" id="entity-upload-popup-status">
-      <spinner :state="true" inline/><span>{{ status }}</span>
+      <spinner inline/><span>{{ status }}</span>
     </div>
   </div>
 </template>
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index bc86b1e32..57bb64753 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -30,7 +30,7 @@ except according to the terms contained in the LICENSE file.
           </thead>
           <tbody v-if="entities != null && entities.length !== 0"
             :class="{ 'data-loading': awaitingResponse }">
-            <tr v-for="(entity, entityIndex) of entities" :key="entityIndex">
+            <tr v-for="(entity, entityIndex) in entities" :key="entityIndex">
               <td class="row-number">
                 {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
               </td>
@@ -78,8 +78,10 @@ const props = defineProps({
 // created.
 const { dataset } = useRequestData();
 
-// Prevent the table container from shrinking on the last page.
+// The table container
 const container = ref(null);
+
+// Prevent the table container from shrinking on the last page.
 const minHeight = ref('auto');
 // The page size and height of the last full page that was rendered
 const lastFullPage = { size: 0, height: 0 };
diff --git a/src/util/csv.js b/src/util/csv.js
index 7d7e626df..0b664679b 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -41,7 +41,7 @@ const promiseParse = (i18n, file, signal = mockSignal(), papaOptions = {}) => {
         // I can't tell whether complete() will be called, so let's clean up
         // here.
         removeAbortListener();
-        reject(new Error(i18n.t('util.csv.readError', error)));
+        reject(new Error(i18n.t('util.csv.readError', { message: error.message })));
       },
       // Results are not passed in if streaming is used.
       complete: (maybeResults) => {
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 3e8559231..bee2822e4 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -2016,7 +2016,8 @@
     },
     "EntityUploadErrors": {
       "expectedHeader": {
-        "string": "Expected header"
+        "string": "Expected header",
+        "developer_comment": "This refers to the header row of a spreadsheet."
       },
       "suggestions": {
         "title": {

From 438b824aeeea1bb239fc21648b47e01f31f98228 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:10 -0400
Subject: [PATCH 11/27] Do not set max-height in EntityUploadTable

---
 src/components/entity/upload.vue       | 23 +++--------------------
 src/components/entity/upload/table.vue |  9 ++-------
 2 files changed, 5 insertions(+), 27 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 0194c8004..be5ad8b15 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -11,16 +11,14 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <modal id="entity-upload" :state="state" :hideable="!uploading" size="full"
-    backdrop @hide="$emit('hide')" @resize="setTableHeight"
-    @mutate="resizeColumnUnlessAnimating">
+    backdrop @hide="$emit('hide')" @mutate="resizeColumnUnlessAnimating">
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <div :class="{ backdrop: uploading }">
         <entity-upload-table :ref="setTable(0)"
           :title="$t('table.server', dataset)" :entities="serverEntities.value"
           :row-index="serverRow" :page-size="serverPage.size"
-          :awaiting-response="serverEntities.awaitingResponse"
-          :max-height="tableHeight"/>
+          :awaiting-response="serverEntities.awaitingResponse"/>
         <loading :state="serverEntities.initiallyLoading"/>
         <p v-if="serverEntities.dataExists && serverEntities.value.length === 0"
           class="empty-table-message">
@@ -32,8 +30,7 @@ except according to the terms contained in the LICENSE file.
           :spinner="serverEntities.awaitingResponse"/>
 
         <entity-upload-table :ref="setTable(1)" :title="$t('table.file')"
-          :entities="csvSlice" :row-index="csvRow" :page-size="csvPage.size"
-          :max-height="tableHeight"/>
+          :entities="csvSlice" :row-index="csvRow" :page-size="csvPage.size"/>
         <pagination v-if="csvEntities != null" v-model:page="csvPage.page"
           v-model:size="csvPage.size" :count="csvEntities.length"
           :size-options="pageSizeOptions"/>
@@ -305,20 +302,6 @@ const upload = () => {
     .catch(noop);
 };
 
-// The max height of a table
-const tableHeight = ref(0);
-// Use throttle() to prevent a loop such that a change to the height of the
-// table changes the height of the modal, which changes the height of the table,
-// and so on.
-const setTableHeight = throttle(heightOfModalBody => {
-  tableHeight.value = heightOfModalBody === 0
-    ? 0
-    : Math.max(
-      Math.min(heightOfModalBody, document.documentElement.clientHeight) / 2,
-      250
-    );
-});
-
 const popupAnimating = ref(false);
 const animatePopup = (value) => { popupAnimating.value = value; };
 watch(csvEntities, (value) => {
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index 57bb64753..2ab6740a6 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -16,8 +16,7 @@ except according to the terms contained in the LICENSE file.
       <h1 class="panel-title" v-tooltip.text>{{ title }}</h1>
     </div>
     <div class="panel-body">
-      <div ref="container" class="table-container"
-        :style="{ minHeight, maxHeight: px(maxHeight) }">
+      <div ref="container" class="table-container" :style="{ minHeight }">
         <table class="table">
           <thead>
             <tr>
@@ -67,11 +66,7 @@ const props = defineProps({
     type: Number,
     required: true
   },
-  awaitingResponse: Boolean,
-  maxHeight: {
-    type: Number,
-    required: true
-  }
+  awaitingResponse: Boolean
 });
 
 // The component assumes that this data will exist when the component is

From 2fdd2608fb498ee9ed87e8575b46455977e5ce66 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:12 -0400
Subject: [PATCH 12/27] Move panels from EntityUploadTable to EntityUpload

---
 src/components/entity/upload.vue       | 96 ++++++++++++++++++++------
 src/components/entity/upload/table.vue | 91 +++++++-----------------
 2 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index be5ad8b15..ace8f0bb7 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -15,26 +15,40 @@ except according to the terms contained in the LICENSE file.
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <div :class="{ backdrop: uploading }">
-        <entity-upload-table :ref="setTable(0)"
-          :title="$t('table.server', dataset)" :entities="serverEntities.value"
-          :row-index="serverRow" :page-size="serverPage.size"
-          :awaiting-response="serverEntities.awaitingResponse"/>
-        <loading :state="serverEntities.initiallyLoading"/>
-        <p v-if="serverEntities.dataExists && serverEntities.value.length === 0"
-          class="empty-table-message">
-          {{ $t('noEntities') }}
-        </p>
-        <pagination v-if="serverPage.count !== 0" v-model:page="serverPage.page"
-          v-model:size="serverPage.size" :count="serverPage.count"
-          :size-options="pageSizeOptions"
-          :spinner="serverEntities.awaitingResponse"/>
-
-        <entity-upload-table :ref="setTable(1)" :title="$t('table.file')"
-          :entities="csvSlice" :row-index="csvRow" :page-size="csvPage.size"/>
-        <pagination v-if="csvEntities != null" v-model:page="csvPage.page"
-          v-model:size="csvPage.size" :count="csvEntities.length"
-          :size-options="pageSizeOptions"/>
-
+        <div class="panel panel-simple">
+          <div class="panel-heading">
+            <h1 class="panel-title" v-tooltip.text>
+              {{ $t('table.server', dataset) }}
+            </h1>
+          </div>
+          <div class="panel-body">
+            <entity-upload-table :ref="setTable(0)"
+              :entities="serverEntities.value" :row-index="serverRow"
+              :page-size="serverPage.size"
+              :awaiting-response="serverEntities.awaitingResponse"/>
+            <loading :state="serverEntities.initiallyLoading"/>
+            <p v-if="serverEntities.dataExists && serverEntities.value.length === 0"
+              class="empty-table-message">
+              {{ $t('noEntities') }}
+            </p>
+            <pagination v-if="serverPage.count !== 0"
+              v-model:page="serverPage.page" v-model:size="serverPage.size"
+              :count="serverPage.count" :size-options="pageSizeOptions"
+              :spinner="serverEntities.awaitingResponse"/>
+          </div>
+        </div>
+        <div class="panel panel-simple">
+          <div class="panel-heading">
+            <h1 class="panel-title">{{ $t('table.file') }}</h1>
+          </div>
+          <div class="panel-body">
+            <entity-upload-table :ref="setTable(1)" :entities="csvSlice"
+              :row-index="csvRow" :page-size="csvPage.size"/>
+            <pagination v-if="csvEntities != null" v-model:page="csvPage.page"
+              v-model:size="csvPage.size" :count="csvEntities.length"
+              :size-options="pageSizeOptions"/>
+          </div>
+        </div>
         <entity-upload-file-select v-show="csvEntities == null"
           :parsing="parsing" @change="selectFile">
           <entity-upload-help :errors="csvErrors"/>
@@ -329,6 +343,8 @@ watch(() => props.state, (state) => {
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/mixins';
+
 @keyframes tocorner {
   0% { transform: translate(-70px, -70px); }
   100% { transform: translate(0, 0); }
@@ -339,6 +355,46 @@ watch(() => props.state, (state) => {
     opacity: 0.27;
     pointer-events: none;
   }
+
+  .panel-simple {
+    margin-bottom: 0;
+
+    .panel-heading {
+      @include text-overflow-ellipsis;
+      background-color: #ccc;
+      border-bottom: none;
+    }
+
+    .panel-body { padding: 0; }
+  }
+  .panel-simple + .panel-simple {
+    .panel-heading {
+      background-color: $color-action-background;
+      color: #fff;
+    }
+
+    thead { background-color: #c5dfe7; }
+  }
+
+  .pagination { margin-left: $padding-left-table-data; }
+
+  // margin-bottom of the tables
+  .entity-upload-table {
+    // The margin before text, either the Loading component or the
+    // .empty-table-message
+    margin-bottom: 10px;
+    // The margin before the Pagination component
+    &:has(tbody) { margin-bottom: 0; }
+    // The margin if there is no text or Pagination
+    &:last-child { margin-bottom: 0; }
+  }
+  // margin-bottom of the first .panel-simple
+  .panel-simple:first-child {
+    // The margin if the last element of the .panel-body is text
+    margin-bottom: 10px;
+    // The margin if the last element is Pagination
+    &:has(tbody) { margin-bottom: 12px; }
+  }
 }
 
 #entity-upload-popups {
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index 2ab6740a6..ee7623ae1 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -10,38 +10,31 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div class="entity-upload-table panel panel-simple"
-    :class="{ 'overlaps-popups': overlapsPopups }">
-    <div class="panel-heading">
-      <h1 class="panel-title" v-tooltip.text>{{ title }}</h1>
-    </div>
-    <div class="panel-body">
-      <div ref="container" class="table-container" :style="{ minHeight }">
-        <table class="table">
-          <thead>
-            <tr>
-              <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
-              <th>label</th>
-              <th v-for="{ name } of dataset.properties" :key="name">
-                <div v-tooltip.text>{{ name }}</div>
-              </th>
-            </tr>
-          </thead>
-          <tbody v-if="entities != null && entities.length !== 0"
-            :class="{ 'data-loading': awaitingResponse }">
-            <tr v-for="(entity, entityIndex) in entities" :key="entityIndex">
-              <td class="row-number">
-                {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
-              </td>
-              <td><div v-tooltip.text>{{ entity.label }}</div></td>
-              <td v-for="{ name } of dataset.properties" :key="name">
-                <div v-tooltip.text>{{ entity.data[name] }}</div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
+  <div ref="container" class="entity-upload-table"
+    :class="{ 'overlaps-popups': overlapsPopups }" :style="{ minHeight }">
+    <table class="table">
+      <thead>
+        <tr>
+          <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
+          <th>label</th>
+          <th v-for="{ name } of dataset.properties" :key="name">
+            <div v-tooltip.text>{{ name }}</div>
+          </th>
+        </tr>
+      </thead>
+      <tbody v-if="entities != null && entities.length !== 0"
+        :class="{ 'data-loading': awaitingResponse }">
+        <tr v-for="(entity, entityIndex) in entities" :key="entityIndex">
+          <td class="row-number">
+            {{ $n(rowIndex + entityIndex + 1, 'noGrouping') }}
+          </td>
+          <td><div v-tooltip.text>{{ entity.label }}</div></td>
+          <td v-for="{ name } of dataset.properties" :key="name">
+            <div v-tooltip.text>{{ entity.data[name] }}</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
@@ -55,10 +48,6 @@ defineOptions({
   name: 'EntityUploadTable'
 });
 const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  },
   entities: Array,
   // The 0-indexed row number of the first row of the table
   rowIndex: Number,
@@ -137,19 +126,7 @@ defineExpose({ resizeLastColumn, resetScroll });
 @import '../../../assets/scss/mixins';
 
 .entity-upload-table {
-  // The margin before text, e.g., the .empty-table-message
-  margin-bottom: 10px;
-  // The margin before the Pagination component or the next table
-  &:has(tbody) { margin-bottom: 0; }
-
-  .panel-heading {
-    @include text-overflow-ellipsis;
-    background-color: #ccc;
-    border-bottom: none;
-  }
-
-  .panel-body { padding: 0; }
-  .table-container { overflow: auto; }
+  overflow: auto;
 
   table {
     margin-bottom: 0;
@@ -176,21 +153,5 @@ defineExpose({ resizeLastColumn, resetScroll });
 
   // Provide extra room for the row number in case it is large.
   td:first-child { padding-left: 0; }
-
-  ~ .pagination { margin-left: $padding-left-table-data; }
 }
-
-.entity-upload-table ~ .entity-upload-table {
-  .panel-heading {
-    background-color: $color-action-background;
-    color: #fff;
-  }
-
-  thead { background-color: #c5dfe7; }
-}
-
-// The margin after text, e.g., the .empty-table-message
-.entity-upload-table ~ .entity-upload-table { margin-top: 20px; }
-// The margin after the Pagination component
-.pagination ~ .entity-upload-table { margin-top: 12px; }
 </style>

From 0c0c1ac6374b1ef0118cdb50e7b6429ae8cf6ead Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:14 -0400
Subject: [PATCH 13/27] Remove #entity-upload-popups, moving code to
 EntityUploadPopup

---
 src/components/entity/upload.vue       | 27 +++++---------------------
 src/components/entity/upload/popup.vue | 17 ++++++++++++++--
 src/components/entity/upload/table.vue | 24 +++++++++++------------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index ace8f0bb7..320b982b6 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -64,13 +64,11 @@ except according to the terms contained in the LICENSE file.
           {{ $t('action.cancel') }}
         </button>
       </div>
-      <div v-if="csvEntities != null" id="entity-upload-popups"
-        @animationstart="animatePopup(true)"
-        @animationend="animatePopup(false)">
-        <entity-upload-popup :filename="fileMetadata.name" :count="csvEntities.length"
-          :awaiting-response="uploading" :progress="uploadProgress"
-          @clear="clearFile"/>
-      </div>
+      <entity-upload-popup v-if="csvEntities != null"
+        :filename="fileMetadata.name" :count="csvEntities.length"
+        :awaiting-response="uploading" :progress="uploadProgress"
+        @clear="clearFile" @animationstart="animatePopup(true)"
+        @animationend="animatePopup(false)"/>
     </template>
   </modal>
 </template>
@@ -345,11 +343,6 @@ watch(() => props.state, (state) => {
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-@keyframes tocorner {
-  0% { transform: translate(-70px, -70px); }
-  100% { transform: translate(0, 0); }
-}
-
 #entity-upload {
   .backdrop {
     opacity: 0.27;
@@ -396,16 +389,6 @@ watch(() => props.state, (state) => {
     &:has(tbody) { margin-bottom: 12px; }
   }
 }
-
-#entity-upload-popups {
-  animation-duration: 2s;
-  animation-name: tocorner;
-  animation-timing-function: cubic-bezier(0.05, 0.9, 0, 1);
-  bottom: 70px;
-  position: absolute;
-  right: 15px;
-  width: 305px;
-}
 </style>
 
 <i18n lang="json5">
diff --git a/src/components/entity/upload/popup.vue b/src/components/entity/upload/popup.vue
index 9722a38d9..55cd95db8 100644
--- a/src/components/entity/upload/popup.vue
+++ b/src/components/entity/upload/popup.vue
@@ -10,7 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div id="entity-upload-popup">
+  <div id="entity-upload-popup" @animationstart="$emit('animationstart')"
+    @animationend="$emit('animationend')">
     <div id="entity-upload-popup-heading">
       <div v-tooltip.text>{{ filename }}</div>
       <button v-show="!awaitingResponse" type="button" class="btn btn-link"
@@ -49,7 +50,7 @@ const props = defineProps({
     required: true
   }
 });
-defineEmits(['clear']);
+defineEmits(['clear', 'animationstart', 'animationend']);
 
 const { t, n } = useI18n();
 const status = computed(() => (props.progress < 1
@@ -61,12 +62,24 @@ const status = computed(() => (props.progress < 1
 @use 'sass:color';
 @import '../../../assets/scss/mixins';
 
+@keyframes tocorner {
+  0% { transform: translate(-70px, -70px); }
+  100% { transform: translate(0, 0); }
+}
+
 #entity-upload-popup {
+  animation-duration: 2s;
+  animation-name: tocorner;
+  animation-timing-function: cubic-bezier(0.05, 0.9, 0, 1);
   background-color: $color-subpanel-background;
   border: 2px solid $color-action-foreground;
   border-radius: 6px;
+  bottom: 70px;
   outline: 5px solid #{color.change($color-action-foreground, $alpha: 0.15)};
   padding: 15px;
+  position: absolute;
+  right: 15px;
+  width: 305px;
 }
 
 #entity-upload-popup-heading {
diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index ee7623ae1..f84e68b73 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -11,7 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div ref="container" class="entity-upload-table"
-    :class="{ 'overlaps-popups': overlapsPopups }" :style="{ minHeight }">
+    :class="{ 'overlaps-popup': overlapsPopup }" :style="{ minHeight }">
     <table class="table">
       <thead>
         <tr>
@@ -84,26 +84,26 @@ watch(() => props.entities, () => {
   }
 });
 
-const overlapsPopups = ref(false);
+const overlapsPopup = ref(false);
 const resizeLastColumn = () => {
   // Undo previous resizing.
   const th = container.value.querySelector('th:last-child');
   th.style.width = '';
 
   if (container.value.clientWidth === 0) {
-    overlapsPopups.value = false;
+    overlapsPopup.value = false;
     return;
   }
 
-  // Check whether the column is obscured by the pop-ups.
-  const popups = container.value.closest('.modal-body')
-    .querySelector('#entity-upload-popups');
-  if (popups != null) {
-    const popupsRect = popups.getBoundingClientRect();
+  // Check whether the column is obscured by the pop-up.
+  const popup = container.value.closest('.modal-body')
+    .querySelector('#entity-upload-popup');
+  if (popup != null) {
+    const popupRect = popup.getBoundingClientRect();
     const containerRect = container.value.getBoundingClientRect();
-    overlapsPopups.value = popupsRect.top < containerRect.bottom;
-    if (overlapsPopups.value) {
-      const overlap = containerRect.right - popupsRect.left;
+    overlapsPopup.value = popupRect.top < containerRect.bottom;
+    if (overlapsPopup.value) {
+      const overlap = containerRect.right - popupRect.left;
       // Adding 10px for some extra space between the column and the pop-up.
       th.style.width = px(th.clientWidth + overlap + 10);
     }
@@ -137,7 +137,7 @@ defineExpose({ resizeLastColumn, resetScroll });
   th, td {
     div { @include text-overflow-ellipsis; }
   }
-  &.overlaps-popups {
+  &.overlaps-popup {
     th, td {
       &:last-child div {
         width: #{$col-width - $padding-left-table-data - $padding-right-table-data};

From 5efb8ddcbe6e499f6ca96345f5d41818a4fe1f94 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:13:15 -0400
Subject: [PATCH 14/27] Increase threshold for largeCell warning

---
 src/util/csv.js       |  2 +-
 test/unit/csv.spec.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/util/csv.js b/src/util/csv.js
index 0b664679b..453b84613 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -149,7 +149,7 @@ const largeCellWarning = (delimiter) => {
   return {
     type: 'largeCell',
     pushRow,
-    hasWarning: () => largestCell.size > maxRowSizes[1],
+    hasWarning: () => largestCell.size > 10 * maxRowSizes[1],
     get details() { return largestCell.row; }
   };
 };
diff --git a/test/unit/csv.spec.js b/test/unit/csv.spec.js
index 1ac0cd182..1aed946a3 100644
--- a/test/unit/csv.spec.js
+++ b/test/unit/csv.spec.js
@@ -218,13 +218,13 @@ describe('util/csv', () => {
 
       describe('large cell', () => {
         it('returns the row of a relatively large cell that contains a comma', async () => {
-          const csv = createCSV('a\n1\n"2,3"');
+          const csv = createCSV('a\n1\n"12345,6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
           warnings.should.eql({ count: 1, largeCell: 2 });
         });
 
         it('returns row of a relatively large cell that contains specified delimiter', async () => {
-          const csv = createCSV('a\n1\n"2;3"');
+          const csv = createCSV('a\n1\n"12345;6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a'], {
             delimiter: ';'
           });
@@ -232,20 +232,20 @@ describe('util/csv', () => {
         });
 
         it('returns the row of a relatively large cell that contains a newline', async () => {
-          const csv = createCSV('a\n1\n"2\n3"');
+          const csv = createCSV('a\n1\n"12345\n6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
           warnings.should.eql({ count: 1, largeCell: 2 });
         });
 
         it('ignores cells that do not contain a delimiter or newline', async () => {
-          const csv = createCSV('a\n1\n"2.3"');
+          const csv = createCSV('a\n1\n"12345.6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
           warnings.should.eql({ count: 0 });
         });
 
         it('ignores cells that are not relatively large', async () => {
-          const csv = createCSV('a,b,c\n1,2,3\n"4,5",6');
-          const { warnings } = await parseCSV(i18n, csv, ['a', 'b', 'c']);
+          const csv = createCSV('a,b\n1,2\n3,"12345,6789ab"');
+          const { warnings } = await parseCSV(i18n, csv, ['a', 'b']);
           warnings.should.eql({ count: 0 });
         });
       });

From 3364a6bb52cbab5e8fcd3b1e4665a8100cb8d56e Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 11 Apr 2024 01:41:11 -0400
Subject: [PATCH 15/27] Rename EntityUploadHelp and EntityUploadErrors to be
 about header

---
 src/assets/scss/app.scss                      |  2 ++
 src/components/entity/upload.vue              | 16 +++++-----
 .../upload/{errors.vue => header-errors.vue}  | 14 ++++----
 .../upload/{help.vue => header-help.vue}      | 10 +++---
 transifex/strings_en.json                     | 32 +++++++++----------
 5 files changed, 37 insertions(+), 37 deletions(-)
 rename src/components/entity/upload/{errors.vue => header-errors.vue} (93%)
 rename src/components/entity/upload/{help.vue => header-help.vue} (89%)

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 904ec3eb2..40646b9ee 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -91,6 +91,8 @@ code {
   }
 }
 
+.text-monospace { font-family: $font-family-monospace; }
+
 em:lang(ja) {
   font-style: normal;
   font-weight: bold;
diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 320b982b6..6e9f10af3 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -51,7 +51,7 @@ except according to the terms contained in the LICENSE file.
         </div>
         <entity-upload-file-select v-show="csvEntities == null"
           :parsing="parsing" @change="selectFile">
-          <entity-upload-help :errors="csvErrors"/>
+          <entity-upload-header-help :errors="headerErrors"/>
         </entity-upload-file-select>
       </div>
       <div class="modal-actions">
@@ -78,7 +78,7 @@ import { computed, inject, nextTick, onBeforeUnmount, reactive, ref, shallowRef,
 import { useI18n } from 'vue-i18n';
 
 import EntityUploadFileSelect from './upload/file-select.vue';
-import EntityUploadHelp from './upload/help.vue';
+import EntityUploadHeaderHelp from './upload/header-help.vue';
 import EntityUploadPopup from './upload/popup.vue';
 import EntityUploadTable from './upload/table.vue';
 import Loading from '../loading.vue';
@@ -174,12 +174,12 @@ const fileMetadata = shallowRef(null);
 // allowing the alert to be hidden later. If EntityUploadErrors is rendered,
 // then csvErrors is set with props for the component.
 let alertedAt;
-const csvErrors = shallowRef(null);
+const headerErrors = shallowRef(null);
 const parsing = ref(false);
 // Function to abort parsing in progress
 let abortParse = noop;
-// Validates the column header of the CSV file, setting csvErrors if the header
-// is invalid. Returns `true` if the header is valid and `false` if not.
+// Validates the column header of the CSV file, setting headerErrors if the
+// header is invalid. Returns `true` if the header is valid and `false` if not.
 const validateHeader = ({ columns, errors, meta }, file) => {
   const details = {};
   // If there are errors from Papa Parse, just surface those and don't check for
@@ -208,7 +208,7 @@ const validateHeader = ({ columns, errors, meta }, file) => {
       (hasLabel ? 1 : 0);
   }
   if (!Object.values(details).includes(true)) return true;
-  csvErrors.value = {
+  headerErrors.value = {
     filename: file.name,
     header: formatCSVRow(columns, { delimiter: meta.delimiter }),
     delimiter: meta.delimiter,
@@ -256,7 +256,7 @@ const selectFile = async (file) => {
     alert.blank();
     alertedAt = null;
   }
-  csvErrors.value = null;
+  headerErrors.value = null;
 
   parsing.value = true;
   const abortController = new AbortController();
@@ -286,7 +286,7 @@ watch(() => props.state, (state) => {
   csvEntities.value = null;
   fileMetadata.value = null;
   alertedAt = null;
-  csvErrors.value = null;
+  headerErrors.value = null;
 });
 onBeforeUnmount(() => { abortParse(); });
 
diff --git a/src/components/entity/upload/errors.vue b/src/components/entity/upload/header-errors.vue
similarity index 93%
rename from src/components/entity/upload/errors.vue
rename to src/components/entity/upload/header-errors.vue
index 31fd1b445..1abea8dfe 100644
--- a/src/components/entity/upload/errors.vue
+++ b/src/components/entity/upload/header-errors.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>
-  <dl id="entity-upload-errors" class="dl-horizontal">
+  <dl id="entity-upload-header-errors" class="dl-horizontal">
     <div>
       <dt>{{ $t('expectedHeader') }}</dt>
       <dd :ref="setHeaderElement(0)" class="csv-header" @scroll="scrollHeader">
@@ -23,13 +23,13 @@ except according to the terms contained in the LICENSE file.
         {{ header }}
       </dd>
     </div>
-    <div v-if="hasSuggestion" id="entity-upload-errors-suggestions">
+    <div v-if="hasSuggestion" id="entity-upload-header-errors-suggestions">
       <dt>{{ $t('suggestions.title') }}</dt>
       <dd>
         <p v-if="invalidQuotes">{{ $t('suggestions.invalidQuotes') }}</p>
         <i18n-t v-if="missingLabel" tag="p" keypath="suggestions.missingLabel">
           <template #label>
-            <span id="entity-upload-errors-label">label</span>
+            <span class="text-monospace">label</span>
           </template>
         </i18n-t>
         <p v-if="unknownProperty">{{ $t('suggestions.unknownProperty') }}</p>
@@ -53,7 +53,7 @@ import { formatCSVDelimiter, formatCSVRow } from '../../../util/csv';
 import { useRequestData } from '../../../request-data';
 
 defineOptions({
-  name: 'EntityUploadErrors'
+  name: 'EntityUploadHeaderErrors'
 });
 const props = defineProps({
   filename: {
@@ -105,7 +105,7 @@ const formattedDelimiter = computed(() => formatCSVDelimiter(props.delimiter));
 <style lang="scss">
 @import '../../../assets/scss/variables';
 
-#entity-upload-errors {
+#entity-upload-header-errors {
   margin-bottom: 0;
 
   div {
@@ -123,15 +123,13 @@ const formattedDelimiter = computed(() => formatCSVDelimiter(props.delimiter));
   }
 }
 
-#entity-upload-errors-suggestions {
+#entity-upload-header-errors-suggestions {
   color: $color-danger;
 
   p:last-child { margin-bottom: 0; }
 
   code { border: 1px solid $color-danger; }
 }
-
-#entity-upload-errors-label { font-family: $font-family-monospace; }
 </style>
 
 <i18n lang="json5">
diff --git a/src/components/entity/upload/help.vue b/src/components/entity/upload/header-help.vue
similarity index 89%
rename from src/components/entity/upload/help.vue
rename to src/components/entity/upload/header-help.vue
index 09e7f6436..e13ed36c8 100644
--- a/src/components/entity/upload/help.vue
+++ b/src/components/entity/upload/header-help.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>
-  <div id="entity-upload-help"
+  <div id="entity-upload-header-help"
     :class="{ panel: hasError, 'panel-danger': hasError }">
     <div :class="{ 'panel-heading': hasError }">
       <span>{{ $t('headersNote') }}</span>
@@ -18,7 +18,7 @@ except according to the terms contained in the LICENSE file.
       <entity-upload-data-template :error="hasError"/>
     </div>
     <div v-if="hasError" class="panel-body">
-      <entity-upload-errors v-bind="errors"/>
+      <entity-upload-header-errors v-bind="errors"/>
     </div>
   </div>
 </template>
@@ -27,11 +27,11 @@ except according to the terms contained in the LICENSE file.
 import { computed } from 'vue';
 
 import EntityUploadDataTemplate from './data-template.vue';
-import EntityUploadErrors from './errors.vue';
+import EntityUploadHeaderErrors from './header-errors.vue';
 import SentenceSeparator from '../../sentence-separator.vue';
 
 defineOptions({
-  name: 'EntityUploadHelp'
+  name: 'EntityUploadHeaderHelp'
 });
 const props = defineProps({
   errors: Object
@@ -43,7 +43,7 @@ const hasError = computed(() => props.errors != null);
 <style lang="scss">
 $border-radius: 3px;
 
-#entity-upload-help {
+#entity-upload-header-help {
   margin-top: 1px;
 
   &.panel-danger {
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index bee2822e4..1189f9868 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -2014,7 +2014,22 @@
         }
       }
     },
-    "EntityUploadErrors": {
+    "EntityUploadFileSelect": {
+      "text": {
+        "full": {
+          "string": "Drag a .csv file here, or {chooseOne} to import.",
+          "developer_comment": "{chooseOne} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nchoose one"
+        },
+        "chooseOne": {
+          "string": "choose one",
+          "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {chooseOne} is in the following text:\n\nDrag a .csv file here, or {chooseOne} to import."
+        }
+      },
+      "parsing": {
+        "string": "Reading data…"
+      }
+    },
+    "EntityUploadHeaderErrors": {
       "expectedHeader": {
         "string": "Expected header",
         "developer_comment": "This refers to the header row of a spreadsheet."
@@ -2045,21 +2060,6 @@
         }
       }
     },
-    "EntityUploadFileSelect": {
-      "text": {
-        "full": {
-          "string": "Drag a .csv file here, or {chooseOne} to import.",
-          "developer_comment": "{chooseOne} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nchoose one"
-        },
-        "chooseOne": {
-          "string": "choose one",
-          "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {chooseOne} is in the following text:\n\nDrag a .csv file here, or {chooseOne} to import."
-        }
-      },
-      "parsing": {
-        "string": "Reading data…"
-      }
-    },
     "EntityUploadPopup": {
       "rowCount": {
         "string": "{count, plural, one {{count} data row found} other {{count} data rows found}}"

From de87a76d2a1139f393272935e0a460718e6747d1 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Thu, 11 Apr 2024 01:41:13 -0400
Subject: [PATCH 16/27] Show data error in its own panel

---
 src/components/entity/upload.vue             | 67 ++++++++++++--------
 src/components/entity/upload/data-error.vue  | 43 +++++++++++++
 src/components/entity/upload/header-help.vue | 12 +---
 transifex/strings_en.json                    |  5 ++
 4 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 src/components/entity/upload/data-error.vue

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 6e9f10af3..502162bb0 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -52,6 +52,8 @@ except according to the terms contained in the LICENSE file.
         <entity-upload-file-select v-show="csvEntities == null"
           :parsing="parsing" @change="selectFile">
           <entity-upload-header-help :errors="headerErrors"/>
+          <entity-upload-data-error v-if="dataError != null"
+            :message="dataError"/>
         </entity-upload-file-select>
       </div>
       <div class="modal-actions">
@@ -77,6 +79,7 @@ except according to the terms contained in the LICENSE file.
 import { computed, inject, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import EntityUploadDataError from './upload/data-error.vue';
 import EntityUploadFileSelect from './upload/file-select.vue';
 import EntityUploadHeaderHelp from './upload/header-help.vue';
 import EntityUploadPopup from './upload/popup.vue';
@@ -169,12 +172,8 @@ watch([() => serverPage.page, () => serverPage.size], () => {
 const csvEntities = shallowRef(null);
 // Metadata about the CSV file
 const fileMetadata = shallowRef(null);
-// If the CSV file is invalid, then either an alert is shown, or
-// EntityUploadErrors is rendered. If an alert is shown, then alertedAt is set,
-// allowing the alert to be hidden later. If EntityUploadErrors is rendered,
-// then csvErrors is set with props for the component.
-let alertedAt;
 const headerErrors = shallowRef(null);
+const dataError = ref(null);
 const parsing = ref(false);
 // Function to abort parsing in progress
 let abortParse = noop;
@@ -250,31 +249,32 @@ const parseEntities = async (file, headerResults, signal) => {
   csvEntities.value = data;
   fileMetadata.value = { name: file.name, size: file.size };
 };
-const selectFile = async (file) => {
-  // Hide any previous errors.
-  if (alert.state && alert.at === alertedAt) {
-    alert.blank();
-    alertedAt = null;
-  }
+const selectFile = (file) => {
   headerErrors.value = null;
+  dataError.value = null;
 
-  parsing.value = true;
   const abortController = new AbortController();
   abortParse = () => { abortController.abort(); };
   const { signal } = abortController;
-  try {
-    const headerResults = await parseCSVHeader(globalI18n, file, signal);
-    if (validateHeader(headerResults, file))
-      await parseEntities(file, headerResults, signal);
-  } catch (error) {
-    if (!signal.aborted) {
-      alert.danger(error.message);
-      alertedAt = alert.at;
-    }
-  } finally {
-    parsing.value = false;
-    abortParse = noop;
-  }
+
+  parsing.value = true;
+  return parseCSVHeader(globalI18n, file, signal)
+    .catch(error => {
+      if (!signal.aborted) alert.danger(error.message);
+      throw error;
+    })
+    .then(headerResults => (validateHeader(headerResults, file)
+      ? parseEntities(file, headerResults, signal)
+        .catch(error => {
+          if (!signal.aborted) dataError.value = error.message;
+          throw error;
+        })
+      : Promise.resolve()))
+    .finally(() => {
+      parsing.value = false;
+      abortParse = noop;
+    })
+    .catch(noop);
 };
 const clearFile = () => {
   csvEntities.value = null;
@@ -285,8 +285,8 @@ watch(() => props.state, (state) => {
   abortParse();
   csvEntities.value = null;
   fileMetadata.value = null;
-  alertedAt = null;
   headerErrors.value = null;
+  dataError.value = null;
 });
 onBeforeUnmount(() => { abortParse(); });
 
@@ -388,6 +388,21 @@ watch(() => props.state, (state) => {
     // The margin if the last element is Pagination
     &:has(tbody) { margin-bottom: 12px; }
   }
+
+  .panel-danger {
+    box-shadow: none;
+    margin-bottom: 0;
+  }
+  $panel-danger-border-radius: 3px;
+  .panel-heading {
+    border-top-left-radius: $panel-danger-border-radius;
+    border-top-right-radius: $panel-danger-border-radius;
+  }
+  .panel-body {
+    border: none;
+    border-bottom-left-radius: $panel-danger-border-radius;
+    border-bottom-right-radius: $panel-danger-border-radius;
+  }
 }
 </style>
 
diff --git a/src/components/entity/upload/data-error.vue b/src/components/entity/upload/data-error.vue
new file mode 100644
index 000000000..d15eb88aa
--- /dev/null
+++ b/src/components/entity/upload/data-error.vue
@@ -0,0 +1,43 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div id="entity-upload-data-error" class="panel panel-danger">
+    <div class="panel-heading">
+      <h1 class="panel-title">{{ $t('title') }}</h1>
+    </div>
+    <div class="panel-body">{{ message }}</div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'EntityUploadDataError'
+});
+defineProps({
+  message: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss">
+#entity-upload-data-error { margin-top: 15px; }
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "title": "Data error"
+  }
+}
+</i18n>
diff --git a/src/components/entity/upload/header-help.vue b/src/components/entity/upload/header-help.vue
index e13ed36c8..75a40d3ce 100644
--- a/src/components/entity/upload/header-help.vue
+++ b/src/components/entity/upload/header-help.vue
@@ -45,24 +45,14 @@ $border-radius: 3px;
 
 #entity-upload-header-help {
   margin-top: 1px;
-
-  &.panel-danger {
-    box-shadow: none;
-    margin-bottom: 0;
-    margin-top: 10px;
-  }
+  &.panel-danger { margin-top: 10px; }
 
   .panel-heading {
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
     padding-bottom: 4px;
     padding-top: 6px;
   }
 
   .panel-body {
-    border: none;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
     padding-left: 0;
     padding-right: 0;
   }
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 1189f9868..f5c07b073 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -2002,6 +2002,11 @@
         "string": "The first row in your data file must exactly match the table header you see above."
       }
     },
+    "EntityUploadDataError": {
+      "title": {
+        "string": "Data error"
+      }
+    },
     "EntityUploadDataTemplate": {
       "text": {
         "full": {

From 3acaae696dba35ebd217b6df4695ff3034d216bd Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:18:58 -0400
Subject: [PATCH 17/27] Return warning if delimiter is not a comma

---
 src/util/csv.js       | 15 +++++++++----
 test/unit/csv.spec.js | 51 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/util/csv.js b/src/util/csv.js
index 453b84613..560abf385 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -235,15 +235,22 @@ export const parseCSV = async (i18n, file, columns, options = {}) => {
     }));
   }
 
-  const warningDetails = { count: 0 };
+  const warningResults = {
+    count: 0,
+    details: {}
+  };
   for (const warning of warnings) {
     if (warning.hasWarning()) {
-      warningDetails.count += 1;
-      warningDetails[warning.type] = warning.details;
+      warningResults.count += 1;
+      warningResults.details[warning.type] = warning.details;
     }
   }
+  if (delimiter !== ',') {
+    warningResults.count += 1;
+    warningResults.details.delimiter = delimiter;
+  }
 
-  return { data, warnings: warningDetails };
+  return { data, warnings: warningResults };
 };
 
 export const formatCSVDelimiter = (delimiter) =>
diff --git a/test/unit/csv.spec.js b/test/unit/csv.spec.js
index 1aed946a3..63de629d9 100644
--- a/test/unit/csv.spec.js
+++ b/test/unit/csv.spec.js
@@ -199,20 +199,40 @@ describe('util/csv', () => {
     describe('warnings', () => {
       it('returns a count of zero if there are no warnings', async () => {
         const { warnings } = await parseCSV(i18n, createCSV('a\n1'), ['a']);
-        warnings.should.eql({ count: 0 });
+        warnings.should.eql({
+          count: 0,
+          details: {}
+        });
+      });
+
+      it('returns the delimiter if it is not a comma', async () => {
+        const csv = createCSV('a;b\n1;2');
+        const { warnings } = await parseCSV(i18n, csv, ['a', 'b'], {
+          delimiter: ';'
+        });
+        warnings.should.eql({
+          count: 1,
+          details: { delimiter: ';' }
+        });
       });
 
       describe('ragged row', () => {
         it('returns ragged rows if another row is padded', async () => {
           const csv = createCSV('a,b\n1\n2,""\n4');
           const { warnings } = await parseCSV(i18n, csv, ['a', 'b']);
-          warnings.should.eql({ count: 1, raggedRows: [1, 3] });
+          warnings.should.eql({
+            count: 1,
+            details: { raggedRows: [1, 3] }
+          });
         });
 
         it('does not return ragged rows if no row is padded', async () => {
           const csv = createCSV('a,b\n1\n2,3\n4');
           const { warnings } = await parseCSV(i18n, csv, ['a', 'b']);
-          warnings.should.eql({ count: 0 });
+          warnings.should.eql({
+            count: 0,
+            details: {}
+          });
         });
       });
 
@@ -220,7 +240,10 @@ describe('util/csv', () => {
         it('returns the row of a relatively large cell that contains a comma', async () => {
           const csv = createCSV('a\n1\n"12345,6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
-          warnings.should.eql({ count: 1, largeCell: 2 });
+          warnings.should.eql({
+            count: 1,
+            details: { largeCell: 2 }
+          });
         });
 
         it('returns row of a relatively large cell that contains specified delimiter', async () => {
@@ -228,25 +251,37 @@ describe('util/csv', () => {
           const { warnings } = await parseCSV(i18n, csv, ['a'], {
             delimiter: ';'
           });
-          warnings.should.eql({ count: 1, largeCell: 2 });
+          warnings.should.eql({
+            count: 2,
+            details: { delimiter: ';', largeCell: 2 }
+          });
         });
 
         it('returns the row of a relatively large cell that contains a newline', async () => {
           const csv = createCSV('a\n1\n"12345\n6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
-          warnings.should.eql({ count: 1, largeCell: 2 });
+          warnings.should.eql({
+            count: 1,
+            details: { largeCell: 2 }
+          });
         });
 
         it('ignores cells that do not contain a delimiter or newline', async () => {
           const csv = createCSV('a\n1\n"12345.6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a']);
-          warnings.should.eql({ count: 0 });
+          warnings.should.eql({
+            count: 0,
+            details: {}
+          });
         });
 
         it('ignores cells that are not relatively large', async () => {
           const csv = createCSV('a,b\n1,2\n3,"12345,6789ab"');
           const { warnings } = await parseCSV(i18n, csv, ['a', 'b']);
-          warnings.should.eql({ count: 0 });
+          warnings.should.eql({
+            count: 0,
+            details: {}
+          });
         });
       });
     });

From 9bf3f4adea28e9175b6ce25345d19bae93234aff Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:00 -0400
Subject: [PATCH 18/27] Pass warnings to EntityUploadWarnings

---
 src/components/entity/upload.vue          | 13 +++++++++---
 src/components/entity/upload/warnings.vue | 25 +++++++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/components/entity/upload/warnings.vue

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 502162bb0..647a1dc7c 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -42,6 +42,8 @@ except according to the terms contained in the LICENSE file.
             <h1 class="panel-title">{{ $t('table.file') }}</h1>
           </div>
           <div class="panel-body">
+            <entity-upload-warnings v-if="warnings != null"
+              v-bind="warnings.details"/>
             <entity-upload-table :ref="setTable(1)" :entities="csvSlice"
               :row-index="csvRow" :page-size="csvPage.size"/>
             <pagination v-if="csvEntities != null" v-model:page="csvPage.page"
@@ -84,6 +86,7 @@ import EntityUploadFileSelect from './upload/file-select.vue';
 import EntityUploadHeaderHelp from './upload/header-help.vue';
 import EntityUploadPopup from './upload/popup.vue';
 import EntityUploadTable from './upload/table.vue';
+import EntityUploadWarnings from './upload/warnings.vue';
 import Loading from '../loading.vue';
 import Modal from '../modal.vue';
 import Pagination from '../pagination.vue';
@@ -174,6 +177,7 @@ const csvEntities = shallowRef(null);
 const fileMetadata = shallowRef(null);
 const headerErrors = shallowRef(null);
 const dataError = ref(null);
+const warnings = shallowRef(null);
 const parsing = ref(false);
 // Function to abort parsing in progress
 let abortParse = noop;
@@ -240,18 +244,20 @@ const rowToEntity = (values, columns) => {
 };
 const { i18n: globalI18n, alert } = inject('container');
 const parseEntities = async (file, headerResults, signal) => {
-  const { data } = await parseCSV(globalI18n, file, headerResults.columns, {
+  const results = await parseCSV(globalI18n, file, headerResults.columns, {
     delimiter: headerResults.meta.delimiter,
     transformRow: rowToEntity,
     signal
   });
-  if (data.length === 0) throw new Error(t('alert.noData'));
-  csvEntities.value = data;
+  if (results.data.length === 0) throw new Error(t('alert.noData'));
+  csvEntities.value = results.data;
   fileMetadata.value = { name: file.name, size: file.size };
+  if (results.warnings.count !== 0) warnings.value = results.warnings;
 };
 const selectFile = (file) => {
   headerErrors.value = null;
   dataError.value = null;
+  warnings.value = null;
 
   const abortController = new AbortController();
   abortParse = () => { abortController.abort(); };
@@ -287,6 +293,7 @@ watch(() => props.state, (state) => {
   fileMetadata.value = null;
   headerErrors.value = null;
   dataError.value = null;
+  warnings.value = null;
 });
 onBeforeUnmount(() => { abortParse(); });
 
diff --git a/src/components/entity/upload/warnings.vue b/src/components/entity/upload/warnings.vue
new file mode 100644
index 000000000..92ccc0d81
--- /dev/null
+++ b/src/components/entity/upload/warnings.vue
@@ -0,0 +1,25 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div></div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'EntityUploadWarnings'
+});
+defineProps({
+  delimiter: String,
+  raggedRows: Array,
+  largeCell: Number
+});
+</script>

From d5183e62a898b00c488e74525b6efc337e8f4901 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:02 -0400
Subject: [PATCH 19/27] Move EntityUploadPopup so its focus order is before
 .modal-actions

---
 src/components/entity/upload.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 647a1dc7c..8fccd9d36 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -58,6 +58,11 @@ except according to the terms contained in the LICENSE file.
             :message="dataError"/>
         </entity-upload-file-select>
       </div>
+      <entity-upload-popup v-if="csvEntities != null"
+        :filename="fileMetadata.name" :count="csvEntities.length"
+        :awaiting-response="uploading" :progress="uploadProgress"
+        @clear="clearFile" @animationstart="animatePopup(true)"
+        @animationend="animatePopup(false)"/>
       <div class="modal-actions">
         <button type="button" class="btn btn-primary"
           :aria-disabled="csvEntities == null || uploading" @click="upload">
@@ -68,11 +73,6 @@ except according to the terms contained in the LICENSE file.
           {{ $t('action.cancel') }}
         </button>
       </div>
-      <entity-upload-popup v-if="csvEntities != null"
-        :filename="fileMetadata.name" :count="csvEntities.length"
-        :awaiting-response="uploading" :progress="uploadProgress"
-        @clear="clearFile" @animationstart="animatePopup(true)"
-        @animationend="animatePopup(false)"/>
     </template>
   </modal>
 </template>

From 803bd0e9da6ba283d7da212b00c2794ce6558566 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:04 -0400
Subject: [PATCH 20/27] Improve how min-height is set in EntityUploadTable

---
 src/components/entity/upload/table.vue | 37 ++++++++++++++++----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/entity/upload/table.vue b/src/components/entity/upload/table.vue
index f84e68b73..fc0ced31f 100644
--- a/src/components/entity/upload/table.vue
+++ b/src/components/entity/upload/table.vue
@@ -67,22 +67,31 @@ const container = ref(null);
 
 // Prevent the table container from shrinking on the last page.
 const minHeight = ref('auto');
-// The page size and height of the last full page that was rendered
-const lastFullPage = { size: 0, height: 0 };
-watch(() => props.entities, () => {
-  if (props.entities == null) {
+// The height of the last full page of the current size. Equals 0 when there is
+// no height to use.
+let previousHeight = 0;
+watch(
+  [() => props.entities, () => props.pageSize],
+  ([entities, newSize], [, oldSize]) => {
+    // Reset minHeight.
     minHeight.value = 'auto';
-    Object.assign(lastFullPage, { size: 0, height: 0 });
-  } else if (props.entities.length === props.pageSize) {
-    minHeight.value = 'auto';
-    nextTick(() => {
-      lastFullPage.size = props.pageSize;
-      lastFullPage.height = container.value.getBoundingClientRect().height;
-    });
-  } else if (props.pageSize === lastFullPage.size) {
-    minHeight.value = px(lastFullPage.height);
+
+    // If the page size has changed, reset previousHeight, as it is no longer
+    // useful. If entities == null without the page size changing, that means
+    // that there has been a change like the modal being hidden that should
+    // cause previousHeight to be reset.
+    if (newSize !== oldSize || entities == null) previousHeight = 0;
+
+    // Either set or attempt to use previousHeight.
+    if (entities != null && entities.length === newSize) {
+      nextTick(() => {
+        previousHeight = container.value.getBoundingClientRect().height;
+      });
+    } else if (previousHeight !== 0) {
+      minHeight.value = px(previousHeight);
+    }
   }
-});
+);
 
 const overlapsPopup = ref(false);
 const resizeLastColumn = () => {

From ccc7cb37752b382e3614de6554092f78e9f021d9 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:05 -0400
Subject: [PATCH 21/27] Convert Modal to Composition API

---
 src/components/modal.vue      | 335 +++++++++++++++++-----------------
 test/components/modal.spec.js |  43 +----
 2 files changed, 172 insertions(+), 206 deletions(-)

diff --git a/src/components/modal.vue b/src/components/modal.vue
index 4f3bd0bf3..442aa5c09 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -14,7 +14,7 @@ except according to the terms contained in the LICENSE file.
 may add the `in` class to the element, and the checkScroll() method may add the
 `has-scroll` class. -->
 <template>
-  <div class="modal" tabindex="-1"
+  <div ref="el" class="modal" tabindex="-1"
     :data-backdrop="backdrop ? 'static' : 'false'" data-keyboard="false"
     role="dialog" :aria-labelledby="titleId" @mousedown="modalMousedown"
     @click="modalClick" @keydown.esc="hideIfCan" @focusout="refocus">
@@ -28,7 +28,7 @@ may add the `in` class to the element, and the checkScroll() method may add the
           <h4 :id="titleId" class="modal-title"><slot name="title"></slot></h4>
         </div>
         <div ref="body" class="modal-body">
-          <alert/>
+          <Alert/>
           <slot name="body"></slot>
         </div>
       </div>
@@ -37,7 +37,10 @@ may add the `in` class to the element, and the checkScroll() method may add the
 </template>
 
 <script>
-import { inject, markRaw, watch, watchPostEffect } from 'vue';
+let id = 0;
+</script>
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from 'vue';
 import 'bootstrap/js/modal';
 
 import Alert from './alert.vue';
@@ -58,179 +61,167 @@ We do this for two reasons:
   - It is needed to implement the `hideable` prop.
 */
 
-let id = 0;
-
-export default {
-  name: 'Modal',
-  components: { Alert },
-  inject: ['alert'],
-  props: {
-    state: Boolean,
-    // Indicates whether the user is able to hide the modal by clicking ×,
-    // pressing escape, or clicking outside the modal.
-    hideable: Boolean,
-    size: {
-      type: String,
-      default: 'normal'
-    },
-    backdrop: Boolean
-  },
-  emits: ['shown', 'hide', 'resize', 'mutate'],
-  setup(props) {
-    const alert = inject('alert');
-    let oldAlertAt;
-    watchPostEffect(() => { oldAlertAt = alert.at; });
-    watch(() => props.state, (state) => {
-      if (state || alert.at === oldAlertAt) alert.blank();
-    });
-  },
-  data() {
-    id += 1;
-    return {
-      id,
-      bodyHeight: 0,
-      // The modal() method of the Boostrap plugin
-      bs: null,
-      observer: markRaw(new MutationObserver(() => {
-        if (this.state) {
-          this.handleHeightChange();
-          this.$emit('mutate');
-        }
-      })),
-      mousedownOutsideDialog: false
-    };
-  },
-  computed: {
-    titleId() {
-      return `modal-title${this.id}`;
-    },
-    sizeClass() {
-      switch (this.size) {
-        case 'large': return 'modal-lg';
-        case 'full': return 'modal-full';
-        default: return null; // 'normal'
-      }
-    }
+const props = defineProps({
+  state: Boolean,
+  // Indicates whether the user is able to hide the modal by clicking ×,
+  // pressing escape, or clicking outside the modal.
+  hideable: Boolean,
+  size: {
+    type: String,
+    default: 'normal'
   },
-  watch: {
-    state(state) {
-      if (state) {
-        // The DOM hasn't updated yet, but it should be OK to show the modal
-        // now: I think it will all happen in the same event loop.
-        this.show();
-      } else {
-        this.hide();
-      }
-    }
-  },
-  mounted() {
-    if (this.$el.closest('body') != null) {
-      const wrapper = $(this.$el);
-      this.bs = wrapper.modal.bind(wrapper);
-    } else {
-      // We do not call modal() if the component is not attached to the
-      // document, because modal() can have side effects on the document. Most
-      // tests do not attach the component to the document.
-      this.bs = noop;
-    }
+  backdrop: Boolean
+});
+const emit = defineEmits(['shown', 'hide', 'resize', 'mutate']);
 
-    if (this.state) this.show();
-  },
-  beforeUnmount() {
-    if (this.state) this.hide();
-  },
-  methods: {
-    // checkScroll() checks whether the modal vertically overflows the viewport,
-    // causing it to scroll. The method toggles the has-scroll class based on
-    // whether the modal overflows.
-    checkScroll() {
-      /* Before checking whether the modal overflows the viewport, we add the
-      has-scroll class. The default assumption is that the modal may
-      overflow. It's necessary to add the class, because if the modal currently
-      doesn't have the class, and its content has just changed, it could be that
-      its content doesn't overflow the viewport, yet does flow underneath
-      .modal-actions. In that case, once we add the class, .modal-actions will
-      be repositioned, and the content will start to overflow the viewport: the
-      modal will be allowed to scroll as it should. */
-      this.$el.classList.add('has-scroll');
-      if (this.$el.scrollHeight === this.$el.clientHeight)
-        this.$el.classList.remove('has-scroll');
-    },
-    handleHeightChange() {
-      // Call checkScroll() before measuring the height, as the has-scroll class
-      // can affect the height.
-      this.checkScroll();
-      const newHeight = this.$refs.body.getBoundingClientRect().height;
-      if (newHeight !== this.bodyHeight) {
-        this.bs('handleUpdate');
-        this.bodyHeight = newHeight;
-        this.$emit('resize', newHeight);
-      }
-    },
-    handleWindowResize() {
-      // Most of the time, a window resize won't affect the height of the modal.
-      // However, if this.size === 'full', it could.
-      if (this.size === 'full') this.handleHeightChange();
-    },
-    show() {
-      this.bs('show');
-      this.checkScroll();
-      this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
-      this.$emit('resize', this.bodyHeight);
-      this.observer.observe(this.$refs.body, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        characterData: true
-      });
-      window.addEventListener('resize', this.handleWindowResize);
-      this.$emit('shown');
-    },
-    hide() {
-      this.observer.disconnect();
-      this.bs('hide');
-      this.$el.classList.remove('has-scroll');
-      this.bodyHeight = 0;
-      this.$emit('resize', 0);
-      window.removeEventListener('resize', this.handleWindowResize);
-
-      const selection = getSelection();
-      const { anchorNode } = selection;
-      if (anchorNode != null && this.$el.contains(anchorNode))
-        selection.removeAllRanges();
-    },
-    hideIfCan() {
-      if (this.hideable) this.$emit('hide');
-    },
-    modalMousedown(event) {
-      this.mousedownOutsideDialog = event.target === event.currentTarget;
-    },
-    modalClick(event) {
-      const mouseupOutsideDialog = event.target === event.currentTarget;
-      if (this.mousedownOutsideDialog && mouseupOutsideDialog) this.hideIfCan();
-    },
-    // Refocuses the modal if it has lost focus. This is needed so that the
-    // escape key still hides the modal.
-    refocus() {
-      /* As the user moves from one element in the modal to another, there may
-      be the briefest moment when neither element is focused. We should not
-      refocus the modal in that moment, because the second element will soon
-      receive focus, and focusing the .modal element would prevent that. Thus,
-      we use setTimeout() to give the second element time to receive focus.
-      (Using this.$nextTick() instead of setTimeout() didn't work.) */
-      setTimeout(() => {
-        // Do not focus the modal if it has lost focus because it is hidden.
-        if (!this.state) return;
-        // Do not focus the .modal element if it is already focused or if it
-        // contains the active element.
-        if (document.activeElement != null &&
-          document.activeElement.closest('.modal') === this.$el)
-          return;
-        this.$el.focus();
-      });
-    }
+const el = ref(null);
+const body = ref(null);
+
+// The modal() method of the Boostrap plugin
+let bs;
+onMounted(() => {
+  if (el.value.closest('body') != null) {
+    const wrapper = $(el.value);
+    bs = wrapper.modal.bind(wrapper);
+  } else {
+    // We do not call modal() if the component is not attached to the document,
+    // because modal() can have side effects on the document. Most tests do not
+    // attach the component to the document.
+    bs = noop;
   }
+});
+
+const alert = inject('alert');
+let oldAlertAt;
+watchPostEffect(() => { oldAlertAt = alert.at; });
+watch(() => props.state, (state) => {
+  if (state || alert.at === oldAlertAt) alert.blank();
+});
+
+// checkScroll() checks whether the modal vertically overflows the viewport,
+// causing it to scroll. The function toggles the has-scroll class based on
+// whether the modal overflows.
+const checkScroll = () => {
+  /* Before checking whether the modal overflows the viewport, we add the
+  has-scroll class. The default assumption is that the modal may overflow. It's
+  necessary to add the class, because if the modal currently doesn't have the
+  class, and its content has just changed, it could be that its content doesn't
+  overflow the viewport, yet does flow underneath .modal-actions. In that case,
+  once we add the class, .modal-actions will be repositioned, and the content
+  will start to overflow the viewport: the modal will be allowed to scroll as it
+  should. */
+  el.value.classList.add('has-scroll');
+  if (el.value.scrollHeight === el.value.clientHeight)
+    el.value.classList.remove('has-scroll');
+};
+
+let bodyHeight = 0;
+const handleHeightChange = () => {
+  // Call checkScroll() before measuring the height, as the has-scroll class can
+  // affect the height.
+  checkScroll();
+  const newHeight = body.value.getBoundingClientRect().height;
+  if (newHeight !== bodyHeight) {
+    bs('handleUpdate');
+    bodyHeight = newHeight;
+    emit('resize', newHeight);
+  }
+};
+const handleWindowResize = () => {
+  // Most of the time, a window resize won't affect the height of the modal.
+  // However, if props.size === 'full', it could.
+  if (props.state && props.size === 'full') handleHeightChange();
+};
+
+const observer = new MutationObserver(() => {
+  if (props.state) {
+    handleHeightChange();
+    emit('mutate');
+  }
+});
+const show = () => {
+  bs('show');
+  checkScroll();
+  bodyHeight = body.value.getBoundingClientRect().height;
+  emit('resize', bodyHeight);
+  observer.observe(body.value, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    characterData: true
+  });
+  window.addEventListener('resize', handleWindowResize);
+  emit('shown');
+};
+const removeSelection = () => {
+  const selection = getSelection();
+  const { anchorNode } = selection;
+  if (anchorNode != null && el.value.contains(anchorNode))
+    selection.removeAllRanges();
+};
+const hide = () => {
+  observer.disconnect();
+  bs('hide');
+  el.value.classList.remove('has-scroll');
+  bodyHeight = 0;
+  emit('resize', 0);
+  window.removeEventListener('resize', handleWindowResize);
+  removeSelection();
 };
+watch(() => props.state, (state) => {
+  if (state)
+    // The DOM hasn't updated yet, but it should be OK to show the modal now: I
+    // think it will all happen in the same event loop.
+    show();
+  else
+    hide();
+});
+onMounted(() => { if (props.state) show(); });
+onBeforeUnmount(() => { if (props.state) hide(); });
+
+const hideIfCan = () => { if (props.hideable) emit('hide'); };
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'large': return 'modal-lg';
+    case 'full': return 'modal-full';
+    default: return null; // 'normal'
+  }
+});
+
+let mousedownOutsideDialog = false;
+const modalMousedown = (event) => {
+  mousedownOutsideDialog = event.target === event.currentTarget;
+};
+const modalClick = (event) => {
+  const mouseupOutsideDialog = event.target === event.currentTarget;
+  if (mousedownOutsideDialog && mouseupOutsideDialog) hideIfCan();
+};
+
+// Refocuses the modal if it has lost focus. This is needed so that the escape
+// key still hides the modal.
+const refocus = () => {
+  /* As the user moves from one element in the modal to another, there may be
+  the briefest moment when neither element is focused. We should not refocus the
+  modal in that moment, because the second element will soon receive focus, and
+  focusing the .modal element would prevent that. Thus, we use setTimeout() to
+  give the second element time to receive focus. (Using nextTick() instead of
+  setTimeout() didn't work.) */
+  setTimeout(() => {
+    // Do not focus the modal if it has lost focus after being hidden or
+    // unmounted.
+    if (!props.state || el.value == null) return;
+    // Do not focus the .modal element if it is already focused or if it
+    // contains the active element.
+    if (document.activeElement != null &&
+      document.activeElement.closest('.modal') === el.value)
+      return;
+    el.value.focus();
+  });
+};
+
+id += 1;
+const titleId = `modal-title${id}`;
 </script>
 
 <style lang="scss">
diff --git a/test/components/modal.spec.js b/test/components/modal.spec.js
index b60c8b735..5f9e6c1b1 100644
--- a/test/components/modal.spec.js
+++ b/test/components/modal.spec.js
@@ -1,4 +1,3 @@
-import sinon from 'sinon';
 import { nextTick } from 'vue';
 
 import Alert from '../../src/components/alert.vue';
@@ -127,40 +126,16 @@ describe('Modal', () => {
     });
   });
 
-  describe('height of the modal changes', () => {
-    it("updates the modal's position", async () => {
-      const modal = mountComponent({
-        slots: {
-          body: { template: '<div id="div" style="height: 10px;"></div>' }
-        },
-        attachTo: document.body
-      });
-      const bs = sinon.fake(modal.vm.bs);
-      modal.setData({ bs });
-
-      const div = modal.get('#div').element;
-      div.setAttribute('style', 'height: 20px;');
-      await nextTick();
-      bs.calledWith('handleUpdate').should.be.true();
-
-      // bs() should not called if the content of the modal changes, but its
-      // height stays the same.
-      div.textContent = 'Some text';
-      await nextTick();
-      bs.callCount.should.equal(1);
-    });
-
-    it('emits a resize event', async () => {
-      const modal = mountComponent({
-        slots: {
-          body: { template: '<div id="div" style="height: 10px;"></div>' }
-        },
-        attachTo: document.body
-      });
-      modal.get('#div').element.setAttribute('style', 'height: 20px;');
-      await nextTick();
-      modal.emitted().resize.should.eql([[40], [50]]);
+  it('emits a resize event after the height of the modal changes', async () => {
+    const modal = mountComponent({
+      slots: {
+        body: { template: '<div id="div" style="height: 10px;"></div>' }
+      },
+      attachTo: document.body
     });
+    modal.get('#div').element.setAttribute('style', 'height: 20px;');
+    await nextTick();
+    modal.emitted().resize.should.eql([[40], [50]]);
   });
 
   describe('size prop', () => {

From c21d91f0de31da4ddedfc4cd23b8bb5cff5bbef1 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:07 -0400
Subject: [PATCH 22/27] Prevent mutation loop in Modal rather than using
 throttle()

---
 src/components/entity/upload.vue | 12 ++++-----
 src/components/modal.vue         | 17 ++++++++++---
 src/util/util.js                 | 16 ------------
 test/components/modal.spec.js    | 42 ++++++++++++++++++++++++++++++--
 4 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 8fccd9d36..f9436f14f 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -95,7 +95,7 @@ import useEventListener from '../../composables/event-listener';
 import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { formatCSVRow, parseCSV, parseCSVHeader } from '../../util/csv';
-import { noop, throttle } from '../../util/util';
+import { noop } from '../../util/util';
 import { odataEntityToRest } from '../../util/odata';
 import { useRequestData } from '../../request-data';
 
@@ -322,7 +322,7 @@ const upload = () => {
 };
 
 const popupAnimating = ref(false);
-const animatePopup = (value) => { popupAnimating.value = value; };
+const animatePopup = (animating) => { popupAnimating.value = animating; };
 watch(csvEntities, (value) => {
   if (value == null) popupAnimating.value = false;
 });
@@ -333,11 +333,11 @@ const setTable = (i) => (el) => { tables[i] = el; };
 const resizeLastColumn = () => {
   for (const table of tables) table.resizeLastColumn();
 };
-watch(() => props.state, () => { nextTick(resizeLastColumn); });
-watch(popupAnimating, (value) => { if (!value) resizeLastColumn(); });
-const resizeColumnUnlessAnimating = throttle(() => {
+watch(popupAnimating, (animating) => { if (!animating) resizeLastColumn(); });
+watch(() => props.state, (state) => { if (!state) nextTick(resizeLastColumn); });
+const resizeColumnUnlessAnimating = () => {
   if (props.state && !popupAnimating.value) resizeLastColumn();
-});
+};
 useEventListener(window, 'resize', resizeColumnUnlessAnimating);
 
 watch(() => props.state, (state) => {
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 442aa5c09..c91865a5c 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -40,7 +40,7 @@ may add the `in` class to the element, and the checkScroll() method may add the
 let id = 0;
 </script>
 <script setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from 'vue';
 import 'bootstrap/js/modal';
 
 import Alert from './alert.vue';
@@ -133,12 +133,23 @@ const handleWindowResize = () => {
   if (props.state && props.size === 'full') handleHeightChange();
 };
 
+let ignoreMutation = false;
 const observer = new MutationObserver(() => {
-  if (props.state) {
-    handleHeightChange();
+  if (!props.state) return;
+  handleHeightChange();
+  if (!ignoreMutation) {
     emit('mutate');
+    // Ignore mutations for a tick, effectively ignoring any mutations that the
+    // `mutate` event handler just made. This helps prevent a loop such that a
+    // mutation causes a `mutate` event, which causes the `mutate` handler to
+    // make a mutation, which causes a `mutate` event, and so on.
+    ignoreMutation = true;
+    // The MutationObserver callback seems to be called in a microtask, so I
+    // think nextTick() is the right choice and not setTimeout().
+    nextTick(() => { ignoreMutation = false; });
   }
 });
+
 const show = () => {
   bs('show');
   checkScroll();
diff --git a/src/util/util.js b/src/util/util.js
index a08898b88..378e17d74 100644
--- a/src/util/util.js
+++ b/src/util/util.js
@@ -16,19 +16,3 @@ export const noop = () => {};
 export const noargs = (f) => () => f();
 
 export const sumUnderThreshold = (list, threshold) => list.reduce((acc, i) => acc + Math.min(i, threshold), 0);
-
-/* throttle() returns a function that manages calls to the provided function
-f(). It prevents f() from being called more than once within a given interval.
-If the throttled function is called within `delay` milliseconds of the last call
-to f(), then it will simply ignore the call and will not call f(). Note that
-this means that it is not guaranteed that every call to the throttled function
-will eventually be followed by a call to f(). */
-export const throttle = (f, delay = 200) => {
-  let timeOfLastCall = -Infinity;
-  return (...args) => {
-    if (Date.now() - timeOfLastCall >= delay) {
-      f(...args);
-      timeOfLastCall = Date.now();
-    }
-  };
-};
diff --git a/test/components/modal.spec.js b/test/components/modal.spec.js
index 5f9e6c1b1..3dbd48167 100644
--- a/test/components/modal.spec.js
+++ b/test/components/modal.spec.js
@@ -38,7 +38,7 @@ describe('Modal', () => {
     mountComponent().findComponent(Alert).exists().should.be.true();
   });
 
-  describe('state prop is true', () => {
+  describe('state prop is initially true', () => {
     it('shows the modal', () => {
       mountComponent({
         props: { state: true },
@@ -65,7 +65,7 @@ describe('Modal', () => {
       document.body.classList.contains('modal-open').should.be.true();
     });
 
-    it('hides any alert', async () => {
+    it('hides the current alert', async () => {
       const modal = mountComponent({
         props: { state: false }
       });
@@ -138,6 +138,44 @@ describe('Modal', () => {
     modal.emitted().resize.should.eql([[40], [50]]);
   });
 
+  describe('mutation', () => {
+    it('emits a mutate event after .modal-body changes', async () => {
+      const modal = mountComponent({
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        }
+      });
+      modal.get('#div').element.setAttribute('style', 'height: 20px;');
+      await nextTick();
+      modal.emitted().mutate.should.eql([[]]);
+    });
+
+    it('does not a emit a second mutate event if mutate handler also mutates', async () => {
+      const Parent = {
+        template: `<modal :state="true" @mutate="setHeight(100)">
+          <template #title>Mutate Modal</template>
+          <template #body>
+            <div id="div" ref="div" style="height: 10px;"></div>
+          </template>
+        </modal>`,
+        components: { Modal },
+        methods: {
+          setHeight(height) {
+            this.$refs.div.setAttribute('style', `height: ${height}px;`);
+          }
+        }
+      };
+      const parent = mount(Parent);
+      parent.vm.setHeight(20);
+      await nextTick();
+      const modal = parent.getComponent(Modal);
+      modal.emitted().mutate.length.should.equal(1);
+      await wait();
+      modal.get('#div').attributes().style.should.equal('height: 100px;');
+      modal.emitted().mutate.length.should.equal(1);
+    });
+  });
+
   describe('size prop', () => {
     it("adds the correct class if the prop is 'large'", () => {
       const modal = mountComponent({

From fec250596fa1dc99d0bdc8d7b03d2ceb20fb1cc7 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:08 -0400
Subject: [PATCH 23/27] Use built-in formatRange() rather than translating
 punctuation

Also adding formatList().
---
 src/components/pagination.vue | 14 +++-----
 src/locales/en.json5          |  4 +--
 src/util/i18n.js              | 64 +++++++++++++++++++++++++++++++----
 test/unit/i18n.spec.js        | 45 +++++++++++++++++++++++-
 transifex/strings_en.json     |  6 ----
 5 files changed, 107 insertions(+), 26 deletions(-)

diff --git a/src/components/pagination.vue b/src/components/pagination.vue
index 92c76f242..7d56ac042 100644
--- a/src/components/pagination.vue
+++ b/src/components/pagination.vue
@@ -60,10 +60,12 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 
 import Spinner from './spinner.vue';
 
+import { useI18nUtils } from '../util/i18n';
+
 const props = defineProps({
   count: {
     type: Number,
@@ -91,18 +93,12 @@ const pageModel = computed({
   get: () => props.page,
   set: (value) => { emit('update:page', value); }
 });
-const { i18n } = inject('container');
+const { formatRange } = useI18nUtils();
 // Returns the formatted range of rows associated with a page.
 const pageRange = (page) => {
   const start = page * props.size + 1;
   const end = page < lastPage.value ? start + props.size - 1 : props.count;
-  // `start` may equal `end` on the last page.
-  return start === end
-    ? i18n.n(start, 'default')
-    : i18n.t('punctuation.range', {
-      start: i18n.n(start, 'default'),
-      end: i18n.n(end, 'default')
-    });
+  return formatRange(start, end);
 };
 const options = computed(() => {
   const result = new Array(lastPage.value + 1);
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index 3c50aa624..e854107f0 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -352,9 +352,7 @@
   },
   "punctuation": {
     // @transifexKey common.punctuations.comma
-    "comma": ",",
-    // This is a range of numbers. {start} and {end} are numbers.
-    "range": "{start}-{end}"
+    "comma": ","
   },
   "common": {
     // This is a title shown above a section of the page.
diff --git a/src/util/i18n.js b/src/util/i18n.js
index a23dc97e3..44949bea7 100644
--- a/src/util/i18n.js
+++ b/src/util/i18n.js
@@ -10,7 +10,15 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
 import { useI18n } from 'vue-i18n';
+import { watchSyncEffect } from 'vue';
+
 import { locales } from '../i18n';
+import { memoizeForContainer } from './composable';
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// loadLocale()
 
 const setLocale = (i18n, locale) => {
   i18n.locale = locale; // eslint-disable-line no-param-reassign
@@ -40,17 +48,59 @@ export const loadLocale = ({ i18n, logger }, locale) => {
     });
 };
 
+
+
+////////////////////////////////////////////////////////////////////////////////
+// tn(), $tcn()
+
 // Combination of $tc() and $n()
 export function $tcn(path, count, values = undefined) {
   return this.$tc(path, count, { count: this.$n(count, 'default'), ...values });
 }
 
-export const useI18nUtils = () => {
-  const { t, n } = useI18n();
-  const tn = (path, count, values) => {
-    const list = { count: n(count, 'default') };
-    Object.entries(values || {}).forEach(([k, v]) => { list[k] = typeof v === 'number' ? n(v, 'default') : v; });
-    return t(path, list, count);
+// Combination of t() and n()
+const tn = (t, n) => (path, count, values) => {
+  const list = { count: n(count, 'default') };
+  Object.entries(values || {}).forEach(([k, v]) => { list[k] = typeof v === 'number' ? n(v, 'default') : v; });
+  return t(path, list, count);
+};
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// useI18nUtils()
+
+const useGlobalUtils = memoizeForContainer(({ i18n }) => {
+  const formats = {};
+  watchSyncEffect(() => {
+    const { locale } = i18n;
+    if (formats[locale] != null) return;
+    formats[locale] = {
+      numberFormats: {},
+      listFormat: new Intl.ListFormat(locale, { style: 'narrow' })
+    };
+  });
+  const getNumberFormat = (key) => {
+    const { locale } = i18n;
+    const { numberFormats } = formats[locale];
+    const existingFormat = numberFormats[key];
+    if (existingFormat != null) return existingFormat;
+    const options = i18n.getNumberFormat(locale)[key];
+    const numberFormat = new Intl.NumberFormat(locale, options);
+    numberFormats[key] = numberFormat;
+    return numberFormat;
   };
-  return { tn };
+  return {
+    formatRange: (start, end, key = 'default') => (start === end
+      ? i18n.n(start, key)
+      : getNumberFormat(key).formatRange(start, end)),
+    formatList: (list) => formats[i18n.locale].listFormat.format(list)
+  };
+});
+
+const useLocalUtils = () => {
+  const { t, n } = useI18n();
+  return { tn: tn(t, n) };
 };
+
+export const useI18nUtils = () => ({ ...useGlobalUtils(), ...useLocalUtils() });
diff --git a/test/unit/i18n.spec.js b/test/unit/i18n.spec.js
index 8047502c4..ba72fb43f 100644
--- a/test/unit/i18n.spec.js
+++ b/test/unit/i18n.spec.js
@@ -1,7 +1,8 @@
 import createCentralI18n from '../../src/i18n';
-import { $tcn, loadLocale } from '../../src/util/i18n';
+import { $tcn, loadLocale, useI18nUtils } from '../../src/util/i18n';
 
 import createTestContainer from '../util/container';
+import { withSetup } from '../util/lifecycle';
 
 describe('util/i18n', () => {
   describe('loadLocale()', () => {
@@ -87,4 +88,46 @@ describe('util/i18n', () => {
       message.should.equal('Gallia est omnis divisa in partes 3.');
     });
   });
+
+  describe('useI18nUtils()', () => {
+    describe('formatRange()', () => {
+      it('returns a formatted range', () => {
+        const { formatRange } = withSetup(useI18nUtils);
+        formatRange(1000, 2000).should.equal('1,000–2,000');
+      });
+
+      it('returns a single number if start and end are the same', () => {
+        const { formatRange } = withSetup(useI18nUtils);
+        formatRange(1000, 1000).should.equal('1,000');
+      });
+
+      it('uses the locale', () => {
+        const container = createTestContainer();
+        const { formatRange } = withSetup(useI18nUtils, { container });
+        container.i18n.locale = 'ja';
+        formatRange(1000, 2000).should.equal('1,000～2,000');
+      });
+
+      it('accepts a number format key', () => {
+        const { formatRange } = withSetup(useI18nUtils);
+        formatRange(0.1, 0.2, 'percent').should.equal('10% – 20%');
+      });
+    });
+
+    describe('formatList()', () => {
+      it('returns a formatted list', () => {
+        const { formatList } = withSetup(useI18nUtils);
+        formatList(['x', 'y']).should.equal('x, y');
+        formatList(['x', 'y', 'z']).should.equal('x, y, z');
+      });
+
+      it('uses the locale', () => {
+        const container = createTestContainer();
+        const { formatList } = withSetup(useI18nUtils, { container });
+        container.i18n.locale = 'ja';
+        formatList(['x', 'y']).should.equal('x、y');
+        formatList(['x', 'y', 'z']).should.equal('x、y、z');
+      });
+    });
+  });
 });
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index f5c07b073..43318a8d8 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -764,12 +764,6 @@
       "string": "{count, plural, one {{count} conflict} other {{count} conflicts}}"
     }
   },
-  "punctuation": {
-    "range": {
-      "string": "{start}-{end}",
-      "developer_comment": "This is a range of numbers. {start} and {end} are numbers."
-    }
-  },
   "common": {
     "activity": {
       "string": "Activity",

From 349d60b1ff35f7a0e1e07d3bf0204b556d2c6cf7 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:19:10 -0400
Subject: [PATCH 24/27] testRequests(): accept function for url

---
 test/components/entity/upload.spec.js | 34 ++++++++++++++-------------
 test/util/http/common.js              | 11 ++++++++-
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/test/components/entity/upload.spec.js b/test/components/entity/upload.spec.js
index 9cf3d14a3..d6a9dff74 100644
--- a/test/components/entity/upload.spec.js
+++ b/test/components/entity/upload.spec.js
@@ -67,15 +67,16 @@ describe('EntityUpload', () => {
     it('sends the correct request', () => {
       testData.extendedDatasets.createPast(1, { name: 'á', entities: 1 });
       testData.extendedEntities.createPast(1);
-      return showModal().beforeEachResponse((_, { url }) => {
-        url.should.startWith('/v1/projects/1/datasets/%C3%A1.svc/Entities?');
-        const params = relativeUrl(url).searchParams;
-        const millis = parseFilterTime(params.get('$filter'));
-        (Date.now() - millis).should.be.below(2000);
-        params.get('$top').should.equal('5');
-        params.get('$skip').should.equal('0');
-        params.get('$count').should.equal('true');
-      });
+      return showModal().testRequests([{
+        url: (url, { searchParams: params }) => {
+          url.should.startWith('/v1/projects/1/datasets/%C3%A1.svc/Entities?');
+          const millis = parseFilterTime(params.get('$filter'));
+          (Date.now() - millis).should.be.below(2000);
+          params.get('$top').should.equal('5');
+          params.get('$skip').should.equal('0');
+          params.get('$count').should.equal('true');
+        }
+      }]);
     });
 
     it('does not send a request if there are no entities', () => {
@@ -97,13 +98,14 @@ describe('EntityUpload', () => {
           await modal.setProps({ state: true });
         })
         .respondWithData(() => testData.entityOData(5, 0, true))
-        .beforeEachResponse((_, { url }) => {
-          url.should.startWith('/v1/projects/1/datasets/trees.svc/Entities?');
-          const params = relativeUrl(url).searchParams;
-          const millis = parseFilterTime(params.get('$filter'));
-          millis.should.be.above(firstTime);
-          (Date.now() - millis).should.be.below(2000);
-        });
+        .testRequests([{
+          url: (url, { searchParams: params }) => {
+            url.should.startWith('/v1/projects/1/datasets/trees.svc/Entities?');
+            const millis = parseFilterTime(params.get('$filter'));
+            millis.should.be.above(firstTime);
+            (Date.now() - millis).should.be.below(2000);
+          }
+        }]);
     });
   });
 
diff --git a/test/util/http/common.js b/test/util/http/common.js
index 7bda36f42..c4382c951 100644
--- a/test/util/http/common.js
+++ b/test/util/http/common.js
@@ -3,6 +3,7 @@
 import Modal from '../../../src/components/modal.vue';
 import Spinner from '../../../src/components/spinner.vue';
 
+import { relativeUrl } from '../request';
 import { withAuth } from '../../../src/util/request';
 
 export function testRequests(expectedConfigs) {
@@ -18,7 +19,15 @@ export function testRequests(expectedConfigs) {
       if (i < expectedConfigs.length && expectedConfigs[i] != null) {
         const { extended = false, ...expectedConfig } = expectedConfigs[i];
         (config.method ?? 'GET').should.equal(expectedConfig.method ?? 'GET');
-        config.url.should.equal(expectedConfig.url);
+
+        if (typeof expectedConfig.url === 'function') {
+          expectedConfig.url.call(null, config.url, relativeUrl(config.url));
+          // Replace expectedConfig.url now that config.url has passed
+          // validation. This is needed because withAuth() expects the URL.
+          expectedConfig.url = config.url;
+        } else {
+          config.url.should.equal(expectedConfig.url);
+        }
 
         try {
           should(config.data).eql(expectedConfig.data);

From e46703e8b716a434a07701ee50313b7b7b4ee3b7 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 17 Apr 2024 12:44:23 -0400
Subject: [PATCH 25/27] Make small changes

---
 src/components/entity/upload.vue |  2 +-
 src/util/csv.js                  |  4 ++--
 test/unit/csv.spec.js            | 11 +++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index f9436f14f..40a26d832 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -299,7 +299,7 @@ onBeforeUnmount(() => { abortParse(); });
 
 const csvPage = reactive({ page: 0, size: defaultPageSize });
 const csvRow = computed(() =>
-  (csvEntities.value != null ? csvPage.page * csvPage.size : null));
+  (csvEntities.value != null ? csvPage.page * csvPage.size : -1));
 const csvSlice = computed(() => (csvEntities.value != null
   ? csvEntities.value.slice(csvRow.value, csvRow.value + csvPage.size)
   : null));
diff --git a/src/util/csv.js b/src/util/csv.js
index 560abf385..cdb23fa44 100644
--- a/src/util/csv.js
+++ b/src/util/csv.js
@@ -121,8 +121,8 @@ const raggedRowsWarning = (columns) => {
   };
 };
 const largeCellWarning = (delimiter) => {
-  // The size and 0-indexed row number of the largest cell containing a comma or
-  // newline
+  // The size and 0-indexed row number of the largest cell containing a
+  // delimiter or newline
   const largestCell = { size: 0, row: -1 };
   // The sizes of the two largest rows (descending order)
   const maxRowSizes = [0, 0];
diff --git a/test/unit/csv.spec.js b/test/unit/csv.spec.js
index 63de629d9..bce3e146a 100644
--- a/test/unit/csv.spec.js
+++ b/test/unit/csv.spec.js
@@ -284,6 +284,17 @@ describe('util/csv', () => {
           });
         });
       });
+
+      it('returns multiple warnings', async () => {
+        const csv = createCSV('a;b\n1\n"12345;6789ab";""');
+        const { warnings } = await parseCSV(i18n, csv, ['a', 'b'], {
+          delimiter: ';'
+        });
+        warnings.should.eql({
+          count: 3,
+          details: { delimiter: ';', raggedRows: [1], largeCell: 2 }
+        });
+      });
     });
   });
 

From 1f61fc7879cb1b5701295b1d9ff7319796f1c272 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 17 Apr 2024 12:44:25 -0400
Subject: [PATCH 26/27] Add some tests of EntityUploadTable

---
 test/components/entity/upload/table.spec.js | 82 +++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 test/components/entity/upload/table.spec.js

diff --git a/test/components/entity/upload/table.spec.js b/test/components/entity/upload/table.spec.js
new file mode 100644
index 000000000..efefea2a1
--- /dev/null
+++ b/test/components/entity/upload/table.spec.js
@@ -0,0 +1,82 @@
+import { pick } from 'ramda';
+
+import EntityUploadTable from '../../../../src/components/entity/upload/table.vue';
+
+import testData from '../../../data';
+import { mergeMountOptions, mount } from '../../../util/lifecycle';
+
+const mountComponent = (options) =>
+  mount(EntityUploadTable, mergeMountOptions(options, {
+    props: {
+      entities: testData.extendedEntities.size === 0
+        ? null
+        : testData.extendedEntities.sorted().reverse()
+          .map(entity => pick(['label', 'data'], entity.currentVersion)),
+      rowIndex: testData.extendedEntities.size === 0 ? -1 : 0,
+      pageSize: 5
+    },
+    container: {
+      requestData: { dataset: testData.extendedDatasets.last() }
+    }
+  }));
+
+describe('EntityUploadTable', () => {
+  it('shows a column header for each property', async () => {
+    testData.extendedDatasets.createPast(1, {
+      properties: [{ name: 'height' }, { name: 'circumference' }]
+    });
+    const th = mountComponent().findAll('th');
+    const text = th.map(wrapper => wrapper.text());
+    text.should.eql(['Row', 'label', 'height', 'circumference']);
+    await th[2].get('div').should.have.textTooltip();
+  });
+
+  it('does not render data if the entities prop is nullish', () => {
+    testData.extendedDatasets.createPast(1);
+    mountComponent().find('tbody').exists().should.be.false();
+  });
+
+  it('shows a row for each entity', () => {
+    testData.extendedDatasets.createPast(1, { entities: 2 });
+    testData.extendedEntities.createPast(2);
+    mountComponent().findAll('tbody tr').length.should.equal(2);
+  });
+
+  it('shows the row number', () => {
+    testData.extendedDatasets.createPast(1, { entities: 2 });
+    testData.extendedEntities.createPast(2);
+    const td = mountComponent().findAll('.row-number');
+    td.map(wrapper => wrapper.text()).should.eql(['1', '2']);
+  });
+
+  it('uses the rowIndex prop', () => {
+    testData.extendedDatasets.createPast(1, { entities: 1001 });
+    testData.extendedEntities.createPast(1001);
+    const component = mountComponent({
+      props: {
+        entities: [testData.extendedEntities.last()],
+        rowIndex: 1000
+      }
+    });
+    component.get('.row-number').text().should.equal('1001');
+  });
+
+  it('shows the label', async () => {
+    testData.extendedEntities.createPast(1, { label: 'dogwood' });
+    const div = mountComponent().get('td:nth-child(2) div');
+    div.text().should.equal('dogwood');
+    await div.should.have.textTooltip();
+  });
+
+  it('shows data for each property', async () => {
+    testData.extendedEntities.createPast(1, {
+      data: { height: '123456', circumference: '999' }
+    });
+    const td = mountComponent().findAll('td');
+    td.length.should.equal(4);
+    const divs = td.slice(2).map(wrapper => wrapper.get('div'));
+    divs[0].text().should.equal('123456');
+    divs[1].text().should.equal('999');
+    await divs[0].should.have.textTooltip();
+  });
+});

From 38c5718df013e53f71d339ece762a37a3fa6cceb Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:21:58 -0400
Subject: [PATCH 27/27] Make small changes after code review

---
 src/components/entity/upload.vue              | 23 ++++++++++---------
 src/components/entity/upload/file-select.vue  | 12 ++++------
 .../entity/upload/header-errors.vue           |  8 +++----
 src/components/pagination.vue                 |  6 ++---
 test/components/entity/upload.spec.js         |  2 --
 test/components/modal.spec.js                 | 21 +++++++++--------
 6 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/components/entity/upload.vue b/src/components/entity/upload.vue
index 40a26d832..f1a0f871c 100644
--- a/src/components/entity/upload.vue
+++ b/src/components/entity/upload.vue
@@ -257,7 +257,6 @@ const parseEntities = async (file, headerResults, signal) => {
 const selectFile = (file) => {
   headerErrors.value = null;
   dataError.value = null;
-  warnings.value = null;
 
   const abortController = new AbortController();
   abortParse = () => { abortController.abort(); };
@@ -285,6 +284,7 @@ const selectFile = (file) => {
 const clearFile = () => {
   csvEntities.value = null;
   fileMetadata.value = null;
+  warnings.value = null;
 };
 watch(() => props.state, (state) => {
   if (state) return;
@@ -399,16 +399,17 @@ watch(() => props.state, (state) => {
   .panel-danger {
     box-shadow: none;
     margin-bottom: 0;
-  }
-  $panel-danger-border-radius: 3px;
-  .panel-heading {
-    border-top-left-radius: $panel-danger-border-radius;
-    border-top-right-radius: $panel-danger-border-radius;
-  }
-  .panel-body {
-    border: none;
-    border-bottom-left-radius: $panel-danger-border-radius;
-    border-bottom-right-radius: $panel-danger-border-radius;
+
+    $panel-danger-border-radius: 3px;
+    .panel-heading {
+      border-top-left-radius: $panel-danger-border-radius;
+      border-top-right-radius: $panel-danger-border-radius;
+    }
+    .panel-body {
+      border: none;
+      border-bottom-left-radius: $panel-danger-border-radius;
+      border-bottom-right-radius: $panel-danger-border-radius;
+    }
   }
 }
 </style>
diff --git a/src/components/entity/upload/file-select.vue b/src/components/entity/upload/file-select.vue
index b761caaee..6b050a9c1 100644
--- a/src/components/entity/upload/file-select.vue
+++ b/src/components/entity/upload/file-select.vue
@@ -68,14 +68,12 @@ const changeInput = (event) => {
   margin-bottom: 1px;
   position: relative;
 
-  .disabled > & {
-    > :first-child { opacity: 0.09; }
+  .disabled > & > :first-child { opacity: 0.09; }
 
-    > :nth-child(2) {
-      left: 0;
-      position: absolute;
-      top: 1px;
-    }
+  > :nth-child(2) {
+    left: 0;
+    position: absolute;
+    top: 1px;
   }
 
   .spinner {
diff --git a/src/components/entity/upload/header-errors.vue b/src/components/entity/upload/header-errors.vue
index 1abea8dfe..d2b2f3313 100644
--- a/src/components/entity/upload/header-errors.vue
+++ b/src/components/entity/upload/header-errors.vue
@@ -47,7 +47,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { formatCSVDelimiter, formatCSVRow } from '../../../util/csv';
 import { useRequestData } from '../../../request-data';
@@ -86,11 +86,11 @@ const expectedHeader = computed(() => {
   return formatCSVRow(columns, { delimiter: props.delimiter });
 });
 
-const headerElements = ref([]);
-const setHeaderElement = (i) => (el) => { headerElements.value[i] = el; };
+const headerElements = [];
+const setHeaderElement = (i) => (el) => { headerElements[i] = el; };
 const scrollHeader = (event) => {
   const { target } = event;
-  for (const header of headerElements.value) {
+  for (const header of headerElements) {
     if (header !== target) header.scroll(target.scrollLeft, 0);
   }
 };
diff --git a/src/components/pagination.vue b/src/components/pagination.vue
index 7d56ac042..37b418413 100644
--- a/src/components/pagination.vue
+++ b/src/components/pagination.vue
@@ -38,7 +38,7 @@ except according to the terms contained in the LICENSE file.
           <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
           <select v-if="lastPage > 0 && lastPage < 20" v-model="pageModel"
             class="form-control">
-            <option v-for="[value, text] of options" :key="value" :value="value">
+            <option v-for="[value, text] of pageOptions" :key="value" :value="value">
               {{ text }}
             </option>
           </select>
@@ -94,13 +94,13 @@ const pageModel = computed({
   set: (value) => { emit('update:page', value); }
 });
 const { formatRange } = useI18nUtils();
-// Returns the formatted range of rows associated with a page.
+// Returns the formatted range of rows shown on the specified page.
 const pageRange = (page) => {
   const start = page * props.size + 1;
   const end = page < lastPage.value ? start + props.size - 1 : props.count;
   return formatRange(start, end);
 };
-const options = computed(() => {
+const pageOptions = computed(() => {
   const result = new Array(lastPage.value + 1);
   for (let i = 0; i <= lastPage.value; i += 1) result[i] = [i, pageRange(i)];
   return result;
diff --git a/test/components/entity/upload.spec.js b/test/components/entity/upload.spec.js
index d6a9dff74..39b6f0774 100644
--- a/test/components/entity/upload.spec.js
+++ b/test/components/entity/upload.spec.js
@@ -34,8 +34,6 @@ const parseFilterTime = (filter) => {
     : DateTime.fromISO(match[1]).toMillis();
 };
 const selectFile = async (modal, file = csv()) => {
-  if (modal.element.id !== 'entity-upload')
-    throw new Error('expected EntityUpload');
   await setFiles(modal.get('input'), [file]);
   return waitUntil(() => !modal.vm.parsing);
 };
diff --git a/test/components/modal.spec.js b/test/components/modal.spec.js
index 3dbd48167..94a1a4509 100644
--- a/test/components/modal.spec.js
+++ b/test/components/modal.spec.js
@@ -53,6 +53,17 @@ describe('Modal', () => {
       });
       modal.emitted().shown.should.eql([[]]);
     });
+
+    it('emits a resize event', () => {
+      const modal = mountComponent({
+        props: { state: true },
+        slots: {
+          body: { template: '<div id="div" style="height: 10px;"></div>' }
+        },
+        attachTo: document.body
+      });
+      modal.emitted().resize.should.eql([[40]]);
+    });
   });
 
   describe('after the state prop changes to true', () => {
@@ -73,16 +84,6 @@ describe('Modal', () => {
       await modal.setProps({ state: true });
       modal.should.not.alert();
     });
-
-    it('emits a resize event', () => {
-      const modal = mountComponent({
-        slots: {
-          body: { template: '<div id="div" style="height: 10px;"></div>' }
-        },
-        attachTo: document.body
-      });
-      modal.emitted().resize.should.eql([[40]]);
-    });
   });
 
   describe('after the state prop changes to false', () => {