refactor: upgrade to React 18

.gitignore

@@ -5,3 +5,4 @@ src/locales
 build
 coverage/
 cypress.env.json
+.yalc/

d2.config.js

@@ -7,7 +7,7 @@ const config = {
     coreApp: true,
     minDHIS2Version: '2.41',
     entryPoints: {
-        app: './src/App.js',
+        app: './src/App.jsx',
     },
 }
 

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-01T15:50:32.586Z\n"
-"PO-Revision-Date: 2024-03-01T15:50:32.586Z\n"
+"POT-Creation-Date: 2024-09-10T18:11:52.828Z\n"
+"PO-Revision-Date: 2024-09-10T18:11:52.829Z\n"
 
 msgid "Something went wrong when loading the current user!"
 msgstr "Something went wrong when loading the current user!"
@@ -688,6 +688,15 @@ msgstr "Updated"
 msgid "Total"
 msgstr "Total"
 
+msgid "Reports"
+msgstr "Reports"
+
+msgid "Error Code"
+msgstr "Error Code"
+
+msgid "Tracker Type"
+msgstr "Tracker Type"
+
 msgid "Indexes"
 msgstr "Indexes"
 
@@ -745,8 +754,8 @@ msgstr "Org unit geometry import"
 msgid "Metadata import"
 msgstr "Metadata import"
 
-msgid "TEI import"
-msgstr "TEI import"
+msgid "Tracked entity import"
+msgstr "Tracked entity import"
 
 msgid "Data export"
 msgstr "Data export"
@@ -760,8 +769,8 @@ msgstr "Metadata dependency export"
 msgid "Metadata export"
 msgstr "Metadata export"
 
-msgid "TEI export"
-msgstr "TEI export"
+msgid "Tracked entity export"
+msgstr "Tracked entity export"
 
 msgid "Job overview"
 msgstr "Job overview"
@@ -880,6 +889,16 @@ msgstr "Earth Engine data set"
 msgid "Select earth engine data set"
 msgstr "Select earth engine data set"
 
+msgid "{{count}} org units"
+msgid_plural "{{count}} org units"
+msgstr[0] "{{count}} org unit"
+msgstr[1] "{{count}} org units"
+
+msgid "{{count}} levels"
+msgid_plural "{{count}} levels"
+msgstr[0] "{{count}} level"
+msgstr[1] "{{count}} levels"
+
 msgid "Selected: {{commaSeparatedListOfOrganisationUnits}}"
 msgstr "Selected: {{commaSeparatedListOfOrganisationUnits}}"
 
@@ -1117,24 +1136,24 @@ msgstr ""
 "geometry."
 
 msgid ""
-"Export event data for programs, stages and tracked entities to JSON, CSV, "
-"or DXF2 format."
+"Export event data for programs, stages and tracked entities to JSON or CSV "
+"format."
 msgstr ""
-"Export event data for programs, stages and tracked entities to JSON, CSV, "
-"or DXF2 format."
+"Export event data for programs, stages and tracked entities to JSON or CSV "
+"format."
 
 msgid "Export events"
 msgstr "Export events"
 
 msgid ""
-"Import event data for programs, stages and tracked entities to JSON, CSV, "
-"or DXF2 format."
+"Import event data for programs, stages and tracked entities from JSON or "
+"CSV format."
 msgstr ""
-"Import event data for programs, stages and tracked entities to JSON, CSV, "
-"or DXF2 format."
+"Import event data for programs, stages and tracked entities from JSON or "
+"CSV format."
 
-msgid "Supported file types: JSON, CSV, and DXF2."
-msgstr "Supported file types: JSON, CSV, and DXF2."
+msgid "Supported file types: JSON and CSV."
+msgstr "Supported file types: JSON and CSV."
 
 msgid "Organisation unit geometry import"
 msgstr "Organisation unit geometry import"
@@ -1165,8 +1184,8 @@ msgstr "Export metadata dependencies"
 msgid "Export metadata"
 msgstr "Export metadata"
 
-msgid "Export tracked entity instances"
-msgstr "Export tracked entity instances"
+msgid "Export tracked entities"
+msgstr "Export tracked entities"
 
 msgid "Import data"
 msgstr "Import data"
@@ -1183,8 +1202,8 @@ msgstr "Import GeoJSON"
 msgid "Import metadata"
 msgstr "Import metadata"
 
-msgid "Import tracked entity instances"
-msgstr "Import tracked entity instances"
+msgid "Import tracked entities"
+msgstr "Import tracked entities"
 
 msgid "An overview of all import jobs started this session."
 msgstr "An overview of all import jobs started this session."
@@ -1210,17 +1229,14 @@ msgstr ""
 "Import metadata, such as data elements and organisation units, using JSON "
 "or CSV format."
 
-msgid "Supported file types: JSON and CSV."
-msgstr "Supported file types: JSON and CSV."
-
 msgid "A class key must be selected"
 msgstr "A class key must be selected"
 
