From 13eac7dab471c56070720e4659211457b5cb0d39 Mon Sep 17 00:00:00 2001
From: DoraCretu594118 <103416234+doracretu3pillar@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:05:20 +0200
Subject: [PATCH] Replaced updateDescription and added sorting to the versions

---
 .../PerconaUpdateVersion.constants.ts            |  6 +++---
 .../PerconaUpdateVersion.styles.ts               |  3 +++
 .../PerconaUpdateVersion.tsx                     |  8 ++++----
 .../core/reducers/updates/updates.utils.ts       | 16 +++++++++-------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts
index 2f35d18455960..7929df9306b39 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.constants.ts
@@ -1,12 +1,12 @@
 export const Messages = {
   titleOneUpdate: 'New update available',
   titleMultipleUpdates: 'New updates available',
-  howToUpdate: 'How to update',
-  howToUpdateDescription:
-    "We are inaugurating a new process for updating PMM. It's a new interface with an improved user experience and is ready for the future of PMM. Click on Go to Updates Page to find out more.",
   newVersions: 'New Versions',
   readMore: 'Read more',
   fullReleaseNotes: 'Full release notes here',
   goToUpdatesPage: 'Go to updates page',
   snooze: 'Dismiss',
+  readyForAnUpdate: 'Ready for an upgrade?',
+  updateDescription:
+    "We've streamlined our update process with a new, user-friendly interface. One click gets you all the latest improvements.",
 };
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
index 45dd1980d2bf0..eaa4d4d3fee77 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.styles.ts
@@ -40,4 +40,7 @@ export const getStyles = ({ v1: { spacing, colors, typography } }: GrafanaTheme2
       color: ${colors.textBlue};
     },
   `,
+  readyForUpdate: css`
+    margin-top: 10px;
+  `,
 });
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
index e5ad28d961162..45811294dde4f 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaUpdateVersion/PerconaUpdateVersion.tsx
@@ -67,8 +67,8 @@ const PerconaUpdateVersion = () => {
               {Messages.fullReleaseNotes}
             </a>
           </p>
-          <h5>{Messages.howToUpdate}</h5>
-          <p>{Messages.howToUpdateDescription}</p>
+          <h5 className={styles.readyForUpdate}>{Messages.readyForAnUpdate}</h5>
+          <span>{Messages.updateDescription}</span>
           <div className={styles.updateButtons}>
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
               {Messages.snooze}
@@ -97,8 +97,8 @@ const PerconaUpdateVersion = () => {
               </li>
             ))}
           </ul>
-          <h5 className={styles.howToUpdate}>{Messages.howToUpdate}</h5>
-          <p>{Messages.howToUpdateDescription}</p>
+          <h5 className={styles.readyForUpdate}>{Messages.readyForAnUpdate}</h5>
+          <span>{Messages.updateDescription}</span>
           <div className={styles.updateButtons}>
             <Button type="button" variant="secondary" onClick={snoozeUpdate} className={styles.snoozeButton}>
               {Messages.snooze}
diff --git a/public/app/percona/shared/core/reducers/updates/updates.utils.ts b/public/app/percona/shared/core/reducers/updates/updates.utils.ts
index cf99f4bcfdc6e..319be76321d4a 100644
--- a/public/app/percona/shared/core/reducers/updates/updates.utils.ts
+++ b/public/app/percona/shared/core/reducers/updates/updates.utils.ts
@@ -23,13 +23,15 @@ export const responseToPayload = (response: CheckUpdatesResponse): CheckUpdatesP
 });
 
 export const mapUpdatesChangeLogs = (response: CheckUpdatesChangeLogsResponse): CheckUpdatesChangeLogs => {
-  const responseMapping = response.updates.map((item) => ({
-    version: item.version,
-    tag: item.tag,
-    timestamp: item.timestamp,
-    releaseNotesUrl: item.release_notes_url,
-    releaseNotesText: item.release_notes_text,
-  }));
+  const responseMapping = response.updates
+    .map((item) => ({
+      version: item.version,
+      tag: item.tag,
+      timestamp: item.timestamp,
+      releaseNotesUrl: item.release_notes_url,
+      releaseNotesText: item.release_notes_text,
+    }))
+    .sort((firstItem, nextItem) => nextItem.version.localeCompare(firstItem.version, undefined, { numeric: true }));
   return {
     lastCheck: response.last_check,
     updates: responseMapping,