refactor: remove dhis/prop-types and upgrade dhis/ui

package.json

@@ -38,9 +38,9 @@
     "dependencies": {
         "@dhis2/app-runtime": "^3.2.0",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/prop-types": "^2.0.3",
-        "@dhis2/ui": "^7.2.0",
+        "@dhis2/ui": "^9.0.1",
         "moment": "^2.29.0",
+        "prop-types": "^15.8.1",
         "query-string": "^6.14.1",
         "react-router-dom": "^5.2.0",
         "semver": "^7.3.4",

src/components/AppCard/AppCard.js

@@ -1,4 +1,4 @@
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { AppIcon } from '../AppIcon/AppIcon.js'
 import styles from './AppCard.module.css'

src/components/AppCards/AppCards.js

@@ -1,4 +1,4 @@
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './AppCards.module.css'
 

src/components/AppDetails/AppDetails.js

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import { Card, Divider } from '@dhis2/ui'
 import moment from 'moment'
 import React, { useState } from 'react'

src/components/AppDetails/ManageInstalledVersion.js

@@ -1,7 +1,7 @@
 import { useAlert, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
-import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import { Button, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import semver from 'semver'
 import { useApi } from '../../api.js'

src/components/AppDetails/Versions.js

@@ -1,6 +1,6 @@
 import { useAlert, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import {
     Checkbox,
     CircularLoader,
@@ -142,6 +142,15 @@ const VersionsTable = ({
                                         : i18n.t('Install')
                                     : ''}
                             </Button>
+                            <a
+                                download
+                                href={version.downloadUrl}
+                                className={styles.downloadLink}
+                            >
+                                <Button small secondary>
+                                    {i18n.t('Download')}
+                                </Button>
+                            </a>
                         </TableCell>
                     </TableRow>
                 )
@@ -159,6 +168,8 @@ VersionsTable.propTypes = {
 
 export const Versions = ({ installedVersion, versions, onVersionInstall }) => {
     const [channelsFilter, setChannelsFilter] = useState(new Set(['stable']))
+    const [versionBeingInstalled, setVersionBeingInstalled] = useState(null)
+
     const installSuccessAlert = useAlert(i18n.t('App installed successfully'), {
         success: true,
     })
@@ -185,11 +196,14 @@ export const Versions = ({ installedVersion, versions, onVersionInstall }) => {
 
     const handleVersionInstall = async (version) => {
         try {
+            setVersionBeingInstalled(version.id)
             await installVersion(version.id)
             installSuccessAlert.show()
             onVersionInstall()
         } catch (error) {
             installErrorAlert.show({ error })
+        } finally {
+            setVersionBeingInstalled(null)
         }
     }
 
@@ -202,6 +216,7 @@ export const Versions = ({ installedVersion, versions, onVersionInstall }) => {
             />
             {filteredVersions.length > 0 ? (
                 <VersionsTable
+                    versionBeingInstalled={versionBeingInstalled}
                     installedVersion={installedVersion}
                     versions={filteredVersions}
                     onVersionInstall={handleVersionInstall}

src/components/AppIcon/AppIcon.js

@@ -1,4 +1,4 @@
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './AppIcon.module.css'
 

src/components/AppsList/AppsList.js

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import { InputField } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'

src/components/Sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import { Menu, MenuItem } from '@dhis2/ui'
 import React from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'

src/pages/AppHub/AppHub.js

@@ -1,6 +1,6 @@
 import { useConfig, useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import {
     InputField,
     Pagination,

src/pages/AppHubApp/AppHubApp.js

@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'

src/pages/InstalledApp/InstalledApp.js

@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'