feat: add open button to app details page [DHIS2-13885] (#564)

* feat: add open button to app details page * style: format
dhis2 · Oct 29, 2024 · f9854a2 · f9854a2 · dhis2-bot · Oct 29, 2024
1 parent 52ebe97
commit f9854a2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/i18n/en.pot b/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: 2024-09-26T12:27:51.211Z\n"
-"PO-Revision-Date: 2024-09-26T12:27:51.211Z\n"
+"POT-Creation-Date: 2024-10-29T11:22:33.823Z\n"
+"PO-Revision-Date: 2024-10-29T11:22:33.823Z\n"
 
 msgid ""
 "Your session has expired. Please refresh the page and login before trying "
@@ -33,6 +33,9 @@ msgstr "First published {{relativeTime}}"
 msgid "by {{- developer}}"
 msgstr "by {{- developer}}"
 
+msgid "Open"
+msgstr "Open"
+
 msgid "About this app"
 msgstr "About this app"
 

diff --git a/src/components/AppDetails/AppDetails.js b/src/components/AppDetails/AppDetails.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { Card, Divider } from '@dhis2/ui'
+import { Button, Card, Divider } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -122,6 +122,19 @@ export const AppDetails = ({
                         </span>
                     )}
                 </div>
+                <div>
+                    {installedApp?.launchUrl && (
+                        <a
+                            href={installedApp.launchUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <Button className={styles.openLink}>
+                                {i18n.t('Open')}
+                            </Button>
+                        </a>
+                    )}
+                </div>
             </header>
             <Divider />
             <section className={[styles.section, styles.mainSection].join(' ')}>

diff --git a/src/components/AppDetails/AppDetails.module.css b/src/components/AppDetails/AppDetails.module.css
@@ -9,7 +9,7 @@
 
 .header {
     display: grid;
-    grid-template-columns: 72px auto;
+    grid-template-columns: min-content auto min-content;
     grid-gap: var(--spacers-dp16);
     align-items: center;
     line-height: 24px;
@@ -44,7 +44,7 @@
 .mainSection {
     display: grid;
     grid-gap: var(--spacers-dp24);
-    grid-template-columns: 60% auto;
+    grid-template-columns: auto max-content;
 }
 
 .manageInstalledVersion {
@@ -127,3 +127,8 @@
 .downloadLink {
     text-decoration: none;
 }
+
+.openLink::after {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+    margin: 0px 3px 0px 5px;
+}
diff --git a/src/components/AppDetails/ManageInstalledVersion.js b/src/components/AppDetails/ManageInstalledVersion.js
@@ -96,11 +96,11 @@ export const ManageInstalledVersion = ({
     return (
         <div className={styles.manageInstalledVersion}>
             {!hasCompatibleVersions && (
-                <>
+                <div>
                     <em>
                         {i18n.t('There are no compatible versions available.')}
                     </em>
-                </>
+                </div>
             )}
             {hasCompatibleVersions && canInstall && (
                 <>
@@ -122,7 +122,7 @@ export const ManageInstalledVersion = ({
                 </>
             )}
             {canUninstall && (
-                <Button secondary onClick={handleUninstall}>
+                <Button secondary destructive onClick={handleUninstall}>
                     {i18n.t('Uninstall v{{appVersion}}', {
                         appVersion: installedApp.version,
                     })}