feat: view changes between app versions based on the Changelog

.github/workflows/dhis2-verify-commits.yml

@@ -18,6 +18,20 @@ jobs:
             - run: yarn install --frozen-lockfile
             - id: lint
               run: yarn lint
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 20
+                  cache: 'yarn'
+            - run: yarn install --frozen-lockfile
+            - run: yarn test:client --coverage
+            - name: Upload coverage reports to Codecov
+              uses: codecov/[email protected]
+              with:
+                  token: ${{ secrets.CODECOV_TOKEN }}
     lint-pr-title:
         runs-on: ubuntu-latest
         steps:

.gitignore

@@ -17,4 +17,5 @@ build/
 cypress.env.json
 
 # ignore tools download cache
-tools/apps
+tools/apps
+coverage/

client/default.config.js

@@ -33,7 +33,7 @@ module.exports = {
             APPROVED: 'Approved',
         },
         appTypeToDisplayName: {
-            APP: 'Standard',
+            APP: 'Application',
             DASHBOARD_WIDGET: 'Dashboard',
             TRACKER_DASHBOARD_WIDGET: 'Tracker Dashboard',
         },

client/jest-setup.js

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom'
+import { configure } from '@testing-library/dom'
+const util = require('util')
+const { TextEncoder, TextDecoder } = util
+Object.assign(global, { TextDecoder, TextEncoder })
+
+configure({ testIdAttribute: 'data-test' })

client/jest.config.js

@@ -0,0 +1,19 @@
+/** @type {import('jest').Config} */
+const config = {
+    verbose: true,
+    testEnvironment: 'jest-fixed-jsdom',
+    setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+
+    moduleNameMapper: {
+        '@dhis2/app-runtime': '<rootDir>/app-runtime-mock.js',
+        'react-markdown': '<rootDir>/test/mocks/react-markdown-mock.js',
+        '@react-hook': '<rootDir>/app-runtime-mock.js',
+        '\\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy',
+        '\\.(css|scss)$': 'identity-obj-proxy',
+        '^src(.*)$': '<rootDir>/src$1',
+        '^config(.*)$': '<rootDir>/config$1',
+        '^mocks(.*)$': '<rootDir>/test/mocks$1',
+    },
+}
+
+module.exports = config

client/package.json

