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

)

* chore: bump dhis2 dependencies

* chore: remove react, react-dom and deduplicate dependencies

* chore: run d2 migrate script

* chore: update test dependencies

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

* fix(react-upgrade): manual test changes

README.md

@@ -1,3 +1,4 @@
+![React 18](https://img.shields.io/badge/react-18-blue)
 [![codecov](https://codecov.io/gh/dhis2/app-management-app/graph/badge.svg?token=Z62Z57XE21)](https://codecov.io/gh/dhis2/maintenance-app-beta)
 
 This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).

d2.config.js

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

package.json

@@ -27,19 +27,19 @@
     },
     "homepage": "https://github.com/dhis2/app-management-app#readme",
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.7.0",
-        "@dhis2/cli-style": "^10.4.1",
-        "@testing-library/jest-dom": "^6.1.5",
-        "@testing-library/react": "^12",
-        "@testing-library/user-event": "^13.5.0",
+        "@dhis2/cli-app-scripts": "^12.3.0",
+        "@dhis2/cli-style": "^10.7.6",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.2.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^29.5.11",
-        "jest": "^29.7.0",
-        "react-dom": "^16"
+        "jest": "^29.7.0"
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.2.1",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/ui": "^9.11.3",
+        "@dhis2/ui": "^10.1.11",
         "moment": "^2.29.0",
         "prop-types": "^15.8.1",
         "query-string": "^6.14.1",
@@ -48,7 +48,5 @@
         "use-debounce": "^6.0.0",
         "use-query-params": "^1.2.0"
     },
-    "resolutions": {
-        "@dhis2/ui": "^9.11.3"
-    }
+    "resolutions": {}
 }

src/App.js → src/App.jsx

@@ -3,13 +3,13 @@ import React from 'react'
 import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
 import { QueryParamProvider } from 'use-query-params'
 import styles from './App.module.css'
-import { Sidebar } from './components/Sidebar/Sidebar.js'
-import { AppHub } from './pages/AppHub/AppHub.js'
-import { AppHubApp } from './pages/AppHubApp/AppHubApp.js'
-import { CoreApps } from './pages/CoreApps/CoreApps.js'
-import { CustomApps } from './pages/CustomApps/CustomApps.js'
-import { InstalledApp } from './pages/InstalledApp/InstalledApp.js'
-import { ManualInstall } from './pages/ManualInstall/ManualInstall.js'
+import { Sidebar } from './components/Sidebar/Sidebar.jsx'
+import { AppHub } from './pages/AppHub/AppHub.jsx'
+import { AppHubApp } from './pages/AppHubApp/AppHubApp.jsx'
+import { CoreApps } from './pages/CoreApps/CoreApps.jsx'
+import { CustomApps } from './pages/CustomApps/CustomApps.jsx'
+import { InstalledApp } from './pages/InstalledApp/InstalledApp.jsx'
+import { ManualInstall } from './pages/ManualInstall/ManualInstall.jsx'
 import './locales/index.js'
 
 // Used to ensure we are matching the pattern of a valid app hub id, which should be a UUID version 4

src/App.module.css

@@ -1,7 +1,7 @@
 .container {
     display: grid;
     height: 100%;
-    grid-template-areas: "sidebar main";
+    grid-template-areas: 'sidebar main';
     grid-template-columns: 224px auto;
     color: var(--colors-grey900);
 }

