From a48ac543cf0d7d88b83e87ca83e7c85066d6a13d Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 15:36:59 -0400
Subject: [PATCH 1/7] Make multiselect and data range picker disableable

---
 src/components/date-range-picker.vue      | 24 ++++++++++++++--
 src/components/multiselect.vue            | 14 ++++++++-
 src/composables/disabled.js               |  2 +-
 test/components/date-range-picker.spec.js | 27 +++++++++++++++++
 test/components/multiselect.spec.js       | 35 +++++++++++++++++++----
 test/composables/disabled.spec.js         |  2 +-
 6 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/components/date-range-picker.vue b/src/components/date-range-picker.vue
index c80eccf74..d873f6062 100644
--- a/src/components/date-range-picker.vue
+++ b/src/components/date-range-picker.vue
@@ -16,10 +16,12 @@ except according to the terms contained in the LICENSE file.
     https://github.com/ankurk91/vue-flatpickr-component/issues/47 -->
     <flatpickr ref="flatpickr" v-model="flatpickrValue" :config="config"
       class="form-control" :class="{ required }"
+      :aria-disabled="disabled" v-tooltip.aria-describedby="disabledMessage"
       :placeholder="requiredLabel(placeholder, required)" autocomplete="off"
+      @keydown="stopPropagationIfDisabled"
       @on-close="close"/>
     <template v-if="!required">
-      <button v-show="modelValue.length === 2" type="button" class="close"
+      <button v-show="modelValue.length === 2 && !disabled" type="button" class="close"
         :aria-label="$t('action.clear')" @click="clear">
         <span aria-hidden="true">&times;</span>
       </button>
@@ -70,6 +72,14 @@ export default {
     placeholder: {
       type: String,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledMessage: {
+      type: String,
+      required: false
     }
   },
   emits: ['update:modelValue'],
@@ -90,7 +100,8 @@ export default {
         mode: 'range',
         // See https://github.com/flatpickr/flatpickr/issues/1549
         dateFormat: 'Y/m/d',
-        locale: l10ns[this.$i18n.locale] ?? l10ns[this.$i18n.fallbackLocale]
+        locale: l10ns[this.$i18n.locale] ?? l10ns[this.$i18n.fallbackLocale],
+        clickOpens: !this.disabled
       };
     }
   },
@@ -149,6 +160,11 @@ export default {
       // https://github.com/ankurk91/vue-flatpickr-component/issues/33
       this.$refs.flatpickr.$el.focus();
       this.$refs.flatpickr.fp.close();
+    },
+    stopPropagationIfDisabled(e) {
+      if (this.disabled) {
+        e.stopPropagation();
+      }
     }
   }
 };
@@ -165,6 +181,10 @@ export default {
   &::placeholder { color: $color-text; }
 }
 
+.form-group .flatpickr-input[aria-disabled="true"]::placeholder {
+  color: $color-input-inactive;
+}
+
 .form-inline .flatpickr-input {
   // Leave space for the .close button.
   width: 205px;
diff --git a/src/components/multiselect.vue b/src/components/multiselect.vue
index f1f4015a9..fbd63cf2c 100644
--- a/src/components/multiselect.vue
+++ b/src/components/multiselect.vue
@@ -15,7 +15,9 @@ except according to the terms contained in the LICENSE file.
     not show a menu with the placeholder option. This approach seems to work
     across browsers. -->
     <select :id="toggleId" ref="toggle" class="form-control"
-      :aria-disabled="options == null" data-toggle="dropdown" role="button"
+      :aria-disabled="options == null || disabled"
+      :data-toggle="(options == null || disabled) ? null : 'dropdown'" role="button"
+      v-tooltip.aria-describedby="disabledMessage"
       aria-haspopup="true" aria-expanded="false" :aria-label="label"
       @keydown="toggleAfterEnter" @mousedown.prevent @click="verifyAttached">
       <option value="">{{ selectOption }}</option>
@@ -150,6 +152,16 @@ const props = defineProps({
   empty: {
     type: String,
     required: false
+  },
+
+  // disabled the control
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledMessage: {
+    type: String,
+    required: false
   }
 });
 const emit = defineEmits(['update:modelValue']);
diff --git a/src/composables/disabled.js b/src/composables/disabled.js
index c40fe9479..42124d874 100644
--- a/src/composables/disabled.js
+++ b/src/composables/disabled.js
@@ -76,7 +76,7 @@ const preventDisabledSelect = (event) => {
   if (event.target.tagName === 'SELECT' &&
     event.target.getAttribute('aria-disabled') === 'true' &&
     (event.type === 'mousedown' ||
-    event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp'))
+    event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter'))
     preventAndStop(event);
 };
 
diff --git a/test/components/date-range-picker.spec.js b/test/components/date-range-picker.spec.js
index d16697be9..6cbaa69fa 100644
--- a/test/components/date-range-picker.spec.js
+++ b/test/components/date-range-picker.spec.js
@@ -321,4 +321,31 @@ describe('DateRangePicker', () => {
       });
     });
   });
+
+  describe('disabled', () => {
+    it('does not show calendar on click', async () => {
+      const component = mountComponent({
+        props: { modelValue: [], disabled: true }
+      });
+      const flatpickr = component.getComponent('.form-control');
+      await flatpickr.trigger('click');
+      flatpickr.classes().should.not.contain('active');
+    });
+
+    it('does not show calendar on focus', async () => {
+      const component = mountComponent({
+        props: { modelValue: [], disabled: true }
+      });
+      const flatpickr = component.getComponent('.form-control');
+      await flatpickr.trigger('focus');
+      flatpickr.classes().should.not.contain('active');
+    });
+
+    it('should not display clear button', async () => {
+      const component = mountComponent({
+        props: { modelValue: ['1970-01-02', '1970-01-03'], disabled: true }
+      });
+      component.find('.close').should.be.hidden();
+    });
+  });
 });
diff --git a/test/components/multiselect.spec.js b/test/components/multiselect.spec.js
index 7ee44dbb8..ca3efb8b2 100644
--- a/test/components/multiselect.spec.js
+++ b/test/components/multiselect.spec.js
@@ -22,6 +22,11 @@ const assertChecked = (component, checked) => {
   const inputs = component.findAll('input[type="checkbox"]');
   inputs.map(input => input.element.checked).should.eql(checked);
 };
+const assertDisabled = (component) => {
+  component.get('select').attributes('aria-disabled').should.equal('true');
+  component.get('select').attributes('aria-expanded').should.equal('false');
+  component.classes().should.not.contain('open');
+};
 
 describe('Multiselect', () => {
   it('renders a checkbox for each option', () => {
@@ -629,11 +634,13 @@ describe('Multiselect', () => {
       component.get('option').text().should.equal('Loading…');
     });
 
-    it('is disabled', () => {
+    it('is disabled', async () => {
       const component = mountComponent({
-        props: { options: null, loading: true }
+        props: { options: null, loading: true },
+        attachTo: document.body
       });
-      component.get('select').attributes('aria-disabled').should.equal('true');
+      await toggle(component);
+      assertDisabled(component);
     });
   });
 
@@ -645,11 +652,13 @@ describe('Multiselect', () => {
       component.get('option').text().should.equal('Error');
     });
 
-    it('is disabled', () => {
+    it('is disabled', async () => {
       const component = mountComponent({
-        props: { options: null, loading: false }
+        props: { options: null, loading: false },
+        attachTo: document.body
       });
-      component.get('select').attributes('aria-disabled').should.equal('true');
+      await toggle(component);
+      assertDisabled(component);
     });
   });
 
@@ -711,4 +720,18 @@ describe('Multiselect', () => {
     });
     component.find('.after-list #foo').exists().should.be.true;
   });
+
+  it('is disabled', async () => {
+    const component = mountComponent({
+      props: {
+        options: [{ value: 'foo' }],
+        disabled: true,
+        disabledMessage: 'disabled due to some reason.'
+      },
+      attachTo: document.body
+    });
+    await toggle(component);
+    assertDisabled(component);
+    component.get('select').should.have.ariaDescription('disabled due to some reason.');
+  });
 });
diff --git a/test/composables/disabled.spec.js b/test/composables/disabled.spec.js
index 394d8d5d2..9f9d93fb3 100644
--- a/test/composables/disabled.spec.js
+++ b/test/composables/disabled.spec.js
@@ -144,7 +144,7 @@ describe('useDisabled()', () => {
     handler.callCount.should.equal(2);
   });
 
