chore(trading): upgrade banner semver comparison (#3919)

apps/trading/components/banner/upgrade-banner.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { gt, prerelease } from 'semver';
 import {
   ReleasesFeed,
   useEnvironment,
@@ -15,7 +16,10 @@ import {
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 
-const CANONICAL_URL = 'https://vega.trading';
+// v0.20.12-core-0.71.4 -> v0.20.12
+// we need to strip the "core" suffix in order to determine whether a release
+// is a pre-release (candidate); example: v.0.21.0-beta.1-core-0.71.4
+const parseTagName = (tagName: string) => tagName.replace(/-core-[\d.]+$/i, '');
 
 type UpgradeBannerProps = {
   showVersionChange: boolean;
@@ -23,34 +27,24 @@ type UpgradeBannerProps = {
 export const UpgradeBanner = ({ showVersionChange }: UpgradeBannerProps) => {
   const [visible, setVisible] = useState(true);
   const { data } = useReleases(ReleasesFeed.FrontEnd);
-  const { APP_VERSION, VEGA_ENV } = useEnvironment();
-  /**
-   * Filtering out the release candidates.
-   */
-  const latest = useMemo(() => {
+  const { APP_VERSION, VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
+
+  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://vega.trading';
+
+  const newest = useMemo(() => {
+    if (!APP_VERSION || !data) return undefined;
+    const newer = data.filter((r) => gt(r.tagName, APP_VERSION));
     const valid =
+      // filter pre-releases on mainnet
       VEGA_ENV === Networks.MAINNET
-        ? data?.filter((r) => !/-rc$/i.test(r.tagName))
-        : data;
+        ? newer?.filter((r) => !prerelease(parseTagName(r.tagName)))
+        : newer;
+    return valid.sort((a, b) => (gt(a.tagName, b.tagName) ? -1 : 1))[0];
+  }, [APP_VERSION, VEGA_ENV, data]);
 
-    return valid && valid.length > 0 ? valid[0] : undefined;
-  }, [VEGA_ENV, data]);
-
-  if (!APP_VERSION) return null;
-
-  if (!visible || !latest || latest.tagName === APP_VERSION) return null;
-
-  const versionChange = (
-    <span>
-      <span className="line-through text-vega-light-300 dark:text-vega-dark-300">
-        {APP_VERSION}
-      </span>{' '}
-      <VegaIcon size={14} name={VegaIconNames.ARROW_RIGHT} />{' '}
-      <span className="text-vega-orange-500 dark:text-vega-yellow-500">
-        <ExternalLink href={latest.htmlUrl}>{latest.tagName}</ExternalLink>
-      </span>
-    </span>
-  );
+  if (!visible || !newest) {
+    return null;
+  }
 
   return (
     <NotificationBanner
@@ -59,13 +53,24 @@ export const UpgradeBanner = ({ showVersionChange }: UpgradeBannerProps) => {
         setVisible(false);
       }}
     >
-      <div className="uppercase ">
-        {t('Upgrade to the latest version of Console')}{' '}
-        {showVersionChange && versionChange}
+      <div className="uppercase mb-1">
+        <ExternalLink href={CANONICAL_URL}>
+          {t('Upgrade to the latest version of Console')}
+        </ExternalLink>
       </div>
       <div data-testid="bookmark-message">
-        {t('Bookmark')}{' '}
-        <ExternalLink href={CANONICAL_URL}>{t('vega.trading')}</ExternalLink>
+        <a
+          className="underline"
+          href={newest.htmlUrl}
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+        >
+          {t("View what's changed")}
+        </a>{' '}
+        {t(' or bookmark')}{' '}
+        <a className="underline" href={CANONICAL_URL}>
+          {t('vega.trading')}
+        </a>{' '}
         <CopyWithTooltip text={CANONICAL_URL}>
           <button title={t('Copy %s', CANONICAL_URL)}>
             <span className="sr-only">{t('Copy %s', CANONICAL_URL)}</span>

libs/environment/src/hooks/use-releases.ts

@@ -27,7 +27,7 @@ const GithubReleaseSchema = z.object({
 
 const GithubReleasesSchema = z.array(GithubReleaseSchema);
 
-type ReleaseInfo = {
+export type ReleaseInfo = {
   id: number;
   name: string;
   tagName: string;

package.json

@@ -86,6 +86,7 @@
     "recharts": "^2.1.2",
     "recursive-key-filter": "^1.0.2",
     "regenerator-runtime": "0.13.7",
+    "semver": "^7.5.1",
     "toml": "^3.0.0",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",
@@ -151,6 +152,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
+    "@types/semver": "^7.5.0",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "5.35.1",
     "@typescript-eslint/parser": "5.35.1",

yarn.lock

@@ -7554,6 +7554,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
+  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -22055,6 +22060,13 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"