fix: add alert when export request fails [DHIS2-18667]

cypress/integration/EndpointParamChecks/ExportEvent.feature

@@ -84,3 +84,8 @@ Feature: The user should be able to export events
         Given the "inclusion" input is set to "CHILDREN"
         When the export form is submitted
         Then the download request is sent with the right parameters
+
+    Scenario: The export request fails
+        Given the event export request will fail
+        When the export form is submitted
+        Then a warning alert is shown with the error message

cypress/integration/EndpointParamChecks/ExportEvent/index.js

@@ -7,6 +7,7 @@ const orgUnitsRootApi =
     /\/organisationUnits\?filter=level:eq:1&fields=id,path,displayName,children::isNotEmpty&paging=false/
 const programsApi = /\/programs\?/
 const programStagesApi = /\/programs\/[a-zA-Z0-9]+/
+const eventsApi = /\/api\/tracker\/events/
 
 Before(() => {
     cy.server()
@@ -30,6 +31,11 @@ Before(() => {
         url: programStagesApi,
         fixture: 'programStages',
     }).as('programStagesXHR')
+
+    cy.intercept(eventsApi, {
+        statusCode: 200,
+        body: '{}',
+    }).as('downloadXHR')
 })
 
 Given('the user is on the event export page', () => {
@@ -72,6 +78,26 @@ When('the export form is submitted', () => {
         win.locationAssign = locationAssignStub
         cy.get('[data-test="input-export-submit"]').click()
     })
+    cy.wait('@downloadXHR')
+})
+
+Given('the event export request will fail', () => {
+    cy.intercept(eventsApi, {
+        statusCode: 409,
+        body: {
+            httpStatus: 'Conflict',
+            httpStatusCode: 409,
+            status: 'ERROR',
+            message: 'Could not find an id for CODE on Data Element.',
+        },
+    }).as('downloadXHR')
+})
+
+Then('a warning alert is shown with the error message', () => {
+    cy.get('[data-test="input-form-alerts"]').should(
+        'contain',
+        'Could not find an id for CODE on Data Element.'
+    )
 })
 
 Then('the download request is sent with the right parameters', () => {

src/pages/EventExport/EventExport.jsx

@@ -32,6 +32,7 @@ import {
     IdScheme,
     defaultIdSchemeOption,
     formatNoXmlOptions,
+    FormAlerts,
 } from '../../components/Inputs/index.js'
 import { jsDateToISO8601 } from '../../utils/helper.js'
 import { onExport, validate } from './form-helper.js'
@@ -88,8 +89,9 @@ const EventExport = () => {
                 validate={validate}
                 subscription={{
                     values: true,
+                    submitError: true,
                 }}
-                render={({ handleSubmit, form, values }) => (
+                render={({ handleSubmit, form, values, submitError }) => (
                     <form onSubmit={handleSubmit}>
                         <BasicOptions>
                             <OrgUnitTree multiSelect={false} />
@@ -121,6 +123,7 @@ const EventExport = () => {
                             label={i18n.t('Export events')}
                             disabled={!exportEnabled}
                         />
+                        <FormAlerts alerts={submitError} />
                     </form>
                 )}
             />

src/pages/EventExport/form-helper.js

@@ -3,9 +3,24 @@ import {
     DATE_AFTER_VALIDATOR,
 } from '../../components/DatePicker/DatePickerField.jsx'
 import { ALL_VALUE } from '../../hooks/useProgramStages.js'
-import { locationAssign, pathToId } from '../../utils/helper.js'
+import { FORM_ERROR } from '../../utils/final-form.js'
+import {
+    genericErrorMessage,
+    locationAssign,
+    pathToId,
+} from '../../utils/helper.js'
+
+const exportErrorAlert = (message) => ({
+    [FORM_ERROR]: [
+        {
+            id: `event-export-error-${Date.now()}`,
+            warning: true,
+            message,
+        },
+    ],
+})
 
-const onExport = (baseUrl, setExportEnabled) => (values) => {
+const onExport = (baseUrl, setExportEnabled) => async (values) => {
     setExportEnabled(false)
 
     const {
@@ -44,11 +59,32 @@ const onExport = (baseUrl, setExportEnabled) => (values) => {
         .filter((s) => s != '')
         .join('&')
     const url = `${apiBaseUrl}${endpoint}.${endpointExtension}?${downloadUrlParams}`
-    locationAssign(url)
-    setExportEnabled(true)
 
-    // log for debugging purposes
-    console.log('event-export:', { url, params: downloadUrlParams })
+    try {
+        const response = await fetch(url, { credentials: 'include' })
+
+        if (!response.ok) {
+            let message = genericErrorMessage
+            try {
+                const body = await response.json()
+                message = body.message || message
+            } catch (e) {
+                // response body wasn't JSON, fall back to the generic message
+                console.error('event-export: failed to parse error response', e)
+            }
+            return exportErrorAlert(message)
+        }
+
+        locationAssign(url)
+
+        // log for debugging purposes
+        console.log('event-export:', { url, params: downloadUrlParams })
+    } catch (e) {
+        console.error('event-export: request failed', e)
+        return exportErrorAlert(genericErrorMessage)
+    } finally {
+        setExportEnabled(true)
+    }
 }
 
 const validate = (values) => ({