Skip to content

Commit

Permalink
feat: add page for App Hub app
Browse files Browse the repository at this point in the history
  • Loading branch information
mediremi committed Mar 24, 2021
1 parent 9a6d68f commit e9610d5
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 69 deletions.
19 changes: 11 additions & 8 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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-03-24T20:15:27.415Z\n"
"PO-Revision-Date: 2021-03-24T20:15:27.415Z\n"
"POT-Creation-Date: 2021-03-24T22:33:00.378Z\n"
"PO-Revision-Date: 2021-03-24T22:33:00.378Z\n"

msgid "App uninstalled successfully"
msgstr ""
Expand Down Expand Up @@ -101,9 +101,18 @@ msgstr ""
msgid "Manual install"
msgstr ""

msgid "Search AppHub apps"
msgstr ""

msgid "Something went wrong whilst loading App Hub apps"
msgstr ""

msgid "Error loading app"
msgstr ""

msgid "App not found"
msgstr ""

msgid "Something went wrong whilst loading your core apps"
msgstr ""

Expand All @@ -128,12 +137,6 @@ msgstr ""
msgid "Search installed custom apps"
msgstr ""

msgid "Error loading app"
msgstr ""

msgid "App not found"
msgstr ""

msgid "Uploading..."
msgstr ""

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"@dhis2/prop-types": "^2.0.3",
"@dhis2/ui": "^6.5.5",
"moment": "2.24",
"query-string": "^7.0.0",
"query-string": "6",
"react-router-dom": "^5.2.0",
"semver": "^7.3.4",
"use-debounce": "^6.0.0",
Expand Down
4 changes: 1 addition & 3 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@ import { QueryParamProvider } from 'use-query-params'
import styles from './App.module.css'
import { Sidebar } from './components/Sidebar/Sidebar'
import { AppHub } from './pages/AppHub/AppHub'
import { AppHubApp } from './pages/AppHubApp/AppHubApp'
import { CoreApps } from './pages/CoreApps/CoreApps'
import { CustomApps } from './pages/CustomApps/CustomApps'
import { InstalledApp } from './pages/InstalledApp/InstalledApp'
import { ManualInstall } from './pages/ManualInstall/ManualInstall'
import './locales'

// XXX
const AppHubApp = () => null