-  for (const key of [' ', 'ArrowDown', 'ArrowUp']) {
+  for (const key of [' ', 'ArrowDown', 'ArrowUp', 'Enter']) {
     // eslint-disable-next-line no-loop-func
     it(`disables keydown of '${key}' for <select> with aria-disabled="true"`, () => {
       const [component, handler] = mountComponent(`<div>

From 687c8116e2d2a10235b261f37fa2413bd318eaa1 Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 16:24:34 -0400
Subject: [PATCH 2/7] Show deleted Submissions

---
 src/components/form-draft/testing.vue         |   4 +
 src/components/form/submissions.vue           | 101 ++++++++++++++++--
 src/components/submission/filters.vue         |  11 ++
 src/components/submission/list.vue            |  50 +++++++--
 src/components/submission/metadata-row.vue    |  11 +-
 src/components/submission/table.vue           |  13 ++-
 src/request-data/submissions.js               |   8 +-
 test/components/form/submissions.spec.js      |  81 ++++++++++++++
 test/components/submission/filters.spec.js    |  13 +++
 test/components/submission/list.spec.js       |  74 ++++++++++++-
 .../submission/metadata-row.spec.js           |   9 +-
 test/components/submission/table.spec.js      |  14 +++
 test/data/submissions.js                      |  22 ++--
 test/util/http/data.js                        |   1 +
 test/util/submission.js                       |  10 +-
 transifex/strings_en.json                     |  22 ++++
 16 files changed, 407 insertions(+), 37 deletions(-)

diff --git a/src/components/form-draft/testing.vue b/src/components/form-draft/testing.vue
index e3eee1398..a8a18926b 100644
--- a/src/components/form-draft/testing.vue
+++ b/src/components/form-draft/testing.vue
@@ -75,6 +75,7 @@ import EnketoFill from '../enketo/fill.vue';
 import Loading from '../loading.vue';
 import SentenceSeparator from '../sentence-separator.vue';
 import SubmissionList from '../submission/list.vue';
+import useSubmissions from '../../request-data/submissions';
 
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
@@ -104,6 +105,9 @@ export default {
   },
   setup() {
     const { resourceView, createResource } = useRequestData();
+
+    // SubmissionList expects submission stores to be created!
+    useSubmissions();
     const formDraft = resourceView('formDraft', (data) => data.get());
     const keys = createResource('keys');
     return { formDraft, keys };
diff --git a/src/components/form/submissions.vue b/src/components/form/submissions.vue
index 121db851e..afd49c280 100644
--- a/src/components/form/submissions.vue
+++ b/src/components/form/submissions.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>
+  <div id="form-submissions">
     <loading :state="keys.initiallyLoading"/>
     <page-section v-show="keys.dataExists">
       <template #heading>
@@ -18,12 +18,23 @@ except according to the terms contained in the LICENSE file.
         <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="canUpdate && (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()"/>
       </template>
       <template #body>
-        <submission-list :project-id="projectId" :xml-form-id="xmlFormId" @fetch-keys="fetchData"/>
+        <submission-list :project-id="projectId" :xml-form-id="xmlFormId"
+          :deleted="deleted" @fetch-keys="fetchKeys"
+          @fetch-deleted-count="fetchDeletedCount"/>
       </template>
     </page-section>
     <odata-analyze v-bind="analyzeModal" :odata-url="odataUrl"
@@ -32,12 +43,17 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import { watchEffect, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
 import EnketoFill from '../enketo/fill.vue';
 import Loading from '../loading.vue';
 import PageSection from '../page/section.vue';
 import OdataAnalyze from '../odata/analyze.vue';
 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 { apiPaths } from '../../util/request';
 import { modalData } from '../../util/reactivity';
@@ -66,8 +82,32 @@ export default {
   },
   setup() {
     const { project, form, createResource } = useRequestData();
+    const { deletedSubmissionCount } = useSubmissions();
     const keys = createResource('keys');
-    return { project, form, keys, analyzeModal: modalData() };
+    const router = useRouter();
+
+    const deleted = useQueryRef({
+      fromQuery: (query) => {
+        if (typeof query.deleted === 'string' && query.deleted === 'true') {
+          return true;
+        }
+        return false;
+      },
+      toQuery: (value) => ({
+        deleted: value === true ? 'true' : null
+      })
+    });
+
+    const canUpdate = computed(() => project.dataExists && project.permits('submission.update'));
+
+    watchEffect(() => {
+      if (deleted.value && project.dataExists && !canUpdate.value) router.push('/');
+    });
+
+    return {
+      project, form, keys, analyzeModal: modalData(),
+      deletedSubmissionCount, canUpdate, deleted
+    };
   },
   computed: {
     rendersEnketoFill() {
@@ -80,17 +120,19 @@ export default {
       - There are encrypted submissions, or
       - There are no submissions yet, but the form is encrypted. In that case,
         there will never be decrypted submissions available to OData (as long as
-        the form remains encrypted).
+        the form remains encrypted), or
+      - Showing deleted Submissions
     */
     analyzeDisabled() {
       if (this.keys.dataExists && this.keys.length !== 0) return true;
       if (this.form.dataExists && this.form.keyId != null &&
         this.form.submissions === 0)
         return true;
+      if (this.deleted) return true;
       return false;
     },
     analyzeDisabledMessage() {
-      return this.$t('analyzeDisabled');
+      return this.deleted ? this.$t('analyzeDisabledDeletedData') : this.$t('analyzeDisabled');
     },
     odataUrl() {
       if (!this.form.dataExists) return '';
@@ -99,26 +141,69 @@ export default {
     }
   },
   created() {
-    this.fetchData();
+    this.fetchKeys();
+    if (!this.deleted) this.fetchDeletedCount();
   },
   methods: {
-    fetchData() {
+    fetchKeys() {
       this.keys.request({
         url: apiPaths.submissionKeys(this.projectId, this.xmlFormId)
       }).catch(noop);
+    },
+    fetchDeletedCount() {
+      this.deletedSubmissionCount.request({
+        method: 'GET',
+        url: apiPaths.odataSubmissions(
+          this.projectId,
+          this.xmlFormId,
+          this.draft,
+          {
+            $top: 0,
+            $count: true,
+            $filter: '__system/deletedAt ne null',
+          }
+        ),
+      }).catch(noop);
+    },
+    toggleDeleted() {
+      const { path } = this.$route;
+      this.$router.push(this.deleted ? path : `${path}?deleted=true`);
     }
   }
 };
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/variables';
+
 #odata-data-access { float: right; }
+#form-submissions {
+  .toggle-deleted-submissions {
+    margin-left: 5px;
+
+    &.btn-link{
+      color: $color-danger;
+    }
+  }
+  .purge-description {
+    display: inline;
+    position: relative;
+    top: -5px;
+    left: 5px;
+    font-size: 14px;
+  }
+}
 </style>
 
 <i18n lang="json5">
   {
     "en": {
-      "analyzeDisabled": "OData access is unavailable due to Form encryption"
+      "analyzeDisabled": "OData access is unavailable due to Form encryption",
+      "analyzeDisabledDeletedData": "OData access is unavailable for deleted Submissions",
+      "purgeDescription": "Submissions and Submission-related data are deleted after 30 days in the Trash",
+      "action": {
+        "toggleDeletedSubmissions": "{count} deleted Submission | {count} deleted Submissions"
+      }
     }
   }
 </i18n>
diff --git a/src/components/submission/filters.vue b/src/components/submission/filters.vue
index 71da06a57..603676140 100644
--- a/src/components/submission/filters.vue
+++ b/src/components/submission/filters.vue
@@ -15,11 +15,14 @@ except according to the terms contained in the LICENSE file.
       <span class="icon-filter"></span><span>{{ $t('common.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')"
+      :disabled="disabled" :disabled-message="disabledMessage"
       @update:model-value="$emit('update:submissionDate', $event)"/>
     <submission-filters-review-state :model-value="reviewState"
+      :disabled="disabled" :disabled-message="disabledMessage"
       @update:model-value="$emit('update:reviewState', $event)"/>
   </span>
 </template>
@@ -48,6 +51,14 @@ export default {
     reviewState: {
       type: Array,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: true
+    },
+    disabledMessage: {
+      type: String,
+      required: false
     }
   },
   emits: ['update:submitterId', 'update:submissionDate', 'update:reviewState']
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index 08d9c1342..7165a1f71 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -17,7 +17,8 @@ except according to the terms contained in the LICENSE file.
         <form class="form-inline" @submit.prevent>
           <submission-filters v-if="!draft" v-model:submitterId="submitterIds"
             v-model:submissionDate="submissionDateRange"
-            v-model:reviewState="reviewStates"/>
+            v-model:reviewState="reviewStates"
+            :disabled="deleted" :disabled-message="deleted ? $t('filterDisabledMessage') : null"/>
           <submission-field-dropdown
             v-if="selectedFields != null && fields.selectable.length > 11"
             v-model="selectedFields"/>
@@ -29,15 +30,22 @@ except according to the terms contained in the LICENSE file.
           </button>
         </form>
         <submission-download-button :form-version="formVersion"
-          :filtered="odataFilter != null" @download="downloadModal.show()"/>
+          :aria-disabled="deleted" v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"
+          :filtered="odataFilter != null && !deleted" @download="downloadModal.show()"/>
       </div>
       <submission-table v-show="odata.dataExists && odata.value.length !== 0"
         ref="table" :project-id="projectId" :xml-form-id="xmlFormId"
         :draft="draft" :fields="selectedFields"
+        :deleted="deleted"
         @review="reviewModal.show({ submission: $event })"/>
       <p v-show="odata.dataExists && odata.value.length === 0"
         class="empty-table-message">
-        {{ odataFilter == null ? $t('submission.emptyTable') : $t('noMatching') }}
+        <template v-if="deleted">
+          {{ $t('deletedSubmission.emptyTable') }}
+        </template>
+        <template v-else>
+          {{ odataFilter == null ? $t('submission.emptyTable') : $t('noMatching') }}
+        </template>
       </p>
       <odata-loading-message type="submission"
         :top="top(odata.dataExists ? odata.value.length : 0)"
@@ -57,7 +65,7 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import { DateTime } from 'luxon';
-import { shallowRef, watch, watchEffect } from 'vue';
+import { shallowRef, watch, watchEffect, reactive } from 'vue';
 
 import Loading from '../loading.vue';
 import Spinner from '../spinner.vue';
@@ -72,7 +80,6 @@ import SubmissionUpdateReviewState from './update-review-state.vue';
 import useFields from '../../request-data/fields';
 import useQueryRef from '../../composables/query-ref';
 import useReviewState from '../../composables/review-state';
-import useSubmissions from '../../request-data/submissions';
 import { apiPaths } from '../../util/request';
 import { arrayQuery } from '../../util/router';
 import { modalData } from '../../util/reactivity';
@@ -104,20 +111,24 @@ export default {
       required: true
     },
     draft: Boolean,
+    deleted: {
+      type: Boolean,
+      required: false
+    },
     // Returns the value of the $top query parameter.
     top: {
       type: Function,
       default: (loaded) => (loaded < 1000 ? 250 : 1000)
     }
   },
-  emits: ['fetch-keys'],
+  emits: ['fetch-keys', 'fetch-deleted-count'],
   setup(props) {
-    const { form, keys, resourceView } = useRequestData();
+    const { form, keys, resourceView, odata, submitters, deletedSubmissionCount } = useRequestData();
     const formVersion = props.draft
       ? resourceView('formDraft', (data) => data.get())
       : form;
     const fields = useFields();
-    const { odata, submitters } = useSubmissions();
+
     // We do not reconcile `odata` with either form.lastSubmission or
     // project.lastSubmission.
     watchEffect(() => {
@@ -172,7 +183,8 @@ export default {
 
     return {
       form, keys, fields, formVersion, odata, submitters,
-      submitterIds, submissionDateRange, reviewStates, allReviewStates
+      submitterIds, submissionDateRange, reviewStates, allReviewStates,
+      deletedSubmissionCount
     };
   },
   data() {
@@ -199,6 +211,8 @@ export default {
     },
     odataFilter() {
       if (this.draft) return null;
+      if (this.deleted) return '__system/deletedAt ne null';
+
       const conditions = [];
       if (this.filtersOnSubmitterId) {
         const condition = this.submitterIds
@@ -270,9 +284,23 @@ export default {
           ? (response) => this.odata.addChunk(response.data)
           : null
       })
+        .then(() => {
+          if (this.deleted) {
+            this.deletedSubmissionCount.cancelRequest();
+            if (!this.deletedSubmissionCount.dataExists) {
+              this.deletedSubmissionCount.data = reactive({});
+            }
+            this.deletedSubmissionCount.value = this.odata.originalCount;
+          }
+        })
         .finally(() => { this.refreshing = false; })
         .catch(noop);
 
+      // emit event to parent component to re-fetch deleted Submissions count
+      if (refresh && !this.deleted && !this.draft) {
+        this.$emit('fetch-deleted-count');
+      }
+
       // emit event to parent component to re-fetch keys if needed
       if (refresh && this.formVersion.keyId != null && this.keys.length === 0)
         this.$emit('fetch-keys');
@@ -365,7 +393,9 @@ export default {
 <i18n lang="json5">
 {
   "en": {
-    "noMatching": "There are no matching Submissions."
+    "noMatching": "There are no matching Submissions.",
+    "downloadDisabled": "Download is unavailable for deleted Submissions",
+    "filterDisabledMessage": "Filters are unavailable for deleted Submissions"
   }
 }
 </i18n>
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index acf441adc..e75fe7c89 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -16,7 +16,7 @@ except according to the terms contained in the LICENSE file.
       <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
     </td>
     <td><date-time :iso="submission.__system.submissionDate"/></td>
-    <td v-if="!draft" class="state-and-actions">
+    <td v-if="!draft && !deleted" class="state-and-actions">
       <div class="col-content">
         <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
         <span class="edits">
@@ -53,6 +53,11 @@ except according to the terms contained in the LICENSE file.
         </router-link>
       </div>
     </td>
+    <td v-if="!draft && deleted" class="state-and-actions">
+      <div class="col-content">
+        <date-time :iso="submission.__system.deletedAt"/>
+      </div>
+    </td>
   </tr>
 </template>
 
@@ -84,6 +89,10 @@ export default {
       type: Number,
       required: true
     },
+    deleted: {
+      type: Boolean,
+      default: false
+    },
     canUpdate: Boolean
   },
   setup() {
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 9335701a7..00ebc52d3 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -17,7 +17,8 @@ except according to the terms contained in the LICENSE file.
       <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
       <th v-if="!draft">{{ $t('header.submitterName') }}</th>
       <th>{{ $t('header.submissionDate') }}</th>
-      <th v-if="!draft">{{ $t('header.stateAndActions') }}</th>
+      <th v-if="!draft && !deleted">{{ $t('header.stateAndActions') }}</th>
+      <th v-if="!draft && deleted">{{ $t('header.deletedAt') }}</th>
     </template>
     <template #head-scrolling>
       <template v-if="fields != null">
@@ -30,7 +31,7 @@ except according to the terms contained in the LICENSE file.
 
     <template #data-frozen="{ data, index }">
       <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
-        :draft="draft" :submission="data"
+        :draft="draft" :submission="data" :deleted="deleted"
         :row-number="odata.originalCount - index" :can-update="canUpdate"/>
     </template>
     <template #data-scrolling="{ data }">
@@ -63,6 +64,10 @@ defineProps({
     type: String,
     required: true
   },
+  deleted: {
+    type: Boolean,
+    default: false
+  },
   draft: Boolean,
   fields: Array
 });
@@ -100,7 +105,9 @@ defineExpose({ afterReview });
 {
   "en": {
     "header": {
-      "stateAndActions": "State and actions"
+      "stateAndActions": "State and actions",
+      // Heading of the column that shows Submission deletion timestamp
+      "deletedAt": "Deleted at"
     }
   }
 }
diff --git a/src/request-data/submissions.js b/src/request-data/submissions.js
index bec678ac9..9b3aae00a 100644
--- a/src/request-data/submissions.js
+++ b/src/request-data/submissions.js
@@ -46,5 +46,11 @@ export default () => {
     ids: computeIfExists(() =>
       submitters.reduce((set, { id }) => set.add(id), new Set()))
   }));
-  return { odata, submitters };
+  const deletedSubmissionCount = createResource('deletedSubmissionCount', () => ({
+    transformResponse: ({ data }) => reactive({
+      value: data['@odata.count']
+    })
+  }));
+
+  return { odata, submitters, deletedSubmissionCount };
 };
diff --git a/test/components/form/submissions.spec.js b/test/components/form/submissions.spec.js
index 6ee184f0e..7234f4880 100644
--- a/test/components/form/submissions.spec.js
+++ b/test/components/form/submissions.spec.js
@@ -63,4 +63,85 @@ describe('FormSubmissions', () => {
         });
     });
   });
+
+  describe('deleted submissions', () => {
+    beforeEach(mockLogin);
+
+    it('does not show deleted submission button', async () => {
+      testData.extendedForms.createPast(1);
+      testData.extendedSubmissions.createPast(1);
+      const component = await load('/projects/1/forms/f/submissions', {
+        root: false
+      });
+      component.find('.toggle-deleted-submissions').exists().should.be.false;
+    });
+
+    it('shows deleted submission button', async () => {
+      testData.extendedForms.createPast(1);
+      testData.extendedSubmissions.createPast(1);
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+      const component = await load('/projects/1/forms/f/submissions', {
+        root: false
+      });
+      const showDeletedButton = component.find('.toggle-deleted-submissions');
+      showDeletedButton.exists().should.be.true;
+      showDeletedButton.text().should.equal('1 deleted Submission');
+    });
+
+    it('updates the deleted count on refresh', async () => {
+      testData.extendedForms.createPast(1);
+      testData.extendedSubmissions.createPast(1);
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions', {
+        root: false
+      })
+        .afterResponses((component) => {
+          const showDeletedButton = component.find('.toggle-deleted-submissions');
+          showDeletedButton.text().should.equal('1 deleted Submission');
+        })
+        .request((component) => {
+          component.find('#submission-list-refresh-button').trigger('click');
+        })
+        .beforeAnyResponse(() => {
+          testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+        })
+        .respondWithData(() => testData.submissionOData())
+        .respondWithData(() => testData.submissionDeletedOData())
+        .afterResponses((component) => {
+          const showDeletedButton = component.find('.toggle-deleted-submissions');
+          showDeletedButton.text().should.equal('2 deleted Submissions');
+        });
+    });
+
+    it('updates the url when deleted submissions are shown', async () => {
+      testData.extendedForms.createPast(1);
+      testData.extendedSubmissions.createPast(1);
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions')
+        .complete()
+        .request((component) => {
+          const showDeletedButton = component.find('.toggle-deleted-submissions');
+          showDeletedButton.trigger('click');
+        })
+        .respondWithData(() => testData.submissionDeletedOData())
+        .afterResponses((component) => {
+          const { deleted } = component.vm.$route.query;
+          deleted.should.be.equal('true');
+        });
+    });
+
+    it('disables the odata access button when deleted submissions are shown', async () => {
+      testData.extendedForms.createPast(1);
+      testData.extendedSubmissions.createPast(1);
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions')
+        .complete()
+        .request((component) =>
+          component.find('.toggle-deleted-submissions').trigger('click'))
+        .respondWithData(() => testData.submissionDeletedOData())
+        .afterResponses((component) => {
+          component.getComponent('#odata-data-access').props().analyzeDisabled.should.be.true;
+        });
+    });
+  });
 });
diff --git a/test/components/submission/filters.spec.js b/test/components/submission/filters.spec.js
index 713b9e146..411b19c7c 100644
--- a/test/components/submission/filters.spec.js
+++ b/test/components/submission/filters.spec.js
@@ -462,4 +462,17 @@ describe('SubmissionFilters', () => {
       });
     });
   });
+
+  it('disables all filters', () => {
+    testData.extendedProjects.createPast(1, { forms: 1, appUsers: 1 });
+    const fieldKey = testData.extendedFieldKeys.createPast(1).last();
+    testData.extendedSubmissions.createPast(1, { submitter: fieldKey });
+    return loadComponent({ props: { deleted: true } })
+      .afterResponses(component => {
+        component.getComponent(DateRangePicker).props().disabled.should.be.true;
+        const multiselects = component.findAll('.multiselect select');
+        multiselects[0].attributes('aria-disabled').should.equal('true');
+        multiselects[1].attributes('aria-disabled').should.equal('true');
+      });
+  });
 });
diff --git a/test/components/submission/list.spec.js b/test/components/submission/list.spec.js
index 4d18aa287..cf23d800a 100644
--- a/test/components/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -11,6 +11,7 @@ import { loadSubmissionList } from '../../util/submission';
 import { mockLogin } from '../../util/session';
 import { mockResponse } from '../../util/axios';
 import { relativeUrl } from '../../util/request';
+import { testRouter } from '../../util/router';
 
 // Create submissions along with the associated project and form.
 const createSubmissions = (count, factoryOptions = {}) => {
@@ -86,9 +87,11 @@ describe('SubmissionList', () => {
     describe('after the refresh button is clicked', () => {
       it('completes a background refresh', () => {
         testData.extendedSubmissions.createPast(1);
-        const assertRowCount = (count) => (component) => {
-          component.findAllComponents(SubmissionMetadataRow).length.should.equal(count);
-          component.findAllComponents(SubmissionDataRow).length.should.equal(count);
+        const assertRowCount = (count, responseIndex = 0) => (component, _, i) => {
+          if (i === responseIndex) {
+            component.findAllComponents(SubmissionMetadataRow).length.should.equal(count);
+            component.findAllComponents(SubmissionDataRow).length.should.equal(count);
+          }
         };
         return load('/projects/1/forms/f/submissions', { root: false })
           .afterResponses(assertRowCount(1))
@@ -99,6 +102,7 @@ describe('SubmissionList', () => {
             testData.extendedSubmissions.createNew();
             return testData.submissionOData();
           })
+          .respondWithData(() => testData.submissionDeletedOData())
           .afterResponse(assertRowCount(2));
       });
 
@@ -396,6 +400,7 @@ describe('SubmissionList', () => {
               testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
             })
             .respondWithData(() => testData.submissionOData(1, 0))
+            .respondWithData(() => testData.submissionDeletedOData())
             .respondWithData(() => testData.standardKeys.sorted())
             .complete()
             .request(async (app) => {
@@ -444,8 +449,10 @@ describe('SubmissionList', () => {
               testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
             })
             .respondWithData(() => testData.submissionOData(1, 0))
+            .respondWithData(() => testData.submissionDeletedOData())
             .respondWithData(() => testData.standardKeys.sorted())
             .testRequests([
+              null,
               null,
               { url: '/v1/projects/1/forms/f/submissions/keys' }
             ]);
@@ -600,4 +607,65 @@ describe('SubmissionList', () => {
         })
         .respondWithData(testData.submissionOData));
   });
+
+  describe('deleted submissions', () => {
+    it('show deleted submissions', () => {
+      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.findAll('.table-freeze-scrolling tbody tr').length.should.be.equal(2);
+          component.findAll('.table-freeze-scrolling tbody tr').forEach((r, i) => {
+            r.find('td').text().should.be.equal(`deleted ${2 - i}`);
+          });
+        });
+    });
+
+    it('emits event to refresh deleted count when live submissions are on display', () => {
+      testData.extendedSubmissions.createPast(1);
+      return loadSubmissionList()
+        .complete()
+        .request(component =>
+          component.get('#submission-list-refresh-button').trigger('click'))
+        .respondWithData(testData.submissionOData)
+        .afterResponse(component => {
+          component.emitted().should.have.property('fetch-deleted-count');
+        });
+    });
+
+    it('updates the deleted count', () => {
+      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('.toggle-deleted-submissions').text().should.equal('1 deleted Submission');
+          component.findAll('.table-freeze-scrolling tbody tr').length.should.be.equal(1);
+        })
+        .request(component =>
+          component.get('#submission-list-refresh-button').trigger('click'))
+        .beforeAnyResponse(() => {
+          testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+        })
+        .respondWithData(testData.submissionDeletedOData)
+        .afterResponses((component) => {
+          component.find('.toggle-deleted-submissions').text().should.equal('2 deleted Submissions');
+          component.findAll('.table-freeze-scrolling tbody tr').length.should.be.equal(2);
+        });
+    });
+
+    it('disables filters and download button', () => {
+      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;
+        });
+    });
+  });
 });
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index 627fe44ce..48e2544aa 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -16,7 +16,7 @@ const mountComponent = (props = undefined) => {
     projectId: '1',
     xmlFormId,
     draft: false,
-    submission: testData.submissionOData().value[0],
+    submission: props?.deleted ? testData.submissionDeletedOData().value[0] : testData.submissionOData().value[0],
     rowNumber: 1,
     canUpdate: true,
     ...props
@@ -240,4 +240,11 @@ describe('SubmissionMetadataRow', () => {
     const row = mountComponent({ draft: true });
     row.find('.state-and-actions').exists().should.be.false;
   });
+
+  describe('deleted', () => {
+    it('shows the deleted date', () => {
+      const { deletedAt } = testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() }).last();
+      mountComponent({ deleted: true }).get('.state-and-actions').getComponent(DateTime).props().iso.should.equal(deletedAt);
+    });
+  });
 });
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index 58fc39edf..df1c5ca55 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -67,6 +67,20 @@ describe('SubmissionTable', () => {
       const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['Row', 'Submitted at']);
     });
+
+    it('renders the correct headers for deleted submissions', () => {
+      testData.extendedSubmissions.createPast(1);
+      const component = mountComponent({
+        props: { draft: false, deleted: true }
+      });
+      const table = component.get('.table-freeze-frozen');
+      headers(table).should.eql([
+        'Row',
+        'Submitted by',
+        'Submitted at',
+        'Deleted at'
+      ]);
+    });
   });
 
   describe('field headers', () => {
diff --git a/test/data/submissions.js b/test/data/submissions.js
index d1483eca2..b22ce5387 100644
--- a/test/data/submissions.js
+++ b/test/data/submissions.js
@@ -86,6 +86,7 @@ export const extendedSubmissions = dataStore({
     reviewState = null,
     deviceId = null,
     edits = 0,
+    deletedAt = null,
 
     ...partialOData
   }) => {
@@ -123,6 +124,7 @@ export const extendedSubmissions = dataStore({
       __system: {
         submissionDate: createdAt,
         updatedAt: null,
+        deletedAt,
         submitterId: submitter.id.toString(),
         submitterName: submitter.displayName,
         attachmentsPresent,
@@ -142,6 +144,7 @@ export const extendedSubmissions = dataStore({
       submitter: toActor(submitter),
       createdAt,
       updatedAt: null,
+      deletedAt,
       currentVersion: {
         instanceId,
         instanceName: hasInstanceName ? odata.meta.instanceName : null,
@@ -173,9 +176,16 @@ export const standardSubmissions = view(extendedSubmissions, (extended) => {
 
 // Converts submission response objects to OData. Returns all data even for
 // encrypted submissions.
-export const submissionOData = (top = 250, skip = 0) => ({
-  '@odata.count': extendedSubmissions.size,
-  value: extendedSubmissions.sorted().slice(skip, skip + top)
-    .map(submission => submission._odata),
-  '@odata.nextLink': top > 0 && (top + skip < extendedSubmissions.size) ? `https://test/Submissions?$top=${top}&$skipToken=thetoken` : undefined
-});
+const restToOData = (filterExpression) => (top = 250, skip = 0) => {
+  const data = extendedSubmissions.sorted().filter(filterExpression);
+  return {
+    '@odata.count': data.length,
+    value: data.slice(skip, skip + top)
+      .map(submission => submission._odata),
+    '@odata.nextLink': top > 0 && (top + skip < data.length) ? `https://test/Submissions?$top=${top}&$skipToken=thetoken` : undefined
+  };
+};
+
+export const submissionOData = restToOData(submission => submission.deletedAt == null);
+
+export const submissionDeletedOData = restToOData(submission => submission.deletedAt != null);
diff --git a/test/util/http/data.js b/test/util/http/data.js
index ce53a328d..28bcbb90e 100644
--- a/test/util/http/data.js
+++ b/test/util/http/data.js
@@ -91,6 +91,7 @@ const responsesByComponent = {
   FormVersionList: componentResponses({ formVersions: true }),
   FormSubmissions: componentResponses({
     keys: true,
+    deletedSubmissionCount: () => testData.submissionDeletedOData(0),
     fields: true,
     odata: true,
     submitters: () => testData.extendedFieldKeys
diff --git a/test/util/submission.js b/test/util/submission.js
index a2128452d..c7c84e7fa 100644
--- a/test/util/submission.js
+++ b/test/util/submission.js
@@ -1,4 +1,5 @@
 import SubmissionList from '../../src/components/submission/list.vue';
+import useSubmissions from '../../src/request-data/submissions';
 
 import testData from '../data';
 import { mergeMountOptions } from './lifecycle';
@@ -16,10 +17,11 @@ export const loadSubmissionList = (mountOptions = {}) => {
       projectId: project.id.toString(),
       xmlFormId: form.xmlFormId,
       draft: form.publishedAt == null,
-      top: SubmissionList.props.top.default
+      top: SubmissionList.props.top.default,
+      deleted: false
     },
     container: {
-      requestData: testRequestData(['keys'], {
+      requestData: testRequestData(['keys', useSubmissions], {
         project,
         form,
         formDraft: form.publishedAt == null
@@ -32,11 +34,11 @@ export const loadSubmissionList = (mountOptions = {}) => {
         : `/projects/${project.id}/forms/${encodeURIComponent(form.xmlFormId)}/draft/testing`)
     }
   });
-  const { top } = mergedOptions.props;
+  const { top, deleted } = mergedOptions.props;
   return mockHttp()
     .mount(SubmissionList, mergedOptions)
     .respondWithData(() => form._fields)
-    .respondWithData(() => testData.submissionOData(top(0)))
+    .respondWithData(() => (deleted ? testData.submissionDeletedOData(top(0)) : testData.submissionOData(top(0))))
     .modify(series => {
       if (form.publishedAt == null) return series;
       return series.respondWithData(() => testData.extendedFieldKeys
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 71950f545..45b2ded97 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -3297,6 +3297,18 @@
     "FormSubmissions": {
       "analyzeDisabled": {
         "string": "OData access is unavailable due to Form encryption"
+      },
+      "analyzeDisabledDeletedData": {
+        "string": "OData access is unavailable for deleted Submissions"
+      },
+      "purgeDescription": {
+        "string": "Submissions and Submission-related data are deleted after 30 days in the Trash"
+      },
+      "action": {
+        "toggleDeletedSubmissions": {
+          "string": "{count, plural, one {{count} deleted Submission} other {{count} deleted Submissions}}",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        }
       }
     },
     "FormTable": {
@@ -4605,6 +4617,12 @@
       "noMatching": {
         "string": "There are no matching Submissions."
       },
+      "downloadDisabled": {
+        "string": "Download is unavailable for deleted Submissions"
+      },
+      "filterDisabledMessage": {
+        "string": "Filters are unavailable for deleted Submissions"
+      },
       "loading": {
         "withoutCount": {
           "string": "Loading Submissions…",
@@ -4666,6 +4684,10 @@
         "stateAndActions": {
           "string": "State and actions",
           "developer_comment": "This is the text of a table column header."
+        },
+        "deletedAt": {
+          "string": "Deleted at",
+          "developer_comment": "Heading of the column that shows Submission deletion timestamp"
         }
       }
     },

From e238598780fc78619607850454ed7466990eefe9 Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 16:47:18 -0400
Subject: [PATCH 3/7] Add Delete Submission button in the Submission list

---
 src/components/submission/delete.vue          |  89 +++++++
 src/components/submission/list.vue            |  69 +++++-
 src/components/submission/metadata-row.vue    |  14 +-
 src/components/submission/table.vue           |  16 +-
 src/locales/en.json5                          |   3 +-
 src/request-data/submissions.js               |  12 +
 test/components/submission/delete.spec.js     |  32 +++
 test/components/submission/list.spec.js       | 221 ++++++++++++++++++
 .../submission/metadata-row.spec.js           |  27 ++-
 test/components/submission/table.spec.js      |  18 --
 test/data/seed.js                             |   4 +-
 transifex/strings_en.json                     |  24 +-
 12 files changed, 487 insertions(+), 42 deletions(-)
 create mode 100644 src/components/submission/delete.vue
 create mode 100644 test/components/submission/delete.spec.js

diff --git a/src/components/submission/delete.vue b/src/components/submission/delete.vue
new file mode 100644
index 000000000..271807d3f
--- /dev/null
+++ b/src/components/submission/delete.vue
@@ -0,0 +1,89 @@
+<!--
+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>
+  <modal id="submission-delete" :state="state" :hideable="!awaitingResponse"
+    backdrop @hide="$emit('hide')" @shown="focusCheckbox">
+    <template #title>{{ $t('title') }}</template>
+    <template #body>
+      <div class="modal-introduction">
+        <p>{{ $t('introduction[0]') }}</p>
+        <p>{{ $t('introduction[1]') }}</p>
+      </div>
+      <form v-if="checkbox">
+        <div class="checkbox">
+          <label>
+            <input ref="input" v-model="noConfirm" type="checkbox">
+            {{ $t('field.noConfirm') }}
+          </label>
+        </div>
+      </form>
+      <div class="modal-actions">
+        <button type="button" class="btn btn-danger"
+          :aria-disabled="awaitingResponse" @click="del">
+          {{ $t('action.delete') }} <spinner :state="awaitingResponse"/>
+        </button>
+        <button type="button" class="btn btn-link"
+          :aria-disabled="awaitingResponse" @click="$emit('hide')">
+          {{ $t('action.cancel') }}
+        </button>
+      </div>
+    </template>
+  </modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+import Modal from '../modal.vue';
+import Spinner from '../spinner.vue';
+
+defineOptions({
+  name: 'SubmissionDelete'
+});
+const props = defineProps({
+  state: Boolean,
+  checkbox: Boolean,
+  awaitingResponse: Boolean,
+  submission: Object
+});
+const emit = defineEmits(['hide', 'delete']);
+
+const noConfirm = ref(false);
+watch(() => props.state, (state) => { if (!state) noConfirm.value = false; });
+
+const input = ref(null);
+const focusCheckbox = () => { if (props.checkbox) input.value.focus(); };
+
+const del = () => {
+  if (props.checkbox)
+    emit('delete', [props.submission, !noConfirm.value]);
+  else
+    emit('delete', [props.submission]);
+};
+</script>
+
+<i18n lang="json5">
+{
+  "en": {
+    // This is the title at the top of Submission delete pop-up.
+    "title": "Delete Submission",
+    "introduction": [
+      "Are you sure you want to delete this Submission?",
+      "This action will move the Submission to the Trash. After 30 days in the Trash, it will be permanently purged, but it can be undeleted before then."
+    ],
+    "field": {
+      // @transifexKey component.EntityDelete.field.noConfirm
+      "noConfirm": "Delete immediately without confirmation until I leave the page"
+    }
+  }
+}
+</i18n>
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index 7165a1f71..84cee50b4 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -33,12 +33,13 @@ except according to the terms contained in the LICENSE file.
           :aria-disabled="deleted" v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"
           :filtered="odataFilter != null && !deleted" @download="downloadModal.show()"/>
       </div>
-      <submission-table v-show="odata.dataExists && odata.value.length !== 0"
+      <submission-table v-show="odata.dataExists && odata.value.length !== 0 && odata.removedCount < odata.value.length"
         ref="table" :project-id="projectId" :xml-form-id="xmlFormId"
         :draft="draft" :fields="selectedFields"
         :deleted="deleted"
-        @review="reviewModal.show({ submission: $event })"/>
-      <p v-show="odata.dataExists && odata.value.length === 0"
+        @review="reviewModal.show({ submission: $event })"
+        @delete="showDelete"/>
+      <p v-show="odata.dataExists && (odata.value.length === 0 || odata.removedCount === odata.value.length)"
         class="empty-table-message">
         <template v-if="deleted">
           {{ $t('deletedSubmission.emptyTable') }}
@@ -60,6 +61,8 @@ except according to the terms contained in the LICENSE file.
     <submission-update-review-state v-bind="reviewModal" :project-id="projectId"
       :xml-form-id="xmlFormId" @hide="reviewModal.hide()"
       @success="afterReview"/>
+    <submission-delete v-bind="deleteModal" checkbox @hide="deleteModal.hide()"
+      @delete="requestDelete"/>
   </div>
 </template>
 
@@ -76,10 +79,12 @@ import SubmissionFieldDropdown from './field-dropdown.vue';
 import SubmissionFilters from './filters.vue';
 import SubmissionTable from './table.vue';
 import SubmissionUpdateReviewState from './update-review-state.vue';
+import SubmissionDelete from './delete.vue';
 
 import useFields from '../../request-data/fields';
 import useQueryRef from '../../composables/query-ref';
 import useReviewState from '../../composables/review-state';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { arrayQuery } from '../../util/router';
 import { modalData } from '../../util/reactivity';
@@ -92,6 +97,7 @@ export default {
   components: {
     Loading,
     Spinner,
+    SubmissionDelete,
     SubmissionDownload,
     SubmissionDownloadButton,
     SubmissionFieldDropdown,
@@ -180,11 +186,12 @@ export default {
         reviewState: value.length === allReviewStates.length ? [] : value
       })
     });
+    const { request } = useRequest();
 
     return {
       form, keys, fields, formVersion, odata, submitters,
       submitterIds, submissionDateRange, reviewStates, allReviewStates,
-      deletedSubmissionCount
+      request, deletedSubmissionCount
     };
   },
   data() {
@@ -198,7 +205,10 @@ export default {
       refreshing: false,
       // Modals
       downloadModal: modalData(),
-      reviewModal: modalData()
+      reviewModal: modalData(),
+      deleteModal: modalData(),
+      // state that indicates whether we need to show delete confirmation dialog
+      confirmDelete: true
     };
   },
   computed: {
@@ -350,6 +360,50 @@ export default {
         this.odata.value[index].__system.reviewState = reviewState;
         this.$refs.table.afterReview(index);
       }
+    },
+    showDelete(submission) {
+      if (this.confirmDelete) {
+        this.deleteModal.show({ submission });
+      } else {
+        this.requestDelete([submission, this.confirmDelete]);
+      }
+    },
+    requestDelete(event) {
+      const [{ __id: instanceId }, confirm] = event;
+
+      if (this.deleteModal.state) this.deleteModal.awaitingResponse = true;
+
+      this.request({
+        method: 'DELETE',
+        url: apiPaths.submission(this.projectId, this.xmlFormId, instanceId)
+      })
+        .then(() => {
+          this.deleteModal.hide();
+          if (this.deletedSubmissionCount.dataExists) this.deletedSubmissionCount.value += 1;
+
+          this.alert.success(this.$t('alert.submissionDeleted'));
+          if (confirm != null) this.confirmDelete = confirm;
+
+          /* Before doing a couple more things, we first determine whether
+          this.odata.value still includes the Submission and if so, what the
+          current index of the Submission is. If a request to refresh
+          this.odata was sent while the deletion request was in
+          progress, then there could be a race condition such that data doesn't
+          exist for this.odata, or this.odata.value no longer
+          includes the Submission. Another possible result of the race condition is
+          that this.odata.value still includes the Submission, but the
+          Submission's index has changed. */
+          const index = this.odata.dataExists
+            ? this.odata.value.findIndex(submission => submission.__id === instanceId)
+            : -1;
+          if (index !== -1) {
+            this.odata.countRemoved();
+            this.$refs.table.afterDelete(index);
+          }
+        })
+        .catch(() => {
+          this.deleteModal.awaitingResponse = false;
+        });
     }
   }
 };
@@ -395,7 +449,10 @@ export default {
   "en": {
     "noMatching": "There are no matching Submissions.",
     "downloadDisabled": "Download is unavailable for deleted Submissions",
-    "filterDisabledMessage": "Filters are unavailable for deleted Submissions"
+    "filterDisabledMessage": "Filtering is unavailable for deleted Submissions",
+    "deletedSubmission": {
+      "emptyTable": "There are no deleted Submissions."
+    }
   }
 }
 </i18n>
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index e75fe7c89..80f80df57 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -28,7 +28,12 @@ except according to the terms contained in the LICENSE file.
         <span class="icon-angle-right"></span>
       </div>
       <div class="btn-group">
-        <template v-if="canUpdate">
+        <button v-if="verbs.has('submission.delete')" type="button"
+          class="delete-button btn btn-default"
+          :aria-label="$t('action.delete')" v-tooltip.aria-label>
+          <span class="icon-trash"></span>
+        </button>
+        <template v-if="verbs.has('submission.update')">
           <button type="button" class="review-button btn btn-default"
             :aria-label="$t('action.review')" v-tooltip.aria-label>
             <span class="icon-check"></span>
@@ -93,7 +98,10 @@ export default {
       type: Boolean,
       default: false
     },
-    canUpdate: Boolean
+    verbs: {
+      type: Set,
+      required: true
+    }
   },
   setup() {
     const { reviewStateIcon } = useReviewState();
@@ -173,5 +181,7 @@ export default {
     font-size: 20px;
     margin-top: -1px;
   }
+
+  .delete-button .icon-trash { color: $color-danger; }
 }
 </style>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 00ebc52d3..4f42faf65 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <table-freeze v-if="project.dataExists" id="submission-table" ref="table"
     :data="chunkyOData" key-prop="__id" :frozen-only="fields == null" divider
-    @action="review">
+    @action="handleActions">
     <template #head-frozen>
       <th><span class="sr-only">{{ $t('common.rowNumber') }}</span></th>
       <th v-if="!draft">{{ $t('header.submitterName') }}</th>
@@ -32,7 +32,7 @@ except according to the terms contained in the LICENSE file.
     <template #data-frozen="{ data, index }">
       <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
         :draft="draft" :submission="data" :deleted="deleted"
-        :row-number="odata.originalCount - index" :can-update="canUpdate"/>
+        :row-number="odata.originalCount - index" :verbs="project.verbs"/>
     </template>
     <template #data-scrolling="{ data }">
       <submission-data-row :project-id="projectId" :xml-form-id="xmlFormId"
@@ -49,7 +49,7 @@ import SubmissionMetadataRow from './metadata-row.vue';
 import TableFreeze from '../table-freeze.vue';
 
 import useChunkyArray from '../../composables/chunky-array';
-import { markRowsChanged } from '../../util/dom';
+import { markRowsChanged, markRowsDeleted } from '../../util/dom';
 import { useRequestData } from '../../request-data';
 
 defineOptions({
@@ -71,22 +71,22 @@ defineProps({
   draft: Boolean,
   fields: Array
 });
-const emit = defineEmits(['review']);
+const emit = defineEmits(['review', 'delete']);
 
 // The component does not assume that this data will exist when the component is
 // created.
 const { project, odata } = useRequestData();
 
 const chunkyOData = useChunkyArray(computed(() => odata.value));
-const canUpdate = computed(() =>
-  project.dataExists && project.permits('submission.update'));
 
-const review = ({ target, data }) => {
+const handleActions = ({ target, data }) => {
   if (target.classList.contains('review-button')) emit('review', data);
+  if (target.classList.contains('delete-button')) emit('delete', data);
 };
 const table = ref(null);
 const afterReview = (index) => { markRowsChanged(table.value.getRowPair(index)); };
-defineExpose({ afterReview });
+const afterDelete = (index) => { markRowsDeleted(table.value.getRowPair(index)); };
+defineExpose({ afterReview, afterDelete });
 </script>
 
 <style lang="scss">
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index cca029232..c291f3236 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -320,7 +320,8 @@
     "passwordTooShort": "Please input a password at least 10 characters long.",
     "updateEntity": "The Entity has been updated!",
     "updateReviewState": "Review State saved!",
-    "versionChange": "The server has been updated. Please refresh the page to avoid unpredictable behavior."
+    "versionChange": "The server has been updated. Please refresh the page to avoid unpredictable behavior.",
+    "submissionDeleted": "The Submission has been deleted."
   },
   "moreInfo": {
     "clickHere": {
diff --git a/src/request-data/submissions.js b/src/request-data/submissions.js
index 9b3aae00a..370264687 100644
--- a/src/request-data/submissions.js
+++ b/src/request-data/submissions.js
@@ -28,6 +28,9 @@ export default () => {
         // The count of submissions at the time of the initial fetch or last
         // refresh
         originalCount: data['@odata.count'],
+        // The count of submissions that are removed from the UI table but they
+        // are still there in `value`
+        removedCount: 0,
         filtered: searchParams.has('$filter'),
         nextLink: data['@odata.nextLink']
       });
@@ -40,6 +43,15 @@ export default () => {
       odata.count = chunk['@odata.count'];
       odata.skip += chunk.value.length;
       odata.nextLink = chunk['@odata.nextLink'];
+    },
+    countRemoved: () => {
+      // This change to odata.count will be overwritten if/when the next
+      // chunk is received with the latest count. However, the change to
+      // odata.removedCount will persist as long as odata is not
+      // cleared (e.g., when the refresh button is clicked or a filter is
+      // changed).
+      odata.count -= 1;
+      odata.removedCount += 1;
     }
   }));
   const submitters = createResource('submitters', () => ({
diff --git a/test/components/submission/delete.spec.js b/test/components/submission/delete.spec.js
new file mode 100644
index 000000000..536738fc0
--- /dev/null
+++ b/test/components/submission/delete.spec.js
@@ -0,0 +1,32 @@
+import SubmissionDelete from '../../../src/components/submission/delete.vue';
+
+import { mergeMountOptions, mount } from '../../util/lifecycle';
+
+const mountComponent = (options = undefined) =>
+  mount(SubmissionDelete, mergeMountOptions(options, {
+    props: { state: true, checkbox: true }
+  }));
+
+describe('SubmissionDelete', () => {
+  it('focuses the checkbox', () => {
+    const modal = mountComponent({ attachTo: document.body });
+    modal.get('input').should.be.focused();
+  });
+
+  it('resets the checkbox after the modal is hidden', async () => {
+    const modal = mountComponent();
+    const input = modal.get('input');
+    input.element.checked.should.be.false;
+    await input.setChecked();
+    await modal.setProps({ state: false });
+    await modal.setProps({ state: true });
+    input.element.checked.should.be.false;
+  });
+
+  it('does not render the checkbox if the checkbox prop is false', () => {
+    const modal = mountComponent({
+      props: { checkbox: false }
+    });
+    modal.find('input').exists().should.be.false;
+  });
+});
diff --git a/test/components/submission/list.spec.js b/test/components/submission/list.spec.js
index cf23d800a..c028cc5dc 100644
--- a/test/components/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -3,6 +3,7 @@ import SubmissionDataRow from '../../../src/components/submission/data-row.vue';
 import SubmissionDownload from '../../../src/components/submission/download.vue';
 import SubmissionList from '../../../src/components/submission/list.vue';
 import SubmissionMetadataRow from '../../../src/components/submission/metadata-row.vue';
+import SubmissionDelete from '../../../src/components/submission/delete.vue';
 
 import testData from '../../data';
 import { changeMultiselect } from '../../util/trigger';
@@ -668,4 +669,224 @@ describe('SubmissionList', () => {
         });
     });
   });
+
+  describe('delete', () => {
+    it('toggles the modal', () => {
+      testData.extendedSubmissions.createPast(1);
+      return load('/projects/1/forms/f/submissions', { root: false })
+        .complete()
+        .testModalToggles({
+          modal: SubmissionDelete,
+          show: '.submission-metadata-row .delete-button',
+          hide: '.btn-link'
+        });
+    });
+
+    it('implements some standard button things', () => {
+      testData.extendedSubmissions.createPast(1);
+      return load('/projects/1/forms/f/submissions', { root: false })
+        .afterResponses(component =>
+          component.get('.submission-metadata-row .delete-button').trigger('click'))
+        .testStandardButton({
+          button: '#submission-delete .btn-danger',
+          disabled: ['#submission-delete .btn-link'],
+          modal: SubmissionDelete
+        });
+    });
+
+    it('sends the correct request', () => {
+      const { instanceId } = testData.extendedSubmissions.createPast(1).last();
+      return load('/projects/1/forms/f/submissions', { root: false })
+        .complete()
+        .request(async (component) => {
+          await component.get('.submission-metadata-row .delete-button').trigger('click');
+          return component.get('#submission-delete .btn-danger').trigger('click');
+        })
+        .respondWithProblem()
+        .testRequests([{
+          method: 'DELETE',
+          url: `/v1/projects/1/forms/f/submissions/${instanceId}`
+        }]);
+    });
+
+    describe('after a successful response', () => {
+      const del = () => {
+        testData.extendedSubmissions.createPast(1);
+        return load('/projects/1/forms/f/submissions', { root: false })
+          .complete()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .delete-button').trigger('click');
+            return component.get('#submission-delete .btn-danger').trigger('click');
+          })
+          .respondWithSuccess();
+      };
+
+      it('hides the modal', async () => {
+        const component = await del();
+        component.getComponent(SubmissionDelete).props().state.should.be.false;
+      });
+
+      it('shows a success alert', async () => {
+        const component = await del();
+        component.should.alert('success', 'The Submission has been deleted.');
+      });
+
+      it('hides the row', async () => {
+        const component = await del();
+        const row = component.getComponent(SubmissionMetadataRow);
+        row.element.dataset.markRowsDeleted.should.equal('true');
+      });
+
+      it('updates the submission count', async () => {
+        const component = await del();
+        const text = component.get('#submission-download-button').text();
+        text.should.equal('Download 0 Submissions…');
+      });
+
+      it('shows deleted submission button', async () => {
+        const component = await del();
+        component.get('.toggle-deleted-submissions').should.be.visible();
+      });
+    });
+
+    describe('last submission was deleted', () => {
+      beforeEach(() => {
+        testData.extendedSubmissions.createPast(2);
+      });
+
+      const del = (index) => async (component) => {
+        const row = component.get(`.submission-metadata-row:nth-child(${index + 1})`);
+        await row.get('.delete-button').trigger('click');
+        return component.get('#submission-delete .btn-danger').trigger('click');
+      };
+
+      it('hides the table', () =>
+        load('/projects/1/forms/f/submissions', { root: false })
+          .complete()
+          .request(del(1))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('#submission-table').should.be.visible();
+          })
+          .request(del(0))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('#submission-table').should.be.hidden();
+          }));
+
+      it('shows a message', () =>
+        load('/projects/1/forms/f/submissions', { root: false })
+          .complete()
+          .request(del(1))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('.empty-table-message').should.be.hidden();
+          })
+          .request(del(0))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('.empty-table-message').should.be.visible();
+          }));
+    });
+
+    it('continues to show modal if checkbox was not checked', () => {
+      testData.extendedSubmissions.createPast(2);
+      return load('/projects/1/forms/f/submissions', { root: false })
+        .complete()
+        .request(async (component) => {
+          const row = component.get('.submission-metadata-row:last-child');
+          await row.get('.delete-button').trigger('click');
+          return component.get('#submission-delete .btn-danger').trigger('click');
+        })
+        .respondWithSuccess()
+        .afterResponse(async (component) => {
+          await component.get('.submission-metadata-row .delete-button').trigger('click');
+          component.getComponent(SubmissionDelete).props().state.should.be.true;
+        });
+    });
+
+    describe('deleting after checking the checkbox', () => {
+      const delAndCheck = () => {
+        testData.extendedSubmissions
+          .createPast(1, { instanceId: 'e1' })
+          .createPast(1, { instanceId: 'e2' });
+        return load('/projects/1/forms/f/submissions', { root: false })
+          .complete()
+          .request(async (component) => {
+            const row = component.get('.submission-metadata-row:last-child');
+            await row.get('.delete-button').trigger('click');
+            const modal = component.getComponent(SubmissionDelete);
+            await modal.get('input').setChecked();
+            return modal.get('.btn-danger').trigger('click');
+          })
+          .respondWithSuccess()
+          .complete();
+      };
+
+      it('immediately sends a request', () =>
+        delAndCheck()
+          .request(component =>
+            component.get('.submission-metadata-row .delete-button').trigger('click'))
+          .respondWithProblem()
+          .testRequests([{
+            method: 'DELETE',
+            url: '/v1/projects/1/forms/f/submissions/e2'
+          }]));
+
+      it('does not show the modal', () =>
+        delAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .delete-button').trigger('click');
+            component.getComponent(SubmissionDelete).props().state.should.be.false;
+          })
+          .respondWithProblem());
+
+      it('shows the correct alert', () =>
+        delAndCheck()
+          .request(component =>
+            component.get('.submission-metadata-row .delete-button').trigger('click'))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.should.alert('success', 'The Submission has been deleted.');
+          }));
+
+      it('does not hide table after deleting last submission if submissions are concurrently replaced', () =>
+        delAndCheck()
+          .request(async (component) => {
+            await component.get('#submission-list-refresh-button').trigger('click');
+            return component.get('.submission-metadata-row .delete-button').trigger('click');
+          })
+          .respondWithData(() => {
+            testData.extendedSubmissions.splice(0);
+            testData.extendedSubmissions.createNew();
+            testData.extendedSubmissions.createNew();
+            return testData.submissionOData();
+          })
+          .respondWithData(testData.submissionDeletedOData)
+          .respondWithSuccess()
+          .afterResponses(component => {
+            // Even though there were 2 Submissions before, and there are 2
+            // Submissions now, and 2 Submissions have been deleted, the table should
+            // still be shown.
+            component.get('#submission-table').should.be.visible();
+            // No row should be hidden.
+            component.find('[data-mark-rows-deleted]').exists().should.be.false;
+          })
+          .request(component =>
+            component.get('.submission-metadata-row .delete-button').trigger('click'))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            /* The removedCount should have been reset to 0 when the refreshed
+            Submissions were received. (Otherwise, the previous assertion should
+            have failed.) However, imagine that after that, the removedCount was
+            incorrectly increased to 1 following the success response (if
+            requestDelete() in SubmissionList didn't check whether
+            odata.value still includes the deleted Submission). In that
+            case, this latest deletion would increase the removedCount to 2,
+            which would hide the table. Here, we check that that doesn't
+            happen. */
+            component.get('#submission-table').should.be.visible();
+          }));
+    });
+  });
 });
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index 48e2544aa..883d8abe8 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -18,7 +18,7 @@ const mountComponent = (props = undefined) => {
     draft: false,
     submission: props?.deleted ? testData.submissionDeletedOData().value[0] : testData.submissionOData().value[0],
     rowNumber: 1,
-    canUpdate: true,
+    verbs: new Set(testData.extendedUsers.first().verbs),
     ...props
   };
   return mount(SubmissionMetadataRow, {
@@ -135,6 +135,18 @@ describe('SubmissionMetadataRow', () => {
     });
   });
 
