fix(deps): upgrade app platform to v12 for Vite and React 18

d2.config.js

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

package.json

@@ -13,12 +13,13 @@
         "format": "d2-style apply"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.7.0",
+        "@dhis2/cli-app-scripts": "^12.0.0",
         "@dhis2/cli-style": "^10.7.5"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.10.6",
+        "@dhis2/app-runtime": "^3.12.1",
         "@dhis2/multi-calendar-dates": "1.0.0-alpha.27",
+        "@dhis2/ui": "^10.1.10",
         "@turf/area": "^6.5.0",
         "highcharts": "^10.3.3",
         "react-router-dom": "^6.26.1",

src/App.js → src/App.jsx

@@ -1,4 +1,4 @@
-import Routes from './components/Routes'
+import Routes from './components/Routes.jsx'
 
 const App = () => <Routes />
 

src/components/AboutPage.js → src/components/AboutPage.jsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import GEETokenCheck from './shared/GEETokenCheck'
+import GEETokenCheck from './shared/GEETokenCheck.jsx'
 import styles from './styles/AboutPage.module.css'
 
 // TODO: How to combine links and i18n.t?

src/components/Root.js → src/components/Root.jsx

@@ -1,10 +1,10 @@
 import i18n from '@dhis2/d2-i18n'
 import { CssVariables, CssReset, Menu, MenuItem } from '@dhis2/ui'
 import { Fragment, useEffect } from 'react'
 import { Outlet, useResolvedPath, useNavigate } from 'react-router-dom'
 import useAppSettings from '../hooks/useAppSettings'
