fix(app-platform): upgrade platform tools to use vite and react 18

README.md

@@ -1,3 +1,5 @@
+![React 18](https://img.shields.io/badge/react-18-blue)
+
 # Data exchange app
 
 [Live demo of the master branch](https://dhis2-data-exchange.netlify.app/#/)

package.json

@@ -22,29 +22,28 @@
     },
     "devDependencies": {
         "@badeball/cypress-cucumber-preprocessor": "^16.0.0",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@cypress/webpack-preprocessor": "^5.17.0",
-        "@dhis2/cli-app-scripts": "^11.5.0",
-        "@dhis2/cli-style": "^10.4.3",
+        "@dhis2/cli-app-scripts": "^12.3.0",
+        "@dhis2/cli-style": "^10.7.6",
         "@dhis2/cypress-commands": "^10.0.6",
         "@dhis2/cypress-plugins": "^10.0.1",
         "@faker-js/faker": "^8.4.1",
-        "@testing-library/jest-dom": "^6.4.5",
-        "@testing-library/react": "12.1.5",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.2.0",
+        "@testing-library/user-event": "^14.6.1",
         "cypress": "^13.10.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.6",
         "start-server-and-test": "^1.14.0"
     },
     "dependencies": {
         "@dhis2/analytics": "^26.7.9",
-        "@dhis2/app-runtime": "^3.10.4",
-        "@dhis2/ui": "^9.14.0",
+        "@dhis2/app-runtime": "^3.13.1",
+        "@dhis2/ui": "^10.1.11",
         "classnames": "^2.5.1",
         "react-router-dom": "^6.4.1",
         "use-query-params": "^2.1.1"
     },
-    "resolutions": {
-        "@dhis2/ui": "^9.14.0"
-    }
+    "resolutions": {}
 }

src/app.js → src/app.jsx

@@ -11,7 +11,7 @@ import {
 } from './context/index.js'
 import { DataPage, EditPage, EditItem, AddItem } from './pages/index.js'
 
