fix: ensure proposed update is for later version

Author: mediremi

src/components/AppDetails/AppDetails.js

@@ -6,6 +6,7 @@ import moment from 'moment'
 import React, { useState } from 'react'
 import { useApi } from '../../api'
 import { getLatestVersion } from '../../get-latest-version'
+import { semverGt } from '../../semver-gt'
 import styles from './AppDetails.module.css'
 import { channelToDisplayName } from './channel-to-display-name'
 import { Versions } from './Versions'
@@ -50,7 +51,7 @@ const ManageInstalledVersion = ({ installedApp, versions, reloadPage }) => {
 
     return (
         <div className={styles.manageInstalledVersion}>
-            {latestVersion && installedApp.version !== latestVersion && (
+            {latestVersion && semverGt(latestVersion, installedApp.version) && (
                 <>
                     <Button primary onClick={handleUpdate}>
                         {i18n.t('Update to latest version')}
@@ -155,9 +156,9 @@ Screenshots.propTypes = {
 
 export const AppDetails = ({ installedApp, appHubApp, onVersionInstall }) => {
     const appName = installedApp ? installedApp.name : appHubApp.name
-    const appDeveloper = installedApp
-        ? installedApp.developer.company || installedApp.developer.name
-        : appHubApp.developer.organisation || appHubApp.developer.name
+    const appDeveloper = appHubApp
+        ? appHubApp.developer.organisation || appHubApp.developer.name
+        : installedApp.developer?.company || installedApp.developer?.name
     const screenshots = appHubApp?.images
         .filter(i => !i.logo)
         .map(i => i.imageUrl)
@@ -166,12 +167,14 @@ export const AppDetails = ({ installedApp, appHubApp, onVersionInstall }) => {
         <Card className={styles.appCard}>
             <header className={styles.header}>
                 <h1 className={styles.headerName}>{appName}</h1>
-                <span className={styles.headerDeveloper}>
-                    {i18n.t('by {{developer}}', {
-                        developer: appDeveloper,
-                        context: 'developer of application',
-                    })}
-                </span>
+                {appDeveloper && (
+                    <span className={styles.headerDeveloper}>
+                        {i18n.t('by {{developer}}', {
+                            developer: appDeveloper,
+                            context: 'developer of application',
+                        })}
+                    </span>
+                )}
             </header>
             <Divider />
             <section className={[styles.section, styles.mainSection].join(' ')}>

src/get-latest-version.js

@@ -1,5 +1,9 @@
 import semver from 'semver'
 
+// TODO: Only return versions from stable channel?
+// Or take channel as param and get latest version for same channel as installed
+// app with stable being default
+
 export const getLatestVersion = versions =>
     versions.reduce((latestVersion, version) => {
         const parsedLatestVersion = semver.coerce(latestVersion.version)

src/pages/CoreApps/CoreApps.js

@@ -5,6 +5,7 @@ import React from 'react'
 import { AppList } from '../../components/AppList/AppList'
 import { coreApps } from '../../core-apps'
 import { getLatestVersion } from '../../get-latest-version'
+import { semverGt } from '../../semver-gt'
 
 const query = {
     coreApps: {
@@ -74,11 +75,15 @@ export const CoreApps = () => {
             ...app,
             appHub:
                 app.app_hub_id &&
-                data?.appHub.find(({ id }) => id === app.app_hub_id),
+                data.appHub.find(({ id }) => id === app.app_hub_id),
         }))
     const appsWithUpdates = apps.filter(
         app =>
-            app.appHub && app.version !== getLatestVersion(app.appHub.versions)
+            app.appHub &&
+            semverGt(
+                getLatestVersion(app.appHub.versions)?.version,
+                app.version
+            )
     )
 
     return (

src/pages/CustomApps/CustomApps.js

@@ -1,8 +1,10 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
+import { NoticeBox, CenteredContent, CircularLoader } from '@dhis2/ui'
 import React from 'react'
 import { AppList } from '../../components/AppList/AppList'
 import { getLatestVersion } from '../../get-latest-version'
+import { semverGt } from '../../semver-gt'
 
 const query = {
     customApps: {
@@ -11,6 +13,8 @@ const query = {
             bundled: false,
         },
     },
+    // TODO: Add ability to request certain app IDs to `/v2/apps` API and use
+    // that instead
     appHub: {
         resource: 'appHub/v1/apps',
     },
@@ -19,32 +23,46 @@ const query = {
 export const CustomApps = () => {
     const { loading, error, data } = useDataQuery(query)
 
-    const apps = data?.customApps
+    if (error) {
+        return (
+            <NoticeBox
+                error
+                title={i18n.t(
+                    'Something went wrong whilst loading your custom apps'
+                )}
+            >
+                {error.message}
+            </NoticeBox>
+        )
+    }
+
+    if (loading) {
+        return (
+            <CenteredContent>
+                <CircularLoader />
+            </CenteredContent>
+        )
+    }
+
+    const apps = data.customApps
         .filter(app => !app.bundled)
         .map(app => ({
             ...app,
-            appHub: data.appHub.find(({ id, name, developer }) => {
-                if (app.app_hub_id) {
-                    return id === app.app_hub_id
-                }
-                return (
-                    name === app.name &&
-                    app.developer &&
-                    (developer.organisation ===
-                        (app.developer.company || app.developer.name) ||
-                        developer.name === app.developer.name)
-                )
-            }),
+            appHub:
+                app.app_hub_id &&
+                data.appHub.find(({ id }) => id === app.app_hub_id),
         }))
-    const appsWithUpdates = apps?.filter(
+    const appsWithUpdates = apps.filter(
         app =>
-            app.appHub && getLatestVersion(app.appHub.versions) !== app.version
+            app.appHub &&
+            semverGt(
+                getLatestVersion(app.appHub.versions)?.version,
+                app.version
+            )
     )
 
     return (
         <AppList
-            error={error}
-            loading={loading}
             apps={apps}
             appsWithUpdates={appsWithUpdates}
             errorLabel={i18n.t(

src/pages/InstalledApp/InstalledApp.js

@@ -57,11 +57,6 @@ export const InstalledApp = ({ match }) => {
         )
     }
 
-    // XXX
-    if (app.bundled && !app.app_hub_id && app.name === 'App Management') {
-        app.app_hub_id = '28823170-1203-46d1-81d5-eea67abae41c'
-    }
-
     const module = modules.find(app => app.name === `dhis-web-${appKey}`)
     // If the app is a core app, then `module.displayName` should contain its translated name
     if (coreApp && module) {

src/semver-gt.js

@@ -0,0 +1,10 @@
+import semver from 'semver'
+
+const parseVersion = semver.clean
+
+export const semverGt = (a, b) => {
+    if (parseVersion(a) === null || parseVersion(b) === null) {
+        return false
+    }
+    return semver.gt(parseVersion(a), parseVersion(b))
+}