-msgid "Tracked entity instances export"
-msgstr "Tracked entity instances export"
+msgid "Tracked entities export"
+msgstr "Tracked entities export"
 
-msgid "Export tracked entity instances in JSON, CSV, or DXF2 format."
-msgstr "Export tracked entity instances in JSON, CSV, or DXF2 format."
+msgid "Export tracked entities in JSON or CSV format."
+msgstr "Export tracked entities in JSON or CSV format."
 
 msgid "Program to export from"
 msgstr "Program to export from"
@@ -1231,24 +1247,21 @@ msgstr "Enrollment date range"
 msgid "At least one of the 'last updated' date fields must be specified"
 msgstr "At least one of the 'last updated' date fields must be specified"
 
-msgid "Tracked entity instances import"
-msgstr "Tracked entity instances import"
+msgid "Tracked entities import"
+msgstr "Tracked entities import"
 
-msgid "Import tracked entity instances using JSON or DXF2 format."
-msgstr "Import tracked entity instances using JSON or DXF2 format."
+msgid "Import tracked entities using JSON format."
+msgstr "Import tracked entities using JSON format."
 
-msgid "Supported file types: JSON and DXF2."
-msgstr "Supported file types: JSON and DXF2."
+msgid "Supported file types: JSON."
+msgstr "Supported file types: JSON."
 
 msgid "Job started."
 msgstr "Job started."
 
 msgid "An unknown error occurred. Please try again later"
 msgstr "An unknown error occurred. Please try again later"
 
-msgid "Loading exported data"
-msgstr "Loading exported data"
-
 msgid "Data"
 msgstr "Data"
 
@@ -1264,5 +1277,5 @@ msgstr "GML"
 msgid "Metadata"
 msgstr "Metadata"
 
-msgid "TEI"
-msgstr "TEI"
+msgid "Tracked entity"
+msgstr "Tracked entity"

package.json

@@ -23,13 +23,13 @@
         "postinstall": "patch-package"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.0.0",
+        "@dhis2/cli-app-scripts": "file:.yalc/@dhis2/cli-app-scripts",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/cli-utils-cypress": "^7.0.0",
         "@dhis2/cypress-commands": "^7.0.0",
         "@dhis2/cypress-plugins": "^7.0.0",
-        "@testing-library/jest-dom": "^5.8.0",
-        "@testing-library/react": "^9.4.0",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^16.0.1",
         "patch-package": "^6.4.7",
         "query-string": "^6.12.1"
     },
@@ -39,9 +39,12 @@
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/maps-gl": "^3.5.1",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui": "^8.7.2",
+        "@dhis2/ui": "^9.11.4",
+        "@testing-library/react-hooks": "^8.0.1",
         "classnames": "^2.2.6",
         "final-form-arrays": "^3.0.2",
+        "identity-obj-proxy": "^3.0.0",
+        "jest-extended": "^4.0.2",
         "react-final-form-arrays": "^3.1.3",
         "react-router-dom": "^5.2.0"
     }

src/components/DatePicker/DatePicker.test.js → src/components/DatePicker/DatePicker.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'test-utils'
-import '@testing-library/jest-dom/extend-expect.js'
 
 import { DatePicker } from '../index.js'
 

src/components/DatePicker/__snapshots__/DatePicker.test.js.snap → src/components/DatePicker/__snapshots__/DatePicker.test.jsx.snap

@@ -26,11 +26,11 @@ exports[`matches snapshot 1`] = `
         data-test="dhis2-uicore-box"
       >
         <div
-          class="jsx-3353877153 jsx-3173911271 input"
+          class="jsx-3353877153 jsx-31445346 input"
           data-test="dhis2-uicore-input"
         >
           <input
-            class="jsx-3353877153 jsx-3173911271 "
+            class="jsx-3353877153 jsx-31445346 "
             id="file"
             name="file"
             type="date"

src/components/FormAlerts/FormAlerts.test.js → src/components/FormAlerts/FormAlerts.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'test-utils'
-import '@testing-library/jest-dom/extend-expect.js'
 
 import { FormAlerts } from '../index.js'
 

src/components/FormField/FormField.test.js → src/components/FormField/FormField.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'test-utils'
-import '@testing-library/jest-dom/extend-expect.js'
 
 import { FormField } from '../index.js'
 

src/components/Geometry/index.js

@@ -1,3 +1,3 @@
-export { GeometryFormat } from './GeometryFormat.js'
-export { GeometryPropertyMatch } from './GeometryPropertyMatch.js'
-export { GeometryAttributePicker } from './GeometryAttributePicker.js'
+export { GeometryFormat } from './GeometryFormat.jsx'
+export { GeometryPropertyMatch } from './GeometryPropertyMatch.jsx'
+export { GeometryAttributePicker } from './GeometryAttributePicker.jsx'

src/components/Icon/Icon.test.js → src/components/Icon/Icon.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'test-utils'
-import '@testing-library/jest-dom/extend-expect.js'
 
 import { MetadataImportIcon } from '../index.js'
 

src/components/ImportButtonStrip/ImportButtonStrip.test.js → src/components/ImportButtonStrip/ImportButtonStrip.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'test-utils'
-import '@testing-library/jest-dom/extend-expect.js'
 
 import { ImportButtonStrip } from '../index.js'
 

src/components/ImportButtonStrip/__snapshots__/ImportButtonStrip.test.js.snap → src/components/ImportButtonStrip/__snapshots__/ImportButtonStrip.test.jsx.snap

@@ -7,25 +7,25 @@ exports[`matches snapshot 1`] = `
     data-test="import-strip"
   >
     <div