@@ -9,11 +9,12 @@
     "scripts": {
         "build": "cross-env NODE_ENV=production webpack --mode production --progress --config ./webpack.config.js",
         "start": "cross-env NODE_ENV=development webpack serve",
-        "test": "cross-env NODE_ENV=test mocha --config test/.mocharc.js",
-        "format": "yarn format:js && yarn format:text",
+        "test": "cross-env NODE_ENV=test jest",
+        "format": "yarn format:js && yarn format:text && yarn format:css",
         "format:staged": "yarn format:js --staged && yarn format:text --staged",
         "format:js": "d2-style apply js",
-        "format:text": "d2-style apply text"
+        "format:text": "d2-style apply text",
+        "format:css": "d2-style apply css"
     },
     "dependencies": {
         "@auth0/auth0-react": "^1.6.0",
@@ -50,6 +51,8 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/register": "^7.15.3",
         "@svgr/webpack": "^5.5.0",
+        "@testing-library/jest-dom": "^6",
+        "@testing-library/react": "^12",
         "babel-loader": "^8.2.2",
         "babel-plugin-rewire": "^1.2.0",
         "babel-plugin-transform-imports": "^2.0.0",
@@ -61,9 +64,13 @@
         "eslint-import-resolver-webpack": "^0.13.9",
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.3.2",
+        "identity-obj-proxy": "^3.0.0",
         "isomorphic-fetch": "^3.0.0",
+        "jest": "^29.7.0",
+        "jest-fixed-jsdom": "^0.0.9",
+        "jest-environment-jsdom": "^29.7.0",
         "jsdom": "^17.0.0",
-        "mocha": "^9.1.1",
+        "msw": "^2.7.0",
         "sinon": "^11.1.2",
         "sinon-chai": "^3.7.0",
         "style-loader": "^3.2.1",

client/src/api/AppHubAPI.js

@@ -40,6 +40,10 @@ export default class AppHubAPI {
         { useAuth = false, external = false, params = {} } = {},
         fetchOptions
     ) {
+        if (!path) {
+            return
+        }
+
         const options = {
             ...this.defaultFetchOptions,
             ...fetchOptions,

client/src/components/AppDescription/AppDescription.js

@@ -4,7 +4,7 @@ import styles from './AppDescription.module.css'
 
 const AppDescription = ({ description, paragraphClassName }) => {
     return (
-        <div className={paragraphClassName}>
+        <div className={paragraphClassName} data-test="app-description">
             <ReactMarkdown
                 className={styles.markdownDescription}
                 linkTarget={'_blank'}

client/src/components/Header/DropdownMenuItem/DropdownMenuItem.module.css

@@ -19,6 +19,7 @@
     outline: none;
 }
 
-.item:hover, .item:focus-visible {
+.item:hover,
+.item:focus-visible {
     background-color: var(--colors-grey300);
 }

client/src/components/Header/Header.module.css

@@ -1,7 +1,7 @@
 @value m-medium from 'src/styles/breakpoints.css';
 
 :root {
-    --header-bg: #1C2431;
+    --header-bg: #1c2431;
     --header-height: 48px;
 }
 
@@ -109,7 +109,9 @@
     font-size: inherit;
 }
 
-.navLink a:hover, .navLink a:focus, .activeNavLink {
+.navLink a:hover,
+.navLink a:focus,
+.activeNavLink {
     color: var(--colors-grey050);
     background: black;
 }

client/src/components/MarkdownEditor/MarkdownEditor.module.css

@@ -1,4 +1,3 @@
-
 .markdownFieldWrapper {
     border: 1px solid var(--colors-grey500);
     border-radius: 3px;

client/src/components/PluginTag/PluginTag.js

@@ -6,7 +6,7 @@ const PluginTag = ({ hasPlugin, pluginType }) => {
     }
     const tagString = pluginType ? `Plugin: ${pluginType}` : 'Plugin'
 
-    return <Tag neutral>{tagString}</Tag>
+    return <Tag>{tagString}</Tag>
 }
 
 export default PluginTag

client/src/components/Screenshots/Screenshots.module.css

@@ -19,13 +19,15 @@
     border: 4px solid var(--colors-grey200);
 }
 
-.otherScreenshot:hover, .otherScreenshot:focus {
+.otherScreenshot:hover,
+.otherScreenshot:focus {
     border-color: var(--colors-grey400);
     outline: none;
 }
 
 .otherScreenshotCurrent,
-.otherScreenshotCurrent:hover, .otherScreenshotCurrent:focus {
+.otherScreenshotCurrent:hover,
+.otherScreenshotCurrent:focus {
     border-color: var(--colors-blue500);
 }
 

client/src/components/Versions/Filters/Filters.js

@@ -1,4 +1,9 @@
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
+import {
+    Button,
+    IconClockHistory16,
+    SingleSelectField,
+    SingleSelectOption,
+} from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import ChannelCheckbox from '../ChannelCheckbox/ChannelCheckbox'
 import styles from './Filters.module.css'
@@ -12,6 +17,8 @@ const Filters = ({
     setChannelsFilter,
     dhisVersionFilter,
     setDhisVersionFilter,
+    showChangeLog,
+    hasChangelog,
 }) => {
     return (
         <div className={styles.versionsFilters}>
@@ -29,23 +36,46 @@ const Filters = ({
                     ))}
                 </div>
             )}
-            <div className={styles.dhisVersionSelect}>
-                <SingleSelectField
-                    dense
-                    placeholder="Select a version"
-                    label="Compatible with DHIS2 version"
-                    clearable
-                    selected={dhisVersionFilter}
-                    onChange={({ selected }) => setDhisVersionFilter(selected)}
-                >
-                    {dhisVersions.map((dhisVersion) => (
+            <div className={styles.filtersWrapper}>
+                <div className={styles.dhisVersionsSelect}>
+                    <SingleSelectField
+                        dense
+                        placeholder="Select a version"
+                        prefix="DHIS2 compatibility"
+                        clearable
+                        selected={dhisVersionFilter}
+                        onChange={({ selected }) => {
+                            if (!selected) {
+                                setDhisVersionFilter('-1')
+                            } else {
+                                setDhisVersionFilter(selected)
+                            }
+                        }}
+                    >
                         <SingleSelectOption
-                            key={dhisVersion}
-                            label={dhisVersion}
-                            value={dhisVersion}
+                            key={-1}
+                            label="All versions"
+                            value="-1"
                         />
-                    ))}
-                </SingleSelectField>
+                        {dhisVersions.map((dhisVersion) => (
+                            <SingleSelectOption
+                                key={dhisVersion}
+                                label={dhisVersion}
+                                value={dhisVersion}
+                            />
+                        ))}
+                    </SingleSelectField>
+                </div>
+                {hasChangelog && (
+                    <div>
+                        <Button
+                            icon={<IconClockHistory16 />}
+                            onClick={showChangeLog}
+                        >
+                            View version changes
+                        </Button>
+                    </div>
+                )}
             </div>
         </div>
     )
@@ -57,6 +87,8 @@ Filters.propTypes = {
     dhisVersionFilter: PropTypes.string.isRequired,
     setChannelsFilter: PropTypes.func.isRequired,
     setDhisVersionFilter: PropTypes.func.isRequired,
+    hasChangelog: PropTypes.bool,
+    showChangeLog: PropTypes.func,
 }
 
 export default Filters

client/src/components/Versions/Filters/Filters.module.css

@@ -5,8 +5,15 @@
     margin-bottom: var(--spacers-dp8);
 }
 
+.filtersWrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    justify-content: space-between;
+}
+
 .versionsFilters {
-    padding: var(--spacers-dp16) var(--spacers-dp8);
+    padding-bottom: var(--spacers-dp16);
 }
 
 .channelsFilter {

client/src/components/Versions/Versions.js

@@ -38,20 +38,27 @@ const useChannels = (appId) => {
     return { availableChannels, channelsFilter, setChannelsFilter }
 }
 
-const Versions = ({ appId, renderDeleteVersionButton, showDownloadCount }) => {
+const Versions = ({
+    appId,
+    renderDeleteVersionButton,
+    showDownloadCount,
+    changelogData,
+}) => {
     const { availableChannels, channelsFilter, setChannelsFilter } =
         useChannels(appId)
 
-    const [dhisVersionFilter, setDhisVersionFilter] = useState('')
+    const [dhisVersionFilter, setDhisVersionFilter] = useState('-1')
     const params = useMemo(
         () => ({
             pageSize: 5,
-            minDhisVersion: dhisVersionFilter
-                ? `lte:${dhisVersionFilter}`
-                : undefined,
-            maxDhisVersion: dhisVersionFilter
-                ? `gte:${dhisVersionFilter}`
-                : undefined,
+            minDhisVersion:
+                dhisVersionFilter != '-1'
+                    ? `lte:${dhisVersionFilter}`
+                    : undefined,
+            maxDhisVersion:
+                dhisVersionFilter != '-1'
+                    ? `gte:${dhisVersionFilter}`
+                    : undefined,
             channel: Array.from(channelsFilter).join(),
         }),
         [dhisVersionFilter, Array.from(channelsFilter).join()]
@@ -90,7 +97,7 @@ const Versions = ({ appId, renderDeleteVersionButton, showDownloadCount }) => {
     }
 
     return (
-        <div className={styles.versionsContainer}>
+        <div>
             <Filters
                 availableChannels={availableChannels}
                 channelsFilter={channelsFilter}
@@ -104,6 +111,7 @@ const Versions = ({ appId, renderDeleteVersionButton, showDownloadCount }) => {
                     renderDeleteVersionButton={renderDeleteVersionButton}
                     showDownloadCount={showDownloadCount}
                     appId={appId}
+                    changelogData={changelogData}
                 />
             ) : (
                 <em className={styles.noVersions}>

client/src/components/Versions/Versions.module.css

@@ -1,7 +1,3 @@
-.versionsContainer {
-    border: 1px solid var(--colors-grey300);
-}
-
 .noVersions {
     display: inline-block;
     padding: var(--spacers-dp8);