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

.eslintrc.js

@@ -44,7 +44,12 @@ module.exports = {
     },
     overrides: [
         {
-            files: ['*.test.js', '**/__tests__/*.js'],
+            files: [
+                '*.test.js',
+                '**/__tests__/*.js',
+                '*.test.jsx',
+                '**/__tests__/*.jsx',
+            ],
             rules: {
                 'i18next/no-literal-string': 'off',
                 'react/prop-types': 'off',
@@ -62,7 +67,7 @@ module.exports = {
             },
         },
         {
-            files: ['cypress/**/*.js'],
+            files: ['cypress/**/*.js', 'cypress/**/*.jsx'],
             rules: {
                 'import/no-unassigned-import': 'off',
                 'import/no-unused-modules': 'off',

README.md

@@ -1,3 +1,5 @@
+![React 18](https://img.shields.io/badge/react-18-blue)
+
 # Scheduler
 
 ## Cypress env settings

package.json

@@ -15,28 +15,27 @@
         "@dhis2/app-runtime": "^3.8.0",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/prop-types": "2.0.3",
-        "@dhis2/ui": "^8.13.14",
+        "@dhis2/ui": "^9.11.8",
+        "@testing-library/react": "^16.0.1",
         "classnames": "^2.3.1",
         "cronstrue": "^1.114.0",
         "history": "^4.9.0",
         "moment": "^2.29.1",
+        "package.json": "^2.0.1",
         "prop-types": "^15.8.1",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
         "react-router": "^5.0.1",
         "react-router-dom": "^5.2.0",
         "styled-jsx": "^4.0.1"
     },
     "devDependencies": {
         "@badeball/cypress-cucumber-preprocessor": "^20.0.3",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@cypress/webpack-preprocessor": "^6.0.1",
-        "@dhis2/cli-app-scripts": "^10.3.9",
-        "@dhis2/cli-style": "^10.7.3",
+        "@dhis2/cli-app-scripts": "^12.0.0-alpha.19",
+        "@dhis2/cli-style": "^10.7.4",
         "@testing-library/cypress": "^10.0.1",
-        "@testing-library/react-hooks": "^8.0.1",
         "cypress": "^13.7.2",
         "enzyme": "^3.10.0",
-        "enzyme-adapter-react-16": "^1.15.6",
         "eslint-plugin-compat": "^3.9.0",
         "eslint-plugin-i18next": "^5.1.1",
         "eslint-plugin-import": "^2.23.4",

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import App from './App'
+import App from './App.jsx'
 
 describe('<App>', () => {
     it('renders without errors', () => {

src/components/App/index.js

@@ -1,3 +1,3 @@
 /* eslint-disable import/no-unused-modules */
 
-export { default } from './App'
+export { default } from './App.jsx'

src/components/AuthWall/AuthWall.test.js → src/components/AuthWall/AuthWall.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow, mount } from 'enzyme'
 import { useDataQuery } from '@dhis2/app-runtime'
 import { getAuthorized } from './selectors'
-import AuthWall from './AuthWall'
+import AuthWall from './AuthWall.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDataQuery: jest.fn(),

src/components/AuthWall/index.js

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

src/components/Buttons/CronPresetButton.test.js → src/components/Buttons/CronPresetButton.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
-import CronPresetButton from './CronPresetButton'
+import CronPresetButton from './CronPresetButton.jsx'
 
 describe('<CronPresetButton>', () => {
     it('renders without errors', () => {

src/components/Buttons/DeleteJobButton.test.js → src/components/Buttons/DeleteJobButton.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
-import DeleteJobButton from './DeleteJobButton'
+import DeleteJobButton from './DeleteJobButton.jsx'
 
 describe('<DeleteJobButton>', () => {
     it('renders without errors', () => {

src/components/Buttons/DeleteQueueButton.test.js → src/components/Buttons/DeleteQueueButton.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
-import DeleteQueueButton from './DeleteQueueButton'
+import DeleteQueueButton from './DeleteQueueButton.jsx'
 
 describe('<DeleteQueueButton>', () => {
     it('renders without errors', () => {

src/components/Buttons/DiscardFormButton.test.js → src/components/Buttons/DiscardFormButton.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
 import history from '../../services/history'
-import DiscardFormButton from './DiscardFormButton'
+import DiscardFormButton from './DiscardFormButton.jsx'
 
 jest.mock('../../services/history', () => ({
     push: jest.fn(),

src/components/Buttons/index.js

@@ -1,4 +1,4 @@
-export { default as CronPresetButton } from './CronPresetButton'
-export { default as DeleteJobButton } from './DeleteJobButton'
-export { default as DeleteQueueButton } from './DeleteQueueButton'
-export { default as DiscardFormButton } from './DiscardFormButton'
+export { default as CronPresetButton } from './CronPresetButton.jsx'
+export { default as DeleteJobButton } from './DeleteJobButton.jsx'
+export { default as DeleteQueueButton } from './DeleteQueueButton.jsx'
+export { default as DiscardFormButton } from './DiscardFormButton.jsx'

src/components/FormErrorBox/FormErrorBox.test.js → src/components/FormErrorBox/FormErrorBox.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
-import FormErrorBox from './FormErrorBox'
+import FormErrorBox from './FormErrorBox.jsx'
 
 describe('<FormErrorBox>', () => {
     it('returns null if there are no errors', () => {

src/components/FormErrorBox/index.js

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

src/components/FormFields/CronField.test.js → src/components/FormFields/CronField.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
-import CronField from './CronField'
+import CronField from './CronField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/Custom/AggregatedDataExchangeField.test.js → src/components/FormFields/Custom/AggregatedDataExchangeField.test.jsx

@@ -2,7 +2,7 @@ import { mount } from 'enzyme'
 import React from 'react'
 import { CircularLoader, ReactFinalForm } from '@dhis2/ui'
 import { useDataQuery } from '@dhis2/app-runtime'
-import AggregatedDataExchangeField from './AggregatedDataExchangeField'
+import AggregatedDataExchangeField from './AggregatedDataExchangeField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/Custom/SkipTableTypesField.test.js → src/components/FormFields/Custom/SkipTableTypesField.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useParameterOption } from '../../../hooks/parameter-options'
-import SkipTableTypesField from './SkipTableTypesField'
+import SkipTableTypesField from './SkipTableTypesField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/DelayField.test.js → src/components/FormFields/DelayField.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
-import DelayField from './DelayField'
+import DelayField from './DelayField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/JobTypeField.test.js → src/components/FormFields/JobTypeField.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useJobTypes } from '../../hooks/job-types'
-import JobTypeField from './JobTypeField'
+import JobTypeField from './JobTypeField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/ListFieldMulti.test.js → src/components/FormFields/ListFieldMulti.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useParameterOption } from '../../hooks/parameter-options'
-import ListFieldMulti from './ListFieldMulti'
+import ListFieldMulti from './ListFieldMulti.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/ListFieldSingle.test.js → src/components/FormFields/ListFieldSingle.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useParameterOption } from '../../hooks/parameter-options'
-import ListFieldSingle from './ListFieldSingle'
+import ListFieldSingle from './ListFieldSingle.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/NameField.test.js → src/components/FormFields/NameField.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
-import NameField from './NameField'
+import NameField from './NameField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/ParameterFields.js → src/components/FormFields/ParameterFields.jsx

@@ -9,15 +9,15 @@ import {
     SwitchFieldFF,
 } from '@dhis2/ui'
 import { useJobTypeParameters } from '../../hooks/job-types'
-import SkipTableTypesField from './Custom/SkipTableTypesField'
-import DataIntegrityChecksField from './Custom/DataIntegrityChecksField'
-import DataIntegrityReportTypeField from './Custom/DataIntegrityReportTypeField'
-import AggregatedDataExchangeField from './Custom/AggregatedDataExchangeField'
-import PushAnalyticsModeField from './Custom/PushAnalyticsModeField'
-import TestPolicyField from './Custom/TestPolicyField'
+import SkipTableTypesField from './Custom/SkipTableTypesField.jsx'
+import DataIntegrityChecksField from './Custom/DataIntegrityChecksField.jsx'
+import DataIntegrityReportTypeField from './Custom/DataIntegrityReportTypeField.jsx'
+import AggregatedDataExchangeField from './Custom/AggregatedDataExchangeField.jsx'
+import PushAnalyticsModeField from './Custom/PushAnalyticsModeField.jsx'
+import TestPolicyField from './Custom/TestPolicyField.jsx'
 import styles from './ParameterFields.module.css'
-import ListFieldSingle from './ListFieldSingle'
-import ListFieldMulti from './ListFieldMulti'
+import ListFieldSingle from './ListFieldSingle.jsx'
+import ListFieldMulti from './ListFieldMulti.jsx'
 import { formatToString } from './formatters'
 
 const { Field } = ReactFinalForm

src/components/FormFields/ParameterFields.test.js → src/components/FormFields/ParameterFields.test.jsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useJobTypeParameters } from '../../hooks/job-types'
 import { useParameterOption } from '../../hooks/parameter-options'
-import ParameterFields from './ParameterFields'
+import ParameterFields from './ParameterFields.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/QueueOrderField.js → src/components/FormFields/QueueOrderField.jsx

@@ -4,7 +4,7 @@ import { ReactFinalForm, CircularLoader, NoticeBox } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import { jobTypesMap } from '../../services/server-translations'
 import { useQueueables } from '../../hooks/queueables'
-import QueueTransfer from './QueueTransfer'
+import QueueTransfer from './QueueTransfer.jsx'
 
 const { Field } = ReactFinalForm
 

src/components/FormFields/QueueOrderField.test.js → src/components/FormFields/QueueOrderField.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm, CircularLoader } from '@dhis2/ui'
 import { useQueueables } from '../../hooks/queueables'
-import QueueOrderField from './QueueOrderField'
+import QueueOrderField from './QueueOrderField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/QueueTransfer.js → src/components/FormFields/QueueTransfer.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import { Field, Transfer } from '@dhis2/ui'
-import QueueTransferTitle from './QueueTransferTitle'
-import QueueOption from './QueueOption'
+import QueueTransferTitle from './QueueTransferTitle.jsx'
+import QueueOption from './QueueOption.jsx'
 
 const { bool, arrayOf, shape, func, array, string, oneOfType } = PropTypes
 

src/components/FormFields/ScheduleField.js → src/components/FormFields/ScheduleField.jsx

@@ -3,8 +3,8 @@ import i18n from '@dhis2/d2-i18n'
 import { NoticeBox } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import { useJobType } from '../../hooks/job-types'
-import CronField from './CronField'
-import DelayField from './DelayField'
+import CronField from './CronField.jsx'
+import DelayField from './DelayField.jsx'
 
 const ScheduleField = ({ jobType }) => {
     const { loading, error, data } = useJobType(jobType)

src/components/FormFields/ScheduleField.test.js → src/components/FormFields/ScheduleField.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { useJobType } from '../../hooks/job-types'
-import ScheduleField from './ScheduleField'
+import ScheduleField from './ScheduleField.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/FormFields/index.js

@@ -1,14 +1,14 @@
-import { FIELD_NAME as JOB_TYPE } from './JobTypeField'
+import { FIELD_NAME as JOB_TYPE } from './JobTypeField.jsx'
 
 const fieldNames = {
     JOB_TYPE,
 }
 
-export { default as CronField } from './CronField'
-export { default as JobTypeField } from './JobTypeField'
-export { default as NameField } from './NameField'
-export { default as ParameterFields } from './ParameterFields'
-export { default as ScheduleField } from './ScheduleField'
-export { default as QueueOrderField } from './QueueOrderField'
+export { default as CronField } from './CronField.jsx'
+export { default as JobTypeField } from './JobTypeField.jsx'
+export { default as NameField } from './NameField.jsx'
+export { default as ParameterFields } from './ParameterFields.jsx'
+export { default as ScheduleField } from './ScheduleField.jsx'
+export { default as QueueOrderField } from './QueueOrderField.jsx'
 
 export { fieldNames }

src/components/Forms/JobAddForm.test.js → src/components/Forms/JobAddForm.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { fieldNames } from '../FormFields'
-import JobAddForm from './JobAddForm'
+import JobAddForm from './JobAddForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/JobAddFormContainer.js → src/components/Forms/JobAddFormContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ReactFinalForm } from '@dhis2/ui'
 import history from '../../services/history'
 import { useSubmitJob } from '../../hooks/jobs'
-import JobAddForm from './JobAddForm'
+import JobAddForm from './JobAddForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/JobAddFormContainer.test.js → src/components/Forms/JobAddFormContainer.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import JobAddFormContainer from './JobAddFormContainer'
+import JobAddFormContainer from './JobAddFormContainer.jsx'
 
 describe('<JobAddFormContainer>', () => {
     it('renders without errors', () => {

src/components/Forms/JobEditForm.test.js → src/components/Forms/JobEditForm.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
 import { fieldNames } from '../FormFields'
-import JobEditForm from './JobEditForm'
+import JobEditForm from './JobEditForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/JobEditFormContainer.js → src/components/Forms/JobEditFormContainer.jsx

@@ -4,7 +4,7 @@ import { ReactFinalForm } from '@dhis2/ui'
 import { useParams } from 'react-router-dom'
 import history from '../../services/history'
 import { useUpdateJob } from '../../hooks/jobs'
-import JobEditForm from './JobEditForm'
+import JobEditForm from './JobEditForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/JobEditFormContainer.test.js → src/components/Forms/JobEditFormContainer.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import JobEditFormContainer from './JobEditFormContainer'
+import JobEditFormContainer from './JobEditFormContainer.jsx'
 
 jest.mock('react-router-dom', () => ({
     useParams: () => ({ id: 'id' }),

src/components/Forms/QueueAddForm.test.js → src/components/Forms/QueueAddForm.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { ReactFinalForm } from '@dhis2/ui'
-import QueueAddForm from './QueueAddForm'
+import QueueAddForm from './QueueAddForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/QueueAddFormContainer.js → src/components/Forms/QueueAddFormContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ReactFinalForm } from '@dhis2/ui'
 import history from '../../services/history'
 import { useSubmitQueue } from '../../hooks/queues'
-import QueueAddForm from './QueueAddForm'
+import QueueAddForm from './QueueAddForm.jsx'
 
 const { Form } = ReactFinalForm
 

src/components/Forms/QueueAddFormContainer.test.js → src/components/Forms/QueueAddFormContainer.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import QueueAddFormContainer from './QueueAddFormContainer'
+import QueueAddFormContainer from './QueueAddFormContainer.jsx'
 
 describe('<QueueAddFormContainer>', () => {
     it('renders without errors', () => {