fix(2494): Incidents: Add the ability to edit incident details

src/__tests__/incidents/hooks/useResolvedIncident.test.tsx → src/__tests__/incidents/hooks/useUpdateIncident.test.tsx

@@ -1,13 +1,12 @@
 import subDays from 'date-fns/subDays'
 
-import useResolveIncident from '../../../incidents/hooks/useResolveIncident'
+import useUpdateIncident from '../../../incidents/hooks/useUpdateIncident'
 import IncidentRepository from '../../../shared/db/IncidentRepository'
 import Incident from '../../../shared/model/Incident'
 import executeMutation from '../../test-utils/use-mutation.util'
 
 describe('useResolvedIncident', () => {
   it('should mark incident as resolved and save', async () => {
-    const expectedStatus = 'resolved'
     const expectedResolvedDate = new Date(Date.now())
     Date.now = jest.fn().mockReturnValue(expectedResolvedDate)
 
@@ -17,7 +16,7 @@ describe('useResolvedIncident', () => {
       date: subDays(new Date(), 3).toISOString(),
       department: 'some department',
       description: 'some description',
-      status: 'reported',
+      status: 'resolved',
       code: 'I-some-code',
       reportedOn: subDays(new Date(), 2).toISOString(),
       reportedBy: 'some user',
@@ -26,11 +25,10 @@ describe('useResolvedIncident', () => {
     const expectedIncident = {
       ...givenIncident,
       resolvedOn: expectedResolvedDate.toISOString(),
-      status: expectedStatus,
     } as Incident
     jest.spyOn(IncidentRepository, 'save').mockResolvedValue(expectedIncident)
 
-    const actualData = await executeMutation(() => useResolveIncident(), givenIncident)
+    const actualData = await executeMutation(() => useUpdateIncident(), givenIncident)
 
     expect(IncidentRepository.save).toHaveBeenCalledTimes(1)
     expect(IncidentRepository.save).toBeCalledWith(expectedIncident)

src/__tests__/incidents/list/ViewIncidentsTable.test.tsx

@@ -46,15 +46,16 @@ describe('View Incidents Table', () => {
   it('should display a table of incidents', async () => {
     setup({ status: IncidentFilter.all })
     expect(await screen.findByRole('table')).toBeInTheDocument()
-
     const headers = screen.getAllByRole('columnheader')
     const cells = screen.getAllByRole('cell')
+
     expect(headers[0]).toHaveTextContent(/incidents.reports.code/i)
     expect(headers[1]).toHaveTextContent(/incidents.reports.dateOfIncident/i)
     expect(headers[2]).toHaveTextContent(/incidents.reports.reportedBy/i)
     expect(headers[3]).toHaveTextContent(/incidents.reports.reportedOn/i)
     expect(headers[4]).toHaveTextContent(/incidents.reports.status/i)
-    expect(headers[5]).toHaveTextContent(/actions.label/i)
+    expect(headers[5]).toHaveTextContent(/incidents.reports.patient/i)
+    expect(headers[6]).toHaveTextContent(/actions.label/i)
     expect(cells[0]).toHaveTextContent(expectedIncident.code)
     expect(cells[1]).toHaveTextContent(
       format(new Date(expectedIncident.date), 'yyyy-MM-dd hh:mm a'),
@@ -64,6 +65,7 @@ describe('View Incidents Table', () => {
       format(new Date(expectedIncident.reportedOn), 'yyyy-MM-dd hh:mm a'),
     )
     expect(cells[4]).toHaveTextContent(expectedIncident.status)
+
     expect(screen.getByRole('button', { name: /actions.view/i })).toBeInTheDocument()
   })
 

src/__tests__/incidents/view/ViewIncidentDetails.test.tsx

@@ -105,14 +105,14 @@ describe('View Incident Details', () => {
         ).toBeInTheDocument()
       })
     })
-    describe('form elements should not be editable', () => {
+    describe('form elements should be editable', () => {
       it('should render the department input with label and display value', async () => {
         setup(expectedIncident, [Permissions.ViewIncident])
         expect(await screen.findByText(/incidents\.reports\.department/i)).toBeInTheDocument()
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.department/i }),
-        ).not.toBeEnabled()
+        ).toBeEnabled()
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.department/i }),
@@ -125,7 +125,7 @@ describe('View Incident Details', () => {
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.category$/i }),
-        ).not.toBeEnabled()
+        ).toBeEnabled()
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.category$/i }),
@@ -137,7 +137,7 @@ describe('View Incident Details', () => {
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.categoryItem$/i }),
-        ).not.toBeEnabled()
+        ).toBeEnabled()
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.categoryItem$/i }),
@@ -155,13 +155,14 @@ describe('View Incident Details', () => {
           screen.getByRole('textbox', {
             name: /incidents\.reports\.description/i,
           }),
-        ).not.toBeEnabled()
+        ).toBeEnabled()
 
         expect(
           await screen.findByRole('textbox', { name: /incidents\.reports\.description/i }),
         ).toHaveDisplayValue('some description')
       })
     })