+  it('shows the delete button', async () => {
+    testData.extendedSubmissions.createPast(1);
+    mountComponent().find('.delete-button').attributes('aria-label').should.be.equal('Delete');
+  });
+
+  it('does not show the delete button if user does not have submission delete permission', async () => {
+    mockLogin({ role: 'none' });
+    testData.extendedProjects.createPast(1, { role: 'viewer' });
+    testData.extendedSubmissions.createPast(1);
+    mountComponent().find('.delete-button').exists().should.be.false;
+  });
+
   describe('review button', () => {
     beforeEach(mockLogin);
 
@@ -198,20 +210,20 @@ describe('SubmissionMetadataRow', () => {
         submissions: 1
       });
       testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
-      const { href } = mountComponent().findAll('.btn')[1].attributes();
+      const { href } = mountComponent().findAll('.btn')[2].attributes();
       href.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/edit');
     });
 
     it('sets the correct ARIA label', async () => {
       testData.extendedSubmissions.createPast(1, { edits: 1000 });
-      const btn = mountComponent().findAll('.btn')[1];
+      const btn = mountComponent().findAll('.btn')[2];
       btn.attributes('aria-label').should.equal('Edit (1,000)');
       await btn.should.have.tooltip('Edit (1,000)');
     });
 
     it('disables the button if the submission is encrypted', async () => {
       testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
-      const button = mountComponent().findAll('.btn')[1];
+      const button = mountComponent().findAll('.btn')[2];
       button.attributes('aria-disabled').should.equal('true');
       button.should.have.ariaDescription('You cannot edit encrypted Submissions.');
       await button.should.have.tooltip('You cannot edit encrypted Submissions.');
@@ -225,7 +237,7 @@ describe('SubmissionMetadataRow', () => {
     to.should.equal('/projects/1/forms/a%20b/submissions/c%20d');
   });
 
-  it('renders only the More button if the canUpdate prop is false', () => {
+  it('renders only the More button if user does not have update and delete permission', () => {
     mockLogin({ role: 'none' });
     testData.extendedProjects.createPast(1, { forms: 1, role: 'viewer' });
     testData.extendedSubmissions.createPast(1);
@@ -246,5 +258,10 @@ describe('SubmissionMetadataRow', () => {
       const { deletedAt } = testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() }).last();
       mountComponent({ deleted: true }).get('.state-and-actions').getComponent(DateTime).props().iso.should.equal(deletedAt);
     });
+
+    it('does not have delete button', () => {
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() }).last();
+      mountComponent({ deleted: true }).find('.delete-button').exists().should.be.false;
+    });
   });
 });
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index df1c5ca55..4db16ba1c 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -8,7 +8,6 @@ import useSubmissions from '../../../src/request-data/submissions';
 import createTestContainer from '../../util/container';
 import testData from '../../data';
 import { mergeMountOptions, mount } from '../../util/lifecycle';
