From e7089426153cbf715bd12d016217ba02f7bae1fb Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Tue, 4 Feb 2025 13:23:08 +0000
Subject: [PATCH] fix: update latest updates text

---
 .../Versions/VersionsTable/VersionsTable.js   | 12 ++--
 client/src/pages/AppView/LatestUpdates.js     | 64 ++++++-------------
 .../pages/AppView/LatestUpdates.module.css    | 27 ++++++--
 3 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/client/src/components/Versions/VersionsTable/VersionsTable.js b/client/src/components/Versions/VersionsTable/VersionsTable.js
index 2d026022..f3d5489e 100644
--- a/client/src/components/Versions/VersionsTable/VersionsTable.js
+++ b/client/src/components/Versions/VersionsTable/VersionsTable.js
@@ -1,8 +1,8 @@
-import ReactMarkdown from 'react-markdown'
 import { useAuth0 } from '@auth0/auth0-react'
 import { Divider } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import { useCallback, useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
 import styles from './VersionsTable.module.css'
 import config from 'config'
 import { renderDhisVersionsCompatibility } from 'src/lib/render-dhis-versions-compatibility'
@@ -11,15 +11,17 @@ const { appChannelToDisplayName } = config.ui
 
 const useCreateGetDownloadUrl = (url) => {
     const [token, setToken] = useState()
-    const { getAccessTokenSilently } = useAuth0()
+    const { getAccessTokenSilently, isAuthenticated } = useAuth0()
 
     useEffect(() => {
         const getToken = async () => {
-            const token = await getAccessTokenSilently()
-            setToken(token)
+            if (isAuthenticated) {
+                const token = await getAccessTokenSilently()
+                setToken(token)
+            }
         }
         getToken()
-    }, [url, getAccessTokenSilently])
+    }, [url, getAccessTokenSilently, isAuthenticated])
 
     return useCallback(
         (url) => (token ? url.concat(`?token=${token}`) : url),
diff --git a/client/src/pages/AppView/LatestUpdates.js b/client/src/pages/AppView/LatestUpdates.js
index e8bac362..09b9e72e 100644
--- a/client/src/pages/AppView/LatestUpdates.js
+++ b/client/src/pages/AppView/LatestUpdates.js
@@ -1,6 +1,5 @@
-import { Button } from '@dhis2/ui'
+import ReactMarkdown from 'react-markdown'
 import { useHistory } from 'react-router-dom'
-import { getFormattedChangeType } from '../../utils/changelog'
 import styles from './LatestUpdates.module.css'
 
 export const LatestUpdates = ({ changelog }) => {
@@ -13,47 +12,26 @@ export const LatestUpdates = ({ changelog }) => {
             <div className={styles.latestUpdates}>
                 <h2 className={styles.latestUpdatesHeader}>Latest updates:</h2>
 
-                {changelog?.slice(0, 3).map((version, i) => {
-                    return (
-                        <div key={version.version}>
-                            <h3 className={styles.latestUpdatesVersionHeading}>
-                                {version.version}
-                            </h3>
-                            {version.changeSummary.map((change) => {
-                                return (
-                                    // todo: find a better key than i
-                                    <div key={i}>
-                                        {getFormattedChangeType(change)}
-                                        {change.isTranslation ? (
-                                            <span
-                                                className={styles.translation}
-                                            >
-                                                Translations sync
-                                            </span>
-                                        ) : (
-                                            change.text
-                                        )}
-                                        {change.link ? (
-                                            <>
-                                                {' '}
-                                                (
-                                                <a
-                                                    className={styles.link}
-                                                    rel="noreferrer"
-                                                    target="_blank"
-                                                    href={change.link}
-                                                >
-                                                    {'link'}
-                                                </a>
-                                                )
-                                            </>
-                                        ) : null}
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    )
-                })}
+                <ol className={styles.versionList}>
+                    {changelog?.slice(0, 3).map((version, i) => {
+                        return (
+                            <li key={version.version}>
+                                <h3
+                                    className={
+                                        styles.latestUpdatesVersionHeading
+                                    }
+                                >
+                                    {version.version}
+                                </h3>
+                                <div className={styles.changeSummary}>
+                                    <ReactMarkdown>
+                                        {version.rawChangeSummary}
+                                    </ReactMarkdown>
+                                </div>
+                            </li>
+                        )
+                    })}
+                </ol>
             </div>
             <div className={styles.showAllLink}>
                 <span
diff --git a/client/src/pages/AppView/LatestUpdates.module.css b/client/src/pages/AppView/LatestUpdates.module.css
index c77a9ee2..d6d9524c 100644
--- a/client/src/pages/AppView/LatestUpdates.module.css
+++ b/client/src/pages/AppView/LatestUpdates.module.css
@@ -11,12 +11,6 @@
     margin: 0;
 }
 
-.latestUpdatesVersionHeading {
-    font-size: 1em;
-    margin-bottom: var(--spacers-dp4);
-    font-weight: bold;
-}
-
 .showAllLink {
     margin-top: var(--spacers-dp8);
     text-decoration: underline;
@@ -26,3 +20,24 @@
 .showAllLink:focus {
     text-decoration: none;
 }
+
+.versionList {
+    list-style: none;
+    padding: 0;
+    font-size: 0.8rem;
+}
+
+.latestUpdatesVersionHeading {
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.changeSummary :global(ul) {
+    list-style: disc;
+    padding-inline-start: var(--spacers-dp24);
+}
+
+.changeSummary :global(h3) {
+    font-size: 0.9em;
+    margin-bottom: 0.5em;
+}