+
     describe('on resolve', () => {
       it('should mark the status as resolved and fill in the resolved date with the current time', async () => {
         const { history } = setup(expectedIncident, [

src/incidents/hooks/useResolveIncident.tsx → src/incidents/hooks/useUpdateIncident.tsx

@@ -3,15 +3,23 @@ import { queryCache, useMutation } from 'react-query'
 import IncidentRepository from '../../shared/db/IncidentRepository'
 import Incident from '../../shared/model/Incident'
 
+function getResolvedOn(incident: Incident) {
+  return incident.status === 'resolved'
+    ? {
+        resolvedOn: new Date(Date.now()).toISOString(),
+      }
+    : {}
+}
+
 function resolveIncident(incident: Incident): Promise<Incident> {
+  const resolvedOn = getResolvedOn(incident)
   return IncidentRepository.saveOrUpdate({
     ...incident,
-    resolvedOn: new Date(Date.now()).toISOString(),
-    status: 'resolved',
+    ...resolvedOn,
   })
 }
 
-export default function useResolveIncident() {
+export default function useUpdateIncident() {
   return useMutation(resolveIncident, {
     onSuccess: async (data: Incident) => {
       queryCache.setQueryData(['incident', data.id], data)

src/incidents/list/ViewIncidentsTable.tsx

@@ -39,7 +39,6 @@ function ViewIncidentsTable(props: Props) {
   const { t } = useTranslator()
   const history = useHistory()
   const { data, isLoading } = useIncidents(searchRequest)
-
   if (data === undefined || isLoading) {
     return <Spinner type="DotLoader" loading />
   }
@@ -113,6 +112,11 @@ function ViewIncidentsTable(props: Props) {
             label: t('incidents.reports.status'),
             key: 'status',
           },
+          {
+            label: t('incidents.reports.patient'),
+            key: 'patient',
+            formatter: (row) => row.patientFullName,
+          },
         ]}
         actionsHeaderText={t('actions.label')}
         actions={[

src/incidents/report/ReportIncident.tsx

@@ -36,6 +36,7 @@ const ReportIncident = () => {
     categoryItem: '',
     description: '',
     patient: '',
+    reportedTo: '',
   })
 
   const [error, setError] = useState<IncidentError | undefined>(undefined)
@@ -68,17 +69,13 @@ const ReportIncident = () => {
   }
 
   const onPatientChange = (patient: Patient) => {
-    if (patient) {
-      setIncident((prevIncident) => ({
-        ...prevIncident,
-        patient: patient.id,
-      }))
-    } else {
-      setIncident((prevIncident) => ({
-        ...prevIncident,
-        patient: '',
-      }))
-    }
+    const { id = '', fullName = '' } = patient || {}
+
+    setIncident((prevIncident) => ({
+      ...prevIncident,
+      patient: id,
+      patientFullName: fullName,
+    }))
   }
 
   return (
@@ -150,6 +147,15 @@ const ReportIncident = () => {
         </Column>
       </Row>
       <Row>
+        <Column md={6}>
+          <TextInputWithLabelFormGroup
+            label={t('incidents.reports.reportedTo')}
+            name="reportedTo"
+            value={incident.reportedTo}
+            isEditable
+            onChange={(event) => onTextInputChange(event.currentTarget.value, 'reportedTo')}
+          />
+        </Column>
         <Column md={6}>
           <div className="form-group patient-typeahead">
             <Label htmlFor="patientTypeahead" text={t('incidents.reports.patient')} />