PMM-13472: Update Popup - Wording improvements

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.",
 };

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;
+  `,
 });

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}

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,