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

README.md

@@ -1,3 +1,4 @@
+![React 18](https://img.shields.io/badge/react-18-blue)
 This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
 
 ## Available Scripts

config/testSetup.js

@@ -1,5 +1,5 @@
+import Adapter from '@cfaester/enzyme-adapter-react-18'
 import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
 import React from 'react'
 
 // https://stackoverflow.com/questions/58070996/how-to-fix-the-warning-uselayouteffect-does-nothing-on-the-server

d2.config.js

@@ -15,8 +15,8 @@ const config = {
     },
 
     entryPoints: {
-        app: './src/AppWrapper.js',
-        plugin: './src/PluginWrapper.js',
+        app: './src/AppWrapper.jsx',
+        plugin: './src/PluginWrapper.jsx',
     },
 
     coreApp: true,

package.json

@@ -19,21 +19,23 @@
         "postinstall": "patch-package"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.7.5",
-        "@dhis2/cli-style": "^10.7.5",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+        "@dhis2/cli-app-scripts": "^12.3.0",
+        "@dhis2/cli-style": "^10.7.6",
         "@dhis2/cypress-commands": "^10.0.6",
         "@dhis2/cypress-plugins": "^10.0.6",
         "@semantic-release/changelog": "^6",
         "@semantic-release/exec": "^6",
         "@semantic-release/git": "^10",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.2.0",
         "cypress": "^13.17.0",
         "cypress-tags": "^1.2.2",
         "cypress-wait-until": "^1.7.2",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.8",
         "enzyme-to-json": "^3.6.2",
         "eslint-plugin-cypress": "^2.15.1",
+        "identity-obj-proxy": "^3.0.0",
         "patch-package": "^6.5.1",
         "redux-devtools": "^3.7.0",
         "redux-mock-store": "^1.5.5",
@@ -42,13 +44,12 @@
     },
     "dependencies": {
         "@dhis2/analytics": "^26.8.4",
-        "@dhis2/app-runtime": "^3.11.2",
+        "@dhis2/app-runtime": "^3.13.1",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/maps-gl": "^4.0.1",
-        "@dhis2/ui": "^9.13.0",
+        "@dhis2/ui": "^10.1.11",
         "@krakenjs/post-robot": "^11.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
         "abortcontroller-polyfill": "^1.7.5",
         "array-move": "^4.0.0",
         "classnames": "^2.3.2",
@@ -69,8 +70,6 @@
         "loglevel": "^1.8.1",
         "prop-types": "^15.8.1",
         "query-string": "^8.1.0",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
         "react-redux": "^8.1.2",
         "react-sortable-hoc": "^1.11.0",
         "react-virtualized": "^9.22.5",

src/AppWrapper.js → src/AppWrapper.jsx

@@ -6,9 +6,9 @@ import log from 'loglevel'
 import queryString from 'query-string'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
-import App from './components/app/App.js'
-import OrgUnitsProvider from './components/OrgUnitsProvider.js'
-import WindowDimensionsProvider from './components/WindowDimensionsProvider.js'
+import App from './components/app/App.jsx'
+import OrgUnitsProvider from './components/OrgUnitsProvider.jsx'
+import WindowDimensionsProvider from './components/WindowDimensionsProvider.jsx'
 import store from './store/index.js'
 import { USER_DATASTORE_NAMESPACE } from './util/analyticalObject.js'
 import { appQueries, providerDataTransformation } from './util/app.js'

src/PluginWrapper.js → src/PluginWrapper.jsx

@@ -4,7 +4,7 @@ import postRobot from '@krakenjs/post-robot'
 import { debounce } from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React, { useEffect, useLayoutEffect, useState } from 'react'
-import { Plugin } from './components/plugin/Plugin.js'
+import { Plugin } from './components/plugin/Plugin.jsx'
 import { getPWAInstallationStatus } from './util/getPWAInstallationStatus.js'
 
 const LoadingMask = () => {

src/components/app/App.js → src/components/app/App.jsx

@@ -1,15 +1,15 @@
 import cx from 'classnames'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import BottomPanel from '../datatable/BottomPanel.js'
-import DownloadModeMenu from '../download/DownloadMenubar.js'
-import DownloadSettings from '../download/DownloadSettings.js'
-import LayersPanel from '../layers/LayersPanel.js'
-import LayersLoader from '../loaders/LayersLoader.js'
-import MapPosition from '../map/MapPosition.js'
-import AppMenu from './AppMenu.js'
-import DetailsPanel from './DetailsPanel.js'
-import ModalContainer from './ModalContainer.js'
+import BottomPanel from '../datatable/BottomPanel.jsx'
+import DownloadModeMenu from '../download/DownloadMenubar.jsx'
+import DownloadSettings from '../download/DownloadSettings.jsx'
+import LayersPanel from '../layers/LayersPanel.jsx'
+import LayersLoader from '../loaders/LayersLoader.jsx'
+import MapPosition from '../map/MapPosition.jsx'
+import AppMenu from './AppMenu.jsx'
+import DetailsPanel from './DetailsPanel.jsx'
+import ModalContainer from './ModalContainer.jsx'
 import './App.css'
 import styles from './styles/App.module.css'
 import { useLoadDataStore } from './useLoadDataStore.js'

src/components/app/AppMenu.js → src/components/app/AppMenu.jsx

@@ -1,10 +1,10 @@
 import { Toolbar, HoverMenuBar } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 import React from 'react'
-import DownloadButton from '../download/DownloadButton.js'
-import InterpretationsToggle from '../interpretations/InterpretationsToggle.js'
-import AddLayerButton from '../layers/overlays/AddLayerButton.js'
-import FileMenu from './FileMenu.js'
+import DownloadButton from '../download/DownloadButton.jsx'
+import InterpretationsToggle from '../interpretations/InterpretationsToggle.jsx'
+import AddLayerButton from '../layers/overlays/AddLayerButton.jsx'
+import FileMenu from './FileMenu.jsx'
 
 const AppMenu = ({ onFileMenuAction }) => (
     <Toolbar>

src/components/app/DetailsPanel.js → src/components/app/DetailsPanel.jsx

@@ -2,9 +2,9 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useSelector } from 'react-redux'
-import FeatureProfile from '../feature/FeatureProfile.js'
-import Interpretations from '../interpretations/Interpretations.js'
-import OrgUnitProfile from '../orgunits/OrgUnitProfile.js'
+import FeatureProfile from '../feature/FeatureProfile.jsx'
+import Interpretations from '../interpretations/Interpretations.jsx'
+import OrgUnitProfile from '../orgunits/OrgUnitProfile.jsx'
 import styles from './styles/DetailsPanel.module.css'
 
 const DetailsPanel = ({ interpretationsRenderCount }) => {

src/components/app/ModalContainer.js → src/components/app/ModalContainer.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import LayerEdit from '../edit/LayerEdit.js'
-import ContextMenu from '../map/ContextMenu.js'
-import OpenAsMapDialog from '../openAs/OpenAsMapDialog.js'
+import LayerEdit from '../edit/LayerEdit.jsx'
+import ContextMenu from '../map/ContextMenu.jsx'
+import OpenAsMapDialog from '../openAs/OpenAsMapDialog.jsx'
 
 const ModalContainer = () => {
     const analyticalObject = useSelector((state) => state.analyticalObject)

src/components/app/__tests__/Detailspanel.spec.js → src/components/app/__tests__/Detailspanel.spec.jsx

@@ -2,28 +2,28 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import DetailsPanel from '../DetailsPanel.js'
+import DetailsPanel from '../DetailsPanel.jsx'
 
 const mockStore = configureMockStore()
 
 jest.mock(
-    '../../interpretations/Interpretations.js',
+    '../../interpretations/Interpretations.jsx',
     () =>
         function MockInterpretations() {
             return <div>Interpretations</div>
         }
 )
 
 jest.mock(
-    '../../orgunits/OrgUnitProfile.js',
+    '../../orgunits/OrgUnitProfile.jsx',
     () =>
         function MockOrgUnitProfile() {
             return <div>Org Unit Profile</div>
         }
 )
 
 jest.mock(
-    '../../feature/FeatureProfile.js',
+    '../../feature/FeatureProfile.jsx',
     () =>
         function MockFeatureProfile() {
             return <div>Feature Profile</div>

src/components/classification/NumericLegendStyle.js → src/components/classification/NumericLegendStyle.jsx

@@ -7,10 +7,10 @@ import {
     CLASSIFICATION_EQUAL_INTERVALS,
     CLASSIFICATION_SINGLE_COLOR,
 } from '../../constants/layers.js'
-import Classification from './Classification.js'
-import LegendSetSelect from './LegendSetSelect.js'
-import LegendTypeSelect from './LegendTypeSelect.js'
-import SingleColor from './SingleColor.js'
+import Classification from './Classification.jsx'
+import LegendSetSelect from './LegendSetSelect.jsx'
+import LegendTypeSelect from './LegendTypeSelect.jsx'
+import SingleColor from './SingleColor.jsx'
 
 // Wrapper component for selecting legend style used for numeric map styles
 const NumericLegendStyle = (props) => {

src/components/core/ColorScaleSelect.js → src/components/core/ColorScaleSelect.jsx

@@ -7,7 +7,7 @@ import {
     getColorScale,
     getColorPalette,
 } from '../../util/colors.js'
-import ColorScale from './ColorScale.js'
+import ColorScale from './ColorScale.jsx'
 import styles from './styles/ColorScaleSelect.module.css'
 
 const ColorScaleSelect = ({ palette, width, onChange, className }) => {

src/components/core/FontStyle.js → src/components/core/FontStyle.jsx

@@ -10,8 +10,8 @@ import {
     LABEL_FONT_COLOR,
 } from '../../constants/layers.js'
 import { cssColor } from '../../util/colors.js'
-import ColorButton from './ColorButton.js'
-import NumberField from './NumberField.js'
+import ColorButton from './ColorButton.jsx'
+import NumberField from './NumberField.jsx'
 import styles from './styles/FontStyle.module.css'
 
 const FontStyle = ({

src/components/core/Radio.js → src/components/core/Radio.jsx

@@ -1,7 +1,7 @@
 import { Radio as UiRadio } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useContext } from 'react'
-import { RadioContext } from './RadioGroup.js'
+import { RadioContext } from './RadioGroup.jsx'
 
 const Radio = ({ value, disabled, dense = true, dataTest, label }) => {
     const { radio, onChange } = useContext(RadioContext)

src/components/core/Tab.js → src/components/core/Tab.jsx

@@ -1,7 +1,7 @@
 import { Tab as UiTab } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useContext } from 'react'
-import { TabContext } from './Tabs.js'
+import { TabContext } from './Tabs.jsx'
 
 const Tab = ({ value, dataTest, children }) => {
     const { tab, onChange } = useContext(TabContext)

src/components/core/__tests__/Drawer.spec.js → src/components/core/__tests__/Drawer.spec.jsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme'
 import React from 'react'
-import Drawer from '../Drawer.js'
+import Drawer from '../Drawer.jsx'
 
 describe('Drawer', () => {
     const renderWithProps = (props) => shallow(<Drawer {...props} />)

src/components/core/__tests__/ListItem.spec.js → src/components/core/__tests__/ListItem.spec.jsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme'
 import React from 'react'
-import ListItem from '../ListItem.js'
+import ListItem from '../ListItem.jsx'
 
 describe('Drawer', () => {
     it('should not render if children is missing', () => {

src/components/core/__tests__/SelectField.spec.js → src/components/core/__tests__/SelectField.spec.jsx

@@ -6,7 +6,7 @@ import {
 } from '@dhis2/ui'
 import { shallow } from 'enzyme'
 import React from 'react'
-import SelectField from '../SelectField.js'
+import SelectField from '../SelectField.jsx'
 
 const items = [
     {

src/components/core/index.js

@@ -1,23 +1,23 @@
-import Checkbox from './Checkbox.js'
-import ColorButton from './ColorButton.js'
-import ColorPicker from './ColorPicker.js'
-import ColorScale from './ColorScale.js'
-import ColorScaleSelect from './ColorScaleSelect.js'
+import Checkbox from './Checkbox.jsx'
+import ColorButton from './ColorButton.jsx'
+import ColorPicker from './ColorPicker.jsx'
+import ColorScale from './ColorScale.jsx'
+import ColorScaleSelect from './ColorScaleSelect.jsx'
 import ConditionalWrapper from './ConditionalWrapper.js'
-import DatePicker from './DatePicker.js'
-import FontStyle from './FontStyle.js'
-import Help from './Help.js'
-import IconButton from './IconButton.js'
-import ImageSelect from './ImageSelect.js'
-import LabelDisplayOptions from './LabelDisplayOptions.js'
-import MenuButton from './MenuButton.js'
-import NumberField from './NumberField.js'
-import Radio from './Radio.js'
-import RadioGroup from './RadioGroup.js'
-import SelectField from './SelectField.js'
-import Tab from './Tab.js'
-import Tabs from './Tabs.js'
-import TextField from './TextField.js'
+import DatePicker from './DatePicker.jsx'
+import FontStyle from './FontStyle.jsx'
+import Help from './Help.jsx'
+import IconButton from './IconButton.jsx'
+import ImageSelect from './ImageSelect.jsx'
+import LabelDisplayOptions from './LabelDisplayOptions.jsx'
+import MenuButton from './MenuButton.jsx'
+import NumberField from './NumberField.jsx'
+import Radio from './Radio.jsx'
+import RadioGroup from './RadioGroup.jsx'
+import SelectField from './SelectField.jsx'
+import Tab from './Tab.jsx'
+import Tabs from './Tabs.jsx'
+import TextField from './TextField.jsx'
 
 export {
     Checkbox,

src/components/dataItem/BooleanStyle.js → src/components/dataItem/BooleanStyle.jsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { setBooleanStyle } from '../../actions/layerEdit.js'
 import { qualitativeColors } from '../../constants/colors.js'
-import OptionStyle from '../optionSet/OptionStyle.js'
+import OptionStyle from '../optionSet/OptionStyle.jsx'
 
 const style = {
     marginTop: 20,

src/components/dataItem/DataItemStyle.js → src/components/dataItem/DataItemStyle.jsx

@@ -4,9 +4,9 @@ import {
     numberValueTypes,
     booleanValueTypes,
 } from '../../constants/valueTypes.js'
-import NumericLegendStyle from '../classification/NumericLegendStyle.js'
-import OptionSetStyle from '../optionSet/OptionSetStyle.js'
-import BooleanStyle from './BooleanStyle.js'
+import NumericLegendStyle from '../classification/NumericLegendStyle.jsx'
+import OptionSetStyle from '../optionSet/OptionSetStyle.jsx'
+import BooleanStyle from './BooleanStyle.jsx'
 
 const DataItemStyle = ({ dataItem, style }) => {
     if (!dataItem) {

src/components/dataItem/StyleByDataItem.js → src/components/dataItem/StyleByDataItem.jsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { setStyleDataItem } from '../../actions/layerEdit.js'
 import { useEventDataItems } from '../../hooks/useEventDataItems.js'
 import { SelectField } from '../core/index.js'
-import DataItemStyle from './DataItemStyle.js'
+import DataItemStyle from './DataItemStyle.jsx'
 
 const excludeTypes = [
     'DATE',

src/components/dataItem/filter/FilterGroup.js → src/components/dataItem/filter/FilterGroup.jsx

@@ -9,7 +9,7 @@ import {
     changeFilter,
 } from '../../../actions/layerEdit.js'
 import { useEventDataItems } from '../../../hooks/useEventDataItems.js'
-import FilterRow from './FilterRow.js'
+import FilterRow from './FilterRow.jsx'
 import styles from './styles/FilterGroup.module.css'
 
 const excludeTypes = ['FILE_RESOURCE', 'ORGANISATION_UNIT', 'COORDINATE']

src/components/dataItem/filter/FilterRow.js → src/components/dataItem/filter/FilterRow.jsx

@@ -2,8 +2,8 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { SelectField } from '../../core/index.js'
-import RemoveFilter from '../../filter/RemoveFilter.js'
-import FilterSelect from './FilterSelect.js'
+import RemoveFilter from '../../filter/RemoveFilter.jsx'
+import FilterSelect from './FilterSelect.jsx'
 import styles from './styles/FilterRow.module.css'
 
 const FilterRow = ({

src/components/dataItem/filter/FilterSelect.js → src/components/dataItem/filter/FilterSelect.jsx

@@ -14,7 +14,7 @@ import {
     Checkbox,
     DatePicker,
 } from '../../core/index.js'
-import OptionSetSelect from '../../optionSet/OptionSetSelect.js'
+import OptionSetSelect from '../../optionSet/OptionSetSelect.jsx'
 import styles from './styles/FilterSelect.module.css'
 
 const getOperators = (valueType, optionSetId) => {

src/components/datatable/BottomPanel.js → src/components/datatable/BottomPanel.jsx

@@ -8,10 +8,10 @@ import {
     LAYERS_PANEL_WIDTH,
     RIGHT_PANEL_WIDTH,
 } from '../../constants/layout.js'
-import { useWindowDimensions } from '../WindowDimensionsProvider.js'
-import DataTable from './DataTable.js'
-import ErrorBoundary from './ErrorBoundary.js'
-import ResizeHandle from './ResizeHandle.js'
+import { useWindowDimensions } from '../WindowDimensionsProvider.jsx'
+import DataTable from './DataTable.jsx'
+import ErrorBoundary from './ErrorBoundary.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
 import styles from './styles/BottomPanel.module.css'
 
 // Container for DataTable