-import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { testRequestData } from '../../util/request-data';
 
@@ -134,21 +133,4 @@ describe('SubmissionTable', () => {
     const rows = component.findAllComponents(SubmissionMetadataRow);
     rows.map(row => row.props().rowNumber).should.eql([10, 9]);
   });
-
-  describe('canUpdate prop of SubmissionMetadataRow', () => {
-    it('passes true if the user can submission.update', () => {
-      mockLogin();
-      testData.extendedSubmissions.createPast(1);
-      const row = mountComponent().getComponent(SubmissionMetadataRow);
-      row.props().canUpdate.should.be.true;
-    });
-
-    it('passes false if the user cannot submission.update', () => {
-      mockLogin({ role: 'none' });
-      testData.extendedProjects.createPast(1, { role: 'viewer', forms: 1 });
-      testData.extendedSubmissions.createPast(1);
-      const row = mountComponent().getComponent(SubmissionMetadataRow);
-      row.props().canUpdate.should.be.false;
-    });
-  });
 });
diff --git a/test/data/seed.js b/test/data/seed.js
index e004a32b3..a86453a52 100644
--- a/test/data/seed.js
+++ b/test/data/seed.js
@@ -43,6 +43,7 @@ export default () => {
         'submission.list',
         'submission.read',
         'submission.update',
+        'submission.delete',
         'user.create',
         'user.list',
         'user.read',
@@ -90,7 +91,8 @@ export default () => {
         'submission.create',
         'submission.list',
         'submission.read',
-        'submission.update'
+        'submission.update',
+        'submission.delete'
       ]
     })
     .createPast(1, {
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 45b2ded97..221fc75cc 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -714,6 +714,9 @@
     },
     "versionChange": {
       "string": "The server has been updated. Please refresh the page to avoid unpredictable behavior."
+    },
+    "submissionDeleted": {
+      "string": "The Submission has been deleted."
     }
   },
   "moreInfo": {
@@ -4414,6 +4417,20 @@
         }
       }
     },
