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

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     extends: [config.eslintReact, 'plugin:cypress/recommended'],
     overrides: [
         {
-            files: ['src/**/*.spec.js'],
+            files: ['src/**/*.spec.jsx'],
             rules: {
                 'react/prop-types': 'off',
                 'react/display-name': 'off',

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).
 
 ## Development

d2.config.js

@@ -28,7 +28,7 @@ const config = {
     },
 
     entryPoints: {
-        app: './src/AppWrapper.js',
+        app: './src/AppWrapper.jsx',
     },
 }
 

package.json

@@ -6,17 +6,16 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@dhis2/analytics": "^26.9.4",
-        "@dhis2/app-runtime": "^3.10.6",
+        "@dhis2/app-runtime": "^3.13.1",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/ui": "^10.1.4",
+        "@dhis2/ui": "^10.1.11",
         "@krakenjs/post-robot": "^11.0.0",
         "classnames": "^2.3.2",
         "d2": "^31.10.0",
         "d2-utilizr": "^0.2.16",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
-        "react": "^16.14.0",
         "react-grid-layout": "1.2.2",
         "react-redux": "^7.2.9",
         "react-router-dom": "^5.2.0",
@@ -44,19 +43,21 @@
         "@badeball/cypress-cucumber-preprocessor": "^20.1.0",
         "@bahmutov/cypress-esbuild-preprocessor": "^2.2.1",
         "@cypress/webpack-preprocessor": "^6.0.2",
-        "@dhis2/cli-app-scripts": "^11.7.1",
-        "@dhis2/cli-style": "^10.7.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.6",
         "@semantic-release/changelog": "^6",
         "@semantic-release/exec": "^6",
         "@semantic-release/git": "^10",
+        "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^12",
+        "@testing-library/react": "^16.2.0",
         "cypress": "^13.13.1",
         "cypress-real-events": "^1.13.0",
         "d2-manifest": "^1.0.0",
         "eslint-plugin-cypress": "^3.3.0",
+        "identity-obj-proxy": "^3.0.0",
         "immutability-helper": "^3.1.1",
         "import": "^0.0.6",
         "patch-package": "^7",
@@ -74,7 +75,5 @@
             "<rootDir>/config/testSetup.js"
         ]
     },
-    "resolutions": {
-        "@dhis2/ui": "^10.1.4"
-    }
+    "resolutions": {}
 }

src/AppWrapper.js → src/AppWrapper.jsx

@@ -3,10 +3,10 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
-import App from './components/App.js'
-import SystemSettingsProvider from './components/SystemSettingsProvider.js'
-import UserSettingsProvider from './components/UserSettingsProvider.js'
-import WindowDimensionsProvider from './components/WindowDimensionsProvider.js'
+import App from './components/App.jsx'
+import SystemSettingsProvider from './components/SystemSettingsProvider.jsx'
+import UserSettingsProvider from './components/UserSettingsProvider.jsx'
+import WindowDimensionsProvider from './components/WindowDimensionsProvider.jsx'
 import configureStore from './configureStore.js'
 
 import './locales/index.js'

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

@@ -18,7 +18,7 @@
 import { PrintDashboard, PrintLayoutDashboard } from '../pages/print/index.js'
 import { LandingPage, ROUTE_START_PATH } from '../pages/start/index.js'
 import { ViewDashboard } from '../pages/view/index.js'
