feat: start work on app versions

dhis2 · Feb 16, 2021 · 49e8280 · 49e8280
1 parent 69acabf
commit 49e8280
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 4 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: 2021-02-15T17:07:26.410Z\n"
-"PO-Revision-Date: 2021-02-15T17:07:26.410Z\n"
+"POT-Creation-Date: 2021-02-16T16:35:31.694Z\n"
+"PO-Revision-Date: 2021-02-16T16:35:31.694Z\n"
 
 msgid "App installed successfully"
 msgstr ""
@@ -26,6 +26,21 @@ msgstr ""
 msgid "No apps found"
 msgstr ""
 
+msgid "by {{developer}}"
+msgstr ""
+
+msgid "About this app"
+msgstr ""
+
+msgid "Screenshots"
+msgstr ""
+
+msgid "All versions of this application"
+msgstr ""
+
+msgid "Channel"
+msgstr ""
+
 msgid "Something went wrong whilst loading your custom apps"
 msgstr ""
 
@@ -49,3 +64,11 @@ msgstr ""
 
 msgid "Manual install"
 msgstr ""
+
+msgctxt "creator of AppHub application"
+msgid "by {{developer}}"
+msgstr ""
+
+msgctxt "AppHub release channel"
+msgid "Channel"
+msgstr ""
diff --git a/src/components/CustomAppDetails.js b/src/components/CustomAppDetails.js
@@ -7,6 +7,9 @@ import {
     NoticeBox,
     CenteredContent,
     CircularLoader,
+    Checkbox,
+    SingleSelectField,
+    SingleSelectOption,
 } from '@dhis2/ui'
 import React, { useState } from 'react'
 import styles from './CustomAppDetails.module.css'
@@ -48,6 +51,80 @@ Screenshots.propTypes = {
     screenshots: PropTypes.array.isRequired,
 }
 
+const Versions = ({ versions }) => {
+    const [channelFilters, setChannelFilters] = useState(new Set(['Stable']))
+    const hasChannel = channel => versions.some(v => v.channel == channel)
+
+    const ChannelCheckbox = ({ name, label }) => {
+        const handleChange = ({ checked }) => {
+            const newState = new Set(channelFilters)
+            if (checked) {
+                newState.add(name)
+            } else {
+                newState.delete(name)
+            }
+            setChannelFilters(newState)
+        }
+
+        return hasChannel(name) ? (
+            <div className={styles.channelCheckbox}>
+                <Checkbox
+                    checked={channelFilters.has(name)}
+                    disabled={
+                        channelFilters.size == 1 && channelFilters.has(name)
+                    }
+                    onChange={handleChange}
+                    label={label}
+                />
+            </div>
+        ) : null
+    }
+
+    return (
+        <div className={styles.versionsContainer}>
+            <div className={styles.versionsFilters}>
+                <h3 className={styles.sectionSubheader}>
+                    {i18n.t('Channel', { context: 'AppHub release channel' })}
+                </h3>
+                <ChannelCheckbox
+                    name={'Stable'}
+                    label={i18n.t('Stable', {
+                        context: 'AppHub release channel',
+                    })}
+                />
+                <ChannelCheckbox
+                    name={'Development'}
+                    label={i18n.t('Development', {
+                        context: 'AppHub release channel',
+                    })}
+                />
+                <ChannelCheckbox
+                    name={'Canary'}
+                    label={i18n.t('Canary', {
+                        context: 'AppHub release channel',
+                    })}
+                />
+
+                <div className={styles.dhisVersionSelect}>
+                    <SingleSelectField
+                        placeholder={i18n.t('Select a version')}
+                        label={i18n.t('Compatible with DHIS2 version')}
+                        clearable
+                        selected="2.35"
+                        onChange={() => null}
+                    >
+                        <SingleSelectOption label="2.35" value="2.35" />
+                    </SingleSelectField>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+Versions.propTypes = {
+    versions: PropTypes.array.isRequired,
+}
+
 const CustomAppDetails = ({ match }) => {
     const query = {
         app: {
@@ -83,6 +160,7 @@ const CustomAppDetails = ({ match }) => {
                     {i18n.t('by {{developer}}', {
                         developer:
                             app.developer.organisation || app.developer.name,
+                        context: 'creator of AppHub application',
                     })}
                 </span>
             </header>
@@ -109,7 +187,7 @@ const CustomAppDetails = ({ match }) => {
                 <h2 className={styles.sectionHeader}>
                     {i18n.t('All versions of this application')}
                 </h2>
-                <p>Some other section</p>
+                <Versions versions={app.versions} />
             </div>
         </Card>
     )

diff --git a/src/components/CustomAppDetails.module.css b/src/components/CustomAppDetails.module.css
@@ -26,7 +26,14 @@
     font-size: 16px;
     font-weight: 500;
     margin: 0;
-    margin-bottom: 16px;
+    margin-bottom: var(--spacers-dp16);
+}
+
+.sectionSubheader {
+    font-size: 14px;
+    font-weight: 500;
+    margin: 0;
+    margin-bottom: var(--spacers-dp8);
 }
 
 .screenshots {
@@ -58,3 +65,21 @@
 .otherScreenshotCurrent:hover, .otherScreenshotCurrent:focus {
     border-color: var(--colors-blue500);
 }
+
+.versionsContainer {
+    border: 1px solid var(--colors-grey300);
+}
+
+.versionsFilters {
+    padding: var(--spacers-dp16) var(--spacers-dp8);
+}
+
+.channelCheckbox {
+    display: inline-block;
+    margin-right: var(--spacers-dp24);
+}
+
+.dhisVersionSelect {
+    max-width: 200px;
+    margin-top: var(--spacers-dp16);
+}