+    "SubmissionDelete": {
+      "title": {
+        "string": "Delete Submission",
+        "developer_comment": "This is the title at the top of Submission delete pop-up."
+      },
+      "introduction": {
+        "0": {
+          "string": "Are you sure you want to delete this Submission?"
+        },
+        "1": {
+          "string": "This action will move the Submission to the Trash. After 30 days in the Trash, it will be permanently purged, but it can be undeleted before then."
+        }
+      }
+    },
     "SubmissionDiffItem": {
       "editCaption": {
         "added": {
@@ -4621,7 +4638,12 @@
         "string": "Download is unavailable for deleted Submissions"
       },
       "filterDisabledMessage": {
-        "string": "Filters are unavailable for deleted Submissions"
+        "string": "Filtering is unavailable for deleted Submissions"
+      },
+      "deletedSubmission": {
+        "emptyTable": {
+          "string": "There are no deleted Submissions."
+        }
       },
       "loading": {
         "withoutCount": {

From f1c541543d62ee5857a971367fe773405b178544 Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 16:49:34 -0400
Subject: [PATCH 4/7] Add delete Submission button on the Submission activity
 feed

---
 src/components/submission/activity.vue  | 11 +++-
 src/components/submission/show.vue      | 27 ++++++++-
 test/components/submission/show.spec.js | 79 +++++++++++++++++++++++++
 3 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/src/components/submission/activity.vue b/src/components/submission/activity.vue
index 8a314e3a5..b4558dd5f 100644
--- a/src/components/submission/activity.vue
+++ b/src/components/submission/activity.vue
@@ -30,6 +30,11 @@ except according to the terms contained in the LICENSE file.
             <span class="icon-pencil"></span>{{ $t('action.edit') }}
           </button>
         </template>
+        <button v-if="project.dataExists && project.permits('submission.delete')"
+          id="submission-activity-delete-button" type="button" class="btn btn-default"
+          @click="$emit('delete')">
+          <span class="icon-trash"></span>{{ $t('action.delete') }}
+        </button>
       </template>
     </template>
     <template #body>
@@ -73,7 +78,7 @@ export default {
       required: true
     }
   },
-  emits: ['review', 'comment'],
+  emits: ['review', 'comment', 'delete'],
   setup() {
     // The component does not assume that this data will exist when the
     // component is created.
@@ -105,6 +110,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/variables';
+
 #submission-activity { margin-bottom: 35px; }
 #submission-activity-review-button { margin-right: 5px; }
+#submission-activity-edit-button { margin-right: 5px; }
+#submission-activity-delete-button .icon-trash { color: $color-danger; }
 </style>
diff --git a/src/components/submission/show.vue b/src/components/submission/show.vue
index 3cfff7d44..eef7d3ad0 100644
--- a/src/components/submission/show.vue
+++ b/src/components/submission/show.vue
@@ -27,13 +27,16 @@ except according to the terms contained in the LICENSE file.
         <div class="col-xs-8">
           <submission-activity :project-id="projectId" :xml-form-id="xmlFormId"
             :instance-id="instanceId" @review="reviewModal.show()"
-            @comment="fetchActivityData"/>
+            @comment="fetchActivityData" @delete="deleteModal.show()"/>
         </div>
       </div>
     </page-body>
     <submission-update-review-state v-bind="reviewModal" :project-id="projectId"
       :xml-form-id="xmlFormId" :submission="submission"
       @hide="reviewModal.hide()" @success="afterReview"/>
+    <submission-delete v-bind="deleteModal" :submission="submission"
+      :awaiting-response="awaitingResponse" @hide="deleteModal.hide()"
+      @delete="requestDelete"/>
   </div>
 </template>
 
@@ -47,13 +50,16 @@ import PageHead from '../page/head.vue';
 import SubmissionActivity from './activity.vue';
 import SubmissionBasicDetails from './basic-details.vue';
 import SubmissionUpdateReviewState from './update-review-state.vue';
+import SubmissionDelete from './delete.vue';
 
 import useFields from '../../request-data/fields';
 import useRoutes from '../../composables/routes';
+import useRequest from '../../composables/request';
 import useSubmission from '../../request-data/submission';
 import { apiPaths } from '../../util/request';
 import { modalData, setDocumentTitle } from '../../util/reactivity';
 import { useRequestData } from '../../request-data';
+import { noop } from '../../util/util';
 
 export default {
   name: 'SubmissionShow',
@@ -64,6 +70,7 @@ export default {
     PageHead,
     SubmissionActivity,
     SubmissionBasicDetails,
+    SubmissionDelete,
     SubmissionUpdateReviewState
   },
   inject: ['alert'],
@@ -83,6 +90,8 @@ export default {
   },
   setup() {
     const { project, resourceStates } = useRequestData();
+    const { request, awaitingResponse } = useRequest();
+
     const { submission, submissionVersion, audits, comments, diffs } = useSubmission();
     const fields = useFields();
 
@@ -94,8 +103,8 @@ export default {
     const { formPath } = useRoutes();
     return {
       project, submission, submissionVersion, audits, comments, diffs, fields,
-      ...resourceStates([project, submission]),
-      reviewModal: modalData(),
+      request, awaitingResponse, ...resourceStates([project, submission]),
+      reviewModal: modalData(), deleteModal: modalData(),
       formPath
     };
   },
@@ -166,6 +175,18 @@ export default {
       this.reviewModal.hide();
       this.alert.success(this.$t('alert.updateReviewState'));
       this.submission.__system.reviewState = reviewState;
+    },
+    requestDelete([{ __id: instanceId }]) {
+      this.request({
+        method: 'DELETE',
+        url: apiPaths.submission(this.projectId, this.xmlFormId, instanceId)
+      })
+        .then(() => {
+          const message = this.$t('alert.submissionDeleted');
+          this.$router.push(this.formPath('submissions'))
+            .then(() => { this.alert.success(message); });
+        })
+        .catch(noop);
     }
   }
 };
diff --git a/test/components/submission/show.spec.js b/test/components/submission/show.spec.js
index 05e94ae32..1a7c6924c 100644
--- a/test/components/submission/show.spec.js
+++ b/test/components/submission/show.spec.js
@@ -1,5 +1,6 @@
 import NotFound from '../../../src/components/not-found.vue';
 import PageBack from '../../../src/components/page/back.vue';
+import SubmissionDelete from '../../../src/components/submission/delete.vue';
 
 import testData from '../../data';
 import { load } from '../../util/http';
@@ -43,4 +44,82 @@ describe('SubmissionShow', () => {
     });
     component.get('#page-head-title').text().should.equal('s');
   });
+
+  describe('delete', () => {
+    it('toggles the modal', () => {
+      testData.extendedSubmissions.createPast(1, { instanceId: 'e' });
+      return load('/projects/1/forms/f/submissions/e', { root: false })
+        .testModalToggles({
+          modal: SubmissionDelete,
+          show: '#submission-activity-delete-button',
+          hide: '.btn-link'
+        });
+    });
+
+    it('sends the correct request', () => {
+      testData.extendedSubmissions.createPast(1, { instanceId: 'e' });
+      return load('/projects/1/forms/f/submissions/e', { root: false })
+        .complete()
+        .request(async (component) => {
+          await component.get('#submission-activity-delete-button').trigger('click');
+          return component.get('#submission-delete .btn-danger').trigger('click');
+        })
+        .respondWithProblem()
+        .testRequests([{
+          method: 'DELETE',
+          url: '/v1/projects/1/forms/f/submissions/e'
+        }]);
+    });
+
+    it('implements some standard button things', () => {
+      testData.extendedSubmissions.createPast(1, { instanceId: 'e' });
+      return load('/projects/1/forms/f/submissions/e', { root: false })
+        .afterResponses(component =>
+          component.get('#submission-activity-delete-button').trigger('click'))
+        .testStandardButton({
+          button: '#submission-delete .btn-danger',
+          disabled: ['#submission-delete .btn-link'],
+          modal: SubmissionDelete
+        });
+    });
+
+    it('does not show the delete button if user does not have submission delete permission', async () => {
+      testData.extendedUsers.reset();
+      testData.sessions.reset();
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'viewer' });
+      testData.extendedSubmissions.createPast(1, { instanceId: 'e' });
+      return load('/projects/1/forms/f/submissions/e', { root: false })
+        .afterResponses(component => {
+          component.find('#submission-activity-delete-button').exists().should.be.false;
+        });
+    });
+
+    describe('after a successful response', () => {
+      const del = () => {
+        testData.extendedSubmissions.createPast(1, { instanceId: 'e' });
+        return load('/projects/1/forms/f/submissions/e')
+          .complete()
+          .request(async (app) => {
+            await app.get('#submission-activity-delete-button').trigger('click');
+            return app.get('#submission-delete .btn-danger').trigger('click');
+          })
+          .respondWithSuccess()
+          .respondFor('/projects/1/forms/f/submissions', {
+            project: false
+          });
+      };
+
+      it('redirects to the Data page', async () => {
+        const app = await del();
+        const { path } = app.vm.$route;
+        path.should.equal('/projects/1/forms/f/submissions');
+      });
+
+      it('shows a success alert', async () => {
+        const app = await del();
+        app.should.alert('success', 'The Submission has been deleted.');
+      });
+    });
+  });
 });