-import { useSystemSettings } from './SystemSettingsProvider.js'
+import { useSystemSettings } from './SystemSettingsProvider.jsx'
 import './styles/App.css'
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
@@ -41,7 +41,7 @@
             '--headerbar-height',
             `${headerbarHeight}px`
         )
     }, [])
 
     return (
         systemSettings && (

src/components/DashboardsBar/DashboardsBar.js → src/components/DashboardsBar/DashboardsBar.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, IconAdd16, DropdownButton } from '@dhis2/ui'
 import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'
-import InformationBlock from './InformationBlock/InformationBlock.js'
+import InformationBlock from './InformationBlock/InformationBlock.jsx'
 import { IconNavigation, NavigationMenu } from './NavigationMenu/index.js'
 import styles from './styles/DashboardsBar.module.css'
 

src/components/DashboardsBar/InformationBlock/ActionsBar.js → src/components/DashboardsBar/InformationBlock/ActionsBar.jsx

@@ -16,18 +16,18 @@ import { acClearItemFilters } from '../../../actions/itemFilters.js'
 import { acSetShowDescription } from '../../../actions/showDescription.js'
 import { acSetSlideshow } from '../../../actions/slideshow.js'
 import { apiPostShowDescription } from '../../../api/description.js'
-import ConfirmActionDialog from '../../../components/ConfirmActionDialog.js'
-import DropdownButton from '../../../components/DropdownButton/DropdownButton.js'
-import MenuItem from '../../../components/MenuItemWithTooltip.js'
-import { useSystemSettings } from '../../../components/SystemSettingsProvider.js'
+import ConfirmActionDialog from '../../../components/ConfirmActionDialog.jsx'
+import DropdownButton from '../../../components/DropdownButton/DropdownButton.jsx'
+import MenuItem from '../../../components/MenuItemWithTooltip.jsx'
+import { useSystemSettings } from '../../../components/SystemSettingsProvider.jsx'
 import { itemTypeSupportsFullscreen } from '../../../modules/itemTypes.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import { orObject } from '../../../modules/util.js'
 import { ROUTE_START_PATH } from '../../../pages/start/index.js'
 import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
-import FilterSelector from './FilterSelector.js'
+import FilterSelector from './FilterSelector.jsx'
 import classes from './styles/ActionsBar.module.css'
 
 const ActionsBar = ({

src/components/DashboardsBar/InformationBlock/FilterDialog.js → src/components/DashboardsBar/InformationBlock/FilterDialog.jsx

@@ -32,8 +32,8 @@ import {
     acRemoveItemFilter,
 } from '../../../actions/itemFilters.js'
 import { sGetItemFiltersRoot } from '../../../reducers/itemFilters.js'
-import { useSystemSettings } from '../../SystemSettingsProvider.js'
-import { useUserSettings } from '../../UserSettingsProvider.js'
+import { useSystemSettings } from '../../SystemSettingsProvider.jsx'
+import { useUserSettings } from '../../UserSettingsProvider.jsx'
 
 const FilterDialog = ({
     dimension,

src/components/DashboardsBar/InformationBlock/FilterSelector.js → src/components/DashboardsBar/InformationBlock/FilterSelector.jsx

@@ -13,8 +13,8 @@ import {
 import useDimensions from '../../../modules/useDimensions.js'
 import { sGetActiveModalDimension } from '../../../reducers/activeModalDimension.js'
 import { sGetItemFiltersRoot } from '../../../reducers/itemFilters.js'
-import DropdownButton from '../../DropdownButton/DropdownButton.js'
-import FilterDialog from './FilterDialog.js'
+import DropdownButton from '../../DropdownButton/DropdownButton.jsx'
+import FilterDialog from './FilterDialog.jsx'
 
 const FilterSelector = (props) => {
     const [filterDialogIsOpen, setFilterDialogIsOpen] = useState(false)

src/components/DashboardsBar/InformationBlock/InformationBlock.js → src/components/DashboardsBar/InformationBlock/InformationBlock.jsx

@@ -6,10 +6,10 @@ import { connect } from 'react-redux'
 import { acSetDashboardStarred } from '../../../actions/dashboards.js'
 import { sGetDashboardStarred } from '../../../reducers/dashboards.js'
 import { sGetSelected } from '../../../reducers/selected.js'
-import ActionsBar from './ActionsBar.js'
+import ActionsBar from './ActionsBar.jsx'
 import { apiStarDashboard } from './apiStarDashboard.js'
-import LastUpdatedTag from './LastUpdatedTag.js'
-import StarDashboardButton from './StarDashboardButton.js'
+import LastUpdatedTag from './LastUpdatedTag.jsx'
+import StarDashboardButton from './StarDashboardButton.jsx'
 import classes from './styles/InformationBlock.module.css'
 
 const InformationBlock = ({

src/components/DashboardsBar/InformationBlock/LastUpdatedTag.js → src/components/DashboardsBar/InformationBlock/LastUpdatedTag.jsx

@@ -3,7 +3,7 @@ import { Tag, Tooltip } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { useWindowDimensions } from '../../../components/WindowDimensionsProvider.js'
+import { useWindowDimensions } from '../../../components/WindowDimensionsProvider.jsx'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 
 const LastUpdatedTag = ({ id }) => {

src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.js → src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import useDimensions from '../../../../modules/useDimensions.js'
-import FilterSelector from '../FilterSelector.js'
+import FilterSelector from '../FilterSelector.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDhis2ConnectionStatus: jest.fn(() => ({ isDisconnected: false })),

src/components/DashboardsBar/InformationBlock/index.js

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

src/components/DashboardsBar/NavigationMenu/NavigationMenu.js → src/components/DashboardsBar/NavigationMenu/NavigationMenu.jsx

@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { acSetDashboardsFilter } from '../../../actions/dashboardsFilter.js'
 import { sGetDashboardsSortedByStarred } from '../../../reducers/dashboards.js'
 import { sGetDashboardsFilter } from '../../../reducers/dashboardsFilter.js'
-import { NavigationMenuItem } from './NavigationMenuItem.js'
+import { NavigationMenuItem } from './NavigationMenuItem.jsx'
 import styles from './styles/NavigationMenu.module.css'
 import itemStyles from './styles/NavigationMenuItem.module.css'
 

src/components/DashboardsBar/NavigationMenu/NavigationMenuItem.js → src/components/DashboardsBar/NavigationMenu/NavigationMenuItem.jsx

@@ -8,7 +8,7 @@ import { useHistory } from 'react-router-dom'
 import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import { sGetSelectedId } from '../../../reducers/selected.js'
-import { IconOfflineSaved } from '../../IconOfflineSaved.js'
+import { IconOfflineSaved } from '../../IconOfflineSaved.jsx'
 import styles from './styles/NavigationMenuItem.module.css'
 
 export const NavigationMenuItem = ({

src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.js → src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.jsx

@@ -4,9 +4,9 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { Router } from 'react-router-dom'
 import { createStore } from 'redux'
-import { NavigationMenu } from '../NavigationMenu.js'
+import { NavigationMenu } from '../NavigationMenu.jsx'
 
-jest.mock('../NavigationMenuItem.js', () => ({
+jest.mock('../NavigationMenuItem.jsx', () => ({
     NavigationMenuItem: ({ displayName }) => (
         <li role="menu-item">{displayName}</li>
     ),

src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.js → src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.jsx

@@ -9,7 +9,7 @@ import { Provider } from 'react-redux'
 import { Router, useHistory } from 'react-router-dom'
 import { createStore } from 'redux'
 import { apiPostDataStatistics } from '../../../../api/dataStatistics.js'
-import { NavigationMenuItem } from '../NavigationMenuItem.js'
+import { NavigationMenuItem } from '../NavigationMenuItem.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDhis2ConnectionStatus: jest.fn(() => ({ isConnected: true })),

src/components/DashboardsBar/NavigationMenu/index.js

@@ -1,2 +1,2 @@
-export { IconNavigation } from './IconNavigation.js'
-export { NavigationMenu } from './NavigationMenu.js'
+export { IconNavigation } from './IconNavigation.jsx'
+export { NavigationMenu } from './NavigationMenu.jsx'

src/components/DashboardsBar/index.js

@@ -1,3 +1,3 @@
-import { DashboardsBar } from './DashboardsBar.js'
+import { DashboardsBar } from './DashboardsBar.jsx'
 
 export default DashboardsBar

src/components/DropdownButton/DropdownButton.js → src/components/DropdownButton/DropdownButton.jsx

@@ -2,7 +2,7 @@ import { OfflineTooltip } from '@dhis2/analytics'
 import { Button, Layer, Popper } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ArrowDown, ArrowUp } from './assets/Arrow.js'
+import { ArrowDown, ArrowUp } from './assets/Arrow.jsx'
 import styles from './DropdownButton.module.css'
 
 const DropdownButton = ({

src/components/DropdownButton/assets/Arrow.js → src/components/DropdownButton/assets/Arrow.jsx

@@ -1,7 +1,7 @@
+/* eslint-disable react/no-unknown-property */
 import PropTypes from 'prop-types'
 import React from 'react'
 
-/* eslint-disable react/no-unknown-property */
 export function ArrowDown({ className }) {
     return (
         <svg
@@ -52,5 +52,4 @@ export function ArrowUp({ className }) {
 ArrowUp.propTypes = {
     className: PropTypes.string,
 }
-
 /* eslint-enable react/no-unknown-property */

src/components/Item/AppItem/Item.js → src/components/Item/AppItem/Item.jsx

@@ -9,7 +9,7 @@ import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import { getIframeSrc } from './getIframeSrc.js'
 import styles from './styles/AppItem.module.css'
 

src/components/Item/AppItem/__tests__/Item.spec.js → src/components/Item/AppItem/__tests__/Item.spec.jsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import Item from '../Item.js'
+import Item from '../Item.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
@@ -27,7 +27,7 @@ jest.mock('@dhis2/ui', () => {
 })
 
 jest.mock(
-    '../../ItemHeader/DeleteItemButton.js',
+    '../../ItemHeader/DeleteItemButton.jsx',
     () =>
         function Mock() {
             return <div className="DeleteItemButton" />

src/components/Item/Item.js → src/components/Item/Item.jsx

@@ -20,15 +20,15 @@ import {
     PAGEBREAK,
     PRINT_TITLE_PAGE,
 } from '../../modules/itemTypes.js'
-import AppItem from './AppItem/Item.js'
-import ListItem from './ListItem/Item.js'
-import MessagesItem from './MessagesItem/Item.js'
-import NotSupportedItem from './NotSupportedItem/Item.js'
-import PageBreakItem from './PageBreakItem/Item.js'
-import PrintTitlePageItem from './PrintTitlePageItem/Item.js'
-import SpacerItem from './SpacerItem/Item.js'
-import TextItem from './TextItem/Item.js'
-import VisualizationItem from './VisualizationItem/Item.js'
+import AppItem from './AppItem/Item.jsx'
+import ListItem from './ListItem/Item.jsx'
+import MessagesItem from './MessagesItem/Item.jsx'
+import NotSupportedItem from './NotSupportedItem/Item.jsx'
+import PageBreakItem from './PageBreakItem/Item.jsx'
+import PrintTitlePageItem from './PrintTitlePageItem/Item.jsx'
+import SpacerItem from './SpacerItem/Item.jsx'
+import TextItem from './TextItem/Item.jsx'
+import VisualizationItem from './VisualizationItem/Item.jsx'
 
 const getGridItem = (type) => {
     switch (type) {

src/components/Item/ItemHeader/EditItemActions.js → src/components/Item/ItemHeader/EditItemActions.jsx

@@ -9,7 +9,7 @@ import {
     sGetEditDashboardItems,
     sGetLayoutColumns,
 } from '../../../reducers/editDashboard.js'
-import DeleteItemButton from './DeleteItemButton.js'
+import DeleteItemButton from './DeleteItemButton.jsx'
 import classes from './styles/ItemHeader.module.css'
 
 const EditItemActions = ({ itemId, onDeleteItem }) => {

src/components/Item/ItemHeader/ItemHeader.js → src/components/Item/ItemHeader/ItemHeader.jsx

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { VIEW, EDIT, PRINT_LAYOUT } from '../../../modules/dashboardModes.js'
-import EditItemActions from './EditItemActions.js'
-import PrintItemInfo from './PrintItemInfo.js'
+import EditItemActions from './EditItemActions.jsx'
+import PrintItemInfo from './PrintItemInfo.jsx'
 import classes from './styles/ItemHeader.module.css'
-import ViewItemActions from './ViewItemActions.js'
-import ViewItemTags from './ViewItemTags.js'
+import ViewItemActions from './ViewItemActions.jsx'
+import ViewItemTags from './ViewItemTags.jsx'
 
 const getItemActionsMap = (isShortened) => {
     return {

src/components/Item/ListItem/Item.js → src/components/Item/ListItem/Item.jsx

@@ -13,7 +13,7 @@ import { isEditMode } from '../../../modules/dashboardModes.js'
 import { itemTypeMap, getItemUrl } from '../../../modules/itemTypes.js'
 import { orArray } from '../../../modules/util.js'
 import { sGetSlideshow } from '../../../reducers/slideshow.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import classes from './Item.module.css'
 
 const getItemTitle = (item) => itemTypeMap[item.type].pluralTitle

src/components/Item/MessagesItem/Item.js → src/components/Item/MessagesItem/Item.jsx

@@ -7,8 +7,8 @@ import { connect } from 'react-redux'
 import { isViewMode } from '../../../modules/dashboardModes.js'
 import { sGetMessagesRoot } from '../../../reducers/messages.js'
 import { sGetSlideshow } from '../../../reducers/slideshow.js'
-import { useUserSettings } from '../../UserSettingsProvider.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import { useUserSettings } from '../../UserSettingsProvider.jsx'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import { getFormattedDate } from './getFormattedDate.js'
 import classes from './styles/Item.module.css'
 import './MessagesItem.css'

src/components/Item/NotSupportedItem/Item.js → src/components/Item/NotSupportedItem/Item.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { colors, IconQuestion24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 
 const NotSupportedItem = ({ item, dashboardMode }) => {
     const message = item.type

src/components/Item/SpacerItem/Item.js → src/components/Item/SpacerItem/Item.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 
 const style = {
     margin: '21px 28px',

src/components/Item/TextItem/Item.js → src/components/Item/TextItem/Item.jsx

@@ -13,8 +13,8 @@ import {
     sGetPrintDashboardItems,
 } from '../../../reducers/printDashboard.js'
 import { sGetSelectedDashboardItems } from '../../../reducers/selected.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
-import PrintItemInfo from '../ItemHeader/PrintItemInfo.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
+import PrintItemInfo from '../ItemHeader/PrintItemInfo.jsx'
 import styles from './styles/TextItem.module.css'
 
 const fullscreenStyle = {

src/components/Item/VisualizationItem/FatalErrorBoundary.js → src/components/Item/VisualizationItem/FatalErrorBoundary.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Warning } from './assets/icons.js'
+import { Warning } from './assets/icons.jsx'
 import classes from './styles/FatalErrorBoundary.module.css'
 
 class FatalErrorBoundary extends React.Component {