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 entry app
 
 [Live demo development branch](https://dhis2-data-entry.netlify.app/#/)

d2.config.js

@@ -15,7 +15,7 @@ const config = {
         },
     },
     entryPoints: {
-        app: './src/app/app-wrapper.js',
+        app: './src/app/app-wrapper.jsx',
     },
     direction: 'auto',
 }

package.json

@@ -31,26 +31,26 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@badeball/cypress-cucumber-preprocessor": "^16.0.0",
         "@cypress/webpack-preprocessor": "^5.17.0",
-        "@dhis2/cli-app-scripts": "^11.7.2",
+        "@dhis2/cli-app-scripts": "^12.0.0-alpha.19",
         "@dhis2/cli-style": "^10.7.4",
         "@dhis2/cypress-commands": "^10.0.1",
         "@dhis2/cypress-plugins": "^10.0.1",
         "@dhis2/d2-i18n": "1.1.3",
-        "@testing-library/jest-dom": "5.16.5",
-        "@testing-library/react": "12.1.5",
-        "@testing-library/react-hooks": "7.0.2",
-        "@testing-library/user-event": "13.5.0",
+        "@reportportal/agent-js-cypress": "^5.1.3",
+        "@reportportal/agent-js-jest": "^5.0.6",
+        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
         "cypress": "^12.8.1",
-        "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.7",
         "eslint-plugin-cypress": "2.12.1",
         "fake-indexeddb": "4.0.1",
+        "identity-obj-proxy": "^3.0.0",
         "jest-extended": "^4.0.2",
         "start-server-and-test": "1.15.4"
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.10.2",
-        "@dhis2/multi-calendar-dates": "^1.3.1",
+        "@dhis2/multi-calendar-dates": "^1.3.2",
         "@dhis2/ui": "^9.11.8",
         "@dhis2/ui-forms": "7.16.3",
         "@tanstack/react-query": "4.24.10",
@@ -66,6 +66,7 @@
         "html-react-parser": "1.4.14",
         "idb-keyval": "6.2.0",
         "lodash.throttle": "4.1.1",
+        "package.json": "^2.0.1",
         "prop-types": "15.8.1",
         "query-string": "7.1.3",
         "re-reselect": "4.0.1",
@@ -81,9 +82,6 @@
         "node": ">=14.0.0"
     },
     "resolutions": {
-        "@dhis2/multi-calendar-dates": "^1.3.2",
-        "@dhis2/ui": "^9.2.0",
-        "@dhis2/app-runtime": "^3.10.2",
-        "@dhis2/d2-i18n": "1.1.3"
+        "@dhis2/app-runtime": "^3.10.2"
     }
 }

src/app/app-wrapper.js → src/app/app-wrapper.jsx

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { HashRouter, Route } from 'react-router-dom'
 import { QueryParamProvider } from 'use-query-params'
-import PrintAreaProvider from '../data-workspace/print-area/print-area-provider.js'
+import PrintAreaProvider from '../data-workspace/print-area/print-area-provider.jsx'
 import { RightHandPanelProvider } from '../right-hand-panel/index.js'
 import { LockedProvider } from '../shared/index.js'
 import '../locales/index.js'
-import App from './app.js'
-import { ConfiguredQueryClientProvider } from './query-client/configured-query-client-provider.js'
+import App from './app.jsx'
+import { ConfiguredQueryClientProvider } from './query-client/configured-query-client-provider.jsx'
 import useQueryClient from './query-client/use-query-client.js'
 
 const enableRQDevtools = process.env.REACT_APP_ENABLE_RQ_DEVTOOLS === 'true'