From 5808302e68c5b17c82724621b1841001f4ca8186 Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 16:53:58 -0400
Subject: [PATCH 5/7] Add undelete button in the Submission list

---
 src/components/form/trash-row.vue             |   3 -
 src/components/submission/list.vue            |  51 +++-
 src/components/submission/metadata-row.vue    |   7 +
 src/components/submission/restore.vue         |  90 +++++++
 src/components/submission/table.vue           |   3 +-
 src/locales/en.json5                          |   7 +-
 src/util/request.js                           |   1 +
 test/components/submission/list.spec.js       | 224 ++++++++++++++++++
 .../submission/metadata-row.spec.js           |  17 ++
 test/components/submission/restore.spec.js    |  32 +++
 test/data/seed.js                             |   4 +-
 transifex/strings_en.json                     |  38 ++-
 12 files changed, 462 insertions(+), 15 deletions(-)
 create mode 100644 src/components/submission/restore.vue
 create mode 100644 test/components/submission/restore.spec.js

diff --git a/src/components/form/trash-row.vue b/src/components/form/trash-row.vue
index 56c3f8db3..5d8673850 100644
--- a/src/components/form/trash-row.vue
+++ b/src/components/form/trash-row.vue
@@ -168,9 +168,6 @@ export default {
 <i18n lang="json5">
 {
   "en": {
-    "action": {
-      "restore": "Undelete"
-    },
     // This text shows when the Form was deleted. {dateTime} shows
     // the date and time, for example: "2020/01/01 01:23". It may show a
     // formatted date like "2020/01/01", or it may use a word like "today",
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index 84cee50b4..086108d31 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -38,7 +38,8 @@ except according to the terms contained in the LICENSE file.
         :draft="draft" :fields="selectedFields"
         :deleted="deleted"
         @review="reviewModal.show({ submission: $event })"
-        @delete="showDelete"/>
+        @delete="showDelete"
+        @restore="showRestore"/>
       <p v-show="odata.dataExists && (odata.value.length === 0 || odata.removedCount === odata.value.length)"
         class="empty-table-message">
         <template v-if="deleted">
@@ -63,6 +64,8 @@ except according to the terms contained in the LICENSE file.
       @success="afterReview"/>
     <submission-delete v-bind="deleteModal" checkbox @hide="deleteModal.hide()"
       @delete="requestDelete"/>
+    <submission-restore v-bind="restoreModal" checkbox @hide="restoreModal.hide()"
+      @restore="requestRestore"/>
   </div>
 </template>
 
@@ -80,6 +83,7 @@ import SubmissionFilters from './filters.vue';
 import SubmissionTable from './table.vue';
 import SubmissionUpdateReviewState from './update-review-state.vue';
 import SubmissionDelete from './delete.vue';
+import SubmissionRestore from './restore.vue';
 
 import useFields from '../../request-data/fields';
 import useQueryRef from '../../composables/query-ref';
@@ -102,6 +106,7 @@ export default {
     SubmissionDownloadButton,
     SubmissionFieldDropdown,
     SubmissionFilters,
+    SubmissionRestore,
     SubmissionTable,
     SubmissionUpdateReviewState,
     OdataLoadingMessage
@@ -207,8 +212,12 @@ export default {
       downloadModal: modalData(),
       reviewModal: modalData(),
       deleteModal: modalData(),
+      restoreModal: modalData(),
+
       // state that indicates whether we need to show delete confirmation dialog
-      confirmDelete: true
+      confirmDelete: true,
+      // state that indicates whether we need to show restore confirmation dialog
+      confirmRestore: true,
     };
   },
   computed: {
@@ -368,6 +377,13 @@ export default {
         this.requestDelete([submission, this.confirmDelete]);
       }
     },
+    showRestore(submission) {
+      if (this.confirmRestore) {
+        this.restoreModal.show({ submission });
+      } else {
+        this.requestRestore([submission, this.confirmRestore]);
+      }
+    },
     requestDelete(event) {
       const [{ __id: instanceId }, confirm] = event;
 
@@ -404,6 +420,37 @@ export default {
         .catch(() => {
           this.deleteModal.awaitingResponse = false;
         });
+    },
+    requestRestore(e) {
+      const [{ __id: instanceId }, confirm] = e;
+
+      if (this.restoreModal.state) this.restoreModal.awaitingResponse = true;
+
+      this.request({
+        method: 'POST',
+        url: apiPaths.restoreSubmission(this.projectId, this.xmlFormId, instanceId)
+      })
+        .then(() => {
+          this.restoreModal.hide();
+          if (this.deletedSubmissionCount.dataExists && this.deletedSubmissionCount.value > 0) {
+            this.deletedSubmissionCount.value -= 1;
+          }
+
+          this.alert.success(this.$t('alert.submissionRestored'));
+          if (confirm != null) this.confirmRestore = confirm;
+
+          // See the comments in requestDelete().
+          const index = this.odata.dataExists
+            ? this.odata.value.findIndex(submission => submission.__id === instanceId)
+            : -1;
+          if (index !== -1) {
+            this.odata.countRemoved();
+            this.$refs.table.afterDelete(index);
+          }
+        })
+        .catch(() => {
+          this.restoreModal.awaitingResponse = false;
+        });
     }
   }
 };
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index 80f80df57..b2f0b2082 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -62,6 +62,13 @@ except according to the terms contained in the LICENSE file.
       <div class="col-content">
         <date-time :iso="submission.__system.deletedAt"/>
       </div>
+      <div v-if="verbs.has('submission.restore')" class="btn-group">
+        <button type="button"
+          class="restore-button btn btn-default"
+          :aria-label="$t('action.restore')" v-tooltip.aria-label>
+          <span class="icon-recycle"></span>
+        </button>
+      </div>
     </td>
   </tr>
 </template>
diff --git a/src/components/submission/restore.vue b/src/components/submission/restore.vue
new file mode 100644
index 000000000..0f5ffce88
--- /dev/null
+++ b/src/components/submission/restore.vue
@@ -0,0 +1,90 @@
+<!--
+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>
+  <modal id="submission-restore" :state="state" :hideable="!awaitingResponse"
+    backdrop @hide="$emit('hide')" @shown="focusCheckbox">
+    <template #title>{{ $t('title') }}</template>
+    <template #body>
+      <div class="modal-introduction">
+        <p>{{ $t('introduction[0]') }}</p>
+        <p>{{ $t('introduction[1]') }}</p>
+        <p>{{ $t('introduction[2]') }}</p>
+      </div>
+      <form v-if="checkbox">
+        <div class="checkbox">
+          <label>
+            <input ref="input" v-model="noConfirm" type="checkbox">
+            {{ $t('field.noConfirm') }}
+          </label>
+        </div>
+      </form>
+      <div class="modal-actions">
+        <button type="button" class="btn btn-danger"
+          :aria-disabled="awaitingResponse" @click="restore">
+          {{ $t('action.restore') }} <spinner :state="awaitingResponse"/>
+        </button>
+        <button type="button" class="btn btn-link"
+          :aria-disabled="awaitingResponse" @click="$emit('hide')">
+          {{ $t('action.cancel') }}
+        </button>
+      </div>
+    </template>
+  </modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+import Modal from '../modal.vue';
+import Spinner from '../spinner.vue';
+
+defineOptions({
+  name: 'SubmissionRestore'
+});
+const props = defineProps({
+  state: Boolean,
+  checkbox: Boolean,
+  awaitingResponse: Boolean,
+  submission: Object
+});
+const emit = defineEmits(['hide', 'restore']);
+
+const noConfirm = ref(false);
+watch(() => props.state, (state) => { if (!state) noConfirm.value = false; });
+
+const input = ref(null);
+const focusCheckbox = () => { if (props.checkbox) input.value.focus(); };
+
+const restore = () => {
+  if (props.checkbox)
+    emit('restore', [props.submission, !noConfirm.value]);
+  else
+    emit('restore', [props.submission]);
+};
+</script>
+
+<i18n lang="json5">
+{
+  "en": {
+    // This is the title at the top of Submission undelete pop-up.
+    "title": "Undelete Submission",
+    "introduction": [
+      "Are you sure you want to undelete this Submission?",
+      "The Submission will be restored to its previous state, including associated data like comments.",
+      "If the Submission is deleted again, it will be another 30 days before it is removed."
+    ],
+    "field": {
+      "noConfirm": "Undelete immediately without confirmation until I leave the page"
+    }
+  }
+}
+</i18n>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 4f42faf65..f080836e0 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -71,7 +71,7 @@ defineProps({
   draft: Boolean,
   fields: Array
 });
-const emit = defineEmits(['review', 'delete']);
+const emit = defineEmits(['review', 'delete', 'restore']);
 
 // The component does not assume that this data will exist when the component is
 // created.
@@ -82,6 +82,7 @@ const chunkyOData = useChunkyArray(computed(() => odata.value));
 const handleActions = ({ target, data }) => {
   if (target.classList.contains('review-button')) emit('review', data);
   if (target.classList.contains('delete-button')) emit('delete', data);
+  if (target.classList.contains('restore-button')) emit('restore', data);
 };
 const table = ref(null);
 const afterReview = (index) => { markRowsChanged(table.value.getRowPair(index)); };
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index c291f3236..e2d7f0863 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -219,7 +219,9 @@
     // This text is show on a button that the user clicks to see the Form preview in the new Web Forms component
     "newPreview": "New Preview",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    // @transifexKey component.FormTrashRow.action.restore
+    "restore": "Undelete"
   },
   "field": {
     "comment": "Leave a comment…",
@@ -321,7 +323,8 @@
     "updateEntity": "The Entity has been updated!",
     "updateReviewState": "Review State saved!",
     "versionChange": "The server has been updated. Please refresh the page to avoid unpredictable behavior.",
-    "submissionDeleted": "The Submission has been deleted."
+    "submissionDeleted": "The Submission has been deleted.",
+    "submissionRestored": "The Submission has been undeleted."
   },
   "moreInfo": {
     "clickHere": {
diff --git a/src/util/request.js b/src/util/request.js
index 64db1f539..0352c6616 100644
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -126,6 +126,7 @@ export const apiPaths = {
   submissionKeys: formOrDraftPath('/submissions/keys'),
   submitters: formOrDraftPath('/submissions/submitters'),
   submission: submissionPath(''),
+  restoreSubmission: submissionPath('/restore'),
   odataSubmission: (projectId, xmlFormId, instanceId, query = undefined) => {
     const encodedFormId = encodeURIComponent(xmlFormId);
     const encodedInstanceId = encodeURIComponent(odataLiteral(instanceId));
diff --git a/test/components/submission/list.spec.js b/test/components/submission/list.spec.js
index c028cc5dc..0be7358e4 100644
--- a/test/components/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -4,6 +4,7 @@ import SubmissionDownload from '../../../src/components/submission/download.vue'
 import SubmissionList from '../../../src/components/submission/list.vue';
 import SubmissionMetadataRow from '../../../src/components/submission/metadata-row.vue';
 import SubmissionDelete from '../../../src/components/submission/delete.vue';
+import SubmissionRestore from '../../../src/components/submission/restore.vue';
 
 import testData from '../../data';
 import { changeMultiselect } from '../../util/trigger';
@@ -889,4 +890,227 @@ describe('SubmissionList', () => {
           }));
     });
   });