const App = () => (
<HashRouter>
<QueryParamProvider
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppCard/AppIcon/AppIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const FallbackIcon = () => (

export const AppIcon = ({ src }) => (
<div className={styles.appIcon}>
{src ? <img src={src} /> : <FallbackIcon />}
{src ? <img src={src} loading="lazy" /> : <FallbackIcon />}
</div>
)

Expand Down
31 changes: 16 additions & 15 deletions src/components/AppDetails/AppDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Versions } from './Versions'

const ManageInstalledVersion = ({
installedApp,
versions,
versions = [],
onVersionInstall,
onUninstall,
}) => {
Expand Down Expand Up @@ -56,10 +56,13 @@ const ManageInstalledVersion = ({

return (
<div className={styles.manageInstalledVersion}>
{latestVersion && semverGt(latestVersion, installedApp.version) && (
{latestVersion && (
<>
<Button primary onClick={handleUpdate}>
{i18n.t('Update to latest version')}
{installedApp &&
semverGt(latestVersion, installedApp.version)
? i18n.t('Update to latest version')
: i18n.t('Install')}
</Button>
<span className={styles.manageInstalledVersionDescription}>
{i18n.t('{{channel}} release {{version}}', {
Expand All @@ -70,7 +73,7 @@ const ManageInstalledVersion = ({
</span>
</>
)}
{!installedApp.bundled && (
{installedApp && !installedApp.bundled && (
<Button secondary onClick={handleUninstall}>
{i18n.t('Uninstall')}
</Button>
Expand Down Expand Up @@ -180,7 +183,7 @@ export const AppDetails = ({
<h1 className={styles.headerName}>{appName}</h1>
{appDeveloper && (
<span className={styles.headerDeveloper}>
{i18n.t('by {{developer}}', {
{i18n.t('by {{- developer}}', {
developer: appDeveloper,
context: 'developer of application',
})}
Expand All @@ -206,15 +209,13 @@ export const AppDetails = ({
</div>
)}
<div>
{installedApp && (
<ManageInstalledVersion
installedApp={installedApp}
versions={appHubApp?.versions || []}
onVersionInstall={onVersionInstall}
onUninstall={onUninstall}
/>
)}
{appHubApp && (
<ManageInstalledVersion
installedApp={installedApp}
versions={appHubApp?.versions}
onVersionInstall={onVersionInstall}
onUninstall={onUninstall}
/>
{installedApp && appHubApp && (
<div>
<h2 className={styles.sectionHeader}>
{i18n.t('Additional information')}
Expand Down Expand Up @@ -248,7 +249,7 @@ export const AppDetails = ({
)}
</h2>
<Versions
installedVersion={installedApp.version}
installedVersion={installedApp?.version}
versions={appHubApp.versions}
onVersionInstall={onVersionInstall}
/>
Expand Down
18 changes: 13 additions & 5 deletions src/components/AppDetails/Versions.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,11 +188,19 @@ export const Versions = ({ installedVersion, versions, onVersionInstall }) => {
channelsFilter={channelsFilter}
setChannelsFilter={setChannelsFilter}
/>
<VersionsTable
installedVersion={installedVersion}
versions={filteredVersions}
onVersionInstall={handleVersionInstall}
/>
{filteredVersions.length > 0 ? (
<VersionsTable
installedVersion={installedVersion}
versions={filteredVersions}
onVersionInstall={handleVersionInstall}
/>
) : (
<em>
{i18n.t(
'There are no compatible versions matching your criteria'
)}
</em>
)}
</div>
)
}
Expand Down
65 changes: 65 additions & 0 deletions src/pages/AppHubApp/AppHubApp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
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 React from 'react'
import { useHistory } from 'react-router-dom'
import { AppDetails } from '../../components/AppDetails/AppDetails'
import { coreApps } from '../../core-apps'

const query = {
appHubApp: {
resource: 'appHub/v1/apps',
id: ({ appHubId }) => appHubId,
},
installedApps: {
resource: 'apps',
},
}

export const AppHubApp = ({ match }) => {
const { appHubId } = match.params
const history = useHistory()
const { loading, error, data, refetch } = useDataQuery(query, {
variables: { appHubId },
})

if (error) {
return (
<NoticeBox error title={i18n.t('Error loading app')}>
{error.message}
</NoticeBox>
)
}

if (loading) {
return (
<CenteredContent>
<CircularLoader />
</CenteredContent>
)
}

const { appHubApp, installedApps } = data
if (!appHubApp) {
return (
<NoticeBox error title={i18n.t('Error loading app')}>
{i18n.t('App not found')}
</NoticeBox>
)
}
const installedApp = installedApps.find(app => app.app_hub_id === appHubId)

return (
<AppDetails
installedApp={installedApp}
appHubApp={appHubApp}
onVersionInstall={refetch}
onUninstall={() => history.push('/app-hub')}
/>
)
}

AppHubApp.propTypes = {
match: PropTypes.object.isRequired,
}
49 changes: 13 additions & 36 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1125,14 +1125,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.1.2":
version "7.12.13"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.13.tgz#0a21452352b02542db0ffb928ac2d3ca7cb6d66d"
integrity sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
version "7.13.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.7.tgz#d494e39d198ee9ca04f4dcb76d25d9d7a1dc961a"
integrity sha512-h+ilqoX998mRVM5FtB5ijRuHUDVt5l3yfoOi2uh18Z/O3hvyaHQ39NpxVkCIG5yFs+mLq/ewFp8Bss6zmWv6ZA==
Expand Down Expand Up @@ -4466,12 +4459,7 @@ core-js@^2.4.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==

core-js@^3.6.1:
version "3.8.3"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
integrity sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==

core-js@^3.6.5:
core-js@^3.6.1, core-js@^3.6.5:
version "3.9.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.0.tgz#790b1bb11553a2272b36e2625c7179db345492f8"
integrity sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==
Expand Down Expand Up @@ -8540,11 +8528,6 @@ [email protected]:
import-local "^3.0.2"
jest-cli "^26.6.0"

js-tokens@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=

"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
Expand Down Expand Up @@ -9015,19 +8998,13 @@ loglevel@^1.6.8:
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
dependencies:
js-tokens "^3.0.0 || ^4.0.0"

loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
js-tokens "^3.0.0"

lower-case@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
Expand Down Expand Up @@ -11207,6 +11184,16 @@ qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

query-string@6:
version "6.14.1"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
dependencies:
decode-uri-component "^0.2.0"
filter-obj "^1.1.0"
split-on-first "^1.0.0"
strict-uri-encode "^2.0.0"

query-string@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
Expand All @@ -11215,16 +11202,6 @@ query-string@^4.1.0:
object-assign "^4.1.0"
strict-uri-encode "^1.0.0"

query-string@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.0.tgz#aaad2c8d5c6a6d0c6afada877fecbd56af79e609"
integrity sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA==
dependencies:
decode-uri-component "^0.2.0"
filter-obj "^1.1.0"
split-on-first "^1.0.0"
strict-uri-encode "^2.0.0"

querystring-es3@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
Expand Down

0 comments on commit e9610d5

Please sign in to comment.