add delete

ui-participant/src/hub/documents/DocumentLibrary.test.tsx

@@ -61,7 +61,7 @@ describe('DocumentLibrary', () => {
     expect(screen.getByText('{documentDownloadButton}')).toBeInTheDocument()
   })
 
-  it('renders no associated tasks message', async () => {
+  it('does not render any associated tasks', async () => {
     asMockedFn(Api.listParticipantFiles).mockResolvedValue([
       mockParticipantFile('file1.pdf', [])
     ])
@@ -72,7 +72,7 @@ describe('DocumentLibrary', () => {
       expect(screen.getByText('file1.pdf')).toBeInTheDocument()
     })
 
-    expect(screen.getByText('not associated with any tasks')).toBeInTheDocument()
+    expect(screen.queryByText('shared in response to')).not.toBeInTheDocument()
   })
 
   it('renders associated tasks', async () => {

ui-participant/src/hub/documents/DocumentLibrary.tsx

@@ -12,10 +12,12 @@ import React, { useEffect, useState } from 'react'
 import { useActiveUser } from 'providers/ActiveUserProvider'
 import Api from 'api/api'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDownload, faFile, faFileImage, faFileLines, faFilePdf } from '@fortawesome/free-solid-svg-icons'
+import { faFile, faFileImage, faFileLines, faFilePdf } from '@fortawesome/free-solid-svg-icons'
 import { usePortalEnv } from 'providers/PortalProvider'
 import { Link } from 'react-router-dom'
 import { getTaskPath } from '../task/taskUtils'
+import Modal from 'react-bootstrap/Modal'
+import ThemedModal from 'components/ThemedModal'
 
 export default function DocumentLibrary() {
   const { i18n } = useI18n()
@@ -106,16 +108,11 @@ const DocumentsList = ({ studyName, studyEnvParams, enrollee }: {
               </td>
               <td className="align-middle">
                 <div className={'d-flex justify-content-end'}>
-                  <button className="btn btn-outline-primary" onClick={async () => {
-                    const response = await Api.downloadParticipantFile({
-                      studyEnvParams, enrolleeShortcode: enrollee.shortcode, fileName: participantFile.fileName
-                    })
-                    saveBlobAsDownload(await response.blob(), participantFile.fileName)
-                  }}>
-                    <span className="d-flex align-items-center">
-                      <FontAwesomeIcon className="pe-1" icon={faDownload}/>{i18n('documentDownloadButton')}
-                    </span>
-                  </button>
+                  <FileOptionsDropdown
+                    studyEnvParams={studyEnvParams}
+                    loadDocuments={loadDocuments}
+                    participantFile={participantFile}
+                    enrollee={enrollee}/>
                 </div>
               </td>
             </tr>
@@ -138,7 +135,7 @@ const surveyResponseIdsToTaskNames = (
   }).filter((task): task is ParticipantTask => task !== undefined)
 
   if (associatedTasks.length === 0) {
-    return <div className={'mt-2 fst-italic text-muted'}>not associated with any tasks</div>
+    return null
   }
 
   return (
@@ -170,3 +167,72 @@ const fileTypeToIcon = (fileType: string) => {
       return <FontAwesomeIcon className="me-2" icon={faFile}/>
   }
 }
+
+const FileOptionsDropdown = ({ studyEnvParams, participantFile, enrollee, loadDocuments }: {
+  studyEnvParams: StudyEnvParams, participantFile: ParticipantFile, enrollee: Enrollee, loadDocuments: () => void
+}) => {
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const { i18n } = useI18n()
+  return (<>
+    <li className="nav-item dropdown d-flex flex-column">
+      <button className="btn btn-outline-primary dropdown-toggle" id="fileOptionsDropdown"
+        data-bs-toggle="dropdown" aria-expanded="false">
+        Options
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="fileOptionsDropdown">
+        <li>
+          <a role={'button'} className="dropdown-item"
+            onClick={() => setShowConfirmDelete(true)}
+          >
+            Delete
+          </a>
+        </li>
+        <li>
+          <a className="dropdown-item" role={'button'} onClick={async () => {
+            const response = await Api.downloadParticipantFile({
+              studyEnvParams, enrolleeShortcode: enrollee.shortcode, fileName: participantFile.fileName
+            })
+            saveBlobAsDownload(await response.blob(), participantFile.fileName)
+          }}>
+            {i18n('documentDownloadButton')}
+          </a>
+        </li>
+      </ul>
+    </li>
+    {showConfirmDelete && <ThemedModal show={true}
+      onHide={() => setShowConfirmDelete(false)} size={'lg'} animation={true}>
+      <Modal.Header>
+        <Modal.Title>
+          <h2 className="fw-bold pb-0 mb-0">Are you sure?</h2>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {participantFile.associatedAnswers.length === 0 ?
+          <p className="m-0">Are you sure you want to delete this document? This cannot be undone.</p> :
+          <p className="m-0">This document is currently shared in response to at least one survey. Please remove it
+            from the survey response(s) before deleting it.</p>
+        }
+      </Modal.Body>
+      <Modal.Footer>
+        <div className={'d-flex w-100'}>
+          <button className={'btn btn-primary m-2'}
+            disabled={participantFile.associatedAnswers.length > 0}
+            onClick={async () => {
+              await Api.deleteParticipantFile({
+                studyEnvParams, enrolleeShortcode: enrollee.shortcode, fileName: participantFile.fileName
+              })
+              loadDocuments()
+              setShowConfirmDelete(false)
+            }}>
+            Delete
+          </button>
+          <button className={'btn btn-outline-secondary m-2'}
+            onClick={() => setShowConfirmDelete(false)}>
+            {i18n('cancel')}
+          </button>
+        </div>
+      </Modal.Footer>
+    </ThemedModal> }
+  </>
+  )
+}