+
+  describe('restore', () => {
+    const loadDeletedSubmissions = () => {
+      testData.extendedSubmissions.createPast(1, { instanceId: 'e', deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions?deleted=true', { root: false }, {
+        deletedSubmissionCount: false,
+        odata: testData.submissionDeletedOData
+      });
+    };
+
+    it('toggles the modal', () => loadDeletedSubmissions()
+      .complete()
+      .testModalToggles({
+        modal: SubmissionRestore,
+        show: '.submission-metadata-row .restore-button',
+        hide: '.btn-link'
+      }));
+
+    it('implements some standard button things', () => loadDeletedSubmissions()
+      .afterResponses(component =>
+        component.get('.submission-metadata-row .restore-button').trigger('click'))
+      .testStandardButton({
+        button: '#submission-restore .btn-danger',
+        disabled: ['#submission-restore .btn-link'],
+        modal: SubmissionRestore
+      }));
+
+    it('sends the correct request', () => loadDeletedSubmissions()
+      .complete()
+      .request(async (component) => {
+        await component.get('.submission-metadata-row .restore-button').trigger('click');
+        return component.get('#submission-restore .btn-danger').trigger('click');
+      })
+      .respondWithProblem()
+      .testRequests([{
+        method: 'POST',
+        url: '/v1/projects/1/forms/f/submissions/e/restore'
+      }]));
+
+    describe('after a successful response', () => {
+      const restore = () => loadDeletedSubmissions()
+        .complete()
+        .request(async (component) => {
+          await component.get('.submission-metadata-row .restore-button').trigger('click');
+          return component.get('#submission-restore .btn-danger').trigger('click');
+        })
+        .respondWithSuccess();
+
+      it('hides the modal', async () => {
+        const component = await restore();
+        component.getComponent(SubmissionRestore).props().state.should.be.false;
+      });
+
+      it('shows a success alert', async () => {
+        const component = await restore();
+        component.should.alert('success', 'The Submission has been undeleted.');
+      });
+
+      it('hides the row', async () => {
+        const component = await restore();
+        const row = component.getComponent(SubmissionMetadataRow);
+        row.element.dataset.markRowsDeleted.should.equal('true');
+      });
+
+      it('updates the submission count', async () => {
+        const component = await restore();
+        const text = component.get('.toggle-deleted-submissions').text();
+        text.should.equal('0 deleted Submissions');
+      });
+    });
+
+    describe('last submission was restored', () => {
+      beforeEach(() => {
+        testData.extendedSubmissions.createPast(2, { deletedAt: new Date().toISOString() });
+      });
+
+      const restore = (index) => async (component) => {
+        const row = component.get(`.submission-metadata-row:nth-child(${index + 1})`);
+        await row.get('.restore-button').trigger('click');
+        return component.get('#submission-restore .btn-danger').trigger('click');
+      };
+
+      it('hides the table', () =>
+        load('/projects/1/forms/f/submissions?deleted=true', { root: false }, {
+          deletedSubmissionCount: false,
+          odata: testData.submissionDeletedOData
+        })
+          .complete()
+          .request(restore(1))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('#submission-table').should.be.visible();
+          })
+          .request(restore(0))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('#submission-table').should.be.hidden();
+          }));
+
+      it('shows a message', () =>
+        load('/projects/1/forms/f/submissions?deleted=true', { root: false }, {
+          deletedSubmissionCount: false,
+          odata: testData.submissionDeletedOData
+        })
+          .complete()
+          .request(restore(1))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('.empty-table-message').should.be.hidden();
+          })
+          .request(restore(0))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.get('.empty-table-message').should.be.visible();
+            component.get('.empty-table-message').text().should.be.equal('There are no deleted Submissions.');
+          }));
+    });
+
+    it('continues to show modal if checkbox was not checked', () => {
+      testData.extendedSubmissions.createPast(2, { deletedAt: new Date().toISOString() });
+      return load('/projects/1/forms/f/submissions?deleted=true', { root: false }, {
+        deletedSubmissionCount: false,
+        odata: testData.submissionDeletedOData
+      })
+        .complete()
+        .request(async (component) => {
+          const row = component.get('.submission-metadata-row:last-child');
+          await row.get('.restore-button').trigger('click');
+          return component.get('#submission-restore .btn-danger').trigger('click');
+        })
+        .respondWithSuccess()
+        .afterResponse(async (component) => {
+          await component.get('.submission-metadata-row .restore-button').trigger('click');
+          component.getComponent(SubmissionRestore).props().state.should.be.true;
+        });
+    });
+
+    describe('undeleting after checking the checkbox', () => {
+      const restoreAndCheck = () => {
+        testData.extendedSubmissions
+          .createPast(1, { instanceId: 'e1', deletedAt: new Date().toISOString() })
+          .createPast(1, { instanceId: 'e2', deletedAt: new Date().toISOString() });
+        return load('/projects/1/forms/f/submissions?deleted=true', { root: false }, {
+          deletedSubmissionCount: false,
+          odata: testData.submissionDeletedOData
+        })
+          .complete()
+          .request(async (component) => {
+            const row = component.get('.submission-metadata-row:last-child');
+            await row.get('.restore-button').trigger('click');
+            const modal = component.getComponent(SubmissionRestore);
+            await modal.get('input').setChecked();
+            return modal.get('.btn-danger').trigger('click');
+          })
+          .respondWithSuccess()
+          .complete();
+      };
+
+      it('immediately sends a request', () =>
+        restoreAndCheck()
+          .request(component =>
+            component.get('.submission-metadata-row .restore-button').trigger('click'))
+          .respondWithProblem()
+          .testRequests([{
+            method: 'POST',
+            url: '/v1/projects/1/forms/f/submissions/e2/restore'
+          }]));
+
+      it('does not show the modal', () =>
+        restoreAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .restore-button').trigger('click');
+            component.getComponent(SubmissionRestore).props().state.should.be.false;
+          })
+          .respondWithProblem());
+
+      it('shows the correct alert', () =>
+        restoreAndCheck()
+          .request(component =>
+            component.get('.submission-metadata-row .restore-button').trigger('click'))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.should.alert('success', 'The Submission has been undeleted.');
+          }));
+
+      it('does not hide table after restoreing last submission if submissions are concurrently replaced', () =>
+        restoreAndCheck()
+          .request(async (component) => {
+            await component.get('#submission-list-refresh-button').trigger('click');
+            return component.get('.submission-metadata-row .restore-button').trigger('click');
+          })
+          .respondWithData(() => {
+            testData.extendedSubmissions.splice(0);
+            testData.extendedSubmissions.createNew({ deletedAt: new Date().toISOString() });
+            testData.extendedSubmissions.createNew({ deletedAt: new Date().toISOString() });
+            return testData.submissionDeletedOData();
+          })
+          .respondWithSuccess()
+          .afterResponses(component => {
+            // Even though there were 2 deleted Submissions before, and there are 2
+            // deleted Submissions now, and 2 deleted Submissions have been restored, the table should
+            // still be shown.
+            component.get('#submission-table').should.be.visible();
+            // No row should be hidden.
+            component.find('[data-mark-rows-deleted]').exists().should.be.false;
+          })
+          .request(component =>
+            component.get('.submission-metadata-row .restore-button').trigger('click'))
+          .respondWithSuccess()
+          .afterResponse(component => {
+            /* The removedCount should have been reset to 0 when the refreshed
+            deleted Submissions were received. (Otherwise, the previous assertion should
+            have failed.) However, imagine that after that, the removedCount was
+            incorrectly increased to 1 following the success response (if
+            requestDelete() in SubmissionList didn't check whether
+            odata.value still includes the restored Submission). In that
+            case, this latest restore would increase the removedCount to 2,
+            which would hide the table. Here, we check that that doesn't
+            happen. */
+            component.get('#submission-table').should.be.visible();
+          }));
+    });
+  });
 });
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index 883d8abe8..4431d2ede 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -147,6 +147,18 @@ describe('SubmissionMetadataRow', () => {
     mountComponent().find('.delete-button').exists().should.be.false;
   });
 
+  it('shows the restore button', async () => {
+    testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+    mountComponent({ deleted: true }).find('.restore-button').attributes('aria-label').should.be.equal('Undelete');
+  });
+
+  it('does not show the restore button if user does not have submission restore permission', async () => {
+    mockLogin({ role: 'none' });
+    testData.extendedProjects.createPast(1, { role: 'viewer' });
+    testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() });
+    mountComponent({ deleted: true }).find('.restore-button').exists().should.be.false;
+  });
+
   describe('review button', () => {
     beforeEach(mockLogin);
 
@@ -263,5 +275,10 @@ describe('SubmissionMetadataRow', () => {
       testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() }).last();
       mountComponent({ deleted: true }).find('.delete-button').exists().should.be.false;
     });
+
+    it('shows restore button', () => {
+      testData.extendedSubmissions.createPast(1, { deletedAt: new Date().toISOString() }).last();
+      mountComponent({ deleted: true }).find('.restore-button').attributes('aria-label').should.be.equal('Undelete');
+    });
   });
 });