src/components/AppCard/AppCard.js → src/components/AppCard/AppCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { AppIcon } from '../AppIcon/AppIcon.js'
+import { AppIcon } from '../AppIcon/AppIcon.jsx'
 import styles from './AppCard.module.css'
 
 export const AppCard = ({

src/components/AppCard/AppCard.module.css

@@ -14,7 +14,8 @@
     color: unset;
 }
 
-.appCard:hover, .appCard:focus {
+.appCard:hover,
+.appCard:focus {
     background: var(--colors-grey300);
 
     /* Reset button styles */
@@ -32,5 +33,5 @@
     display: block;
     margin: var(--spacers-dp4) 0;
     font-size: 14px;
-    color: var(--colors-grey700)
+    color: var(--colors-grey700);
 }

src/components/AppDetails/AppDetails.js → src/components/AppDetails/AppDetails.jsx

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { getAppIconSrc } from '../../get-app-icon-src.js'
 import { getLatestVersion } from '../../get-latest-version.js'
-import { AppIcon } from '../AppIcon/AppIcon.js'
+import { AppIcon } from '../AppIcon/AppIcon.jsx'
 import styles from './AppDetails.module.css'
-import { Description } from './Description.js'
-import { ManageInstalledVersion } from './ManageInstalledVersion.js'
-import { Versions } from './Versions.js'
+import { Description } from './Description.jsx'
+import { ManageInstalledVersion } from './ManageInstalledVersion.jsx'
+import { Versions } from './Versions.jsx'
 
 const Metadata = ({ installedVersion, versions }) => {
     const relativeTime = (datetime) => moment(datetime).fromNow()

src/components/AppDetails/AppDetails.module.css

@@ -3,7 +3,8 @@
     height: auto !important;
 }
 
-.header, .section {
+.header,
+.section {
     padding: var(--spacers-dp24);
 }
 
@@ -93,13 +94,15 @@
     border: 4px solid var(--colors-grey200);
 }
 
-.otherScreenshot:hover, .otherScreenshot:focus {
+.otherScreenshot:hover,
+.otherScreenshot:focus {
     border-color: var(--colors-grey400);
     outline: none;
 }
 
 .otherScreenshotCurrent,
-.otherScreenshotCurrent:hover, .otherScreenshotCurrent:focus {
+.otherScreenshotCurrent:hover,
+.otherScreenshotCurrent:focus {
     border-color: var(--colors-blue500);
 }
 
@@ -131,4 +134,4 @@
 .openLink::after {
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
     margin: 0px 3px 0px 5px;
-}
+}

src/components/AppDetails/Versions.spec.js → src/components/AppDetails/Versions.spec.jsx

@@ -1,7 +1,7 @@
 import { useConfig } from '@dhis2/app-runtime'
-import { queryAllByRole, render } from '@testing-library/react'
+import { render, within } from '@testing-library/react'
 import React from 'react'
-import { Versions } from './Versions.js'
+import { Versions } from './Versions.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     ...jest.requireActual('@dhis2/app-runtime'),
@@ -92,16 +92,11 @@ describe('Versions table', () => {
         const [firstRow, secondRow, thirdRow] =
             getAllByTestId('versions-table-row')
 
-        expect(queryAllByRole(firstRow, 'button')[0]).toHaveTextContent(
-            'Install'
-        )
-        expect(queryAllByRole(secondRow, 'button')[0]).toHaveTextContent(
-            'Install'
-        )
+        within(firstRow).getByText('Install')
+        within(secondRow).getByText('Install')
 
-        const thirdInstalledButton = queryAllByRole(thirdRow, 'button')[0]
-        expect(thirdInstalledButton).toHaveTextContent('Installed')
-        expect(thirdInstalledButton).toHaveAttribute('disabled')
+        const button = within(thirdRow).getByText('Installed')
+        expect(button).toHaveAttribute('disabled')
     })
 
     it('should display empty table when no compatible versions', () => {

src/components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.module.css

@@ -1,3 +1,3 @@
 .noticeBox {
     margin-bottom: var(--spacers-dp16);
-}
+}

src/components/AppsList/AppsList.js → src/components/AppsList/AppsList.jsx

@@ -5,8 +5,8 @@ import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'
 import { getAppIconSrc } from '../../get-app-icon-src.js'
-import { AppCard } from '../AppCard/AppCard.js'
-import { AppCards as AppCards_ } from '../AppCards/AppCards.js'
+import { AppCard } from '../AppCard/AppCard.jsx'
+import { AppCards as AppCards_ } from '../AppCards/AppCards.jsx'
 import styles from './AppsList.module.css'
 
 const AppCards = ({ apps }) => {

src/components/Sidebar/Sidebar.module.css

@@ -2,6 +2,7 @@ li.sidebarItem {
     background-color: inherit;
 }
 
-li.sidebarItem:hover, li.sidebarItem:focus {
+li.sidebarItem:hover,
+li.sidebarItem:focus {
     background-color: var(--colors-grey300);
 }

src/pages/AppHub/AppHub.js → src/pages/AppHub/AppHub.jsx

@@ -17,8 +17,8 @@ import {
     NumberParam,
     withDefault,
 } from 'use-query-params'
-import { AppCard } from '../../components/AppCard/AppCard.js'
-import { AppCards as AppCards_ } from '../../components/AppCards/AppCards.js'
+import { AppCard } from '../../components/AppCard/AppCard.jsx'
+import { AppCards as AppCards_ } from '../../components/AppCards/AppCards.jsx'
 import { getLatestVersion } from '../../get-latest-version.js'
 import styles from './AppHub.module.css'
 

src/pages/AppHubApp/AppHubApp.js → src/pages/AppHubApp/AppHubApp.jsx

@@ -4,7 +4,7 @@ import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { AppDetails } from '../../components/AppDetails/AppDetails.js'
+import { AppDetails } from '../../components/AppDetails/AppDetails.jsx'
 
 const query = {
     appHubApp: {

src/pages/CoreApps/CoreApps.js → src/pages/CoreApps/CoreApps.jsx

@@ -2,8 +2,8 @@ import { useDataQuery, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
-import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.js'
-import { AppsList } from '../../components/AppsList/AppsList.js'
+import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.jsx'
+import { AppsList } from '../../components/AppsList/AppsList.jsx'
 import { coreApps } from '../../core-apps.js'
 import { getLatestVersion } from '../../get-latest-version.js'
 import { semverGt } from '../../semver-helpers.js'

src/pages/CustomApps/CustomApps.js → src/pages/CustomApps/CustomApps.jsx

@@ -2,8 +2,8 @@ import { useDataQuery, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
-import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.js'
-import { AppsList } from '../../components/AppsList/AppsList.js'
+import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.jsx'
+import { AppsList } from '../../components/AppsList/AppsList.jsx'
 import { getLatestVersion } from '../../get-latest-version.js'
 import { semverGt } from '../../semver-helpers.js'
 

src/pages/InstalledApp/InstalledApp.js → src/pages/InstalledApp/InstalledApp.jsx

@@ -4,8 +4,8 @@ import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { AppDetails } from '../../components/AppDetails/AppDetails.js'
-import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.js'
+import { AppDetails } from '../../components/AppDetails/AppDetails.jsx'
+import { AppHubErrorNoticeBox } from '../../components/AppHubErrorNoticeBox/AppHubErrorNoticeBox.jsx'
 
 const appsQuery = {
     modules: {

src/pages/ManualInstall/ManualInstall.spec.js → src/pages/ManualInstall/ManualInstall.spec.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 import '@testing-library/jest-dom'
 import { useHistory } from 'react-router-dom'
 import { MockAlertStack } from '../../test-utils/index.js'
-import { ManualInstall } from './ManualInstall.js'
+import { ManualInstall } from './ManualInstall.jsx'
 
 jest.mock('react-router-dom', () => ({
     useHistory: jest.fn(() => ({
@@ -50,8 +50,13 @@ describe('Manual Install', () => {
             <ManualInstall />
         )
 
+        const user = userEvent.setup()
+        const file = new File(['hello'], 'hello.zip', {
+            type: 'application/zip',
+        })
+
         const fileInput = getByTestId('file-upload')
-        userEvent.upload(fileInput, 'testfile')
+        user.upload(fileInput, file)
 
         await findByText('App installed successfully')
         await userEvent.click(getByText('View app details'))
@@ -67,8 +72,13 @@ describe('Manual Install', () => {
             <ManualInstall />
         )
 
+        const user = userEvent.setup()
+        const file = new File(['hello'], 'hello.zip', {
+            type: 'application/zip',
+        })
+
         const fileInput = getByTestId('file-upload')
-        userEvent.upload(fileInput, 'testfile')
+        user.upload(fileInput, file)
 
         await findByText('App installed successfully')
         expect(queryByText('View app details')).not.toBeInTheDocument()
@@ -82,8 +92,13 @@ describe('Manual Install', () => {
             <ManualInstall />
         )
 
+        const user = userEvent.setup()
+        const file = new File(['hello'], 'hello.zip', {
+            type: 'application/zip',
+        })
+
         const fileInput = getByTestId('file-upload')
-        userEvent.upload(fileInput, 'testfile')
+        user.upload(fileInput, file)
 
         await findByText('Failed to install app:')
         expect(queryByText('View app details')).not.toBeInTheDocument()

src/test-utils/index.js

@@ -1 +1 @@
-export * from './MockAlertStack.js'
+export * from './MockAlertStack.jsx'