feat: show app logo on app details pages

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-06-23T11:27:13.375Z\n"
-"PO-Revision-Date: 2021-06-23T11:27:13.375Z\n"
+"POT-Creation-Date: 2021-06-30T15:35:42.685Z\n"
+"PO-Revision-Date: 2021-06-30T15:35:42.685Z\n"
 
 msgid "Version {{version}} installed"
 msgstr "Version {{version}} installed"

src/components/AppCard/AppCard.js

@@ -1,7 +1,7 @@
 import { PropTypes } from '@dhis2/prop-types'
 import React from 'react'
+import { AppIcon } from '../AppIcon/AppIcon'
 import styles from './AppCard.module.css'
-import { AppIcon } from './AppIcon/AppIcon'
 
 export const AppCard = ({
     iconSrc,

src/components/AppDetails/AppDetails.js

@@ -3,7 +3,9 @@ import { PropTypes } from '@dhis2/prop-types'
 import { Card, Divider } from '@dhis2/ui'
 import moment from 'moment'
 import React, { useState } from 'react'
+import { getAppIconSrc } from '../../get-app-icon-src'
 import { getLatestVersion } from '../../get-latest-version'
+import { AppIcon } from '../AppIcon/AppIcon'
 import styles from './AppDetails.module.css'
 import { ManageInstalledVersion } from './ManageInstalledVersion'
 import { Versions } from './Versions'
@@ -92,22 +94,30 @@ export const AppDetails = ({
     const appDeveloper = appHubApp
         ? appHubApp.developer.organisation || appHubApp.developer.name
         : installedApp.developer?.company || installedApp.developer?.name
+    const logo = installedApp
+        ? getAppIconSrc(installedApp)
+        : appHubApp.images.find(i => i.logo)?.imageUrl
     const screenshots = appHubApp?.images
         .filter(i => !i.logo)
         .map(i => i.imageUrl)
 
     return (
         <Card className={styles.appCard}>
             <header className={styles.header}>
-                <h1 className={styles.headerName}>{appName}</h1>
-                {appDeveloper && (
-                    <span className={styles.headerDeveloper}>
-                        {i18n.t('by {{- developer}}', {
-                            developer: appDeveloper,
-                            context: 'developer of application',
-                        })}
-                    </span>
-                )}
+                <div>
+                    <AppIcon src={logo} />
+                </div>
+                <div>
+                    <h1 className={styles.headerName}>{appName}</h1>
+                    {appDeveloper && (
+                        <span className={styles.headerDeveloper}>
+                            {i18n.t('by {{- developer}}', {
+                                developer: appDeveloper,
+                                context: 'developer of application',
+                            })}
+                        </span>
+                    )}
+                </div>
             </header>
             <Divider />
             <section className={[styles.section, styles.mainSection].join(' ')}>

src/components/AppDetails/AppDetails.module.css

@@ -7,6 +7,10 @@
 }
 
 .header {
+    display: grid;
+    grid-template-columns: 72px auto;
+    grid-gap: var(--spacers-dp16);
+    align-items: center;
     line-height: 24px;
 }
 

src/components/AppsList/AppsList.js

@@ -4,21 +4,13 @@ import { InputField } from '@dhis2/ui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'
+import { getAppIconSrc } from '../../get-app-icon-src'
 import { AppCard } from '../AppCard/AppCard'
 import { AppCards as AppCards_ } from '../AppCards/AppCards'
 import styles from './AppsList.module.css'
 
 const AppCards = ({ apps }) => {
     const history = useHistory()
-    const getIconSrc = app => {
-        const iconSize = ['128', '48', '16'].find(
-            iconSize => iconSize in app.icons
-        )
-        if (iconSize) {
-            return `${app.baseUrl}/${app.icons[iconSize]}`
-        }
-        return null
-    }
     const handleAppClick = app => {
         if (!app.version && !app.appHub) {
             return
@@ -33,7 +25,7 @@ const AppCards = ({ apps }) => {
             {apps.map(app => (
                 <AppCard
                     key={app.short_name}
-                    iconSrc={getIconSrc(app)}
+                    iconSrc={getAppIconSrc(app)}
                     appName={app.name}
                     appDeveloper={app.developer?.company || app.developer?.name}
                     appVersion={app.version}

src/get-app-icon-src.js

@@ -0,0 +1,7 @@
+export const getAppIconSrc = app => {
+    const iconSize = ['128', '48', '16'].find(iconSize => iconSize in app.icons)
+    if (iconSize) {
+        return `${app.baseUrl}/${app.icons[iconSize]}`
+    }
+    return null
+}