From 6bf51b5f165edb22c2ff507fa48dd9ee8891b4b2 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Mon, 24 Jun 2024 18:48:15 +0200
Subject: [PATCH 01/12] create AttachmentActionsDropdown component

WIP
---
 jsapp/js/components/common/koboDropdown.tsx   |  14 +--
 .../attachmentActionsDropdown.component.tsx   | 114 ++++++++++++++++++
 .../submissions/submissionDataTable.tsx       |   3 +
 3 files changed, 123 insertions(+), 8 deletions(-)
 create mode 100644 jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx

diff --git a/jsapp/js/components/common/koboDropdown.tsx b/jsapp/js/components/common/koboDropdown.tsx
index af10e029f1..28b2732ded 100644
--- a/jsapp/js/components/common/koboDropdown.tsx
+++ b/jsapp/js/components/common/koboDropdown.tsx
@@ -27,8 +27,8 @@ interface KoboDropdownProps {
   /** The content of dropdown, anything's allowed. */
   menuContent: React.ReactNode;
   /**
-   * Optional name value useful for styling and `menuVisibilityChange` action,
-   * ends up in `data-name` attribut.e
+   * Name useful for styling and `menuVisibilityChange` action, it ends up in
+   * the `data-name` attribute.
    */
   name: string;
   'data-cy'?: string;
@@ -41,7 +41,7 @@ interface KoboDropdownState {
 }
 
 interface AdditionalWrapperAttributes {
-  'data-name'?: string;
+  'data-name': string;
   'data-cy'?: string;
 }
 
@@ -229,12 +229,10 @@ export default class KoboDropdown extends React.Component<
   }
 
   render() {
-    const additionalWrapperAttributes: AdditionalWrapperAttributes = {};
-
-    if (this.props.name) {
+    const additionalWrapperAttributes: AdditionalWrapperAttributes = {
       // We use `data-name` attribute to allow any character in the name.
-      additionalWrapperAttributes['data-name'] = this.props.name;
-    }
+      ['data-name']: this.props.name,
+    };
 
     if (this.props['data-cy']) {
       additionalWrapperAttributes['data-cy'] = this.props['data-cy'];
diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
new file mode 100644
index 0000000000..db27cdc9fd
--- /dev/null
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -0,0 +1,114 @@
+// Libraries
+import React, {useState} from 'react';
+
+// Components
+import Icon from 'js/components/common/icon';
+import Button from 'js/components/common/button';
+import KoboDropdown from 'js/components/common/koboDropdown';
+import KoboModal from 'js/components/modals/koboModal';
+import KoboModalHeader from 'js/components/modals/koboModalHeader';
+import KoboModalContent from 'js/components/modals/koboModalContent';
+import KoboModalFooter from 'js/components/modals/koboModalFooter';
+import bem from 'js/bem';
+
+// Utilities
+import {generateUuid, notify} from 'js/utils';
+
+// Types
+import type {SubmissionAttachment} from 'js/dataInterface';
+
+// Styles
+// import styles from './attachmentActionsDropdown.module.scss';
+
+interface AttachmentActionsDropdownProps {
+  attachment: SubmissionAttachment;
+}
+
+export default function AttachmentActionsDropdown(
+  props: AttachmentActionsDropdownProps
+) {
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
+  const [isDeletePending, setIsDeletePending] = useState<boolean>(false);
+
+  const toggleDeleteModal = () => {
+    setIsDeleteModalOpen(!isDeleteModalOpen);
+  };
+
+  function confirmDelete() {
+    console.log('confirmDelete');
+
+    setIsDeletePending(true);
+
+    setTimeout(() => {
+      setIsDeletePending(false);
+      toggleDeleteModal();
+      notify(t('##Attachment_type## deleted').replace('##Attachment_type##', t('Image')));
+    }, 2000);
+  }
+
+  function requestDownloadFile() {
+    console.log('requestDownloadFile', props.attachment);
+  }
+
+  const uniqueDropdownName = `attachment-actions-${generateUuid()}`;
+
+  return (
+    <>
+      <KoboDropdown
+        name={uniqueDropdownName}
+        placement='down-right'
+        hideOnMenuClick
+        triggerContent={
+          <Button
+            type='bare'
+            color='storm'
+            size='s'
+            startIcon='more'
+          />
+        }
+        menuContent={
+          <bem.KoboSelect__menu>
+            <bem.KoboSelect__option onClick={requestDownloadFile}>
+              <Icon name='download' />
+              <label>{t('Download')}</label>
+            </bem.KoboSelect__option>
+
+            <bem.KoboSelect__option onClick={toggleDeleteModal}>
+              <Icon name='trash' />
+              <label>{t('Delete')}</label>
+            </bem.KoboSelect__option>
+          </bem.KoboSelect__menu>
+        }
+      />
+
+      <KoboModal isOpen={isDeleteModalOpen} onRequestClose={toggleDeleteModal} size='large'>
+        <KoboModalHeader onRequestCloseByX={toggleDeleteModal}>
+          {t('Delete ##attachment_type##').replace('##attachment_type##', t('image'))}
+        </KoboModalHeader>
+
+        <KoboModalContent>
+          <p>{t('Are you sure you want to delete this ##attachment_type##?').replace('##attachment_type##', t('image'))}</p>
+        </KoboModalContent>
+
+        <KoboModalFooter>
+          <Button
+            type='frame'
+            color='dark-blue'
+            size='l'
+            onClick={toggleDeleteModal}
+            label={t('Cancel')}
+          />
+
+          <Button
+            type='full'
+            color='red'
+            size='l'
+            onClick={confirmDelete}
+            label={t('Delete')}
+            isPending={isDeletePending}
+          />
+        </KoboModalFooter>
+      </KoboModal>
+    </>
+  );
+}
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 16c19c745c..5b0b020028 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -29,6 +29,7 @@ import type {
 } from 'jsapp/js/dataInterface';
 import AudioPlayer from 'js/components/common/audioPlayer';
 import {goToProcessing} from 'js/components/processing/routes.utils';
+import AttachmentActionsDropdown from './attachmentActionsDropdown.component';
 
 bem.SubmissionDataTable = makeBem(null, 'submission-data-table');
 bem.SubmissionDataTable__row = makeBem(bem.SubmissionDataTable, 'row');
@@ -302,6 +303,8 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
               label={t('Download')}
               onClick={downloadUrl.bind(this, attachment.download_url)}
             />
+
+            <AttachmentActionsDropdown attachment={attachment} />
           </React.Fragment>
         );
       } else if (type === QUESTION_TYPES.image.id) {

From d04cedb6f23988721930abf9a8feafdb67238d73 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Mon, 24 Jun 2024 18:55:29 +0200
Subject: [PATCH 02/12] cleanup data table audio player cell styles

---
 jsapp/js/components/submissions/submissionDataTable.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/jsapp/js/components/submissions/submissionDataTable.scss b/jsapp/js/components/submissions/submissionDataTable.scss
index 0904f5f317..e66852b2ad 100644
--- a/jsapp/js/components/submissions/submissionDataTable.scss
+++ b/jsapp/js/components/submissions/submissionDataTable.scss
@@ -86,20 +86,17 @@ $submission-data-table-space: sizes.$x12;
 
 .submission-data-table__row--response .submission-data-table__column.submission-data-table__column--data {
   @include mixins.centerRowFlex;
+  gap: 10px;
 
   flex: 1;
 
   .audio-player:first-child {
-    padding-right: sizes.$x30;
+    margin-right: 30px;
   }
 
   > *:first-child {
     flex: 1;
   }
-
-  > *:not(:last-child) {
-    margin-right: sizes.$x20;
-  }
 }
 
 .submission-data-table__xml-name {

From 4b82d6e875f2d053ea4663563fe1e847c92b92d1 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Tue, 25 Jun 2024 17:13:38 +0200
Subject: [PATCH 03/12] cleanup KoboSelect option styles

---
 jsapp/js/components/common/koboSelect.scss | 33 ++++++++++------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/jsapp/js/components/common/koboSelect.scss b/jsapp/js/components/common/koboSelect.scss
index 330e02c037..cf3467e97f 100644
--- a/jsapp/js/components/common/koboSelect.scss
+++ b/jsapp/js/components/common/koboSelect.scss
@@ -89,9 +89,23 @@ $k-select-menu-padding: sizes.$x6;
 
 .k-select__option {
   @include mixins.buttonReset;
+  font-weight: 400;
+  position: relative;
+
+  &:hover,
+  &.k-select__option--selected {
+    color: colors.$kobo-gray-24;
+    background-color: colors.$kobo-gray-96;
+  }
+
+  &:focus-visible {
+    @include mixins.default-ui-focus;
+    // Needed so that option--selected never appears above focus styles
+    z-index: 1;
+  }
 
   .k-icon {
-    color: colors.$kobo-gray-85;
+    color: inherit;
   }
 }
 
@@ -135,23 +149,6 @@ $k-select-menu-padding: sizes.$x6;
   }
 }
 