-      class="jsx-1994200789 start"
+      class="jsx-34417531 start"
       data-test="import-strip-button-strip"
     >
       <div
-        class="jsx-1994200789 box"
+        class="jsx-34417531 box"
       >
         <button
-          class="jsx-441677069 dryRun primary"
+          class="jsx-1796590446 dryRun primary"
           data-test="import-strip-dry-run-btn"
           type="submit"
         >
           Start dry run
         </button>
       </div>
       <div
-        class="jsx-1994200789 box"
+        class="jsx-34417531 box"
       >
         <button
-          class="jsx-441677069 secondary"
+          class="jsx-1796590446 secondary"
           data-test="import-strip-import-btn"
           type="submit"
         >

src/components/Inputs/EndDate.js → src/components/Inputs/EndDate.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { hasValue, composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { DATE_VALIDATOR } from '../DatePicker/DatePickerField.js'
+import { DATE_VALIDATOR } from '../DatePicker/DatePickerField.jsx'
 import { DatePickerField } from '../index.js'
 
 const NAME = 'endDate'

src/components/Inputs/FileUpload.js → src/components/Inputs/FileUpload.jsx

@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { SINGLE_FILE_VALIDATOR } from '../FileUpload/FileUpload.js'
+import { SINGLE_FILE_VALIDATOR } from '../FileUpload/FileUpload.jsx'
 import { FileUpload as FileUploadGeneric } from '../index.js'
 
 const NAME = 'files'

src/components/Inputs/LastUpdatedDuration.js → src/components/Inputs/LastUpdatedDuration.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { hasValue, composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { DURATION_VALIDATOR } from '../Duration/DurationField.js'
+import { DURATION_VALIDATOR } from '../Duration/DurationField.jsx'
 import { DurationField } from '../index.js'
 
 const NAME = 'updatedWithin'

src/components/Inputs/LastUpdatedEndDate.js → src/components/Inputs/LastUpdatedEndDate.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.js'
+import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.jsx'
 import { DatePickerField } from '../index.js'
 
 const NAME = 'updatedBefore'

src/components/Inputs/LastUpdatedStartDate.js → src/components/Inputs/LastUpdatedStartDate.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.js'
+import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.jsx'
 import { DatePickerField } from '../index.js'
 
 const NAME = 'updatedAfter'

src/components/Inputs/OrgUnitTree.js → src/components/Inputs/OrgUnitTree.jsx

@@ -6,7 +6,7 @@ import { OrgUnitTreeField, FormField } from '../index.js'
 import {
     SINGLE_ORG_VALIDATOR,
     SINGLE_EXACT_ORG_VALIDATOR,
-} from '../OrgUnitTree/OrgUnitTreeField.js'
+} from '../OrgUnitTree/OrgUnitTreeField.jsx'
 
 const NAME = 'selectedOrgUnits'
 const LABEL = i18n.t('Organisation unit(s) to export data from')

src/components/Inputs/ProgramEndDate.js → src/components/Inputs/ProgramEndDate.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.js'
+import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.jsx'
 import { DatePickerField } from '../index.js'
 
 const NAME = 'enrollmentEnrolledBefore'

src/components/Inputs/ProgramStages.js → src/components/Inputs/ProgramStages.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { hasValue, composeValidators } from '@dhis2/ui'
 import React from 'react'
 import { ProgramStages as ProgramStagesGeneric } from '../index.js'
-import { SINGLE_EXACT_PROGRAMSTAGE_VALIDATOR } from '../ProgramStages/ProgramStages.js'
+import { SINGLE_EXACT_PROGRAMSTAGE_VALIDATOR } from '../ProgramStages/ProgramStages.jsx'
 
 const VALIDATOR = composeValidators(
     hasValue,

src/components/Inputs/ProgramStartDate.js → src/components/Inputs/ProgramStartDate.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { composeValidators } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.js'
+import { OPTIONAL_DATE_VALIDATOR } from '../DatePicker/DatePickerField.jsx'
 import { DatePickerField } from '../index.js'
 
 const NAME = 'enrollmentEnrolledAfter'