-const App = ({ router: Router }) => (
+const App = ({ router: Router = HashRouter }) => (
     <>
         <CssVariables spacers colors theme />
         <Router>
@@ -45,10 +45,6 @@ const App = ({ router: Router }) => (
     </>
 )
 
-App.defaultProps = {
-    router: HashRouter,
-}
-
 App.propTypes = {
     router: PropTypes.elementType,
 }

src/components/common/button-with-tooltip/index.js

@@ -1 +1 @@
-export { ButtonWithTooltip } from './button-with-tooltip.js'
+export { ButtonWithTooltip } from './button-with-tooltip.jsx'

src/components/common/loader/index.js

@@ -1 +1 @@
-export { Loader } from './loader.js'
+export { Loader } from './loader.jsx'

src/components/common/warning/index.js

@@ -1 +1 @@
-export { Warning } from './warning.js'
+export { Warning } from './warning.jsx'

src/components/edit/exchange-update/advanced-options.js → src/components/edit/exchange-update/advanced-options.jsx

@@ -14,7 +14,7 @@ import {
     TogglableSubsection,
 } from '../shared/index.js'
 import styles from './advanced-options.module.css'
-import { EnableExternalEditWarning } from './external-edit-warning.js'
+import { EnableExternalEditWarning } from './external-edit-warning.jsx'
 
 const Label = ({ label, prefix, type }) => {
     if (!prefix) {

src/components/edit/exchange-update/exchange-form-contents.js → src/components/edit/exchange-update/exchange-form-contents.jsx

@@ -16,10 +16,10 @@ import {
     AUTHENTICATION_TYPES,
     EXCHANGE_TYPES,
 } from '../shared/index.js'
-import { AdvancedOptions } from './advanced-options.js'
+import { AdvancedOptions } from './advanced-options.jsx'
 import styles from './exchange-form-contents.module.css'
-import { EnableExternalEditWarning } from './external-edit-warning.js'
-import { RequestsOverview } from './requests-overview.js'
+import { EnableExternalEditWarning } from './external-edit-warning.jsx'
+import { RequestsOverview } from './requests-overview.jsx'
 
 const { Field, useField } = ReactFinalForm
 

src/components/edit/exchange-update/exchange-form.js → src/components/edit/exchange-update/exchange-form.jsx

@@ -12,7 +12,7 @@ import {
 import { Loader } from '../../common/index.js'
 import { RequestForm } from '../request-update/index.js'
 import { EditItemFooter, EditTitle } from '../shared/index.js'
-import { ExchangeFormContents } from './exchange-form-contents.js'
+import { ExchangeFormContents } from './exchange-form-contents.jsx'
 import styles from './exchange-form.module.css'
 import { getInitialValuesFromExchange } from './getExchangeValues.js'
 import { useRequests } from './useRequests.js'

src/components/edit/exchange-update/index.js

@@ -1,2 +1,2 @@
-export { ExchangeForm } from './exchange-form.js'
+export { ExchangeForm } from './exchange-form.jsx'
 export { useFetchExchange } from './useFetchExchange.js'

src/components/edit/overview/__tests__/items-list.test.js → src/components/edit/overview/__tests__/items-list.test.jsx

@@ -7,7 +7,7 @@ import { QueryParamProvider } from 'use-query-params'
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'
 import { useAppContext } from '../../../../context/app-context/use-app-context.js'
 import { testDataExchange } from '../../../../utils/builders.js'
-import { EditItemsList } from '../items-list.js'
+import { EditItemsList } from '../items-list.jsx'
 
 const mockLastAnalyticsTableSuccess = '2024-07-07T12:00:00.000'
 const mockContextPath = 'debug.dhis2.org/dev'

src/components/edit/overview/index.js

@@ -1,2 +1,2 @@
-export { EditHomeTopBar } from './edit-home-top-bar.js'
-export { EditItemsList } from './items-list.js'
+export { EditHomeTopBar } from './edit-home-top-bar.jsx'
+export { EditItemsList } from './items-list.jsx'

src/components/edit/overview/items-list.js → src/components/edit/overview/items-list.jsx

@@ -19,7 +19,7 @@ import React, { useCallback, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { useAppContext, useUserContext } from '../../../context/index.js'
 import { getNaturalCapitalization } from '../../../utils/helpers.js'
-import { DeleteConfirmation } from './delete-confirmation.js'
+import { DeleteConfirmation } from './delete-confirmation.jsx'
 import styles from './items-list.module.css'
 
 export const getCreatedDateString = ({

src/components/edit/request-update/filterSelect/dimension-filter-row.js → src/components/edit/request-update/filterSelect/dimension-filter-row.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './dimension-filter-row.module.css'
-import DimensionItemsSelect from './dimension-items-select.js'
-import DimensionSelect from './dimension-select.js'
-import RemoveFilter from './remove-filter.js'
+import DimensionItemsSelect from './dimension-items-select.jsx'
+import DimensionSelect from './dimension-select.jsx'
+import RemoveFilter from './remove-filter.jsx'
 
 const DimensionFilterRow = ({
     dimension,

src/components/edit/request-update/filterSelect/dimension-items-select.js → src/components/edit/request-update/filterSelect/dimension-items-select.jsx

@@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import styles from './dimension-items-select.module.css'
-import SelectField from './select-field.js'
+import SelectField from './select-field.jsx'
 
 // Load dimension items
 const DIMENSION_ITEMS_QUERY = {

src/components/edit/request-update/filterSelect/filter-select.js → src/components/edit/request-update/filterSelect/filter-select.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
-import DimensionFilterRow from './dimension-filter-row.js'
+import DimensionFilterRow from './dimension-filter-row.jsx'
 import styles from './filter-select.module.css'
 
 export const FilterSelect = ({ input }) => {

src/components/edit/request-update/index.js

@@ -1,2 +1,2 @@
-export { RequestForm } from './request-form.js'
+export { RequestForm } from './request-form.jsx'
 export { requestsReducer } from './requests-reducer.js'

src/components/edit/request-update/request-form-contents.js → src/components/edit/request-update/request-form-contents.jsx

@@ -8,13 +8,13 @@ import {
 import React from 'react'
 import { useFeatureToggleContext } from '../../../context/index.js'
 import { Subsection, SchemeSelector } from '../shared/index.js'
-import { DataItemSelect } from './data-item-select.js'
-import { FilterSelect } from './filterSelect/filter-select.js'
-import { OrgUnitSelector } from './org-unit-select.js'
-import { PeriodSelector } from './period-select.js'
+import { DataItemSelect } from './data-item-select.jsx'
+import { FilterSelect } from './filterSelect/filter-select.jsx'
+import { OrgUnitSelector } from './org-unit-select.jsx'
+import { PeriodSelector } from './period-select.jsx'
 import styles from './request-form-contents.module.css'
 import { useValidators } from './useValidators.js'
-import { VisualizationSelect } from './visualization-select.js'
+import { VisualizationSelect } from './visualization-select.jsx'
 
 const { Field, useField } = ReactFinalForm
 

src/components/edit/request-update/request-form.js → src/components/edit/request-update/request-form.jsx

@@ -9,7 +9,7 @@ import {
     getInitialValuesFromRequest,
     getRequestValuesFromForm,
 } from './getRequestValues.js'
-import { RequestFormContents } from './request-form-contents.js'
+import { RequestFormContents } from './request-form-contents.jsx'
 import styles from './request-form.module.css'
 
 const { Form } = ReactFinalForm

src/components/edit/shared/index.js

@@ -1,8 +1,8 @@
 export * from './constants.js'
-export { AccessWarning } from './access-warning.js'
-export { SelectorValidationError } from './selector-validation-error.js'
-export { EditItemFooter, EditRequestFooter } from './update-footer.js'
-export { Subsection, TogglableSubsection } from './form-subsection.js'
-export { SchemeSelector } from './scheme-selector.js'
-export { OpenFileDialog } from './openVisualization/OpenFileDialog.js'
-export { EditTitle } from './edit-title.js'
+export { AccessWarning } from './access-warning.jsx'
+export { SelectorValidationError } from './selector-validation-error.jsx'
+export { EditItemFooter, EditRequestFooter } from './update-footer.jsx'
+export { Subsection, TogglableSubsection } from './form-subsection.jsx'
+export { SchemeSelector } from './scheme-selector.jsx'
+export { OpenFileDialog } from './openVisualization/OpenFileDialog.jsx'
+export { EditTitle } from './edit-title.jsx'

src/components/edit/shared/openVisualization/FileList.js → src/components/edit/shared/openVisualization/FileList.jsx

@@ -1,8 +1,8 @@
 import { DataTableRow, DataTableCell, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { DateField } from './DateField.js'
-import { VisTypeIcon } from './VTI.js'
+import { DateField } from './DateField.jsx'
+import { VisTypeIcon } from './VTI.jsx'
 
 export const FileList = ({ data, onSelect, showVisTypeColumn }) => (
     <>

src/components/edit/shared/openVisualization/OpenFileDialog.js → src/components/edit/shared/openVisualization/OpenFileDialog.jsx

@@ -31,13 +31,13 @@ import {
     CREATED_BY_ALL,
     CREATED_BY_ALL_BUT_CURRENT_USER,
     CREATED_BY_CURRENT_USER,
-} from './CreatedByFilter.js'
-import { FileList } from './FileList.js'
-import { NameFilter } from './NameFilter.js'
+} from './CreatedByFilter.jsx'
+import { FileList } from './FileList.jsx'
+import { NameFilter } from './NameFilter.jsx'
 import { styles } from './OpenFileDialog.styles.js'
-import { PaginationControls } from './PaginationControls.js'
+import { PaginationControls } from './PaginationControls.jsx'
 import { getTranslatedString, AOTypeMap } from './utils.js'
-import { VisTypeFilter } from './VisTypeFilter.js'
+import { VisTypeFilter } from './VisTypeFilter.jsx'
 
 const getQuery = (type) => ({
     files: {

src/components/edit/shared/openVisualization/VisTypeFilter.js → src/components/edit/shared/openVisualization/VisTypeFilter.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { getDisplayNameByVisType, visTypeIcons } from './visTypes.js'
 /* eslint-disable-next-line import/order */
-import { CustomSelectOption } from './CustomSelectOption.js'
-import { VisTypeIcon } from './VTI.js'
+import { CustomSelectOption } from './CustomSelectOption.jsx'
+import { VisTypeIcon } from './VTI.jsx'
 
 export const VisTypeFilter = ({ visTypes, selected, onChange }) => (
     <SingleSelect

src/components/view/bottom-bar/index.js

@@ -1 +1 @@
-export * from './bottom-bar.js'
+export * from './bottom-bar.jsx'

src/components/view/data-layout/index.js

@@ -1 +1 @@
-export { Layout } from './layout.js'
+export { Layout } from './layout.jsx'

src/components/view/data-workspace/data-workspace.js → src/components/view/data-workspace/data-workspace.jsx

@@ -7,10 +7,10 @@ import {
     useRequestIndex,
 } from '../../../use-context-selection/index.js'
 import { Warning } from '../../common/index.js'
-import { EntryScreen } from './entry-screen.js'
+import { EntryScreen } from './entry-screen.jsx'
 import { RequestsDisplay } from './requests-display/index.js'
 import { RequestsNavigation } from './requests-navigation/index.js'
-import { TitleBar } from './title-bar/title-bar.js'
+import { TitleBar } from './title-bar/title-bar.jsx'
 
 const DataWorkspace = () => {
     const { readableExchangeOptions } = useAppContext()

src/components/view/data-workspace/index.js

@@ -1 +1 @@
-export * from './data-workspace.js'
+export * from './data-workspace.jsx'

src/components/view/data-workspace/requests-display/index.js

@@ -1 +1 @@
-export * from './requests-display.js'
+export * from './requests-display.jsx'

src/components/view/data-workspace/requests-display/requests-display.js → src/components/view/data-workspace/requests-display/requests-display.jsx

@@ -25,7 +25,7 @@ export const convertToObjectFormat = ({
     const objectFormat = {}
 
     if (Array.isArray(data?.rows)) {
-        for (const row of data?.rows) {
+        for (const row of data.rows) {
             const ouId = row[ou_index]
             const deId = row[dx_index]
             const peId = row[pe_index]

src/components/view/data-workspace/requests-display/requests-display.test.js

@@ -2,7 +2,7 @@ import {
     convertToObjectFormat,
     ensureNestedObjectExists,
     formatData,
-} from './requests-display.js'
+} from './requests-display.jsx'
 
 describe('convertToObjectFormat', () => {
     it('returns data in expected format', () => {

src/components/view/data-workspace/requests-navigation/index.js

@@ -1 +1 @@
-export * from './requests-navigation.js'
+export * from './requests-navigation.jsx'

src/components/view/data-workspace/table/index.js

@@ -1 +1 @@
-export * from './table.js'
+export * from './table.jsx'

src/components/view/data-workspace/title-bar/index.js

@@ -1 +1 @@
-export * from './title-bar.js'
+export * from './title-bar.jsx'

src/components/view/submit-modal/index.js

@@ -1 +1 @@
-export { SubmitModal } from './submit-modal.js'
+export { SubmitModal } from './submit-modal.jsx'

src/components/view/submit-modal/submit-modal.js → src/components/view/submit-modal/submit-modal.jsx

@@ -16,7 +16,7 @@ import React, { useEffect, useState } from 'react'
 import { useExchangeContext, useUserContext } from '../../../context/index.js'
 import { Warning } from '../../common/index.js'
 import styles from './submit-modal.module.css'
-import { SuccessContent } from './success-content.js'
+import { SuccessContent } from './success-content.jsx'
 import { useAggregateDataExchangeMutation } from './use-aggregate-data-exchange-mutation.js'
 
 const SkipAuditWarning = ({ exchangeSkipAudit, internalExchange }) => {

src/components/view/submit-modal/submit-modal.test.js → src/components/view/submit-modal/submit-modal.test.jsx

@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker'
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 import { useExchangeContext, useUserContext } from '../../../context/index.js'
-import { SubmitModal, getReportText } from './submit-modal.js'
+import { SubmitModal, getReportText } from './submit-modal.jsx'
 
 jest.mock('../../../context/index.js', () => ({
     ...jest.requireActual('../../../context/index.js'),

src/components/view/submit-modal/success-content.js → src/components/view/submit-modal/success-content.jsx

@@ -15,7 +15,7 @@ import {
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useExchangeContext } from '../../../context/index.js'
-import { ConflictsDetailsTable } from './conflicts-details-table.js'
+import { ConflictsDetailsTable } from './conflicts-details-table.jsx'
 import styles from './success-content.module.css'
 
 const importTypeConfig = {

src/components/view/top-bar/exchange-select/index.js

@@ -1 +1 @@
-export * from './exchange-select.js'
+export * from './exchange-select.jsx'

src/components/view/top-bar/index.js

@@ -1 +1 @@
-export * from './top-bar.js'
+export * from './top-bar.jsx'

src/components/view/top-bar/menu-select/index.js

@@ -1 +1 @@
-export * from './menu-select.js'
+export * from './menu-select.jsx'

src/context/app-context/index.js

@@ -1,3 +1,3 @@
 export { AppContext } from './app-context.js'
-export { AppProvider } from './app-provider.js'
+export { AppProvider } from './app-provider.jsx'
 export { useAppContext } from './use-app-context.js'

src/context/attribute-context/index.js

@@ -1,3 +1,3 @@
 export { AttributeContext } from './attribute-context.js'
-export { AttributeProvider } from './attribute-provider.js'
+export { AttributeProvider } from './attribute-provider.jsx'
 export { useAttributeContext } from './use-attribute-context.js'

src/context/exchange-context/index.js

@@ -1,3 +1,3 @@
 export { ExchangeContext } from './exchange-context.js'
-export { ExchangeProvider } from './exchange-provider.js'
+export { ExchangeProvider } from './exchange-provider.jsx'
 export { useExchangeContext } from './use-exchange-context.js'

src/context/feature-toggle-context/index.js

@@ -1,3 +1,3 @@
 export { FeatureToggleContext } from './feature-toggle-context.js'
-export { FeatureToggleProvider } from './feature-toggle-provider.js'
+export { FeatureToggleProvider } from './feature-toggle-provider.jsx'
 export { useFeatureToggleContext } from './use-feature-toggle-context.js'

src/context/user-context/index.js

@@ -1,3 +1,3 @@
 export { UserContext } from './user-context.js'
-export { UserProvider } from './user-provider.js'
+export { UserProvider } from './user-provider.jsx'
 export { useUserContext } from './use-user-context.js'

src/index.js

@@ -1,4 +1,4 @@
-import { AppWrapper } from './app.js'
+import { AppWrapper } from './app.jsx'
 import './locales/index.js'
 
 export default AppWrapper