-.k-select__option {
-  font-weight: 500;
-  position: relative;
-
-  &:hover,
-  &.k-select__option--selected {
-    color: colors.$kobo-gray-24;
-    background-color: colors.$kobo-gray-96;
-  }
-
-  &:focus-visible {
-    @include mixins.default-ui-focus;
-    // Needed so that option--selected never appears above focus styles
-    z-index: 1;
-  }
-}
-
 .k-select__option label,
 .k-select__trigger label {
   @include mixins.textEllipsis;

From 41792be5aa1d73e91564b66c122247cf1d47a634 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Tue, 25 Jun 2024 17:13:52 +0200
Subject: [PATCH 04/12] cleanup KoboModal default size

---
 jsapp/js/components/modals/koboModal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/jsapp/js/components/modals/koboModal.tsx b/jsapp/js/components/modals/koboModal.tsx
index 3f57ab4b7f..4c9147a10f 100644
--- a/jsapp/js/components/modals/koboModal.tsx
+++ b/jsapp/js/components/modals/koboModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Modal from 'react-modal';
+import cx from 'classnames';
 import bem, {makeBem} from 'js/bem';
 import './koboModal.scss';
 
@@ -7,6 +8,8 @@ bem.KoboModal = makeBem(null, 'kobo-modal');
 
 type KoboModalSize = 'large' | 'medium';
 
+const DEFAULT_SIZE: KoboModalSize = 'medium';
+
 interface KoboModalProps {
   /** For displaying the modal. */
   isOpen: boolean;
@@ -23,16 +26,14 @@ interface KoboModalProps {
 }
 
 export default function KoboModal(props: KoboModalProps) {
-  const modalSize: KoboModalSize = props.size || 'medium';
-
-  const modalClassNames = ['kobo-modal', `kobo-modal--size-${modalSize}`];
+  const modalSize: KoboModalSize = props.size || DEFAULT_SIZE;
 
   return (
     <Modal
       ariaHideApp
       isOpen={props.isOpen}
       onRequestClose={props.onRequestClose}
-      className={modalClassNames.join(' ')}
+      className={cx('kobo-modal', `kobo-modal--size-${modalSize}`)}
       overlayClassName='kobo-modal-overlay'
       shouldCloseOnOverlayClick={props.isDismissableByDefaultMeans}
       shouldCloseOnEsc={props.isDismissableByDefaultMeans}

From 2a631462351ed14800f09388ddd20d49447e594a Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Tue, 25 Jun 2024 17:15:05 +0200
Subject: [PATCH 05/12] disable deleting in AttachmentActionsDropdown if
 insufficient permissions

---
 .../attachmentActionsDropdown.component.tsx   | 43 ++++++++++++-------
 .../submissions/submissionDataTable.tsx       |  5 ++-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index db27cdc9fd..3e68602b6d 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -1,7 +1,6 @@
-// Libraries
+// Libraries:
 import React, {useState} from 'react';
-
-// Components
+// Components:
 import Icon from 'js/components/common/icon';
 import Button from 'js/components/common/button';
 import KoboDropdown from 'js/components/common/koboDropdown';
@@ -10,20 +9,24 @@ import KoboModalHeader from 'js/components/modals/koboModalHeader';
 import KoboModalContent from 'js/components/modals/koboModalContent';
 import KoboModalFooter from 'js/components/modals/koboModalFooter';
 import bem from 'js/bem';
-
-// Utilities
-import {generateUuid, notify} from 'js/utils';
-
-// Types
-import type {SubmissionAttachment} from 'js/dataInterface';
-
-// Styles
-// import styles from './attachmentActionsDropdown.module.scss';
+// Helpers:
+import * as utils from 'js/utils';
+import {userCan} from 'js/components/permissions/utils';
+// Types:
+import type {
+  AssetResponse,
+  SubmissionAttachment,
+} from 'js/dataInterface';
 
 interface AttachmentActionsDropdownProps {
+  asset: AssetResponse;
   attachment: SubmissionAttachment;
 }
 
+/**
+ * Displays a "…" button that opens a dropdown with some actions available for
+ * provided attachment. Delete option would display a safety check modal.
+ */
 export default function AttachmentActionsDropdown(
   props: AttachmentActionsDropdownProps
 ) {
@@ -42,15 +45,18 @@ export default function AttachmentActionsDropdown(
     setTimeout(() => {
       setIsDeletePending(false);
       toggleDeleteModal();
-      notify(t('##Attachment_type## deleted').replace('##Attachment_type##', t('Image')));
+      utils.notify(t('##Attachment_type## deleted').replace('##Attachment_type##', t('Image')));
     }, 2000);
   }
 
   function requestDownloadFile() {
     console.log('requestDownloadFile', props.attachment);
+    utils.downloadUrl(props.attachment.download_url);
   }
 
-  const uniqueDropdownName = `attachment-actions-${generateUuid()}`;
+  const userCanDelete = userCan('delete_submissions', props.asset);
+
+  const uniqueDropdownName = `attachment-actions-${utils.generateUuid()}`;
 
   return (
     <>
@@ -81,7 +87,11 @@ export default function AttachmentActionsDropdown(
         }
       />
 
-      <KoboModal isOpen={isDeleteModalOpen} onRequestClose={toggleDeleteModal} size='large'>
+      <KoboModal
+        isOpen={isDeleteModalOpen}
+        onRequestClose={toggleDeleteModal}
+        size='medium'
+      >
         <KoboModalHeader onRequestCloseByX={toggleDeleteModal}>
           {t('Delete ##attachment_type##').replace('##attachment_type##', t('image'))}
         </KoboModalHeader>
@@ -101,10 +111,11 @@ export default function AttachmentActionsDropdown(
 
           <Button
             type='full'
-            color='red'
+            color='dark-red'
             size='l'
             onClick={confirmDelete}
             label={t('Delete')}
+            isDisabled={!userCanDelete}
             isPending={isDeletePending}
           />
         </KoboModalFooter>
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 5b0b020028..61a0ff02c2 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -304,7 +304,10 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
               onClick={downloadUrl.bind(this, attachment.download_url)}
             />
 
-            <AttachmentActionsDropdown attachment={attachment} />
+            <AttachmentActionsDropdown
+              asset={this.props.asset}
+              attachment={attachment}
+            />
           </React.Fragment>
         );
       } else if (type === QUESTION_TYPES.image.id) {

From 96883529ba762b74595723d58c8c1b6dd005c5d6 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Thu, 27 Jun 2024 02:31:38 +0200
Subject: [PATCH 06/12] fix bg audio url flow in the modal

---
 jsapp/js/components/bigModal/bigModal.es6     |  1 -
 .../attachmentActionsDropdown.component.tsx   | 31 ++++---
 .../submissions/submissionDataTable.scss      | 19 ++++-
 .../submissions/submissionDataTable.tsx       | 80 ++++++++---------
 .../submissions/submissionModal.tsx           | 85 +++++++++++++++----
 jsapp/js/components/submissions/table.tsx     | 39 +--------
 .../js/components/submissions/table.types.ts  |  5 --
 7 files changed, 152 insertions(+), 108 deletions(-)

diff --git a/jsapp/js/components/bigModal/bigModal.es6 b/jsapp/js/components/bigModal/bigModal.es6
index eb8d8eed04..d0f3530d8b 100644
--- a/jsapp/js/components/bigModal/bigModal.es6
+++ b/jsapp/js/components/bigModal/bigModal.es6
@@ -380,7 +380,6 @@ class BigModal extends React.Component {
                 ids={this.props.params.ids}
                 isDuplicated={this.props.params.isDuplicated}
                 duplicatedSubmission={this.props.params.duplicatedSubmission}
-                backgroundAudioUrl={this.props.params.backgroundAudioUrl}
                 tableInfo={this.props.params.tableInfo || false}
               />
             }
diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index 3e68602b6d..dd160e20b1 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -9,18 +9,19 @@ import KoboModalHeader from 'js/components/modals/koboModalHeader';
 import KoboModalContent from 'js/components/modals/koboModalContent';
 import KoboModalFooter from 'js/components/modals/koboModalFooter';
 import bem from 'js/bem';
+// Constants
+import {QuestionTypeName, MetaQuestionTypeName} from 'js/constants';
 // Helpers:
 import * as utils from 'js/utils';
 import {userCan} from 'js/components/permissions/utils';
 // Types:
-import type {
-  AssetResponse,
-  SubmissionAttachment,
-} from 'js/dataInterface';
+import type {AnyRowTypeName} from 'js/constants';
+import type {AssetResponse} from 'js/dataInterface';
 
 interface AttachmentActionsDropdownProps {
   asset: AssetResponse;
-  attachment: SubmissionAttachment;
+  questionType: AnyRowTypeName;
+  attachmentUrl: string;
 }
 
 /**
@@ -37,6 +38,17 @@ export default function AttachmentActionsDropdown(
     setIsDeleteModalOpen(!isDeleteModalOpen);
   };
 
+  let attachmentTypeName = t('attachment');
+  if (props.questionType === QuestionTypeName.audio) {
+    attachmentTypeName = t('audio recording');
+  } else if (props.questionType === QuestionTypeName.video) {
+    attachmentTypeName = t('video recording');
+  } else if (props.questionType === QuestionTypeName.image) {
+    attachmentTypeName = t('image');
+  } else if (props.questionType === MetaQuestionTypeName['background-audio']) {
+    attachmentTypeName = t('background audio recording');
+  }
+
   function confirmDelete() {
     console.log('confirmDelete');
 
@@ -45,13 +57,12 @@ export default function AttachmentActionsDropdown(
     setTimeout(() => {
       setIsDeletePending(false);
       toggleDeleteModal();
-      utils.notify(t('##Attachment_type## deleted').replace('##Attachment_type##', t('Image')));
+      utils.notify(t('##Attachment_type## deleted').replace('##Attachment_type##', attachmentTypeName));
     }, 2000);
   }
 
   function requestDownloadFile() {
-    console.log('requestDownloadFile', props.attachment);
-    utils.downloadUrl(props.attachment.download_url);
+    utils.downloadUrl(props.attachmentUrl);
   }
 
   const userCanDelete = userCan('delete_submissions', props.asset);
@@ -93,11 +104,11 @@ export default function AttachmentActionsDropdown(
         size='medium'
       >
         <KoboModalHeader onRequestCloseByX={toggleDeleteModal}>
-          {t('Delete ##attachment_type##').replace('##attachment_type##', t('image'))}
+          {t('Delete ##attachment_type##').replace('##attachment_type##', attachmentTypeName)}
         </KoboModalHeader>
 
         <KoboModalContent>
-          <p>{t('Are you sure you want to delete this ##attachment_type##?').replace('##attachment_type##', t('image'))}</p>
+          <p>{t('Are you sure you want to delete this ##attachment_type##?').replace('##attachment_type##', attachmentTypeName)}</p>
         </KoboModalContent>
 
         <KoboModalFooter>
diff --git a/jsapp/js/components/submissions/submissionDataTable.scss b/jsapp/js/components/submissions/submissionDataTable.scss
index e66852b2ad..85d5f083ac 100644
--- a/jsapp/js/components/submissions/submissionDataTable.scss
+++ b/jsapp/js/components/submissions/submissionDataTable.scss
@@ -92,10 +92,25 @@ $submission-data-table-space: sizes.$x12;
 
   .audio-player:first-child {
     margin-right: 30px;
+    flex: 1;
   }
 
-  > *:first-child {
-    flex: 1;
+  video {
+    max-width: 100%;
+    object-fit: contain;
+  }
+}
+
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-audio,
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-image,
+.submission-data-table__column.submission-data-table__column--data.submission-data-table__column--type-video {
+  justify-content: flex-end;
+
+  img {
+    // We don't want the image to take too much space, as it's making the UI
+    // harder to follow. There are other ways to see full image, and
+    // `SubmissionDataTable` is more about the full picture.
+    max-height: 250px;
   }
 }
 
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 61a0ff02c2..748cc98a2a 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -3,7 +3,6 @@ import autoBind from 'react-autobind';
 import bem, {makeBem} from 'js/bem';
 import Button from 'js/components/common/button';
 import {
-  downloadUrl,
   formatTimeDate,
   formatDate,
 } from 'js/utils';
@@ -21,7 +20,7 @@ import {
   SCORE_ROW_TYPE,
   RANK_LEVEL_TYPE,
 } from 'js/constants';
-import type {MetaQuestionTypeName} from 'js/constants';
+import type {MetaQuestionTypeName, AnyRowTypeName} from 'js/constants';
 import './submissionDataTable.scss';
 import type {
   AssetResponse,
@@ -278,47 +277,52 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
     );
   }
 
-  renderAttachment(type: string, filename: string, name: string, xpath: string) {
+  renderAttachment(type: AnyRowTypeName, filename: string, name: string, xpath: string) {
     const attachment = getMediaAttachment(this.props.submissionData, filename, xpath);
     if (attachment && attachment instanceof Object) {
-      if (type === QUESTION_TYPES.audio.id) {
-        return (
-          <React.Fragment>
-            <AudioPlayer mediaURL={attachment.download_url} />
-
-            <Button
-              type='full'
-              size='s'
-              color='blue'
-              endIcon='arrow-up-right'
-              label={t('Open')}
-              onClick={this.openProcessing.bind(this, name)}
-            />
+      return (
+        <>
+          {type === QUESTION_TYPES.audio.id &&
+            <>
+              <AudioPlayer mediaURL={attachment.download_url} />
+
+              <Button
+                type='full'
+                size='s'
+                color='blue'
+                endIcon='arrow-up-right'
+                label={t('Open')}
+                onClick={this.openProcessing.bind(this, name)}
+              />
+            </>
+          }
 
-            <Button
-              type='frame'
-              size='s'
-              color='blue'
-              endIcon='download'
-              label={t('Download')}
-              onClick={downloadUrl.bind(this, attachment.download_url)}
-            />
+          {type === QUESTION_TYPES.image.id &&
+            <a href={attachment.download_url} target='_blank'>
+              <img src={attachment.download_medium_url}/>
+            </a>
+          }
 
-            <AttachmentActionsDropdown
-              asset={this.props.asset}
-              attachment={attachment}
+          {type === QUESTION_TYPES.video.id &&
+            <video
+              src={attachment.download_url}
+              controls
             />
-          </React.Fragment>
-        );
-      } else if (type === QUESTION_TYPES.image.id) {
-        return (
-          <a href={attachment.download_url} target='_blank'>
-            <img src={attachment.download_medium_url}/>
-          </a>
-        );
-      } else {
-        return (<a href={attachment.download_url} target='_blank'>{filename}</a>);
-      }
+          }
+
+          {type === QUESTION_TYPES.file.id &&
+            <a href={attachment.download_url} target='_blank'>
+              {filename}
+            </a>
+          }
+
+          <AttachmentActionsDropdown
+            asset={this.props.asset}
+            questionType={type}
+            attachmentUrl={attachment.download_url}
+          />
+        </>
+      );
     // In the case that an attachment is missing, don't crash the page
     } else {
       return attachment;
diff --git a/jsapp/js/components/submissions/submissionModal.tsx b/jsapp/js/components/submissions/submissionModal.tsx
index 27a8bbdad7..31994359a9 100644
--- a/jsapp/js/components/submissions/submissionModal.tsx
+++ b/jsapp/js/components/submissions/submissionModal.tsx
@@ -29,6 +29,10 @@ import type {
   SubmissionResponse,
   ValidationStatusResponse,
 } from 'js/dataInterface';
+import AttachmentActionsDropdown from './attachmentActionsDropdown.component';
+import AudioPlayer from 'js/components/common/audioPlayer';
+import {getBackgroundAudioQuestionName} from 'js/components/submissions/tableUtils';
+import {getMediaAttachment} from 'js/components/submissions/submissionUtils';
 import './submissionModal.scss';
 
 const DETAIL_NOT_FOUND = '{\"detail\":\"Not found.\"}';
@@ -39,7 +43,6 @@ interface SubmissionModalProps {
   ids: number[];
   isDuplicated: boolean;
   duplicatedSubmission: SubmissionResponse | null;
-  backgroundAudioUrl: string;
   tableInfo:
     | {
         resultsTotal: number;
@@ -387,12 +390,45 @@ class SubmissionModal extends React.Component<
     });
   }
 
-  hasBackgroundAudio() {
+  /**
+   * Whether the form has background audio enabled. This means that there is
+   * a possibility that the submission could have a background audio recording.
+   * If you need to know if recording exist, please use `getBackgroundAudioUrl`.
+   */
+  hasBackgroundAudioEnabled() {
     return this.props.asset?.content?.survey?.some(
       (question) => question.type === META_QUESTION_TYPES['background-audio']
     );
   }
 
+  getBackgroundAudioUrl() {
+    const backgroundAudioName = getBackgroundAudioQuestionName(
+      this.props.asset
+    );
+
+    if (
+      backgroundAudioName &&
+      this.state.submission &&
+      Object.keys(this.state.submission).includes(backgroundAudioName)
+    ) {
+      const response = this.state.submission[backgroundAudioName];
+      if (typeof response === 'string') {
+        const mediaAttachment = getMediaAttachment(
+          this.state.submission,
+          response,
+          META_QUESTION_TYPES['background-audio']
+        );
+        if (typeof mediaAttachment === 'string') {
+          return mediaAttachment;
+        } else {
+          return mediaAttachment.download_medium_url;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
   renderDropdowns() {
     if (!this.props.asset.deployment__active || !this.state.submission) {
       return null;
@@ -465,7 +501,7 @@ class SubmissionModal extends React.Component<
       return <CenteredMessage message={t('Unknown error')} />;
     }
 
-    const s = this.state.submission;
+    const bgAudioUrl = this.getBackgroundAudioUrl();
 
     // Use this modal if we just duplicated a submission, but not if we are
     // editing it
@@ -558,19 +594,6 @@ class SubmissionModal extends React.Component<
           )}
 
           <section className='submission-modal-section'>
-            {this.hasBackgroundAudio() && (
-              <bem.BackgroundAudioPlayer>
-                <bem.BackgroundAudioPlayer__label>
-                  {t('Background audio recording')}
-                </bem.BackgroundAudioPlayer__label>
-
-                <bem.BackgroundAudioPlayer__audio
-                  controls
-                  src={this.props?.backgroundAudioUrl}
-                />
-              </bem.BackgroundAudioPlayer>
-            )}
-
             {this.renderDropdowns()}
           </section>
 
@@ -718,6 +741,36 @@ class SubmissionModal extends React.Component<
             </div>
           </section>
 
+          {this.hasBackgroundAudioEnabled() && (
+            <bem.SubmissionDataTable>
+              <bem.SubmissionDataTable__row m={['columns', 'column-names']}>
+                <bem.SubmissionDataTable__column>
+                  {t('Background audio recording')}
+                </bem.SubmissionDataTable__column>
+              </bem.SubmissionDataTable__row>
+
+              <bem.SubmissionDataTable__row m={['columns', 'response', 'type-audio']}>
+                {bgAudioUrl &&
+                  <bem.SubmissionDataTable__column m={['data', 'type-audio']}>
+                    <AudioPlayer mediaURL={bgAudioUrl} />
+
+                    <AttachmentActionsDropdown
+                      asset={this.props.asset}
+                      questionType='background-audio'
+                      attachmentUrl={bgAudioUrl}
+                    />
+                  </bem.SubmissionDataTable__column>
+                }
+
+                {!bgAudioUrl &&
+                  <bem.SubmissionDataTable__column m='data'>
+                    {t('N/A')}
+                  </bem.SubmissionDataTable__column>
+                }
+              </bem.SubmissionDataTable__row>
+            </bem.SubmissionDataTable>
+          )}
+
           {this.state.submission && (
             <SubmissionDataTable
               asset={this.props.asset}
diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
index 1649cfb235..374c266723 100644
--- a/jsapp/js/components/submissions/table.tsx
+++ b/jsapp/js/components/submissions/table.tsx
@@ -580,7 +580,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
               tooltip={t('Open')}
               tooltipPosition='left'
               onClick={() => {
-                this.launchSubmissionModal(row, row.original._id);
+                this.launchSubmissionModal(row.original._id);
               }}
             />
 
@@ -1247,39 +1247,8 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
    * Opens submission modal
    * @param {object} row
    */
-  launchSubmissionModal(row: CellInfo, sid: string) {
-    if (row && row.original) {
-      const backgroundAudioName = getBackgroundAudioQuestionName(
-        this.props.asset
-      );
-      if (
-        backgroundAudioName &&
-        Object.keys(row.original).includes(backgroundAudioName)
-      ) {
-        const mediaAttachment = getMediaAttachment(
-          row.original,
-          row.original[backgroundAudioName],
-          META_QUESTION_TYPES['background-audio']
-        );
-
-        let backgroundAudioUrl;
-        if (typeof mediaAttachment === 'string') {
-          backgroundAudioUrl = mediaAttachment;
-        } else {
-          backgroundAudioUrl = mediaAttachment.download_medium_url;
-        }
-
-        this.submissionModalProcessing(
-          sid,
-          this.state.submissions,
-          false,
-          null,
-          backgroundAudioUrl
-        );
-      } else {
-        this.submissionModalProcessing(sid, this.state.submissions);
-      }
-    }
+  launchSubmissionModal(sid: string) {
+    this.submissionModalProcessing(sid, this.state.submissions);
   }
 
   /**
@@ -1290,7 +1259,6 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     submissions: SubmissionResponse[],
     isDuplicated: boolean = false,
     duplicatedSubmission: SubmissionResponse | null = null,
-    backgroundAudioUrl: string | null = null
   ) {
     const ids = submissions.map((item) => item._id);
 
@@ -1301,7 +1269,6 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
       ids: ids,
       isDuplicated: isDuplicated,
       duplicatedSubmission: duplicatedSubmission,
-      backgroundAudioUrl: backgroundAudioUrl,
       tableInfo: {
         currentPage: this.state.currentPage,
         pageSize: this.state.pageSize,
diff --git a/jsapp/js/components/submissions/table.types.ts b/jsapp/js/components/submissions/table.types.ts
index 9d7a9c8ef5..7ea2165a23 100644
--- a/jsapp/js/components/submissions/table.types.ts
+++ b/jsapp/js/components/submissions/table.types.ts
@@ -1,9 +1,4 @@
 import type {Column} from 'react-table';
-import type {
-  QuestionTypeName,
-  MetaQuestionTypeName,
-  MiscRowTypeName,
-} from 'js/constants';
 import type {
   SurveyRow,
   SubmissionResponse,

From fee53d394da1059f535abaff8e809d0c108d9e2a Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Thu, 4 Jul 2024 12:12:11 +0200
Subject: [PATCH 07/12] use better permissions checking in
 AttachmentActionsDropdown

and add some TODO comments
---
 .../attachmentActionsDropdown.component.tsx   | 37 ++++++++++++++++---
 .../submissions/submissionDataTable.tsx       |  1 +
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index dd160e20b1..a7370e0651 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -13,15 +13,16 @@ import bem from 'js/bem';
 import {QuestionTypeName, MetaQuestionTypeName} from 'js/constants';
 // Helpers:
 import * as utils from 'js/utils';
-import {userCan} from 'js/components/permissions/utils';
+import {userHasPermForSubmission} from 'js/components/permissions/utils';
 // Types:
 import type {AnyRowTypeName} from 'js/constants';
-import type {AssetResponse} from 'js/dataInterface';
+import type {AssetResponse, SubmissionResponse} from 'js/dataInterface';
 
 interface AttachmentActionsDropdownProps {
   asset: AssetResponse;
   questionType: AnyRowTypeName;
   attachmentUrl: string;
+  submissionData: SubmissionResponse;
 }
 
 /**
@@ -50,11 +51,23 @@ export default function AttachmentActionsDropdown(
   }
 
   function confirmDelete() {
-    console.log('confirmDelete');
-
     setIsDeletePending(true);
 
+    // TODO: replace the timeout with actual API call that will delete
+    // the attachment.
+    console.log('confirmDelete');
     setTimeout(() => {
+      // TODO: Upon finishing we need to have the submission data being updated
+      // both here in Submission Modal and in Data Table.
+      // Validation status changing in Submission Modal works like this:
+      // 1. Does the call (both Submission Modal and Data Table listens to same call)
+      // 2. Call finishes and returns a fresh SubmissionResponse
+      // 3. Upon finishing, Submission Modal updates the submission from props
+      // 4. Upon finishing, Data Table updates the submission in the list
+      // We would need to do something similar here.
+
+      // TODO: We would need to confirm from Back-end how would the deleted
+      // attachment be marked
       setIsDeletePending(false);
       toggleDeleteModal();
       utils.notify(t('##Attachment_type## deleted').replace('##Attachment_type##', attachmentTypeName));
@@ -65,7 +78,16 @@ export default function AttachmentActionsDropdown(
     utils.downloadUrl(props.attachmentUrl);
   }
 
-  const userCanDelete = userCan('delete_submissions', props.asset);
+  const userCanDelete = userHasPermForSubmission(
+    'delete_submissions',
+    props.asset,
+    props.submissionData
+  );
+  const userCanChange = userHasPermForSubmission(
+    'change_submissions',
+    props.asset,
+    props.submissionData
+  );
 
   const uniqueDropdownName = `attachment-actions-${utils.generateUuid()}`;
 
@@ -90,7 +112,10 @@ export default function AttachmentActionsDropdown(
               <label>{t('Download')}</label>
             </bem.KoboSelect__option>
 
-            <bem.KoboSelect__option onClick={toggleDeleteModal}>
+            <bem.KoboSelect__option
+              onClick={toggleDeleteModal}
+              disabled={!userCanChange}
+            >
               <Icon name='trash' />
               <label>{t('Delete')}</label>
             </bem.KoboSelect__option>
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 748cc98a2a..79289a4567 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -320,6 +320,7 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
             asset={this.props.asset}
             questionType={type}
             attachmentUrl={attachment.download_url}
+            submissionData={this.props.submissionData}
           />
         </>
       );

From 2365f3c827fcac90099a0ab7a51b817b8a3b4988 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Mon, 22 Jul 2024 16:12:18 +0200
Subject: [PATCH 08/12] post merge fixes

---
 jsapp/js/components/common/koboSelect.scss                   | 5 +++--
 .../submissions/attachmentActionsDropdown.component.tsx      | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/jsapp/js/components/common/koboSelect.scss b/jsapp/js/components/common/koboSelect.scss
index 95ae44e9b6..060f8ba1f3 100644
--- a/jsapp/js/components/common/koboSelect.scss
+++ b/jsapp/js/components/common/koboSelect.scss
@@ -91,10 +91,11 @@ $k-select-menu-padding: sizes.$x6;
   @include mixins.buttonReset;
   font-weight: 400;
   position: relative;
+  color: colors.$kobo-dark-blue;
 
   &:hover,
   &.k-select__option--selected {
-    color: colors.$kobo-gray-24;
+    color: colors.$kobo-dark-blue;
     background-color: colors.$kobo-gray-96;
   }
 
@@ -115,7 +116,6 @@ $k-select-menu-padding: sizes.$x6;
   justify-content: space-between;
   width: 100%;
   height: $k-select-option-height;
-  color: colors.$kobo-gray-40;
   padding: 0 #{sizes.$x16 - sizes.$x2};
   text-align: left;
 }
@@ -123,6 +123,7 @@ $k-select-menu-padding: sizes.$x6;
 .k-select__menu-message {
   font-style: italic;
   margin: 0;
+  color: colors.$kobo-gray-24;
 }
 
 .k-select__error {
diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index a7370e0651..e12fd57aaf 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -100,7 +100,7 @@ export default function AttachmentActionsDropdown(
         triggerContent={
           <Button
             type='bare'
-            color='storm'
+            color='dark-blue'
             size='s'
             startIcon='more'
           />

From a5eb006e69e28a17b923f9f8b3aad6b1caeeaf57 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Wed, 24 Jul 2024 15:33:51 +0200
Subject: [PATCH 09/12] handle is_deleted attachments properly (WIP)

---
 jsapp/js/components/bigModal/bigModal.es6     |   2 +
 .../formGallery/formGallery.component.scss    |  12 +-
 .../formGallery/formGallery.component.tsx     |  39 ++++--
 .../sidebarSubmissionMedia.module.scss        |  10 +-
 .../sidebar/sidebarSubmissionMedia.tsx        |  23 +--
 .../attachmentActionsDropdown.component.tsx   |  24 +++-
 jsapp/js/components/submissions/audioCell.tsx |  20 ++-
 .../deletedAttachment.component.tsx           |  17 +++
 .../submissions/deletedAttachment.module.scss |   7 +
 jsapp/js/components/submissions/mediaCell.tsx |   5 +
 .../submissions/submissionDataTable.tsx       |  27 +++-
 .../submissions/submissionModal.tsx           | 131 ++++++++++++------
 .../components/submissions/submissionUtils.ts |  24 ++++
 jsapp/js/components/submissions/table.scss    |   1 +
 jsapp/js/components/submissions/tableUtils.ts |   5 +
 .../submissions/textModalCell.module.scss     |   1 +
 jsapp/js/dataInterface.ts                     |   6 +
 jsapp/js/pageState.store.ts                   |   7 +-
 18 files changed, 278 insertions(+), 83 deletions(-)
 create mode 100644 jsapp/js/components/submissions/deletedAttachment.component.tsx
 create mode 100644 jsapp/js/components/submissions/deletedAttachment.module.scss

diff --git a/jsapp/js/components/bigModal/bigModal.es6 b/jsapp/js/components/bigModal/bigModal.es6
index d0f3530d8b..b235f9f0f7 100644
--- a/jsapp/js/components/bigModal/bigModal.es6
+++ b/jsapp/js/components/bigModal/bigModal.es6
@@ -72,6 +72,8 @@ function getSubmissionTitle(props) {
  *
  * There are also two other important methods: `hideModal` and `switchModal`.
  *
+ * The modal rendering is being handled by `app.jsx`.
+ *
  * @prop {object} params - to be passed to the custom modal component
  */
 class BigModal extends React.Component {
diff --git a/jsapp/js/components/formGallery/formGallery.component.scss b/jsapp/js/components/formGallery/formGallery.component.scss
index 6cec05427d..285c91ee75 100644
--- a/jsapp/js/components/formGallery/formGallery.component.scss
+++ b/jsapp/js/components/formGallery/formGallery.component.scss
@@ -1,6 +1,7 @@
 @use 'scss/colors';
 @use 'scss/sizes';
 @use 'scss/breakpoints';
+@use 'scss/mixins';
 
 .gallery {
   background-color: colors.$kobo-white;
@@ -48,12 +49,21 @@
   margin-right: sizes.$x5;
 }
 
-.gallery-grid {
+.gallery__grid {
   display: flex;
   flex-wrap: wrap;
   gap: sizes.$x3;
 }
 
+.gallery-grid-deleted-attachment {
+  @include mixins.centerRowFlex;
+  justify-content: center;
+  min-width: 100px;
+  min-height: 100px;
+  border-radius: 6px;
+  background-color: colors.$kobo-gray-92;
+}
+
 @include breakpoints.breakpoint(mediumAndUp) {
   .gallery__wrapper {
     margin: 20px 50px;
diff --git a/jsapp/js/components/formGallery/formGallery.component.tsx b/jsapp/js/components/formGallery/formGallery.component.tsx
index dbc2446fb5..215c53850f 100644
--- a/jsapp/js/components/formGallery/formGallery.component.tsx
+++ b/jsapp/js/components/formGallery/formGallery.component.tsx
@@ -16,6 +16,7 @@ import {
   selectImageAttachments,
   selectShowLoadMore,
 } from './formGallery.selectors';
+import DeletedAttachment from 'js/components/submissions/deletedAttachment.component';
 
 bem.Gallery = makeBem(null, 'gallery');
 bem.Gallery__wrapper = makeBem(bem.Gallery, 'wrapper');
@@ -160,20 +161,30 @@ export default function FormGallery(props: FormGalleryProps) {
           </bem.GalleryFiltersDates>
         </bem.GalleryFilters>
         <bem.GalleryGrid>
-          {attachments.map((attachment) => (
-            <a
-              key={attachment.id}
-              href={attachment.download_url}
-              target='_blank'
-            >
-              <img
-                src={attachment.download_url}
-                alt={attachment.filename}
-                width='150'
-                loading='lazy'
-              />
-            </a>
-          ))}
+          {attachments.map((attachment) => {
+            if (attachment.is_deleted) {
+              return (
+                <span className='gallery-grid-deleted-attachment'>
+                  <DeletedAttachment />
+                </span>
+              );
+            } else {
+              return (
+                <a
+                  key={attachment.id}
+                  href={attachment.download_url}
+                  target='_blank'
+                >
+                  <img
+                    src={attachment.download_url}
+                    alt={attachment.filename}
+                    width='150'
+                    loading='lazy'
+                  />
+                </a>
+              )
+            }
+          })}
         </bem.GalleryGrid>
         {showLoadMore && (
           <bem.GalleryFooter>
diff --git a/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.module.scss b/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.module.scss
index 4af36c8c18..ecfa6bcb28 100644
--- a/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.module.scss
+++ b/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.module.scss
@@ -2,15 +2,19 @@
 @use 'scss/sizes';
 
 .mediaWrapper {
+  border-radius: sizes.$x6;
+  background-color: colors.$kobo-white;
+
+  &.mediaWrapperDeleted {
+    padding: 14px;
+  }
+
   &.mediaWrapperAudio {
-    background-color: colors.$kobo-white;
-    border-radius: sizes.$x6;
     // right padding is for the audio player to appear centered
     padding: sizes.$x20 #{sizes.$x20 + sizes.$x12} sizes.$x14 sizes.$x20;
   }
 
   &.mediaWrapperVideo {
-    border-radius: sizes.$x6;
     overflow: hidden;
   }
 }
diff --git a/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.tsx b/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.tsx
index f270d484f1..a378537326 100644
--- a/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.tsx
+++ b/jsapp/js/components/processing/sidebar/sidebarSubmissionMedia.tsx
@@ -1,10 +1,12 @@
 import React, {useState} from 'react';
+import cx from 'classnames';
 import AudioPlayer from 'js/components/common/audioPlayer';
 import singleProcessingStore from 'js/components/processing/singleProcessingStore';
 import type {AssetContent} from 'js/dataInterface';
 import {QUESTION_TYPES, META_QUESTION_TYPES} from 'js/constants';
 import {getAttachmentForProcessing} from 'js/components/processing/transcript/transcript.utils';
 import styles from './sidebarSubmissionMedia.module.scss';
+import DeletedAttachment from 'js/components/submissions/deletedAttachment.component';
 
 interface SidebarSubmissionMediaProps {
   assetContent: AssetContent | undefined;
@@ -26,15 +28,23 @@ export default function SidebarSubmissionMedia(
     return null;
   }
 
+  if (attachment.is_deleted) {
+    return (
+      <section
+        className={cx([styles.mediaWrapper, styles.mediaWrapperDeleted])}
+        key='deleted'
+      >
+        <DeletedAttachment />
+      </section>
+    );
+  }
+
   switch (store.currentQuestionType) {
     case QUESTION_TYPES.audio.id:
     case META_QUESTION_TYPES['background-audio']:
       return (
         <section
-          className={`
-            ${styles.mediaWrapper}
-            ${styles.mediaWrapperAudio}
-          `}
+          className={cx([styles.mediaWrapper, styles.mediaWrapperAudio])}
           key='audio'
         >
           <AudioPlayer
@@ -46,10 +56,7 @@ export default function SidebarSubmissionMedia(
     case QUESTION_TYPES.video.id:
       return (
         <section
-          className={`
-            ${styles.mediaWrapper}
-            ${styles.mediaWrapperVideo}
-          `}
+          className={cx([styles.mediaWrapper, styles.mediaWrapperVideo])}
           key='video'
         >
           <video
diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index e12fd57aaf..c935d852f9 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -23,6 +23,12 @@ interface AttachmentActionsDropdownProps {
   questionType: AnyRowTypeName;
   attachmentUrl: string;
   submissionData: SubmissionResponse;
+  /**
+   * Being called after attachment was deleted succesfully. Is meant to be used
+   * by parent component to reflect this change in the data it holds, and
+   * possibly in other places in UI.
+   */
+  onDeleted: () => void;
 }
 
 /**
@@ -68,12 +74,24 @@ export default function AttachmentActionsDropdown(
 
       // TODO: We would need to confirm from Back-end how would the deleted
       // attachment be marked
-      setIsDeletePending(false);
-      toggleDeleteModal();
-      utils.notify(t('##Attachment_type## deleted').replace('##Attachment_type##', attachmentTypeName));
+      onAttachmentDeleted();
     }, 2000);
   }
 
+  /**
+   * Stops pending animation, closes confirmation prompt and displays
+   * a notification. Also let the parent know through prop callback.
+   */
+  function onAttachmentDeleted() {
+    setIsDeletePending(false);
+    toggleDeleteModal();
+    utils.notify(
+      t('##Attachment_type## deleted')
+      .replace('##Attachment_type##', attachmentTypeName)
+    );
+    props.onDeleted();
+  }
+
   function requestDownloadFile() {
     utils.downloadUrl(props.attachmentUrl);
   }
diff --git a/jsapp/js/components/submissions/audioCell.tsx b/jsapp/js/components/submissions/audioCell.tsx
index 466d15456b..6bc4721162 100644
--- a/jsapp/js/components/submissions/audioCell.tsx
+++ b/jsapp/js/components/submissions/audioCell.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import bem, {makeBem} from 'js/bem';
 import Button from 'js/components/common/button';
 import Icon from 'js/components/common/icon';
 import MiniAudioPlayer from 'js/components/common/miniAudioPlayer';
+import DeletedAttachment from './deletedAttachment.component';
 import {goToProcessing} from 'js/components/processing/routes.utils';
 import type {SubmissionAttachment} from 'js/dataInterface';
 import './audioCell.scss';
@@ -31,10 +31,20 @@ export default function AudioCell(props: AudioCellProps) {
         </span>
       )}
 
-      {typeof props.mediaAttachment === 'object' &&
-        props.mediaAttachment?.download_url && (
-          <MiniAudioPlayer mediaURL={props.mediaAttachment?.download_url} />
-        )}
+      {
+        typeof props.mediaAttachment === 'object' &&
+        props.mediaAttachment?.download_url &&
+        !props.mediaAttachment?.is_deleted &&
+      (
+        <MiniAudioPlayer mediaURL={props.mediaAttachment?.download_url} />
+      )}
+
+      {
+        typeof props.mediaAttachment === 'object' &&
+        props.mediaAttachment?.is_deleted &&
+      (
+        <DeletedAttachment />
+      )}
 
       <Button
         type='full'
diff --git a/jsapp/js/components/submissions/deletedAttachment.component.tsx b/jsapp/js/components/submissions/deletedAttachment.component.tsx
new file mode 100644
index 0000000000..55bb9c1fef
--- /dev/null
+++ b/jsapp/js/components/submissions/deletedAttachment.component.tsx
@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import styles from './deletedAttachment.module.scss';
+
+/**
+ * Use this in a place that you would normally render attachment things (player,
+ * image, etc.), but the attachment is deleted now. We have this silly component
+ * so the things are consistent.
+ */
+export default function DeletedAttachment() {
+  return (
+    // We include the `deletedAttachment` class name so it's easier to style
+    // this for parent component.
+    <div className={cx([styles.deletedAttachment, 'deletedAttachment'])}>
+      {t('Deleted')}
+    </div>
+  );
+}
diff --git a/jsapp/js/components/submissions/deletedAttachment.module.scss b/jsapp/js/components/submissions/deletedAttachment.module.scss
new file mode 100644
index 0000000000..02594e4172
--- /dev/null
+++ b/jsapp/js/components/submissions/deletedAttachment.module.scss
@@ -0,0 +1,7 @@
+@use 'scss/colors';
+
+.deletedAttachment {
+  font-size: inherit;
+  font-style: italic;
+  color: colors.$kobo-gray-55;
+}
diff --git a/jsapp/js/components/submissions/mediaCell.tsx b/jsapp/js/components/submissions/mediaCell.tsx
index 3fb505cd15..2a40192efd 100644
--- a/jsapp/js/components/submissions/mediaCell.tsx
+++ b/jsapp/js/components/submissions/mediaCell.tsx
@@ -13,6 +13,7 @@ import {truncateString} from 'js/utils';
 import type {SubmissionAttachment} from 'js/dataInterface';
 import './mediaCell.scss';
 import Icon from 'js/components/common/icon';
+import DeletedAttachment from './deletedAttachment.component';
 import type {IconName} from 'jsapp/fonts/k-icons';
 import pageState from 'js/pageState.store';
 
@@ -147,6 +148,10 @@ class MediaCell extends React.Component<MediaCellProps, {}> {
       );
     }
 
+    if (this.props.mediaAttachment.is_deleted) {
+      return (<DeletedAttachment />);
+    }
+
     return (
       <bem.MediaCell>
         <bem.MediaCellIconWrapper>
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 79289a4567..2fa8adc08a 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -25,10 +25,12 @@ import './submissionDataTable.scss';
 import type {
   AssetResponse,
   SubmissionResponse,
+  SubmissionAttachment,
 } from 'jsapp/js/dataInterface';
 import AudioPlayer from 'js/components/common/audioPlayer';
 import {goToProcessing} from 'js/components/processing/routes.utils';
 import AttachmentActionsDropdown from './attachmentActionsDropdown.component';
+import DeletedAttachment from './deletedAttachment.component';
 
 bem.SubmissionDataTable = makeBem(null, 'submission-data-table');
 bem.SubmissionDataTable__row = makeBem(bem.SubmissionDataTable, 'row');
@@ -41,6 +43,7 @@ interface SubmissionDataTableProps {
   submissionData: SubmissionResponse;
   translationIndex: number;
   showXMLNames?: boolean;
+  onAttachmentDeleted: (attachment: SubmissionAttachment) => void;
 }
 
 /**
@@ -259,16 +262,24 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
                 P<sub>{pointIndex + 1}</sub>
               </bem.SimpleTable__cell>
               <bem.SimpleTable__cell>
-                {pointArray[0]}
+                <bem.SubmissionDataTable__value>
+                  {pointArray[0]}
+                </bem.SubmissionDataTable__value>
               </bem.SimpleTable__cell>
               <bem.SimpleTable__cell>
-                {pointArray[1]}
+                <bem.SubmissionDataTable__value>
+                  {pointArray[1]}
+                </bem.SubmissionDataTable__value>
               </bem.SimpleTable__cell>
               <bem.SimpleTable__cell>
-                {pointArray[2]}
+                <bem.SubmissionDataTable__value>
+                  {pointArray[2]}
+                </bem.SubmissionDataTable__value>
               </bem.SimpleTable__cell>
               <bem.SimpleTable__cell>
-                {pointArray[3]}
+                <bem.SubmissionDataTable__value>
+                  {pointArray[3]}
+                </bem.SubmissionDataTable__value>
               </bem.SimpleTable__cell>
             </bem.SimpleTable__row>
           ))}
@@ -280,6 +291,10 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
   renderAttachment(type: AnyRowTypeName, filename: string, name: string, xpath: string) {
     const attachment = getMediaAttachment(this.props.submissionData, filename, xpath);
     if (attachment && attachment instanceof Object) {
+      if (attachment.is_deleted) {
+        return <DeletedAttachment />
+      }
+
       return (
         <>
           {type === QUESTION_TYPES.audio.id &&
@@ -321,6 +336,10 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
             questionType={type}
             attachmentUrl={attachment.download_url}
             submissionData={this.props.submissionData}
+            onDeleted={() => {
+              // We're letting know upstream that the attachment was deleted
+              this.props.onAttachmentDeleted(attachment);
+            }}
           />
         </>
       );
diff --git a/jsapp/js/components/submissions/submissionModal.tsx b/jsapp/js/components/submissions/submissionModal.tsx
index a588b179ad..a1f9109bdf 100644
--- a/jsapp/js/components/submissions/submissionModal.tsx
+++ b/jsapp/js/components/submissions/submissionModal.tsx
@@ -33,11 +33,16 @@ import type {
   AssetResponse,
   SubmissionResponse,
   ValidationStatusResponse,
+  SubmissionAttachment,
 } from 'js/dataInterface';
 import AttachmentActionsDropdown from './attachmentActionsDropdown.component';
 import AudioPlayer from 'js/components/common/audioPlayer';
 import {getBackgroundAudioQuestionName} from 'js/components/submissions/tableUtils';
-import {getMediaAttachment} from 'js/components/submissions/submissionUtils';
+import {
+  getMediaAttachment,
+  markAttachmentAsDeleted,
+} from 'js/components/submissions/submissionUtils';
+import DeletedAttachment from './deletedAttachment.component';
 import type {SubmissionPageName} from 'js/components/submissions/table.types';
 import './submissionModal.scss';
 
@@ -441,7 +446,8 @@ export default class SubmissionModal extends React.Component<
   /**
    * Whether the form has background audio enabled. This means that there is
    * a possibility that the submission could have a background audio recording.
-   * If you need to know if recording exist, please use `getBackgroundAudioUrl`.
+   * If you need to know if recording exist, i.e. if it was being submitted,
+   * please use `getBackgroundAudioAttachment`.
    */
   hasBackgroundAudioEnabled() {
     return this.props.asset?.content?.survey?.some(
@@ -449,10 +455,8 @@ export default class SubmissionModal extends React.Component<
     );
   }
 
-  getBackgroundAudioUrl() {
-    const backgroundAudioName = getBackgroundAudioQuestionName(
-      this.props.asset
-    );
+  getBackgroundAudioAttachment(): undefined | SubmissionAttachment {
+    const backgroundAudioName = getBackgroundAudioQuestionName(this.props.asset);
 
     if (
       backgroundAudioName &&
@@ -464,12 +468,12 @@ export default class SubmissionModal extends React.Component<
         const mediaAttachment = getMediaAttachment(
           this.state.submission,
           response,
-          META_QUESTION_TYPES['background-audio']
+          backgroundAudioName
         );
         if (typeof mediaAttachment === 'string') {
-          return mediaAttachment;
+          return undefined;
         } else {
-          return mediaAttachment.download_medium_url;
+          return mediaAttachment;
         }
       }
     }
@@ -477,6 +481,22 @@ export default class SubmissionModal extends React.Component<
     return undefined;
   }
 
+  handleDeletedAttachment(attachment: SubmissionAttachment) {
+    // Override the attachment object in memory to mark it as deleted (without
+    // making an API call for fresh submission data)
+    if (this.state.submission) {
+      this.setState({
+        submission: markAttachmentAsDeleted(this.state.submission, attachment)
+      });
+
+      // Prompt table to refresh submission list
+      actions.resources.refreshTableSubmissions();
+      // TODO: IDEA: instead of doing this for every deleted attachment, mark
+      // state here as something like `isRefreshTableUponClosingNeeded`, and add
+      // some `onBeforeClose` functionality to the `bigModal`…
+    }
+  }
+
   /**
    * Displays language and validation status dropdowns.
    */
@@ -754,6 +774,62 @@ export default class SubmissionModal extends React.Component<
     );
   }
 
+  renderBackgroundAudio() {
+    // For TypeScript
+    if (!this.state.submission) {
+      return null;
+    }
+
+    if (!this.hasBackgroundAudioEnabled()) {
+      return null;
+    }
+
+    // Get background audio
+    const bgAudio = this.getBackgroundAudioAttachment();
+
+    const isDeleted = Boolean(bgAudio?.is_deleted);
+
+    return (
+      <bem.SubmissionDataTable>
+        <bem.SubmissionDataTable__row m={['columns', 'column-names']}>
+          <bem.SubmissionDataTable__column>
+            {t('Background audio recording')}
+          </bem.SubmissionDataTable__column>
+        </bem.SubmissionDataTable__row>
+
+        <bem.SubmissionDataTable__row m={['columns', 'response', 'type-audio']}>
+          {bgAudio && !isDeleted &&
+            <bem.SubmissionDataTable__column m={['data', 'type-audio']}>
+              <AudioPlayer mediaURL={bgAudio.download_medium_url} />
+
+              <AttachmentActionsDropdown
+                asset={this.props.asset}
+                questionType={MetaQuestionTypeName['background-audio']}
+                attachmentUrl={bgAudio.download_medium_url}
+                submissionData={this.state.submission}
+                onDeleted={() => {
+                  this.handleDeletedAttachment(bgAudio);
+                }}
+              />
+            </bem.SubmissionDataTable__column>
+          }
+
+          {bgAudio && isDeleted &&
+            <bem.SubmissionDataTable__column m='data'>
+              <DeletedAttachment />
+            </bem.SubmissionDataTable__column>
+          }
+
+          {!bgAudio &&
+            <bem.SubmissionDataTable__column m='data'>
+              {t('N/A')}
+            </bem.SubmissionDataTable__column>
+          }
+        </bem.SubmissionDataTable__row>
+      </bem.SubmissionDataTable>
+    );
+  }
+
   render() {
     // Until we get all necessary data, we display a spinner
     if (this.state.isFetchingSubmissionData) {
@@ -768,9 +844,6 @@ export default class SubmissionModal extends React.Component<
       return <CenteredMessage message={t('Unknown error')} />;
     }
 
-    // Get background audio
-    const bgAudioUrl = this.getBackgroundAudioUrl();
-
     // Each of these `renderX()` functions handle the conditional rendering
     // by itself
     return (
@@ -783,44 +856,14 @@ export default class SubmissionModal extends React.Component<
 
         {this.renderSubmissionActions()}
 
-        {this.hasBackgroundAudioEnabled() && (
-          <bem.SubmissionDataTable>
-            <bem.SubmissionDataTable__row m={['columns', 'column-names']}>
-              <bem.SubmissionDataTable__column>
-                {t('Background audio recording')}
-              </bem.SubmissionDataTable__column>
-            </bem.SubmissionDataTable__row>
-
-            <bem.SubmissionDataTable__row m={['columns', 'response', 'type-audio']}>
-              {bgAudioUrl &&
-                <>
-                  <bem.SubmissionDataTable__column m={['data', 'type-audio']}>
-                    <AudioPlayer mediaURL={bgAudioUrl} />
-                  </bem.SubmissionDataTable__column>
-
-                  <AttachmentActionsDropdown
-                    asset={this.props.asset}
-                    questionType={MetaQuestionTypeName['background-audio']}
-                    attachmentUrl={bgAudioUrl}
-                    submissionData={this.state.submission}
-                  />
-                </>
-              }
-
-              {!bgAudioUrl &&
-                <bem.SubmissionDataTable__column m='data'>
-                  {t('N/A')}
-                </bem.SubmissionDataTable__column>
-              }
-            </bem.SubmissionDataTable__row>
-          </bem.SubmissionDataTable>
-        )}
+        {this.renderBackgroundAudio()}
 
         <SubmissionDataTable
           asset={this.props.asset}
           submissionData={this.state.submission}
           translationIndex={this.state.translationIndex}
           showXMLNames={this.state.showXMLNames}
+          onAttachmentDeleted={this.handleDeletedAttachment.bind(this)}
         />
       </>
     );
diff --git a/jsapp/js/components/submissions/submissionUtils.ts b/jsapp/js/components/submissions/submissionUtils.ts
index 016e6c549d..c529cd6f70 100644
--- a/jsapp/js/components/submissions/submissionUtils.ts
+++ b/jsapp/js/components/submissions/submissionUtils.ts
@@ -1,4 +1,5 @@
 import get from 'lodash.get';
+import clonedeep from 'lodash.clonedeep';
 import {
   getRowName,
   getTranslatedRowLabel,
@@ -771,3 +772,26 @@ export function getQuestionXPath(surveyRows: SurveyRow[], rowName: string) {
   const flatPaths = getSurveyFlatPaths(surveyRows, true);
   return flatPaths[rowName];
 }
+
+/**
+ * In given submission data, it finds provided attachment, sets its `is_deleted`
+ * flag to `true` and then returns the updated submission data.
+ */
+export function markAttachmentAsDeleted(
+  submissionData: SubmissionResponse,
+  targetAttachment: SubmissionAttachment
+): SubmissionResponse {
+  const data = clonedeep(submissionData);
+
+  data._attachments.forEach((attachment) => {
+    if (
+      attachment.id === targetAttachment.id &&
+      attachment.question_xpath === targetAttachment.question_xpath &&
+      attachment.filename === targetAttachment.filename
+    ) {
+      attachment.is_deleted = true;
+    }
+  })
+
+  return data;
+}
diff --git a/jsapp/js/components/submissions/table.scss b/jsapp/js/components/submissions/table.scss
index 50abd7dd4e..305f0677f3 100644
--- a/jsapp/js/components/submissions/table.scss
+++ b/jsapp/js/components/submissions/table.scss
@@ -237,6 +237,7 @@ $s-data-table-font: 13px;
   }
 
   // We want to target only the data cells
+  .rt-td .deletedAttachment:only-child,
   .rt-td .trimmed-text:only-child {
     height: 100%;
     align-content: center;
diff --git a/jsapp/js/components/submissions/tableUtils.ts b/jsapp/js/components/submissions/tableUtils.ts
index 6253e9cb56..bfdd5efbab 100644
--- a/jsapp/js/components/submissions/tableUtils.ts
+++ b/jsapp/js/components/submissions/tableUtils.ts
@@ -158,6 +158,11 @@ export function getColumnHXLTags(survey: SurveyRow[], key: string) {
   }
 }
 
+/**
+ * Finds what name is being used for background audio question. By default it's
+ * going to be "background-audio", but in case user changes it, we need to use
+ * this function :shrug:.
+ */
 export function getBackgroundAudioQuestionName(
   asset: AssetResponse
 ): string | null {
diff --git a/jsapp/js/components/submissions/textModalCell.module.scss b/jsapp/js/components/submissions/textModalCell.module.scss
index eecc268552..56f70fcd01 100644
--- a/jsapp/js/components/submissions/textModalCell.module.scss
+++ b/jsapp/js/components/submissions/textModalCell.module.scss
@@ -2,6 +2,7 @@
 
 .cell {
   @include mixins.centerRowFlex;
+  height: 100%; // To make it nicely aligned in the Data Table
 }
 
 .textContent {
diff --git a/jsapp/js/dataInterface.ts b/jsapp/js/dataInterface.ts
index 9b1d8ed9b5..0d6e1ebabe 100644
--- a/jsapp/js/dataInterface.ts
+++ b/jsapp/js/dataInterface.ts
@@ -206,6 +206,12 @@ export interface SubmissionResponse {
   };
   _version_: string;
   _xform_id_string: string;
+    /**
+   * If `background-audio` is enabled for this project, submission will have it
+   * here. The value is just the filename (with extension), and the whole
+   * attachment object is to be found in `_attachments` array.
+   */
+  'background-audio'?: string;
   deviceid?: string;
   end?: string;
   'formhub/uuid': string;
diff --git a/jsapp/js/pageState.store.ts b/jsapp/js/pageState.store.ts
index 6c3641ddb7..d112a4eb06 100644
--- a/jsapp/js/pageState.store.ts
+++ b/jsapp/js/pageState.store.ts
@@ -39,6 +39,10 @@ class PageStateStore extends Reflux.Store {
     this.trigger(_changes);
   }
 
+  /**
+   * Displays the modal, or updates the data in current modal (useful only if
+   * you're not changing modal types - see `switchModal` function below).
+   */
   showModal(params: PageStateModalParams) {
     this.setState({
       modal: params
@@ -57,7 +61,8 @@ class PageStateStore extends Reflux.Store {
    */
   switchModal(params: PageStateModalParams) {
     this.hideModal();
-    // HACK switch to setState callback after updating to React 16+
+    // HACK setState's second parameter callback doesn't exist in Reflux.Store,
+    // so we can't use it here
     window.setTimeout(() => {
       this.showModal(params);
     }, 0);

From f76eb20eb50ea2658c25ccff030fb4ed5b7d484b Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Wed, 24 Jul 2024 15:36:48 +0200
Subject: [PATCH 10/12] add is_deleted flag to interface

---
 jsapp/js/dataInterface.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/jsapp/js/dataInterface.ts b/jsapp/js/dataInterface.ts
index 0d6e1ebabe..0f46d427df 100644
--- a/jsapp/js/dataInterface.ts
+++ b/jsapp/js/dataInterface.ts
@@ -153,6 +153,12 @@ export interface SubmissionAttachment {
   instance: number;
   xform: number;
   id: number;
+  // TODO: this is to be added by Back end, so we need to verify it later
+  /**
+   * The flag makes it easier for UI to know that the attachment existed at some
+   * point, and was deleted - in contrast to never existing.
+   */
+  is_deleted?: boolean;
 }
 
 interface SubmissionSupplementalDetails {

From 3352d8b9868613c5eb697ee44a47acbe4eeba19e Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Wed, 24 Jul 2024 15:47:24 +0200
Subject: [PATCH 11/12] add missing imports

---
 jsapp/js/components/submissions/audioCell.tsx                   | 1 +
 jsapp/js/components/submissions/deletedAttachment.component.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/jsapp/js/components/submissions/audioCell.tsx b/jsapp/js/components/submissions/audioCell.tsx
index 6bc4721162..f17b318849 100644
--- a/jsapp/js/components/submissions/audioCell.tsx
+++ b/jsapp/js/components/submissions/audioCell.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import bem, {makeBem} from 'js/bem';
 import Button from 'js/components/common/button';
 import Icon from 'js/components/common/icon';
diff --git a/jsapp/js/components/submissions/deletedAttachment.component.tsx b/jsapp/js/components/submissions/deletedAttachment.component.tsx
index 55bb9c1fef..3b44f5a583 100644
--- a/jsapp/js/components/submissions/deletedAttachment.component.tsx
+++ b/jsapp/js/components/submissions/deletedAttachment.component.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import cx from 'classnames';
 import styles from './deletedAttachment.module.scss';
 

From 409ca97de6bb95abb1f78de2bd4d00ad181cfb58 Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <smutnyleszek@gmail.com>
Date: Tue, 30 Jul 2024 14:25:52 +0200
Subject: [PATCH 12/12] use proper permission

---
 .../submissions/attachmentActionsDropdown.component.tsx    | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
index c935d852f9..72b1a97017 100644
--- a/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
+++ b/jsapp/js/components/submissions/attachmentActionsDropdown.component.tsx
@@ -96,11 +96,6 @@ export default function AttachmentActionsDropdown(
     utils.downloadUrl(props.attachmentUrl);
   }
 
-  const userCanDelete = userHasPermForSubmission(
-    'delete_submissions',
-    props.asset,
-    props.submissionData
-  );
   const userCanChange = userHasPermForSubmission(
     'change_submissions',
     props.asset,
@@ -169,7 +164,7 @@ export default function AttachmentActionsDropdown(
             size='l'
             onClick={confirmDelete}
             label={t('Delete')}
-            isDisabled={!userCanDelete}
+            isDisabled={!userCanChange}
             isPending={isDeletePending}
           />
         </KoboModalFooter>