@@ -31,7 +31,7 @@ const enableRQDevtools = process.env.REACT_APP_ENABLE_RQ_DEVTOOLS === 'true'
 export function OuterComponents({
     children,
     // This way we can use a different router in tests when needed
-    router: Router,
+    router: Router = HashRouter,
     queryClient: customQueryClient,
 }) {
     const queryClient = useQueryClient()
@@ -60,10 +60,6 @@ export function OuterComponents({
     )
 }
 
-OuterComponents.defaultProps = {
-    router: HashRouter,
-}
-
 OuterComponents.propTypes = {
     children: PropTypes.any.isRequired,
     queryClient: PropTypes.instanceOf(QueryClient).isRequired,

src/app/app.js → src/app/app.jsx

@@ -14,7 +14,7 @@ import {
     validationResultsSidebarId,
 } from '../shared/index.js'
 import { Layout } from './layout/index.js'
-import LoadApp from './load-app.js'
+import LoadApp from './load-app.jsx'
 
 const idSidebarMap = {
     [contextualHelpSidebarId]: ContextualHelpSidebar,

src/app/app.test.js → src/app/app.test.jsx

@@ -1,7 +1,7 @@
 import { QueryClient } from '@tanstack/react-query'
 import React from 'react'
 import { render } from '../test-utils/index.js'
-import App from './app.js'
+import App from './app.jsx'
 
 describe('<App />', () => {
     it('renders without crashing', () => {

src/app/auth/auth-wall.test.js → src/app/auth/auth-wall.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '../../test-utils/index.js'
-import AuthWall from './auth-wall.js'
+import AuthWall from './auth-wall.jsx'
 
 describe('<AuthWall />', () => {
     it('shows an error message for unauthorized users', () => {

src/app/auth/index.js

@@ -1 +1 @@
-export { default as AuthWall } from './auth-wall.js'
+export { default as AuthWall } from './auth-wall.jsx'

src/app/layout/index.js

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

src/app/layout/layout.test.js → src/app/layout/layout.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '../../test-utils/index.js'
-import Layout from './layout.js'
+import Layout from './layout.jsx'
 
 describe('<Layout />', () => {
     it('renders a node passed to the header prop', () => {

src/bottom-bar/bottom-bar.js → src/bottom-bar/bottom-bar.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useHighlightedFieldStore } from '../shared/index.js'
 import styles from './bottom-bar.module.css'
-import DataItemBar from './data-item-bar.js'
-import MainToolBar from './main-tool-bar.js'
+import DataItemBar from './data-item-bar.jsx'
+import MainToolBar from './main-tool-bar.jsx'
 
 export default function BottomBar() {
     const highlightedField = useHighlightedFieldStore((state) =>

src/bottom-bar/form-expiry-info.test.js → src/bottom-bar/form-expiry-info.test.jsx

@@ -2,8 +2,8 @@ import { useConfig } from '@dhis2/app-runtime'
 import { render as testingLibraryRender } from '@testing-library/react'
 import React from 'react'
 import { useLockedContext } from '../shared/locked-status/use-locked-context.js'
-import { render } from '../test-utils/render.js'
-import FormExpiryInfo from './form-expiry-info.js'
+import { render } from '../test-utils/render.jsx'
+import FormExpiryInfo from './form-expiry-info.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     ...jest.requireActual('@dhis2/app-runtime'),

src/bottom-bar/index.js

@@ -1,2 +1,2 @@
-export { default as BottomBar } from './bottom-bar.js'
+export { default as BottomBar } from './bottom-bar.jsx'
 export * from './validation-results-sidebar/index.js'

src/bottom-bar/main-tool-bar.js → src/bottom-bar/main-tool-bar.jsx

@@ -13,9 +13,9 @@ import {
     validationResultsSidebarId,
     useValidationStore,
 } from '../shared/index.js'
-import CompleteButton from './complete-button.js'
-import ErrorSummary from './error-summary.js'
-import FormExpiryInfo from './form-expiry-info.js'
+import CompleteButton from './complete-button.jsx'
+import ErrorSummary from './error-summary.jsx'
+import FormExpiryInfo from './form-expiry-info.jsx'
 import styles from './main-tool-bar.module.css'
 
 function ValidationButtonTooltip({ validateDisabled, offline, children }) {

src/bottom-bar/validation-results-sidebar/index.js

@@ -1 +1 @@
-export { default as ValidationResultsSidebar } from './validation-results-sidebar.js'
+export { default as ValidationResultsSidebar } from './validation-results-sidebar.jsx'

src/bottom-bar/validation-results-sidebar/validation-priority-group.js → src/bottom-bar/validation-results-sidebar/validation-priority-group.jsx

@@ -8,7 +8,7 @@ import {
     ImportanceLevelPropTypes,
     ValidationRuleViolationWithMetaDataPropTypes,
 } from './validation-result-prop-types.js'
-import ValidationRuleExpression from './validation-rule-expression.js'
+import ValidationRuleExpression from './validation-rule-expression.jsx'
 
 const ValidationPriortyGroup = ({ level, validationViolations = [] }) => {
     if (validationViolations?.length === 0) {

src/bottom-bar/validation-results-sidebar/validation-results-sidebar.js → src/bottom-bar/validation-results-sidebar/validation-results-sidebar.jsx

@@ -12,11 +12,11 @@ import {
     useValidationResult,
     useValidationStore,
 } from '../../shared/index.js'
-import ValidationCommentsViolations from './validation-comments-violations.js'
+import ValidationCommentsViolations from './validation-comments-violations.jsx'
 import { validationLevels } from './validation-config.js'
-import ValidationPriortyGroup from './validation-priority-group.js'
+import ValidationPriortyGroup from './validation-priority-group.jsx'
 import styles from './validation-results-sidebar.module.css'
-import ValidationSummaryBox from './validation-summary-box.js'
+import ValidationSummaryBox from './validation-summary-box.jsx'
 
 export default function ValidationResultsSidebar({ hide }) {
     const [dataChangedSinceValidation, setDataChangedSinceValidation] =

src/bottom-bar/validation-results-sidebar/validation-results-sidebar.test.js → src/bottom-bar/validation-results-sidebar/validation-results-sidebar.test.jsx

@@ -1,12 +1,12 @@
 import {
-    fireEvent,
     screen,
     waitForElementToBeRemoved,
 } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { render } from '../../test-utils/render.js'
-import ValidationResultsSidebar from './validation-results-sidebar.js'
+import { render } from '../../test-utils/render.jsx'
+import ValidationResultsSidebar from './validation-results-sidebar.jsx'
 
 describe('ValidationResultsSidebar', () => {
     const hide = jest.fn()
@@ -218,11 +218,10 @@
             getByText('There was a problem running validation')
         ).toBeDefined()
 
-        fireEvent.click(getByText('Run validation again'))
+        await userEvent.click(getByText('Run validation again'))
 
-        await findByText('Running validation...')
+        await findByText('2 medium priority alerts')
         expect(queryByText('There was a problem running validation')).toBeNull()
-        expect(getByText('2 medium priority alerts')).toBeDefined()
     })
     it('should show empty data', async () => {
         const overrideOptions = {

src/bottom-bar/validation-results-sidebar/validation-rule-expression.js → src/bottom-bar/validation-results-sidebar/validation-rule-expression.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ValidationRuleViolationWithMetaDataPropTypes } from './validation-result-prop-types.js'
-import ValidationRuleExpressionWithStaticDescription from './validation-rule-expression-with-description.js'
-import ValidationRuleExpressionWithValues from './validation-rule-expression-with-values.js'
+import ValidationRuleExpressionWithStaticDescription from './validation-rule-expression-with-description.jsx'
+import ValidationRuleExpressionWithValues from './validation-rule-expression-with-values.jsx'
 
 /**
  * operators that have a description, not a formula with a right and left side values

src/context-selection/attribute-option-combo-selector-bar-item/attribute-option-combo-selector-bar-item.js → src/context-selection/attribute-option-combo-selector-bar-item/attribute-option-combo-selector-bar-item.jsx

@@ -11,7 +11,7 @@ import {
     usePeriodId,
     useAttributeOptionComboSelection,
 } from '../../shared/index.js'
-import CategoriesMenu from './categories-menu.js'
+import CategoriesMenu from './categories-menu.jsx'
 import useSelected from './use-selected.js'
 import useSelectorBarItemLabel from './use-selector-bar-item-label.js'
 import useSelectorBarItemValue from './use-selector-bar-item-value.js'

src/context-selection/attribute-option-combo-selector-bar-item/index.js

@@ -1 +1 @@
-export { default as AttributeOptionComboSelectorBarItem } from './attribute-option-combo-selector-bar-item.js'
+export { default as AttributeOptionComboSelectorBarItem } from './attribute-option-combo-selector-bar-item.jsx'

src/context-selection/context-selection/context-selection.js → src/context-selection/context-selection/context-selection.jsx

@@ -12,7 +12,7 @@ import { OrgUnitSetSelectorBarItem } from '../org-unit-selector-bar-item/index.j
 import { PeriodSelectorBarItem } from '../period-selector-bar-item/index.js'
 import { SectionFilterSelectorBarItem } from '../section-filter-selector-bar-item/index.js'
 import styles from './context-selection.module.css'
-import RightHandSideContent from './right-hand-side-content.js'
+import RightHandSideContent from './right-hand-side-content.jsx'
 import useShouldHideClearButton from './use-should-hide-clear-button.js'
 
 export default function ContextSelector({ setSelectionHasNoFormMessage }) {

src/context-selection/context-selection/index.js

@@ -1 +1 @@
-export { default as ContextSelection } from './context-selection.js'
+export { default as ContextSelection } from './context-selection.jsx'

src/context-selection/contextual-help-sidebar/cells-legend.js → src/context-selection/contextual-help-sidebar/cells-legend.jsx

@@ -3,7 +3,7 @@ import { Divider } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { ExpandableUnit } from '../../shared/index.js'
-import Cell from './cell.js'
+import Cell from './cell.jsx'
 import styles from './cells-legend.module.css'
 
 function CellsLegendSymbol({ name, state }) {

src/context-selection/contextual-help-sidebar/contextual-help-sidebar.js → src/context-selection/contextual-help-sidebar/contextual-help-sidebar.jsx

@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
 import { Sidebar, SidebarProps, Title } from '../../shared/index.js'
-import CellsLegend from './cells-legend.js'
-import Shortcuts from './shortcuts.js'
+import CellsLegend from './cells-legend.jsx'
+import Shortcuts from './shortcuts.jsx'
 
 export default function ContextualHelpSidebar({ hide }) {
     return (

src/context-selection/contextual-help-sidebar/index.js

@@ -1 +1 @@
-export { default as ContextualHelpSidebar } from './contextual-help-sidebar.js'
+export { default as ContextualHelpSidebar } from './contextual-help-sidebar.jsx'

src/context-selection/data-set-selector-bar-item/index.js

@@ -1 +1 @@
-export { default as DataSetSelectorBarItem } from './data-set-selector-bar-item.js'
+export { default as DataSetSelectorBarItem } from './data-set-selector-bar-item.jsx'

src/context-selection/menu-select/index.js

@@ -1,3 +1,3 @@
-import MenuSelect from './menu-select.js'
+import MenuSelect from './menu-select.jsx'
 
 export { MenuSelect }

src/context-selection/menu-select/menu-select.js → src/context-selection/menu-select/menu-select.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import css from './menu-select.module.css'
 
-export default function MenuSelect({ values, selected, dataTest, onChange }) {
+export default function MenuSelect({
+    values,
+    selected,
+    dataTest = 'menu-select',
+    onChange,
+}) {
     return (
         <div className={css.menuSelect} data-test={dataTest}>
             <Menu>
@@ -21,10 +26,6 @@ export default function MenuSelect({ values, selected, dataTest, onChange }) {
     )
 }
 
-MenuSelect.defaultProps = {
-    dataTest: 'menu-select',
-}
-
 MenuSelect.propTypes = {
     values: PropTypes.arrayOf(
         PropTypes.shape({

src/context-selection/options/index.js

@@ -1 +1 @@
-export { default as OptionsButton } from './options.js'
+export { default as OptionsButton } from './options.jsx'

src/context-selection/org-unit-selector-bar-item/index.js

@@ -1 +1 @@
-export { default as OrgUnitSetSelectorBarItem } from './org-unit-selector-bar-item.js'
+export { default as OrgUnitSetSelectorBarItem } from './org-unit-selector-bar-item.jsx'

src/context-selection/org-unit-selector-bar-item/org-unit-selector-bar-item.js → src/context-selection/org-unit-selector-bar-item/org-unit-selector-bar-item.jsx

@@ -10,8 +10,8 @@ import {
     useOrgUnitId,
     useOrgUnit,
 } from '../../shared/index.js'
-import DebouncedSearchInput from './debounced-search-input.js'
-import DisabledTooltip from './disabled-tooltip.js'
+import DebouncedSearchInput from './debounced-search-input.jsx'
+import DisabledTooltip from './disabled-tooltip.jsx'
 import css from './org-unit-selector-bar-item.module.css'
 import {
     OrganisationUnitTree,

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/index.js

@@ -1 +1 @@
-export { OrganisationUnitNode } from './organisation-unit-node.js'
+export { OrganisationUnitNode } from './organisation-unit-node.jsx'

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/disabled-selection-label.js → src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/disabled-selection-label.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { SingleSelectionLabel } from './single-selection-label.js'
+import { SingleSelectionLabel } from './single-selection-label.jsx'
 
 /**
  * @param {Object} props

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/icon.js → src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/icon.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { IconEmpty } from './icon-empty.js'
-import { IconFolderClosed } from './icon-folder-closed.js'
-import { IconFolderOpen } from './icon-folder-open.js'
-import { IconSingle } from './icon-single.js'
+import { IconEmpty } from './icon-empty.jsx'
+import { IconFolderClosed } from './icon-folder-closed.jsx'
+import { IconFolderOpen } from './icon-folder-open.jsx'
+import { IconSingle } from './icon-single.jsx'
 
 /**
  * @param {Object} props

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/iconized-checkbox.js → src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/iconized-checkbox.jsx

@@ -1,7 +1,7 @@
 import { Checkbox } from '@dhis2-ui/checkbox'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Icon } from './icon.js'
+import { Icon } from './icon.jsx'
 
 export const IconizedCheckbox = ({
     checked,

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/index.js

@@ -1 +1 @@
-export { Label } from './label.js'
+export { Label } from './label.jsx'

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/label.js → src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/label.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { orgUnitPathPropType } from '../../prop-types.js'
-import { DisabledSelectionLabel } from './disabled-selection-label.js'
-import { IconizedCheckbox } from './iconized-checkbox.js'
-import { LabelContainer } from './label-container.js'
-import { SingleSelectionLabel } from './single-selection-label.js'
+import { DisabledSelectionLabel } from './disabled-selection-label.jsx'
+import { IconizedCheckbox } from './iconized-checkbox.jsx'
+import { LabelContainer } from './label-container.jsx'
+import { SingleSelectionLabel } from './single-selection-label.jsx'
 
 const createNewSelected = ({ selected, path, checked, singleSelection }) => {
     const pathIndex = selected.indexOf(path)