diff --git a/test/components/submission/restore.spec.js b/test/components/submission/restore.spec.js
new file mode 100644
index 000000000..b8ec4809c
--- /dev/null
+++ b/test/components/submission/restore.spec.js
@@ -0,0 +1,32 @@
+import SubmissionRestore from '../../../src/components/submission/restore.vue';
+
+import { mergeMountOptions, mount } from '../../util/lifecycle';
+
+const mountComponent = (options = undefined) =>
+  mount(SubmissionRestore, mergeMountOptions(options, {
+    props: { state: true, checkbox: true }
+  }));
+
+describe('SubmissionRestore', () => {
+  it('focuses the checkbox', () => {
+    const modal = mountComponent({ attachTo: document.body });
+    modal.get('input').should.be.focused();
+  });
+
+  it('resets the checkbox after the modal is hidden', async () => {
+    const modal = mountComponent();
+    const input = modal.get('input');
+    input.element.checked.should.be.false;
+    await input.setChecked();
+    await modal.setProps({ state: false });
+    await modal.setProps({ state: true });
+    input.element.checked.should.be.false;
+  });
+
+  it('does not render the checkbox if the checkbox prop is false', () => {
+    const modal = mountComponent({
+      props: { checkbox: false }
+    });
+    modal.find('input').exists().should.be.false;
+  });
+});
diff --git a/test/data/seed.js b/test/data/seed.js
index a86453a52..ec93d55ee 100644
--- a/test/data/seed.js
+++ b/test/data/seed.js
@@ -44,6 +44,7 @@ export default () => {
         'submission.read',
         'submission.update',
         'submission.delete',
+        'submission.restore',
         'user.create',
         'user.list',
         'user.read',
@@ -92,7 +93,8 @@ export default () => {
         'submission.list',
         'submission.read',
         'submission.update',
-        'submission.delete'
+        'submission.delete',
+        'submission.restore'
       ]
     })
     .createPast(1, {
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index 221fc75cc..f1eb7a353 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -717,6 +717,9 @@
     },
     "submissionDeleted": {
       "string": "The Submission has been deleted."
+    },
+    "submissionRestored": {
+      "string": "The Submission has been undeleted."
     }
   },
   "moreInfo": {
@@ -3352,12 +3355,6 @@
       }
     },
     "FormTrashRow": {
-      "action": {
-        "restore": {
-          "string": "Undelete",
-          "developer_comment": "This is the text for an action, for example, the text of a button."
-        }
-      },
       "deletedDate": {
         "string": "Deleted {dateTime}",
         "developer_comment": "This text shows when the Form was deleted. {dateTime} shows the date and time, for example: \"2020/01/01 01:23\". It may show a formatted date like \"2020/01/01\", or it may use a word like \"today\", \"yesterday\", or \"Sunday\"."
@@ -3366,6 +3363,12 @@
         "conflict": {
           "string": "This Form cannot be undeleted because an active Form with the same ID exists."
         }
+      },
+      "action": {
+        "restore": {
+          "string": "Undelete",
+          "developer_comment": "This is the text for an action, for example, the text of a button."
+        }
       }
     },
     "FormVersionDefDropdown": {
@@ -4689,6 +4692,29 @@
         }
       }
     },
+    "SubmissionRestore": {
+      "title": {
+        "string": "Undelete Submission",
+        "developer_comment": "This is the title at the top of Submission undelete pop-up."
+      },
+      "introduction": {
+        "0": {
+          "string": "Are you sure you want to undelete this Submission?"
+        },
+        "1": {
+          "string": "The Submission will be restored to its previous state, including associated data like comments."
+        },
+        "2": {
+          "string": "If the Submission is deleted again, it will be another 30 days before it is removed."
+        }
+      },
+      "field": {
+        "noConfirm": {
+          "string": "Undelete immediately without confirmation until I leave the page",
+          "developer_comment": "This is the text of a form field."
+        }
+      }
+    },
     "SubmissionShow": {
       "back": {
         "title": {

From 9513fd94e836a325378783e5e95489ec0027713a Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 24 Oct 2024 16:54:47 -0400
Subject: [PATCH 6/7] Add spinner to the delete/undelete buttons in the
 Submission list

---
 src/components/submission/list.vue          | 32 ++++++++++++---------
 src/components/submission/metadata-row.vue  | 11 ++++---
 src/components/submission/table.vue         |  8 ++++--
 test/components/submission/data-row.spec.js |  1 +
 test/components/submission/list.spec.js     | 28 ++++++++++++++++++
 test/components/submission/table.spec.js    |  3 +-
 6 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
index 086108d31..d16548d72 100644
--- a/src/components/submission/list.vue
+++ b/src/components/submission/list.vue
@@ -36,7 +36,7 @@ except according to the terms contained in the LICENSE file.
       <submission-table v-show="odata.dataExists && odata.value.length !== 0 && odata.removedCount < odata.value.length"
         ref="table" :project-id="projectId" :xml-form-id="xmlFormId"
         :draft="draft" :fields="selectedFields"
-        :deleted="deleted"
+        :deleted="deleted" :awaiting-deleted-responses="awaitingResponses"
         @review="reviewModal.show({ submission: $event })"
         @delete="showDelete"
         @restore="showRestore"/>
@@ -62,10 +62,12 @@ except according to the terms contained in the LICENSE file.
     <submission-update-review-state v-bind="reviewModal" :project-id="projectId"
       :xml-form-id="xmlFormId" @hide="reviewModal.hide()"
       @success="afterReview"/>
-    <submission-delete v-bind="deleteModal" checkbox @hide="deleteModal.hide()"
-      @delete="requestDelete"/>
-    <submission-restore v-bind="restoreModal" checkbox @hide="restoreModal.hide()"
-      @restore="requestRestore"/>
+    <submission-delete v-bind="deleteModal" checkbox
+      :awaiting-response="deleteModal.state && awaitingResponses.has(deleteModal.submission.__id)"
+      @hide="deleteModal.hide()" @delete="requestDelete"/>
+    <submission-restore v-bind="restoreModal" checkbox
+      :awaiting-response="restoreModal.state && awaitingResponses.has(restoreModal.submission.__id)"
+      @hide="restoreModal.hide()" @restore="requestRestore"/>
   </div>
 </template>
 
@@ -218,6 +220,8 @@ export default {
       confirmDelete: true,
       // state that indicates whether we need to show restore confirmation dialog
       confirmRestore: true,
+
+      awaitingResponses: new Set()
     };
   },
   computed: {
@@ -387,7 +391,7 @@ export default {
     requestDelete(event) {
       const [{ __id: instanceId }, confirm] = event;
 
-      if (this.deleteModal.state) this.deleteModal.awaitingResponse = true;
+      this.awaitingResponses.add(instanceId);
 
       this.request({
         method: 'DELETE',
@@ -417,14 +421,15 @@ export default {
             this.$refs.table.afterDelete(index);
           }
         })
-        .catch(() => {
-          this.deleteModal.awaitingResponse = false;
+        .catch(noop)
+        .finally(() => {
+          this.awaitingResponses.delete(instanceId);
         });
     },
-    requestRestore(e) {
-      const [{ __id: instanceId }, confirm] = e;
+    requestRestore(event) {
+      const [{ __id: instanceId }, confirm] = event;
 
-      if (this.restoreModal.state) this.restoreModal.awaitingResponse = true;
+      this.awaitingResponses.add(instanceId);
 
       this.request({
         method: 'POST',
@@ -448,8 +453,9 @@ export default {
             this.$refs.table.afterDelete(index);
           }
         })
-        .catch(() => {
-          this.restoreModal.awaitingResponse = false;
+        .catch(noop)
+        .finally(() => {
+          this.awaitingResponses.delete(instanceId);
         });
     }
   }
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index b2f0b2082..9463bf2cd 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -31,7 +31,7 @@ except according to the terms contained in the LICENSE file.
         <button v-if="verbs.has('submission.delete')" type="button"
           class="delete-button btn btn-default"
           :aria-label="$t('action.delete')" v-tooltip.aria-label>
-          <span class="icon-trash"></span>
+          <span class="icon-trash"></span><spinner :state="awaitingResponse"/>
         </button>
         <template v-if="verbs.has('submission.update')">
           <button type="button" class="review-button btn btn-default"
@@ -65,8 +65,9 @@ except according to the terms contained in the LICENSE file.
       <div v-if="verbs.has('submission.restore')" class="btn-group">
         <button type="button"
           class="restore-button btn btn-default"
+          :aria-disabled="awaitingResponse"
           :aria-label="$t('action.restore')" v-tooltip.aria-label>
-          <span class="icon-recycle"></span>
+          <span class="icon-recycle"></span><spinner :state="awaitingResponse"/>
         </button>
       </div>
     </td>
@@ -79,10 +80,11 @@ import DateTime from '../date-time.vue';
 import useReviewState from '../../composables/review-state';
 import useRoutes from '../../composables/routes';
 import { apiPaths } from '../../util/request';
+import Spinner from '../spinner.vue';
 
 export default {
   name: 'SubmissionMetadataRow',
-  components: { DateTime },
+  components: { DateTime, Spinner },
   props: {
     projectId: {
       type: String,
@@ -108,7 +110,8 @@ export default {
     verbs: {
       type: Set,
       required: true
-    }
+    },
+    awaitingResponse: Boolean
   },
   setup() {
     const { reviewStateIcon } = useReviewState();
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index f080836e0..934ccf977 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -31,7 +31,7 @@ except according to the terms contained in the LICENSE file.
 
     <template #data-frozen="{ data, index }">
       <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
-        :draft="draft" :submission="data" :deleted="deleted"
+        :draft="draft" :submission="data" :deleted="deleted" :awaiting-response="awaitingDeletedResponses.has(data.__id)"
         :row-number="odata.originalCount - index" :verbs="project.verbs"/>
     </template>
     <template #data-scrolling="{ data }">
@@ -69,7 +69,11 @@ defineProps({
     default: false
   },
   draft: Boolean,
-  fields: Array
+  fields: Array,
+  awaitingDeletedResponses: {
+    type: Set,
+    required: true
+  }
 });
 const emit = defineEmits(['review', 'delete', 'restore']);
 
diff --git a/test/components/submission/data-row.spec.js b/test/components/submission/data-row.spec.js
index 92703cbb1..04538af5e 100644
--- a/test/components/submission/data-row.spec.js
+++ b/test/components/submission/data-row.spec.js
@@ -40,6 +40,7 @@ const mountComponent = (props = undefined) => {
       xmlFormId: 'f',
       draft: false,
       fields: fields.data,
+      awaitingDeletedResponses: new Set(),
       ...props
     },
     container
diff --git a/test/components/submission/list.spec.js b/test/components/submission/list.spec.js
index 0be7358e4..ea1fd7517 100644
--- a/test/components/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -842,6 +842,20 @@ describe('SubmissionList', () => {
           })
           .respondWithProblem());
 
+      it('shows spinner', () =>
+        delAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .delete-button').trigger('click');
+            component.getComponent(SubmissionDelete).props().state.should.be.false;
+          })
+          .beforeAnyResponse(component => {
+            component.find('.delete-button .spinner').classes().should.contain('active');
+          })
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.find('.delete-button .spinner').classes().should.not.contain('active');
+          }));
+
       it('shows the correct alert', () =>
         delAndCheck()
           .request(component =>
@@ -1066,6 +1080,20 @@ describe('SubmissionList', () => {
           })
           .respondWithProblem());
 
+      it('shows spinner', () =>
+        restoreAndCheck()
+          .request(async (component) => {
+            await component.get('.submission-metadata-row .restore-button').trigger('click');
+            component.getComponent(SubmissionDelete).props().state.should.be.false;
+          })
+          .beforeAnyResponse(component => {
+            component.find('.restore-button .spinner').classes().should.contain('active');
+          })
+          .respondWithSuccess()
+          .afterResponse(component => {
+            component.find('.restore-button .spinner').classes().should.not.contain('active');
+          }));
+
       it('shows the correct alert', () =>
         restoreAndCheck()
           .request(component =>
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index 4db16ba1c..e520654b5 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -16,7 +16,8 @@ const mountComponent = (options = undefined) => {
     props: {
       projectId: '1',
       xmlFormId: 'f',
-      draft: false
+      draft: false,
+      awaitingDeletedResponses: new Set()
     },
     container: {
       requestData: testRequestData([useFields, useSubmissions], {

From 0b74e3c8e90aeaeafcdffdb23def3ea97ed1692b Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Mon, 4 Nov 2024 11:23:10 -0500
Subject: [PATCH 7/7] Change the color of deleted at column to red

---
 src/components/submission/metadata-row.vue |  4 +++-
 src/components/submission/table.vue        | 16 ++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index 9463bf2cd..81ffc99ae 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -59,7 +59,7 @@ except according to the terms contained in the LICENSE file.
       </div>
     </td>
     <td v-if="!draft && deleted" class="state-and-actions">
-      <div class="col-content">
+      <div class="col-content col-deleted-at">
         <date-time :iso="submission.__system.deletedAt"/>
       </div>
       <div v-if="verbs.has('submission.restore')" class="btn-group">
@@ -193,5 +193,7 @@ export default {
   }
 
   .delete-button .icon-trash { color: $color-danger; }
+
+  .col-deleted-at { color: $color-danger; }
 }
 </style>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 934ccf977..566f61ee5 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -18,7 +18,7 @@ except according to the terms contained in the LICENSE file.
       <th v-if="!draft">{{ $t('header.submitterName') }}</th>
       <th>{{ $t('header.submissionDate') }}</th>
       <th v-if="!draft && !deleted">{{ $t('header.stateAndActions') }}</th>
-      <th v-if="!draft && deleted">{{ $t('header.deletedAt') }}</th>
+      <th v-if="!draft && deleted" class="col-deleted-at">{{ $t('header.deletedAt') }}</th>
     </template>
     <template #head-scrolling>
       <template v-if="fields != null">
@@ -97,12 +97,16 @@ defineExpose({ afterReview, afterDelete });
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#submission-table .table-freeze-scrolling {
-  th, td {
-    @include text-overflow-ellipsis;
-    max-width: 250px;
-    &:last-child { max-width: 325px; }
+#submission-table {
+  .table-freeze-scrolling {
+    th, td {
+      @include text-overflow-ellipsis;
+      max-width: 250px;
+      &:last-child { max-width: 325px; }
+    }
   }
+
+  th.col-deleted-at { color: $color-danger; }
 }
 </style>