-import CheckOrgUnitTree from './check/OrgUnitTree'
-import OrgUnitTree from './explore/OrgUnitTree'
+import CheckOrgUnitTree from './check/OrgUnitTree.jsx'
+import OrgUnitTree from './explore/OrgUnitTree.jsx'
 import styles from './styles/Root.module.css'
 
 export const appPages = [

src/components/Routes.js → src/components/Routes.jsx

@@ -2,26 +2,26 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import { RouterProvider, createHashRouter } from 'react-router-dom'
 import checkPlaceLoader from '../utils/checkPlaceLoader'
 import orgUnitLoader from '../utils/orgUnitLoader'
-import AboutPage from './AboutPage'
-import CheckPage from './check/CheckPage'
-import ErrorPage from './ErrorPage'
-import ClimateChange from './explore/climateChange/ClimateChange'
-import ExplorePage from './explore/ExplorePage'
-import Forecast from './explore/forecast/Forecast'
-import HeatDaily from './explore/heat/HeatDaily'
-import HeatMonthly from './explore/heat/HeatMonthly'
-import HumidityDaily from './explore/humidity/HumidityDaily'
-import HumidityMonthly from './explore/humidity/HumidityMonthly'
-import OrgUnit from './explore/OrgUnit'
-import PrecipitationDaily from './explore/precipitation/PrecipitationDaily'
-import PrecipitationMonthly from './explore/precipitation/PrecipitationMonthly'
-import Tabs from './explore/Tabs'
-import TemperatureDaily from './explore/temperature/TemperatureDaily'
-import TemperatureMonthly from './explore/temperature/TemperatureMonthly'
-import ImportPage from './import/ImportPage'
-import Root from './Root'
-import SettingsPage from './settings/SettingsPage'
-import SetupPage from './setup/SetupPage'
+import AboutPage from './AboutPage.jsx'
+import CheckPage from './check/CheckPage.jsx'
+import ErrorPage from './ErrorPage.jsx'
+import ClimateChange from './explore/climateChange/ClimateChange.jsx'
+import ExplorePage from './explore/ExplorePage.jsx'
+import Forecast from './explore/forecast/Forecast.jsx'
+import HeatDaily from './explore/heat/HeatDaily.jsx'
+import HeatMonthly from './explore/heat/HeatMonthly.jsx'
+import HumidityDaily from './explore/humidity/HumidityDaily.jsx'
+import HumidityMonthly from './explore/humidity/HumidityMonthly.jsx'
+import OrgUnit from './explore/OrgUnit.jsx'
+import PrecipitationDaily from './explore/precipitation/PrecipitationDaily.jsx'
+import PrecipitationMonthly from './explore/precipitation/PrecipitationMonthly.jsx'
+import Tabs from './explore/Tabs.jsx'
+import TemperatureDaily from './explore/temperature/TemperatureDaily.jsx'
+import TemperatureMonthly from './explore/temperature/TemperatureMonthly.jsx'
+import ImportPage from './import/ImportPage.jsx'
+import Root from './Root.jsx'
+import SettingsPage from './settings/SettingsPage.jsx'
+import SetupPage from './setup/SetupPage.jsx'
 
 const monthlyPath = 'monthly/:startTime/:endTime/:referencePeriodId'
 const dailyPath = 'daily/:startTime/:endTime'

src/components/explore/DailyPeriodSelect.js → src/components/explore/DailyPeriodSelect.jsx

@@ -3,7 +3,7 @@ import { Button } from '@dhis2/ui'
 import { useState } from 'react'
 import exploreStore from '../../store/exploreStore'
 import { getNumberOfDays } from '../../utils/time'
-import DatePicker from '../shared/DatePicker'
+import DatePicker from '../shared/DatePicker.jsx'
 import styles from './styles/Period.module.css'
 
 const maxDays = 1000

src/components/explore/ExplorePage.js → src/components/explore/ExplorePage.jsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import GEETokenCheck from '../shared/GEETokenCheck'
+import GEETokenCheck from '../shared/GEETokenCheck.jsx'
 import styles from './styles/ExplorePage.module.css'
 
 const ExplorePage = () => (

src/components/explore/MonthlyPeriodSelect.js → src/components/explore/MonthlyPeriodSelect.jsx

@@ -3,7 +3,7 @@ import { Button } from '@dhis2/ui'
 import { useState } from 'react'
 import exploreStore from '../../store/exploreStore'
 import { getNumberOfMonths } from '../../utils/time'
-import MonthPicker from '../shared/MonthPicker'
+import MonthPicker from '../shared/MonthPicker.jsx'
 import styles from './styles/Period.module.css'
 
 const maxMonths = 60

src/components/explore/OrgUnit.js → src/components/explore/OrgUnit.jsx

@@ -7,7 +7,7 @@ import {
     useNavigate,
 } from 'react-router-dom'
 import exploreStore from '../../store/exploreStore'
-import OrgUnitType from './OrgUnitType'
+import OrgUnitType from './OrgUnitType.jsx'
 import styles from './styles/OrgUnit.module.css'
 
 const tabIsValid = (tab, orgUnit) =>

src/components/explore/climateChange/ClimateChange.js → src/components/explore/climateChange/ClimateChange.jsx

@@ -9,11 +9,11 @@ import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNo
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
 import { getCurrentYear } from '../../../utils/time'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthSelect from '../MonthSelect'
-import ReferencePeriod from '../ReferencePeriodSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthSelect from '../MonthSelect.jsx'
+import ReferencePeriod from '../ReferencePeriodSelect.jsx'
 import getChartConfig from './charts/temperatureAnomaly'
 import styles from './styles/ClimateChangeTab.module.css'
 

src/components/explore/climateChange/charts/temperatureAnomaly.js

@@ -3,7 +3,7 @@ import { colors } from '@dhis2/ui'
 import { roundOneDecimal } from '../../../../utils/calc'
 import { animation, credits } from '../../../../utils/chart'
 import { padWithZeroes } from '../../../../utils/time'
-import { months } from '../../MonthSelect'
+import { months } from '../../MonthSelect.jsx'
 
 const band = 'temperature_2m'
 

src/components/explore/forecast/DayForecast.js → src/components/explore/forecast/DayForecast.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { roundOneDecimal } from '../../../utils/calc'
 import styles from './styles/DayForecast.module.css'
-import TemperatureValue from './TemperatureValue.js'
-import WeatherSymbol from './WeatherSymbol.js'
+import TemperatureValue from './TemperatureValue.jsx'
+import WeatherSymbol from './WeatherSymbol.jsx'
 
 const sixHours = [
     { start: '00', end: '06' },

src/components/explore/forecast/Forecast.js → src/components/explore/forecast/Forecast.jsx

@@ -2,8 +2,8 @@ import i18n from '@dhis2/d2-i18n'
 import { useState, useEffect } from 'react'
 import useAppSettings from '../../../hooks/useAppSettings.js'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader.js'
-import DayForecast from './DayForecast.js'
+import DataLoader from '../../shared/DataLoader.jsx'
+import DayForecast from './DayForecast.jsx'
 import styles from './styles/ForecastTab.module.css'
 
 const convertTimezone = (date, timeZone) =>

src/components/explore/heat/HeatDaily.js → src/components/explore/heat/HeatDaily.jsx

@@ -2,13 +2,13 @@ import { era5HeatDaily } from '../../../data/datasets'
 import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import DailyPeriodSelect from '../DailyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import DailyPeriodSelect from '../DailyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
 import getDailyConfig from './charts/thermalComfortDaily'
-import HeatDescription from './HeatDescription'
+import HeatDescription from './HeatDescription.jsx'
 
 const HeatDaily = () => {
     const orgUnit = exploreStore((state) => state.orgUnit)

src/components/explore/heat/HeatMonthly.js → src/components/explore/heat/HeatMonthly.jsx

@@ -2,13 +2,13 @@ import { era5HeatMonthly } from '../../../data/datasets'
 import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthlyPeriodSelect from '../MonthlyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthlyPeriodSelect from '../MonthlyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
 import getMonthlyConfig from './charts/thermalComfortMonthly'
-import HeatDescription from './HeatDescription'
+import HeatDescription from './HeatDescription.jsx'
 
 const HeatMonthly = () => {
     const orgUnit = exploreStore((state) => state.orgUnit)

src/components/explore/humidity/HumidityDaily.js → src/components/explore/humidity/HumidityDaily.jsx

@@ -1,13 +1,13 @@
 import { era5Daily } from '../../../data/datasets'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import DailyPeriodSelect from '../DailyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import DailyPeriodSelect from '../DailyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
 import getDailyConfig from './charts/humidityDaily'
-import HumidityDescription from './HumidityDescription'
+import HumidityDescription from './HumidityDescription.jsx'
 
 const HumidityDaily = () => {
     const orgUnit = exploreStore((state) => state.orgUnit)

src/components/explore/humidity/HumidityMonthly.js → src/components/explore/humidity/HumidityMonthly.jsx

@@ -2,14 +2,14 @@ import { era5Monthly, era5MonthlyNormals } from '../../../data/datasets'
 import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNormals'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthlyPeriodSelect from '../MonthlyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
-import ReferencePeriod from '../ReferencePeriodSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthlyPeriodSelect from '../MonthlyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
+import ReferencePeriod from '../ReferencePeriodSelect.jsx'
 import getMonthlyConfig from './charts/humidityMonthly'
-import HumidityDescription from './HumidityDescription'
+import HumidityDescription from './HumidityDescription.jsx'
 
 const HumidityMonthly = () => {
     const orgUnit = exploreStore((state) => state.orgUnit)

src/components/explore/precipitation/PrecipitationDaily.js → src/components/explore/precipitation/PrecipitationDaily.jsx

@@ -2,11 +2,11 @@ import { era5Daily } from '../../../data/datasets'
 import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import DailyPeriodSelect from '../DailyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import DailyPeriodSelect from '../DailyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
 import getDailyConfig from './charts/precipitationDaily'
 
 const PrecipitationDaily = () => {

src/components/explore/precipitation/PrecipitationMonthly.js → src/components/explore/precipitation/PrecipitationMonthly.jsx

@@ -3,12 +3,12 @@ import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNormals'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthlyPeriodSelect from '../MonthlyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
-import ReferencePeriod from '../ReferencePeriodSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthlyPeriodSelect from '../MonthlyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
+import ReferencePeriod from '../ReferencePeriodSelect.jsx'
 import getMonthlyConfig from './charts/precipitationMonthly'
 
 const PrecipitationMonthly = () => {

src/components/explore/temperature/TemperatureDaily.js → src/components/explore/temperature/TemperatureDaily.jsx

@@ -2,11 +2,11 @@ import { era5Daily } from '../../../data/datasets'
 import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import DailyPeriodSelect from '../DailyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import DailyPeriodSelect from '../DailyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
 import getDailyConfig from './charts/temperatureDaily'
 
 const TemperatureDaily = () => {

src/components/explore/temperature/TemperatureMonthly.js → src/components/explore/temperature/TemperatureMonthly.jsx

@@ -3,12 +3,12 @@ import useAppSettings from '../../../hooks/useAppSettings'
 import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNormals'
 import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
 import exploreStore from '../../../store/exploreStore'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthlyPeriodSelect from '../MonthlyPeriodSelect'
-import PeriodTypeSelect from '../PeriodTypeSelect'
-import ReferencePeriod from '../ReferencePeriodSelect'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthlyPeriodSelect from '../MonthlyPeriodSelect.jsx'
+import PeriodTypeSelect from '../PeriodTypeSelect.jsx'
+import ReferencePeriod from '../ReferencePeriodSelect.jsx'
 import getMonthlyConfig from './charts/temperatureMonthly'
 
 const TemperatureMonthly = () => {

src/components/import/ExtractData.js → src/components/import/ExtractData.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import useEarthEngineData from '../../hooks/useEarthEngineData'
 import useOrgUnits from '../../hooks/useOrgUnits'
 import { getNumberOfDaysFromPeriod } from '../../utils/time'
-import DataLoader from '../shared/DataLoader'
-import ErrorMessage from '../shared/ErrorMessage'
-import ImportData from './ImportData'
+import DataLoader from '../shared/DataLoader.jsx'
+import ErrorMessage from '../shared/ErrorMessage.jsx'
+import ImportData from './ImportData.jsx'
 import styles from './styles/ExtractData.module.css'
 
 const ExtractData = ({ dataset, period, orgUnits, dataElement }) => {

src/components/import/ImportData.js → src/components/import/ImportData.jsx

@@ -2,9 +2,9 @@ import { useDataMutation } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import { useState, useEffect } from 'react'
-import ImportError from './ImportError'
-import ImportResponse from './ImportResponse'
-import NoOrgUnitData from './NoOrgUnitData'
+import ImportError from './ImportError.jsx'
+import ImportResponse from './ImportResponse.jsx'
+import NoOrgUnitData from './NoOrgUnitData.jsx'
 import styles from './styles/ImportData.module.css'
 
 const dataImportMutation = {

src/components/import/ImportError.js → src/components/import/ImportError.jsx

@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import ImportResponse from './ImportResponse'
+import ImportResponse from './ImportResponse.jsx'
 import styles from './styles/ImportError.module.css'
 
 const ImportError = ({ response = {} }) => {

src/components/import/ImportPage.js → src/components/import/ImportPage.jsx

@@ -9,13 +9,13 @@ import {
     getNumberOfDaysFromPeriod,
     isValidPeriod,
 } from '../../utils/time'
-import GEETokenCheck from '../shared/GEETokenCheck'
-import Resolution from '../shared/Resolution'
-import DataElement from './DataElement'
-import Dataset from './Dataset'
-import ExtractData from './ExtractData'
-import OrgUnits from './OrgUnits'
-import Period from './Period'
+import GEETokenCheck from '../shared/GEETokenCheck.jsx'
+import Resolution from '../shared/Resolution.jsx'
+import DataElement from './DataElement.jsx'
+import Dataset from './Dataset.jsx'
+import ExtractData from './ExtractData.jsx'
+import OrgUnits from './OrgUnits.jsx'
+import Period from './Period.jsx'
 import styles from './styles/ImportPage.module.css'
 
 const maxValues = 50000

src/components/import/OrgUnits.js → src/components/import/OrgUnits.jsx

@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import OrgUnitLevel from './OrgUnitLevel'
-import OrgUnitTree from './OrgUnitTree'
+import OrgUnitLevel from './OrgUnitLevel.jsx'
+import OrgUnitTree from './OrgUnitTree.jsx'
 import styles from './styles/OrgUnits.module.css'
 
 const OrgUnits = ({ selected = {}, onChange }) => {