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

dhis2 · Dec 15, 2023 · 7e2ae44 · 7e2ae44
1 parent e58a863
commit 7e2ae44
Show file tree

Hide file tree

Showing 9 changed files with 4,274 additions and 5,012 deletions.
diff --git a/src/components/AppDetails/AppDetails.js b/src/components/AppDetails/AppDetails.js
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from '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'

diff --git a/src/components/AppDetails/ManageInstalledVersion.js b/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 'prop-types'
 import { Button, CircularLoader } from '@dhis2/ui'
-import React from 'react'
+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}}', {

diff --git a/src/components/AppDetails/Versions.js b/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 '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,37 +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>
-                            <a
-                                download
-                                href={version.downloadUrl}
-                                className={styles.downloadLink}
-                            >
-                                <Button small secondary>
-                                    {i18n.t('Download')}
+                            <ButtonStrip>
+                                <Button
+                                    small
+                                    secondary
+                                    className={styles.installBtn}
+                                    disabled={
+                                        version.version === installedVersion ||
+                                        !!versionBeingInstalled
+                                    }
+                                    onClick={() => onVersionInstall(version)}
+                                    icon={
+                                        isVersionInstalling ? (
+                                            <CircularLoader small />
+                                        ) : null
+                                    }
+                                >
+                                    {installButtonText}
                                 </Button>
-                            </a>
+                                <a
+                                    download
+                                    href={version.downloadUrl}
+                                    className={styles.downloadLink}
+                                >
+                                    <Button small secondary>
+                                        {i18n.t('Download')}
+                                    </Button>
+                                </a>
+                            </ButtonStrip>
                         </TableCell>
                     </TableRow>
                 )

diff --git a/src/components/AppsList/AppsList.js b/src/components/AppsList/AppsList.js
@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from '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'

diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -1,7 +1,7 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from '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'

diff --git a/src/pages/AppHub/AppHub.js b/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 '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'

diff --git a/src/pages/AppHubApp/AppHubApp.js b/src/pages/AppHubApp/AppHubApp.js
@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from '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,6 +47,10 @@ export const AppHubApp = ({ match }) => {
             </NoticeBox>
         )
     }
+
+    // ToDo: This check here is the cause of the bug https://dhis2.atlassian.net/browse/DHIS2-15586
+    // custom apps seem to not have an app_hub_id, when these are surfaced then this should be resolved
+    // otherwise we need to find a different way to match the app ( || app.name === appHubApp.name would work but not reliable)
     const installedApp = installedApps.find(
         (app) => app.app_hub_id === appHubId
     )

diff --git a/src/pages/InstalledApp/InstalledApp.js b/src/pages/InstalledApp/InstalledApp.js
@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from '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'