From 3e59dc2cdcf1fd6963e32eba776af5bc14d8b1db Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Fri, 28 Feb 2025 15:40:01 -0500
Subject: [PATCH] Feature getodk/central#824: Redesign top section of Entities
 and Submissions pages

---
 src/assets/scss/app.scss                      | 37 ++++++++++
 src/components/audit/filters.vue              |  4 +-
 src/components/audit/filters/action.vue       |  4 +-
 src/components/audit/list.vue                 |  4 +-
 src/components/dataset/entities.vue           | 55 ++++++++++-----
 src/components/date-range-picker.vue          | 44 +++++++++---
 src/components/entity/download-button.vue     | 17 +----
 src/components/entity/filters.vue             |  2 +-
 src/components/entity/filters/conflict.vue    | 12 +++-
 src/components/entity/list.vue                | 29 ++------
 src/components/form/submissions.vue           | 70 ++++++++++++-------
 src/components/multiselect.vue                | 30 ++++++--
 src/components/odata/data-access.vue          | 14 ++--
 src/components/submission/download-button.vue | 27 +------
 src/components/submission/field-dropdown.vue  |  4 +-
 src/components/submission/filters.vue         |  4 +-
 .../submission/filters/review-state.vue       | 11 ++-
 .../submission/filters/submitter.vue          | 12 +++-
 src/components/submission/list.vue            | 28 +++++---
 src/components/table-freeze.vue               |  2 +-
 src/locales/en.json5                          |  6 +-
 test/components/date-range-picker.spec.js     | 22 +-----
 .../components/entity/download-button.spec.js |  6 +-
 test/components/entity/list.spec.js           | 13 ++--
 test/components/form-draft/testing.spec.js    |  2 +-
 test/components/form/submissions.spec.js      |  2 +-
 .../submission/download-button.spec.js        |  6 +-
 test/components/submission/download.spec.js   | 12 ++++
 test/components/submission/list.spec.js       | 21 ++++--
 test/util/entity.js                           |  3 +
 transifex/strings_en.json                     | 36 ++++------
 31 files changed, 318 insertions(+), 221 deletions(-)

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 4fe0de654..3abffbc52 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -336,7 +336,17 @@ a {
   > .btn-default + .btn-default { border-left: 1px solid #ccc; }
 }
 
+.btn-outlined {
+  background-color: #fff;
+  color: $color-action-background;
+  border: 1px solid $color-action-background;
 
+  &:hover, &:focus, &:active:focus {
+    color: #fff;
+    background-color: $color-action-background;
+    &[aria-disabled="true"], &.disabled, fieldset[disabled] & { background-color: #ddd; }
+  }
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 // DROPDOWN MENUS
@@ -535,6 +545,7 @@ select {
   .icon-filter {
     color: #999;
     margin-right: $margin-right-icon;
+    font-size: 20px;
   }
 }
 
@@ -927,4 +938,30 @@ becomes more complicated.
 
 .odk-form :not(svg|*) {
   all: revert;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// The action bar shown above the data table 
+
+.table-actions-bar {
+  background-color: $color-subpanel-background;
+  padding: 10px 20px;
+
+  .form-inline {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .form-label {
+    height: auto;
+    cursor: pointer;
+  }
+
+  .form-group .form-control {
+    border-bottom: none;
+  }
+
+  .form-group + .form-group {
+    margin-left: 30px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/audit/filters.vue b/src/components/audit/filters.vue
index a0a42a7d3..7ec4cc494 100644
--- a/src/components/audit/filters.vue
+++ b/src/components/audit/filters.vue
@@ -12,12 +12,12 @@ except according to the terms contained in the LICENSE file.
 <template>
   <form class="form-inline" @submit.prevent>
     <div class="form-group">
-      <span class="icon-filter"></span><span>{{ $t('common.filter') }}</span>
+      <span class="icon-filter"></span>
     </div>
     <audit-filters-action :model-value="action"
       @update:model-value="$emit('update:action', $event)"/>
     <date-range-picker :model-value="dateRange"
-      :placeholder="$t('field.dateRange')" required
+      :label="$t('field.dateRange')" required
       @update:model-value="$emit('update:dateRange', $event)"/>
   </form>
 </template>
diff --git a/src/components/audit/filters/action.vue b/src/components/audit/filters/action.vue
index 0047acd69..f5c7f5708 100644
--- a/src/components/audit/filters/action.vue
+++ b/src/components/audit/filters/action.vue
@@ -10,8 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label id="audit-filters-action" class="form-group">
-    <select class="form-control" :value="modelValue"
+  <label id="audit-filters-action" for="audit-actions" class="form-group">
+    <select id="audit-actions" ref="auditActions" class="form-control" :value="modelValue"
       @change="$emit('update:modelValue', $event.target.value)">
       <option v-for="option of options" :key="option.value"
         :class="option.htmlClass" :value="option.value">
diff --git a/src/components/audit/list.vue b/src/components/audit/list.vue
index ef0da93ca..2db707c6f 100644
--- a/src/components/audit/list.vue
+++ b/src/components/audit/list.vue
@@ -12,7 +12,9 @@ except according to the terms contained in the LICENSE file.
 <template>
   <div>
     <p class="page-body-heading">{{ $t('heading[0]') }}</p>
-    <audit-filters v-model:action="action" v-model:dateRange="dateRange"/>
+    <div class="table-actions-bar">
+      <audit-filters v-model:action="action" v-model:dateRange="dateRange"/>
+    </div>
     <audit-table/>
     <loading :state="audits.initiallyLoading"/>
     <p v-show="audits.dataExists && audits.length === 0"
diff --git a/src/components/dataset/entities.vue b/src/components/dataset/entities.vue
index 4538f8386..ca78b48a1 100644
--- a/src/components/dataset/entities.vue
+++ b/src/components/dataset/entities.vue
@@ -13,23 +13,27 @@ except according to the terms contained in the LICENSE file.
   <div id="dataset-entities">
     <page-section>
       <template #heading>
-        <span>{{ $t('resource.entities') }}</span>
-        <button v-if="project.dataExists && project.permits('entity.create')"
-          id="dataset-entities-upload-button" type="button"
-          class="btn btn-primary" @click="upload.show()">
-          <span class="icon-upload"></span>{{ $t('action.upload') }}
-        </button>
-        <template v-if="deletedEntityCount.dataExists">
-          <button v-if="canDelete && (deletedEntityCount.value > 0 || deleted)" type="button"
-            class="btn toggle-deleted-entities" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
-            @click="toggleDeleted">
-            <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedEntities', deletedEntityCount.value) }}
-            <span v-show="deleted" class="icon-close"></span>
+        <div class="dataset-entities-heading-row">
+          <button v-if="project.dataExists && project.permits('entity.create')"
+            id="dataset-entities-upload-button" type="button"
+            class="btn btn-primary" @click="upload.show()">
+            <span class="icon-upload"></span>{{ $t('upload') }}
           </button>
-        </template>
-        <odata-data-access :analyze-disabled="deleted"
-          :analyze-disabled-message="$t('analyzeDisabledDeletedData')"
-          @analyze="analyze.show()"/>
+          <template v-if="deletedEntityCount.dataExists">
+            <button v-if="canDelete && (deletedEntityCount.value > 0 || deleted)" type="button"
+              class="btn toggle-deleted-entities" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
+              @click="toggleDeleted">
+              <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedEntities', deletedEntityCount.value) }}
+              <span v-show="deleted" class="icon-close"></span>
+            </button>
+          </template>
+          <odata-data-access :analyze-disabled="deleted"
+            :analyze-disabled-message="$t('analyzeDisabledDeletedData')"
+            @analyze="analyze.show()"/>
+          <entity-download-button
+            :aria-disabled="deleted"
+            v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"/>
+        </div>
       </template>
       <template #body>
         <entity-list ref="list" :project-id="projectId"
@@ -54,6 +58,7 @@ import OdataDataAccess from '../odata/data-access.vue';
 import PageSection from '../page/section.vue';
 import useEntities from '../../request-data/entities';
 import useQueryRef from '../../composables/query-ref';
+import EntityDownloadButton from '../entity/download-button.vue';
 
 import { apiPaths } from '../../util/request';
 import { loadAsync } from '../../util/load-async';
@@ -68,9 +73,13 @@ export default {
     OdataDataAccess,
     EntityList,
     EntityUpload: defineAsyncComponent(loadAsync('EntityUpload')),
+    EntityDownloadButton,
     PageSection
   },
   inject: ['alert'],
+  provide() {
+    return { projectId: this.projectId, datasetName: this.datasetName };
+  },
   props: {
     projectId: {
       type: String,
@@ -155,8 +164,6 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-#odata-data-access { float: right; }
-
 #dataset-entities {
   .toggle-deleted-entities {
     margin-left: 8px;
@@ -175,12 +182,24 @@ export default {
     left: 12px;
     font-size: 14px;
   }
+
+  .dataset-entities-heading-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  #odata-data-access {
+    margin-left: auto;
+    font-size: initial;
+  }
 }
 </style>
 
 <i18n lang="json5">
 {
   "en": {
+    "upload": "Upload Entities",
     "alert": {
       "upload": "Success! Your Entities have been uploaded."
     },
diff --git a/src/components/date-range-picker.vue b/src/components/date-range-picker.vue
index 3031fbe13..ae5ef0cc4 100644
--- a/src/components/date-range-picker.vue
+++ b/src/components/date-range-picker.vue
@@ -10,14 +10,15 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label class="form-group"><!-- eslint-disable-line vuejs-accessibility/label-has-for -->
+  <label id="date-range-picker-container" for="datepicker" class="form-group">
     <!-- We use a class to indicate whether the input is required, because
     flatpickr does not support the `required` attribute:
     https://github.com/ankurk91/vue-flatpickr-component/issues/47 -->
-    <flatpickr ref="flatpickr" v-model="flatpickrValue" :config="config"
-      class="form-control" :class="{ required }"
+    <flatpickr id="datepicker" ref="flatpickr" v-model="flatpickrValue" :config="config"
+      class="form-control"
+      :class="{ required, 'flatpickr-input': true, 'has-value': modelValue.length === 2, none: modelValue.length === 0 }"
       :aria-disabled="disabled" v-tooltip.aria-describedby="disabledMessage"
-      :placeholder="requiredLabel(placeholder, required)" autocomplete="off"
+      :placeholder="$t('common.none')" autocomplete="off"
       @keydown="stopPropagationIfDisabled"
       @on-close="close"/>
     <template v-if="!required">
@@ -26,7 +27,9 @@ except according to the terms contained in the LICENSE file.
         <span aria-hidden="true">&times;</span>
       </button>
     </template>
-    <span class="form-label">{{ requiredLabel(placeholder, required) }}</span>
+    <span v-show="!disabled && (required || modelValue.length < 2)" aria-hidden="true" class="icon-angle-down">
+    </span>
+    <span class="form-label">{{ requiredLabel(label, required) }}</span>
   </label>
 </template>
 
@@ -70,7 +73,7 @@ export default {
       type: Boolean,
       default: false
     },
-    placeholder: {
+    label: {
       type: String,
       required: true
     },
@@ -187,13 +190,34 @@ export default {
 }
 
 .form-inline .flatpickr-input {
-  // Leave space for the .close button.
-  width: 205px;
-  &.required { width: 193px };
+  width: 87px;
 
-  &:lang(ja) {
+  &.has-value {
+    // Leave space for the .close button.
+    width: 207px;
+    &.required { width: 193px };
+  }
+
+  &.has-value:lang(ja) {
     width: 252px;
     &.required { width: 240px; }
   }
+
+  &.none {
+    font-style: italic;
+  }
+}
+
+#date-range-picker-container {
+  .icon-angle-down {
+    font-size: 16px;
+    color: #555555;
+    font-weight: bold;
+    vertical-align: -4px;
+  }
+
+  .form-label {
+    transform: translateY(2px);
+  }
 }
 </style>
diff --git a/src/components/entity/download-button.vue b/src/components/entity/download-button.vue
index 02f98d337..461390d67 100644
--- a/src/components/entity/download-button.vue
+++ b/src/components/entity/download-button.vue
@@ -11,17 +11,14 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <a id="entity-download-button" class="btn btn-primary" :href="href">
-    <span class="icon-arrow-circle-down"></span>{{ text }}
+    <span class="icon-arrow-circle-down"></span>
+    <span>{{ $t('action.download') }}</span>
   </a>
 </template>
 
 <script setup>
 import { computed, inject } from 'vue';
-import { useI18n } from 'vue-i18n';
-
 import { apiPaths } from '../../util/request';
-import { useI18nUtils } from '../../util/i18n';
-import { useRequestData } from '../../request-data';
 
 const props = defineProps({
   odataFilter: String
@@ -33,16 +30,6 @@ const datasetName = inject('datasetName');
 const href = computed(() =>
   apiPaths.entities(projectId, datasetName, '.csv', { $filter: props.odataFilter }));
 
-const { dataset, odataEntities } = useRequestData();
-const { t } = useI18n();
-const { tn } = useI18nUtils();
-const text = computed(() => (props.odataFilter == null
-  ? (dataset.dataExists
-    ? tn('action.download.unfiltered', dataset.entities)
-    : '') // The button is not visible in this case.
-  : (odataEntities.dataExists
-    ? tn('action.download.filtered.withCount', odataEntities.count)
-    : t('action.download.filtered.withoutCount'))));
 </script>
 
 <i18n lang="json5">
diff --git a/src/components/entity/filters.vue b/src/components/entity/filters.vue
index 9e88d9892..23b2a5801 100644
--- a/src/components/entity/filters.vue
+++ b/src/components/entity/filters.vue
@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <span id="entity-filters">
     <div class="form-group">
-      <span class="icon-filter"></span><span>{{ $t('common.filter') }}</span>
+      <span class="icon-filter"></span>
     </div>
     <entity-filters-conflict :model-value="conflict" :disabled="disabled"
       :disabled-message="disabledMessage" @update:model-value="$emit('update:conflict', $event)"/>
diff --git a/src/components/entity/filters/conflict.vue b/src/components/entity/filters/conflict.vue
index d2c4578a8..fa01b89bf 100644
--- a/src/components/entity/filters/conflict.vue
+++ b/src/components/entity/filters/conflict.vue
@@ -37,9 +37,19 @@ defineEmits(['update:modelValue']);
 const { t } = useI18n();
 const options = computed(() => [true, false].map(value =>
   ({ value, text: t(`conflict.${value}`) })));
-const placeholder = (counts) => t('placeholder', counts);
+const placeholder = (counts) => {
+  if (counts.total === counts.selected) return t('common.none');
+
+  return t('placeholder', counts);
+};
 </script>
 
+<style lang="scss">
+#entity-filters-conflict .none {
+  font-style: italic;
+}
+</style>
+
 <i18n lang="json5">
 {
   "en": {
diff --git a/src/components/entity/list.vue b/src/components/entity/list.vue
index 9903a1ee0..140ee38f1 100644
--- a/src/components/entity/list.vue
+++ b/src/components/entity/list.vue
@@ -11,20 +11,17 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div id="entity-list">
-    <div id="entity-list-actions">
+    <div id="entity-list-actions" class="table-actions-bar">
       <form class="form-inline" @submit.prevent>
         <entity-filters v-model:conflict="conflict" :disabled="deleted"
         :disabled-message="deleted ? $t('filterDisabledMessage') : null"/>
-        <button id="entity-list-refresh-button" type="button"
-          class="btn btn-default" :aria-disabled="refreshing"
-          @click="fetchChunk(false, true)">
-          <span class="icon-refresh"></span>{{ $t('action.refresh') }}
-          <spinner :state="refreshing"/>
-        </button>
       </form>
-      <entity-download-button :odata-filter="deleted ? null : odataFilter"
-      :aria-disabled="deleted"
-      v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"/>
+      <button id="entity-list-refresh-button" type="button"
+        class="btn btn-outlined" :aria-disabled="refreshing"
+        @click="fetchChunk(false, true)">
+        <span class="icon-refresh"></span>{{ $t('action.refresh') }}
+        <spinner :state="refreshing"/>
+      </button>
     </div>
     <entity-table v-show="odataEntities.dataExists" ref="table"
       :properties="dataset.properties"
@@ -65,7 +62,6 @@ import { reactive } from 'vue';
 
 import EntityDelete from './delete.vue';
 import EntityRestore from './restore.vue';
-import EntityDownloadButton from './download-button.vue';
 import EntityFilters from './filters.vue';
 import EntityTable from './table.vue';
 import EntityUpdate from './update.vue';
@@ -87,7 +83,6 @@ export default {
   components: {
     EntityDelete,
     EntityRestore,
-    EntityDownloadButton,
     EntityFilters,
     EntityResolve,
     EntityTable,
@@ -97,9 +92,6 @@ export default {
     Spinner,
   },
   inject: ['alert'],
-  provide() {
-    return { projectId: this.projectId, datasetName: this.datasetName };
-  },
   props: {
     projectId: {
       type: String,
@@ -457,13 +449,6 @@ export default {
   flex-wrap: wrap-reverse;
 }
 #entity-list-refresh-button {
-  margin-left: 10px;
-  margin-right: 5px;
-}
-#entity-download-button {
-  // The bottom margin is for if the download button wraps above the other
-  // actions.
-  margin-bottom: 10px;
   margin-left: auto;
 }
 
diff --git a/src/components/form/submissions.vue b/src/components/form/submissions.vue
index 9cd9ba922..776ecd980 100644
--- a/src/components/form/submissions.vue
+++ b/src/components/form/submissions.vue
@@ -14,26 +14,30 @@ except according to the terms contained in the LICENSE file.
     <loading :state="keys.initiallyLoading"/>
     <page-section v-show="keys.dataExists">
       <template #heading>
-        <span>{{ $t('resource.submissions') }}</span>
-        <enketo-fill v-if="rendersEnketoFill" :form-version="form">
-          <span class="icon-plus-circle"></span>{{ $t('action.createSubmission') }}
-        </enketo-fill>
-        <template v-if="deletedSubmissionCount.dataExists">
-          <button v-if="canDelete && (deletedSubmissionCount.value > 0 || deleted)" type="button"
-            class="btn toggle-deleted-submissions" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
-            @click="toggleDeleted">
-            <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedSubmissions', deletedSubmissionCount.value) }}
-            <span v-show="deleted" class="icon-close"></span>
-          </button>
+        <div class="form-submissions-heading-row">
+          <enketo-fill v-if="rendersEnketoFill" :form-version="form">
+            <span class="icon-plus-circle"></span>{{ $t('action.createSubmission') }}
+          </enketo-fill>
+          <template v-if="deletedSubmissionCount.dataExists">
+            <button v-if="canDelete && (deletedSubmissionCount.value > 0 || deleted)" type="button"
+              class="btn toggle-deleted-submissions" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
+              @click="toggleDeleted">
+              <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedSubmissions', deletedSubmissionCount.value) }}
+              <span v-show="deleted" class="icon-close"></span>
+            </button>
+          </template>
+          <p v-show="deleted" class="purge-description">{{ $t('purgeDescription') }}</p>
+          <odata-data-access :analyze-disabled="analyzeDisabled"
+            :analyze-disabled-message="analyzeDisabledMessage"
+            @analyze="analyzeModal.show()"/>
+          <submission-download-button :form-version="form"
+            :aria-disabled="deleted" v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"
+            @download="showDownloadModal"/>
+        </div>
         </template>
-        <p v-show="deleted" class="purge-description">{{ $t('purgeDescription') }}</p>
-        <odata-data-access :analyze-disabled="analyzeDisabled"
-          :analyze-disabled-message="analyzeDisabledMessage"
-          @analyze="analyzeModal.show()"/>
-      </template>
       <template #body>
-        <submission-list :project-id="projectId" :xml-form-id="xmlFormId"
-          :deleted="deleted" @fetch-keys="fetchKeys"
+        <submission-list ref="submissionList" :project-id="projectId"
+          :xml-form-id="xmlFormId" :deleted="deleted" @fetch-keys="fetchKeys"
           @fetch-deleted-count="fetchDeletedCount"/>
       </template>
     </page-section>
@@ -43,7 +47,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
-import { watchEffect, computed } from 'vue';
+import { watchEffect, computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import EnketoFill from '../enketo/fill.vue';
@@ -54,6 +58,7 @@ import OdataDataAccess from '../odata/data-access.vue';
 import SubmissionList from '../submission/list.vue';
 import useQueryRef from '../../composables/query-ref';
 import useSubmissions from '../../request-data/submissions';
+import SubmissionDownloadButton from '../submission/download-button.vue';
 
 import { apiPaths } from '../../util/request';
 import { modalData } from '../../util/reactivity';
@@ -65,10 +70,11 @@ export default {
   components: {
     EnketoFill,
     Loading,
-    PageSection,
     OdataAnalyze,
     OdataDataAccess,
-    SubmissionList
+    PageSection,
+    SubmissionDownloadButton,
+    SubmissionList,
   },
   props: {
     projectId: {
@@ -104,9 +110,11 @@ export default {
       if (deleted.value && project.dataExists && !canDelete.value) router.push('/');
     });
 
+    const downloadModalState = ref(false);
+
     return {
-      project, form, keys, analyzeModal: modalData(),
-      deletedSubmissionCount, canDelete, deleted
+      project, form, keys, analyzeModal: modalData(), downloadModal: modalData(),
+      deletedSubmissionCount, canDelete, deleted, downloadModalState
     };
   },
   computed: {
@@ -168,6 +176,9 @@ export default {
     toggleDeleted() {
       const { path } = this.$route;
       this.$router.push(this.deleted ? path : `${path}?deleted=true`);
+    },
+    showDownloadModal() {
+      this.$refs.submissionList.showDownloadModal();
     }
   }
 };
@@ -176,8 +187,6 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-#odata-data-access { float: right; }
-
 #form-submissions {
   .toggle-deleted-submissions {
     margin-left: 8px;
@@ -196,6 +205,17 @@ export default {
     left: 12px;
     font-size: 14px;
   }
+
+  .form-submissions-heading-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  #odata-data-access {
+    margin-left: auto;
+    font-size: initial;
+  }
 }
 </style>
 
diff --git a/src/components/multiselect.vue b/src/components/multiselect.vue
index 7c0ec9ef5..9a07c400e 100644
--- a/src/components/multiselect.vue
+++ b/src/components/multiselect.vue
@@ -10,11 +10,12 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div ref="dropdown" class="multiselect form-group">
+  <label ref="dropdown" :for="toggleId" class="multiselect form-group">
     <!-- Specifying @mousedown.prevent so that clicking the select element does
     not show a menu with the placeholder option. This approach seems to work
     across browsers. -->
     <select :id="toggleId" ref="toggle" class="form-control"
+      :class="{ none: modelValue?.length === options?.length }"
       :aria-disabled="options == null || disabled"
       :data-toggle="(options == null || disabled) ? null : 'dropdown'" role="button"
       v-tooltip.aria-describedby="disabledMessage"
@@ -22,7 +23,10 @@ except according to the terms contained in the LICENSE file.
       @keydown="toggleAfterEnter" @mousedown.prevent @click="verifyAttached">
       <option value="">{{ selectOption }}</option>
     </select>
-    <span class="form-label" aria-hidden="true">{{ label }}</span>
+    <span v-show="!hideLabel" class="form-label">
+      {{ label }}
+    </span>
+    <span class="icon-angle-down"></span>
     <!-- Specifying @click.stop so that clicking the .dropdown-menu does not
     hide it. -->
     <ul class="dropdown-menu" :aria-labelledby="toggleId" @click.stop>
@@ -71,7 +75,7 @@ except according to the terms contained in the LICENSE file.
         <slot name="after-list" :selected="selected"></slot>
       </li>
     </ul>
-  </div>
+  </label>
 </template>
 
 <script>
@@ -133,6 +137,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  hideLabel: {
+    type: Boolean,
+    default: false
+  },
   placeholder: {
     type: Function,
     required: true
@@ -418,7 +426,21 @@ const emptyMessage = computed(() => (searchValue.value === ''
 @import '../assets/scss/mixins';
 
 .multiselect {
-  select { min-width: 111px; }
+  select {
+    min-width: 111px;
+    appearance: none;
+  }
+
+  .icon-angle-down {
+    font-size: 16px;
+    color: #555555;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    top: 10px;
+    pointer-events: none;
+    z-index: 1;
+  }
 
   $line-height: 1;
   .dropdown-menu {
diff --git a/src/components/odata/data-access.vue b/src/components/odata/data-access.vue
index 579b21967..ff708eb8f 100644
--- a/src/components/odata/data-access.vue
+++ b/src/components/odata/data-access.vue
@@ -10,19 +10,14 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <span v-if="!oidcEnabled" id="odata-data-access">
-    <a class="btn btn-default"
-      href="https://docs.getodk.org/central-api-odata-endpoints/"
-      target="_blank" rel="noopener">
-      <span class="icon-plug"></span>{{ $t('action.apiAccess') }}
-    </a>
+  <div v-if="!oidcEnabled" id="odata-data-access">
     <button id="odata-data-access-analyze-button" type="button"
       class="btn btn-default" :aria-disabled="analyzeDisabled"
       v-tooltip.aria-describedby="analyzeDisabled ? analyzeDisabledMessage : null"
       @click="$emit('analyze')">
-      <span class="icon-bar-chart"></span>{{ $t('action.analyze') }}&hellip;
+      <span class="icon-bar-chart"></span>{{ $t('action.connectData') }}
     </button>
-  </span>
+  </div>
 </template>
 
 <script setup>
@@ -48,8 +43,7 @@ const { oidcEnabled } = inject('config');
 {
   "en": {
     "action": {
-      "apiAccess": "API access",
-      "analyze": "Analyze via OData"
+      "connectData": "Connect Data"
     }
   }
 }
diff --git a/src/components/submission/download-button.vue b/src/components/submission/download-button.vue
index 3f27b1d59..1e4ff8821 100644
--- a/src/components/submission/download-button.vue
+++ b/src/components/submission/download-button.vue
@@ -13,7 +13,7 @@ except according to the terms contained in the LICENSE file.
   <button id="submission-download-button" type="button" class="btn btn-primary"
     @click="$emit('download')">
     <span class="icon-arrow-circle-down"></span>
-    <span>{{ text }}&hellip;</span>
+    <span>{{ $t('action.download') }}</span>
   </button>
 </template>
 
@@ -30,21 +30,6 @@ export default {
   setup() {
     const { odata } = useRequestData();
     return { odata };
-  },
-  computed: {
-    text() {
-      if (!this.filtered) {
-        if (!this.formVersion.dataExists) return '';
-        return this.$tcn(
-          'action.download.unfiltered',
-          this.formVersion.submissions
-        );
-      }
-
-      return !this.odata.dataExists
-        ? this.$t('action.download.filtered.withoutCount')
-        : this.$tcn('action.download.filtered.withCount', this.odata.count);
-    }
   }
 };
 </script>
@@ -54,15 +39,7 @@ export default {
   // @transifexKey component.SubmissionDownloadDropdown
   "en": {
     "action": {
-      "download": {
-        "unfiltered": "Download {count} Submission | Download {count} Submissions",
-        "filtered": {
-          // This is the text of a button. This text is shown when the number of
-          // matching Submissions is unknown.
-          "withoutCount": "Download matching Submissions",
-          "withCount": "Download {count} matching Submission | Download {count} matching Submissions"
-        }
-      }
+      "download": "Download"
     }
   }
 }
diff --git a/src/components/submission/field-dropdown.vue b/src/components/submission/field-dropdown.vue
index 8f3470d90..a0ab45cd1 100644
--- a/src/components/submission/field-dropdown.vue
+++ b/src/components/submission/field-dropdown.vue
@@ -13,7 +13,7 @@ except according to the terms contained in the LICENSE file.
   <multiselect id="submission-field-dropdown" :model-value="modelValue"
     :options="options" :label="$t('field.columns')" :placeholder="placeholder"
     :all="$t('action.select.all')" :none="$t('action.select.none')"
-    :search="$t('field.search')"
+    :search="$t('field.search')" :hide-label="true"
     @update:model-value="$emit('update:modelValue', $event)">
     <template #after-list="{ selected }">
       <template v-if="selected.size > 100">
@@ -79,7 +79,7 @@ const placeholder = (counts) => t('placeholder', counts);
     // This is the text of a dropdown that allows the user to select which
     // columns to display in a table. {selected} is the number of columns
     // selected; {total} is the total number of columns.
-    "placeholder": "{selected} of {total}",
+    "placeholder": "{selected} of {total} column shown | {selected} of {total} columns shown",
     "field": {
       // This is shown beneath text that indicates the number of columns that
       // the user has selected to display in a table. For example, that text may
diff --git a/src/components/submission/filters.vue b/src/components/submission/filters.vue
index f2ab3ea5f..384004405 100644
--- a/src/components/submission/filters.vue
+++ b/src/components/submission/filters.vue
@@ -12,13 +12,13 @@ except according to the terms contained in the LICENSE file.
 <template>
   <span id="submission-filters">
     <div class="form-group">
-      <span class="icon-filter"></span><span>{{ $t('common.filter') }}</span>
+      <span class="icon-filter"></span>
     </div>
     <submission-filters-submitter :model-value="submitterId"
       :disabled="disabled" :disabled-message="disabledMessage"
       @update:model-value="$emit('update:submitterId', $event)"/>
     <date-range-picker :model-value="submissionDate"
-      :placeholder="$t('field.submissionDate')"
+      :label="$t('field.submissionDate')"
       :disabled="disabled" :disabled-message="disabledMessage"
       @update:model-value="$emit('update:submissionDate', $event)"/>
     <submission-filters-review-state :model-value="reviewState"
diff --git a/src/components/submission/filters/review-state.vue b/src/components/submission/filters/review-state.vue
index be737e38c..aeb8cbd28 100644
--- a/src/components/submission/filters/review-state.vue
+++ b/src/components/submission/filters/review-state.vue
@@ -45,9 +45,18 @@ const options = reviewStates.map(reviewState => ({
 }));
 
 const { t } = useI18n();
-const placeholder = (counts) => t('placeholder', counts);
+const placeholder = (counts) => {
+  if (counts.total === counts.selected) return t('common.none');
+  return t('placeholder', counts);
+};
 </script>
 
+<style lang="scss">
+#submission-filters-review-state .none {
+  font-style: italic;
+}
+</style>
+
 <i18n lang="json5">
 {
   "en": {
diff --git a/src/components/submission/filters/submitter.vue b/src/components/submission/filters/submitter.vue
index c714af63a..67cf926d8 100644
--- a/src/components/submission/filters/submitter.vue
+++ b/src/components/submission/filters/submitter.vue
@@ -89,9 +89,19 @@ const update = (value) => {
   }
 };
 
-const placeholder = (counts) => t('placeholder', counts);
+const placeholder = (counts) => {
+  if (counts.total === counts.selected) return t('common.none');
+
+  return t('placeholder', counts);
+};
 </script>
 
+<style lang="scss">
+#submission-filters-submitter .none {
+  font-style: italic;
+}
+</style>
+
 <i18n lang="json5">
 {
   "en": {
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index d950767ec..68b0f31bf 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -13,7 +13,7 @@ except according to the terms contained in the LICENSE file.
   <div id="submission-list">
     <loading :state="fields.initiallyLoading"/>
     <div v-show="selectedFields != null">
-      <div id="submission-list-actions">
+      <div id="submission-list-actions" class="table-actions-bar">
         <template v-if="draft">
           <button id="submission-list-test-on-device" type="button"
             class="btn btn-default" @click="$emit('toggle-qr', $event.target)">
@@ -29,17 +29,19 @@ except according to the terms contained in the LICENSE file.
             v-model:submissionDate="submissionDateRange"
             v-model:reviewState="reviewStates"
             :disabled="deleted" :disabled-message="deleted ? $t('filterDisabledMessage') : null"/>
+        </form>
+        <form v-if="!draft" class="form-inline field-dropdown-form" @submit.prevent>
           <submission-field-dropdown
-            v-if="selectedFields != null && fields.selectable.length > 11"
-            v-model="selectedFields"/>
+          v-if="selectedFields != null && fields.selectable.length > 11"
+          v-model="selectedFields"/>
         </form>
         <button id="submission-list-refresh-button" type="button"
-          class="btn btn-default" :aria-disabled="refreshing"
+          class="btn btn-outlined" :aria-disabled="refreshing"
           @click="fetchChunk(false, true)">
-          <span class="icon-refresh"></span>{{ $t('action.refresh') }}
+          {{ $t('action.refresh') }}
           <spinner :state="refreshing"/>
         </button>
-        <submission-download-button :form-version="formVersion"
+        <submission-download-button v-if="draft" :form-version="formVersion"
           :aria-disabled="deleted" v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"
           :filtered="odataFilter != null && !deleted" @download="downloadModal.show()"/>
       </div>
@@ -306,11 +308,15 @@ export default {
           this.formVersion.submissions += this.deleted ? size : -size;
         }
       }
+    },
+    downloadModalState(newState) {
+      this.downloadModal.state = newState;
     }
   },
   created() {
     this.fetchData();
   },
+  expose: ['showDownloadModal'],
   methods: {
     // `clear` indicates whether this.odata should be cleared before sending the
     // request. `refresh` indicates whether the request is a background refresh.
@@ -502,6 +508,9 @@ export default {
       // less than the lowest size option, hence we don't need to make a request.
       if (this.odata.count < this.pageSizeOptions[0]) return;
       this.fetchChunk(false);
+    },
+    showDownloadModal() {
+      this.downloadModal.show();
     }
   }
 };
@@ -525,11 +534,9 @@ export default {
   // the download button can wrap above the other actions if the viewport is not
   // wide enough.
   gap: 10px;
-  margin-bottom: 30px;
 
-  .form-inline {
-    margin-bottom: 0;
-    padding-bottom: 0;
+  .field-dropdown-form {
+    margin-left: auto;
   }
 }
 #submission-field-dropdown {
@@ -540,7 +547,6 @@ export default {
   // Additional space between the dropdown and the refresh button
   margin-right: 5px;
 }
-#submission-download-button { margin-left: auto; }
 
 // Adjust the spacing between actions on the draft testing page.
 #submission-list-test-in-browser {
diff --git a/src/components/table-freeze.vue b/src/components/table-freeze.vue
index 2015d33f1..9a7889467 100644
--- a/src/components/table-freeze.vue
+++ b/src/components/table-freeze.vue
@@ -148,7 +148,7 @@ defineExpose({ getRowPair });
 
   .table {
     margin-bottom: 0;
-    width: auto;
+    width: 100%;
   }
 }
 
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index cdfc47b44..25ae2e575 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -188,8 +188,7 @@
     "continue": "Continue",
     "create": "Create",
     // This is the text of a button that is used to fill out a new Submission.
-    // It is shown next to a heading whose text is "Submissions".
-    "createSubmission": "New",
+    "createSubmission": "New Submission",
     "delete": "Delete",
     "done": "Done",
     "download": "Download",
@@ -447,7 +446,8 @@
     // {version} is a version number.
     "versionShort": "v{version}",
     // This text is shown on its own before details about a warning.
-    "warning": "Warning"
+    "warning": "Warning",
+    "none": "(none)"
   },
   "mixin": {
     "request": {
diff --git a/test/components/date-range-picker.spec.js b/test/components/date-range-picker.spec.js
index 6cbaa69fa..c8aa1373c 100644
--- a/test/components/date-range-picker.spec.js
+++ b/test/components/date-range-picker.spec.js
@@ -22,7 +22,7 @@ const mountComponent = (options) => {
   const merged = mergeMountOptions(options, {
     props: {
       modelValue: ['1970-01-01', '1970-01-01'],
-      placeholder: 'Date range'
+      label: 'Date range'
     }
   });
   merged.props.modelValue = merged.props.modelValue.map(fromISO);
@@ -248,26 +248,6 @@ describe('DateRangePicker', () => {
     });
   });
 
-  describe('placeholder prop', () => {
-    it('uses the placeholder prop', () => {
-      const component = mountComponent({
-        props: { placeholder: 'My date range', required: false }
-      });
-      const { placeholder } = component.get('input').attributes();
-      placeholder.should.equal('My date range');
-      component.get('.form-label').text().should.equal('My date range');
-    });
-
-    it('appends * to the placeholder if the required prop is true', () => {
-      const component = mountComponent({
-        props: { placeholder: 'My date range', required: true }
-      });
-      const { placeholder } = component.get('input').attributes();
-      placeholder.should.equal('My date range *');
-      component.get('.form-label').text().should.equal('My date range *');
-    });
-  });
-
   it('adds the required class if the required prop is true', () => {
     const component = mountComponent({
       props: { required: true }
diff --git a/test/components/entity/download-button.spec.js b/test/components/entity/download-button.spec.js
index 161d366bf..0df8dc43d 100644
--- a/test/components/entity/download-button.spec.js
+++ b/test/components/entity/download-button.spec.js
@@ -19,7 +19,7 @@ describe('EntityDownloadButton', () => {
   describe('text', () => {
     it('shows the correct text', () => {
       testData.extendedDatasets.createPast(1, { entities: 1000 });
-      mountComponent().text().should.equal('Download 1,000 Entities');
+      mountComponent().text().should.equal('Download');
     });
 
     describe('entities are filtered', () => {
@@ -28,7 +28,7 @@ describe('EntityDownloadButton', () => {
         const component = mountComponent({
           props: { odataFilter: '__system/conflict ne null' }
         });
-        component.text().should.equal('Download matching Entities');
+        component.text().should.equal('Download');
       });
 
       it('shows correct text after first chunk of entities has loaded', () => {
@@ -41,7 +41,7 @@ describe('EntityDownloadButton', () => {
             }
           }
         });
-        component.text().should.equal('Download 1,000 matching Entities');
+        component.text().should.equal('Download');
       });
     });
   });
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 393dd17f4..8d1f4bc84 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -64,13 +64,13 @@ describe('EntityList', () => {
         app.vm.$container.requestData.dataset.entities.should.equal(1);
         app.get('#page-head-tabs li.active .badge').text().should.equal('1');
         const button = app.get('#entity-download-button');
-        button.text().should.equal('Download 1 Entity');
+        button.text().should.equal('Download');
       })
       .afterResponse(app => {
         app.vm.$container.requestData.dataset.entities.should.equal(2);
         app.get('#page-head-tabs li.active .badge').text().should.equal('2');
         const button = app.get('#entity-download-button');
-        button.text().should.equal('Download 2 Entities');
+        button.text().should.equal('Download');
       });
   });
 
@@ -491,7 +491,7 @@ describe('EntityList', () => {
     describe('after a successful response', () => {
       const del = () => {
         testData.extendedEntities.createPast(1, { label: 'My Entity' });
-        return load('/projects/1/entity-lists/trees/entities', { root: false })
+        return load('/projects/1/entity-lists/trees/entities')
           .complete()
           .request(async (component) => {
             await component.get('.entity-metadata-row .delete-button').trigger('click');
@@ -518,8 +518,8 @@ describe('EntityList', () => {
 
       it('updates the entity count', async () => {
         const component = await del();
-        const text = component.get('#entity-download-button').text();
-        text.should.equal('Download 0 Entities');
+        const text = component.get('#page-head-tabs li:nth-of-type(1)').text();
+        text.should.equal('Entities 0');
       });
     });
 
@@ -1039,13 +1039,12 @@ describe('EntityList', () => {
         });
     });
 
-    it('disables filters and download button', () => {
+    it('disables filters', () => {
       testData.extendedEntities.createPast(1, { label: 'My Entity' });
       testData.extendedEntities.createPast(1, { label: 'deleted 1', deletedAt: new Date().toISOString() });
       testData.extendedEntities.createPast(1, { label: 'deleted 2', deletedAt: new Date().toISOString() });
       return loadEntityList({ props: { deleted: true } })
         .afterResponse(component => {
-          component.find('#entity-download-button').attributes('aria-disabled').should.equal('true');
           component.getComponent('#entity-filters').props().disabled.should.be.true;
         });
     });
diff --git a/test/components/form-draft/testing.spec.js b/test/components/form-draft/testing.spec.js
index af6006e10..1dcc69d4b 100644
--- a/test/components/form-draft/testing.spec.js
+++ b/test/components/form-draft/testing.spec.js
@@ -44,7 +44,7 @@ describe('FormDraftTesting', () => {
         root: false
       });
       const text = component.getComponent(SubmissionDownloadButton).text();
-      text.should.equal('Download 2 Submissions…');
+      text.should.equal('Download');
     });
   });
 
diff --git a/test/components/form/submissions.spec.js b/test/components/form/submissions.spec.js
index 649d8fbf9..49d3ecd47 100644
--- a/test/components/form/submissions.spec.js
+++ b/test/components/form/submissions.spec.js
@@ -42,7 +42,7 @@ describe('FormSubmissions', () => {
         root: false
       });
       const text = component.getComponent(SubmissionDownloadButton).text();
-      text.should.equal('Download 1 Submission…');
+      text.should.equal('Download');
     });
 
     it('updates the tab badge if the count changes', () => {
diff --git a/test/components/submission/download-button.spec.js b/test/components/submission/download-button.spec.js
index fd0764d5a..f6448da08 100644
--- a/test/components/submission/download-button.spec.js
+++ b/test/components/submission/download-button.spec.js
@@ -23,7 +23,7 @@ describe('SubmissionDownloadButton', () => {
   describe('text', () => {
     it('shows the correct text if the submissions are not filtered', () => {
       testData.extendedForms.createPast(1, { submissions: 2 });
-      mountComponent().text().should.equal('Download 2 Submissions…');
+      mountComponent().text().should.equal('Download');
     });
 
     describe('submissions are filtered', () => {
@@ -32,7 +32,7 @@ describe('SubmissionDownloadButton', () => {
         const component = mountComponent({
           props: { filtered: true }
         });
-        component.text().should.equal('Download matching Submissions…');
+        component.text().should.equal('Download');
       });
 
       it('shows correct text after first chunk of submissions has loaded', () => {
@@ -45,7 +45,7 @@ describe('SubmissionDownloadButton', () => {
             }
           }
         });
-        component.text().should.equal('Download 1 matching Submission…');
+        component.text().should.equal('Download');
       });
     });
   });
diff --git a/test/components/submission/download.spec.js b/test/components/submission/download.spec.js
index 99ccba8c7..ad771fbb5 100644
--- a/test/components/submission/download.spec.js
+++ b/test/components/submission/download.spec.js
@@ -15,6 +15,7 @@ import { mockLogin } from '../../util/session';
 import { relativeUrl } from '../../util/request';
 import { testRequestData } from '../../util/request-data';
 import { waitUntil } from '../../util/util';
+import { load } from '../../util/http';
 
 const mountComponent = (options = undefined) => {
   // First, merge mount options in order to get the test data associated with
@@ -55,6 +56,17 @@ describe('SubmissionDownload', () => {
 
   it('toggles the modal', () => {
     testData.extendedForms.createPast(1);
+    return load('/projects/1/forms/f/submissions')
+      .complete()
+      .testModalToggles({
+        modal: SubmissionDownload,
+        show: '#submission-download-button',
+        hide: '.modal-actions .btn'
+      });
+  });
+
+  it('toggles the modal - draft', () => {
+    testData.extendedForms.createPast(1, { draft: true });
     return loadSubmissionList().testModalToggles({
       modal: SubmissionDownload,
       show: '#submission-download-button',
diff --git a/test/components/submission/list.spec.js b/test/components/submission/list.spec.js
index 6655c09f3..0a3ab0b3e 100644
--- a/test/components/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -324,16 +324,27 @@ describe('SubmissionList', () => {
         });
     });
 
-    it('disables filters and download button', () => {
+    it('disables filters', () => {
       testData.extendedSubmissions.createPast(1, { meta: { instanceName: 'live' } });
       testData.extendedSubmissions.createPast(1, { meta: { instanceName: 'deleted 1' }, deletedAt: new Date().toISOString() });
       testData.extendedSubmissions.createPast(1, { meta: { instanceName: 'deleted 2' }, deletedAt: new Date().toISOString() });
       return loadSubmissionList({ props: { deleted: true } })
         .afterResponse(component => {
-          component.find('#submission-download-button').attributes('aria-disabled').should.equal('true');
           component.getComponent('#submission-filters').props().disabled.should.be.true;
         });
     });
+
+    it('disables download button', () => {
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions', { root: false, container: { router: testRouter() } })
+        .complete()
+        .request(component =>
+          component.get('.toggle-deleted-submissions').trigger('click'))
+        .respondWithData(testData.submissionDeletedOData)
+        .afterResponses((component) => {
+          component.find('#submission-download-button').attributes('aria-disabled').should.equal('true');
+        });
+    });
   });
 
   describe('delete', () => {
@@ -378,7 +389,7 @@ describe('SubmissionList', () => {
     describe('after a successful response', () => {
       const del = () => {
         testData.extendedSubmissions.createPast(1);
-        return load('/projects/1/forms/f/submissions', { root: false })
+        return load('/projects/1/forms/f/submissions')
           .complete()
           .request(async (component) => {
             await component.get('.submission-metadata-row .delete-button').trigger('click');
@@ -405,8 +416,8 @@ describe('SubmissionList', () => {
 
       it('updates the submission count', async () => {
         const component = await del();
-        const text = component.get('#submission-download-button').text();
-        text.should.equal('Download 0 Submissions…');
+        const text = component.get('#form-head-form-tabs li:nth-of-type(1)').text();
+        text.should.equal('Submissions 0');
       });
 
       it('shows deleted submission button', async () => {
diff --git a/test/util/entity.js b/test/util/entity.js
index 2038b1369..8162593b2 100644
--- a/test/util/entity.js
+++ b/test/util/entity.js
@@ -22,6 +22,9 @@ export const loadEntityList = (mountOptions = {}) => {
         dataset
       }),
       router: mockRouter('')
+    },
+    global: {
+      provide: { projectId: project.id.toString(), datasetName: dataset.name }
     }
   });
   const { deleted } = mergedOptions.props;
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 1b871823f..2cde1be98 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -342,8 +342,8 @@
       "developer_comment": "This is the text for an action, for example, the text of a button."
     },
     "createSubmission": {
-      "string": "New",
-      "developer_comment": "This is the text of a button that is used to fill out a new Submission. It is shown next to a heading whose text is \"Submissions\"."
+      "string": "New Submission",
+      "developer_comment": "This is the text of a button that is used to fill out a new Submission."
     },
     "delete": {
       "string": "Delete",
@@ -941,6 +941,9 @@
       "string": "Warning",
       "developer_comment": "This text is shown on its own before details about a warning."
     },
+    "none": {
+      "string": "(none)"
+    },
     "currentDraft": {
       "string": "Your Current Draft",
       "developer_comment": "This is a title shown above a section of the page."
@@ -1517,6 +1520,9 @@
       }
     },
     "DatasetEntities": {
+      "upload": {
+        "string": "Upload Entities"
+      },
       "alert": {
         "upload": {
           "string": "Success! Your Entities have been uploaded."
@@ -3539,12 +3545,8 @@
     },
     "OdataDataAccess": {
       "action": {
-        "apiAccess": {
-          "string": "API access",
-          "developer_comment": "This is the text for an action, for example, the text of a button."
-        },
-        "analyze": {
-          "string": "Analyze via OData",
+        "connectData": {
+          "string": "Connect Data",
           "developer_comment": "This is the text for an action, for example, the text of a button."
         }
       }
@@ -4482,20 +4484,8 @@
     "SubmissionDownloadDropdown": {
       "action": {
         "download": {
-          "unfiltered": {
-            "string": "{count, plural, one {Download {count} Submission} other {Download {count} Submissions}}",
-            "developer_comment": "This is the text for an action, for example, the text of a button."
-          },
-          "filtered": {
-            "withoutCount": {
-              "string": "Download matching Submissions",
-              "developer_comment": "This is the text of a button. This text is shown when the number of matching Submissions is unknown."
-            },
-            "withCount": {
-              "string": "{count, plural, one {Download {count} matching Submission} other {Download {count} matching Submissions}}",
-              "developer_comment": "This is the text for an action, for example, the text of a button."
-            }
-          }
+          "string": "Download",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
         }
       }
     },
@@ -4598,7 +4588,7 @@
     },
     "SubmissionFieldDropdown": {
       "placeholder": {
-        "string": "{selected} of {total}",
+        "string": "{count, plural, one {{selected} of {total} column shown} other {{selected} of {total} columns shown}}",
         "developer_comment": "This is the text of a dropdown that allows the user to select which columns to display in a table. {selected} is the number of columns selected; {total} is the total number of columns."
       },
       "field": {