From e03a20057c2c255f477ebf45fe061bb243cca620 Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Thu, 14 Dec 2023 14:04:44 +0000
Subject: [PATCH] fix(DHIS2-13915): show spinner when an app is being installed

---
 .../AppDetails/AppDetails.module.css          |  4 ++
 .../AppDetails/ManageInstalledVersion.js      | 35 ++++++++----
 src/components/AppDetails/Versions.js         | 55 +++++++++----------
 src/pages/AppHubApp/AppHubApp.js              |  4 ++
 4 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/src/components/AppDetails/AppDetails.module.css b/src/components/AppDetails/AppDetails.module.css
index b1739feb..01c3cfde 100644
--- a/src/components/AppDetails/AppDetails.module.css
+++ b/src/components/AppDetails/AppDetails.module.css
@@ -127,3 +127,7 @@
 .downloadLink {
     text-decoration: none;
 }
+
+.tableActions {
+    display: flex;
+}
\ No newline at end of file
diff --git a/src/components/AppDetails/ManageInstalledVersion.js b/src/components/AppDetails/ManageInstalledVersion.js
index 768c55c0..75593601 100644
--- a/src/components/AppDetails/ManageInstalledVersion.js
+++ b/src/components/AppDetails/ManageInstalledVersion.js
@@ -2,7 +2,7 @@ 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 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
@@ -54,14 +58,16 @@ export const ManageInstalledVersion = ({
             errorAlert.show({
                 message: canUpdate
                     ? i18n.t('Failed to update app: {{errorMessage}}', {
-                          errorMessage: error.message,
-                          nsSeparator: '-:-',
-                      })
+                        errorMessage: error.message,
+                        nsSeparator: '-:-',
+                    })
                     : i18n.t('Failed to install app: {{errorMessage}}', {
-                          errorMessage: error.message,
-                          nsSeparator: '-:-',
-                      }),
+                        errorMessage: error.message,
+                        nsSeparator: '-:-',
+                    }),
             })
+        } finally {
+            setIsInstalling(false)
         }
     }
     const handleUninstall = async () => {
@@ -81,6 +87,10 @@ 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 +102,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
index 2f2fbe34..e860666b 100644
--- a/src/components/AppDetails/Versions.js
+++ b/src/components/AppDetails/Versions.js
@@ -110,6 +110,10 @@ 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 +124,28 @@ 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')}
+                            <div className={styles.tableActions}>
+                                <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>
+                            </div>
                         </TableCell>
                     </TableRow>
                 )
diff --git a/src/pages/AppHubApp/AppHubApp.js b/src/pages/AppHubApp/AppHubApp.js
index 0edd90e5..4a549f07 100644
--- a/src/pages/AppHubApp/AppHubApp.js
+++ b/src/pages/AppHubApp/AppHubApp.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
     )