fix(DHIS2-13915): show spinner when an app is being installed

.github/workflows/dhis2-preview-pr.yml

@@ -24,7 +24,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile

.github/workflows/dhis2-verify-app.yml

@@ -20,7 +20,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
@@ -42,7 +42,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
@@ -59,7 +59,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
@@ -84,7 +84,7 @@ jobs:
 
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 16.x
 
             - uses: actions/download-artifact@v2
               with:

.nvmrc

@@ -0,0 +1 @@
+v16

package.json

@@ -38,13 +38,16 @@
     "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",
         "use-debounce": "^6.0.0",
         "use-query-params": "^1.2.0"
+    },
+    "resolutions": {
+        "@dhis2/ui": "^9.0.1"
     }
 }

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,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 import { Card, Divider } from '@dhis2/ui'
 import moment from 'moment'
+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'

src/components/AppDetails/ManageInstalledVersion.js

@@ -1,8 +1,8 @@
 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 React from 'react'
+import { Button, CircularLoader } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 import semver from 'semver'
 import { useApi } from '../../api.js'
 import { getLatestVersion } from '../../get-latest-version.js'
@@ -41,8 +41,12 @@ export const ManageInstalledVersion = ({
     const { installVersion, uninstallApp } = useApi()
     const successAlert = useAlert(({ message }) => message, { success: true })
     const errorAlert = useAlert(({ message }) => message, { critical: true })
+
+    const [isInstalling, setIsInstalling] = useState(false)
+
     const handleInstall = async () => {
         try {
+            setIsInstalling(true)
             await installVersion(latestVersion.id)
             successAlert.show({
                 message: canUpdate
@@ -62,6 +66,8 @@ export const ManageInstalledVersion = ({
                           nsSeparator: '-:-',
                       }),
             })
+        } finally {
+            setIsInstalling(false)
         }
     }
     const handleUninstall = async () => {
@@ -81,6 +87,12 @@ export const ManageInstalledVersion = ({
         }
     }
 
+    const installButtonText = isInstalling
+        ? i18n.t('Installing...')
+        : canUpdate
+        ? i18n.t('Update to latest version')
+        : i18n.t('Install')
+
     return (
         <div className={styles.manageInstalledVersion}>
             {!hasCompatibleVersions && (
@@ -92,10 +104,13 @@ export const ManageInstalledVersion = ({
             )}
             {hasCompatibleVersions && canInstall && (
                 <>
-                    <Button primary onClick={handleInstall}>
-                        {canUpdate
-                            ? i18n.t('Update to latest version')
-                            : i18n.t('Install')}
+                    <Button
+                        primary
+                        onClick={handleInstall}
+                        disabled={isInstalling}
+                        icon={isInstalling ? <CircularLoader small /> : null}
+                    >
+                        {installButtonText}
                     </Button>
                     <span className={styles.manageInstalledVersionDescription}>
                         {i18n.t('{{channel}} release {{version}}', {

src/components/AppDetails/Versions.js

@@ -1,6 +1,5 @@
 import { useAlert, useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 import {
     Checkbox,
     CircularLoader,
@@ -12,8 +11,10 @@ import {
     TableBody,
     TableRow,
     TableCell,
+    ButtonStrip,
 } from '@dhis2/ui'
 import moment from 'moment'
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import semver from 'semver'
 import { useApi } from '../../api.js'
@@ -110,6 +111,11 @@ const VersionsTable = ({
         <TableBody>
             {versions.map((version) => {
                 const isVersionInstalling = versionBeingInstalled === version.id
+                const installButtonText = isVersionInstalling
+                    ? i18n.t('Installing...')
+                    : version.version === installedVersion
+                    ? i18n.t('Installed')
+                    : i18n.t('Install')
                 return (
                     <TableRow key={version.id} dataTest="versions-table-row">
                         <TableCell>{version.version}</TableCell>
@@ -120,28 +126,34 @@ const VersionsTable = ({
                             {moment(version.created).format('ll')}
                         </TableCell>
                         <TableCell>
-                            <Button
-                                small
-                                secondary
-                                className={styles.installBtn}
-                                disabled={
-                                    version.version === installedVersion ||
-                                    versionBeingInstalled
-                                }
-                                onClick={() => onVersionInstall(version)}
-                            >
-                                {isVersionInstalling && (
-                                    <>
-                                        {i18n.t('Installing...')}
-                                        <CircularLoader small />
-                                    </>
-                                )}
-                                {!isVersionInstalling
-                                    ? version.version === installedVersion
-                                        ? i18n.t('Installed')
-                                        : i18n.t('Install')
-                                    : ''}
-                            </Button>
+                            <ButtonStrip>
+                                <Button
+                                    small
+                                    secondary
+                                    className={styles.installBtn}
+                                    disabled={
+                                        version.version === installedVersion ||
+                                        !!versionBeingInstalled
+                                    }
+                                    onClick={() => onVersionInstall(version)}
+                                    icon={
+                                        isVersionInstalling ? (
+                                            <CircularLoader small />
+                                        ) : null
+                                    }
+                                >
+                                    {installButtonText}
+                                </Button>
+                                <a
+                                    download
+                                    href={version.downloadUrl}
+                                    className={styles.downloadLink}
+                                >
+                                    <Button small secondary>
+                                        {i18n.t('Download')}
+                                    </Button>
+                                </a>
+                            </ButtonStrip>
                         </TableCell>
                     </TableRow>
                 )
@@ -159,6 +171,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 +199,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 +219,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,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 import { InputField } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'

src/components/Sidebar/Sidebar.js

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

src/pages/AppHub/AppHub.js

@@ -1,13 +1,13 @@
 import { useConfig, useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 import {
     InputField,
     Pagination,
     NoticeBox,
     CenteredContent,
     CircularLoader,
 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useDebounce } from 'use-debounce'
@@ -117,7 +117,7 @@
     })
     useEffect(() => {
         refetch(queryParams)
     }, [debouncedQuery, queryParams.page])
     const handleQueryChange = (query) => {
         setQueryParams({ query, page: 1 }, 'replace')
     }

src/pages/AppHubApp/AppHubApp.js

@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 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'
@@ -47,8 +47,21 @@ export const AppHubApp = ({ match }) => {
             </NoticeBox>
         )
     }
+
+    // ToDo: This is a workaround to match non-core apps to fix this bug https://dhis2.atlassian.net/browse/DHIS2-15586
+    // we don't have an app ID for these apps, so we can't reliably match them. This is the best we can do for now:
+    // to match with the name + developer email
+    const matchesNonCoreApp = (installedApp, appHubDetails) => {
+        return (
+            !installedApp.app_hub_id &&
+            installedApp.name === appHubDetails.name &&
+            installedApp.developer?.email === appHubDetails.developer?.email
+        )
+    }
+
     const installedApp = installedApps.find(
-        (app) => app.app_hub_id === appHubId
+        (app) =>
+            app.app_hub_id === appHubId || matchesNonCoreApp(app, appHubApp)
     )
 
     return (

src/pages/InstalledApp/InstalledApp.js

@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 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'