Merge pull request #4267 from JoinColony/fix/16282689-upgrade-colony-version-banner

fix: display upgrade colony version banner

Author: adam-strzelec

src/components/frame/Extensions/layouts/hooks.ts

@@ -34,7 +34,7 @@ export const useCalamityBannerInfo = (): UseCalamityBannerInfoReturnType => {
       {
         key: '1',
         linkProps: {
-          to: 'https://docs.colony.io/use/advanced-features/upgrade-colony-and-extensions',
+          to: 'https://github.com/JoinColony/colonyNetwork/releases',
           text: formatText({ id: 'learn.more' }),
         },
         buttonProps: {

src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/SidebarBanner.tsx

@@ -1,5 +1,5 @@
 import { Extension } from '@colony/colony-js';
-import { CheckCircle, WarningCircle } from '@phosphor-icons/react';
+import { WarningCircle, PushPin } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { FormattedMessage, defineMessages } from 'react-intl';
@@ -28,8 +28,18 @@ const MSG = defineMessages({
     defaultMessage:
       'The {extensionName} extension is missing some or all of the permissions it needs to work.',
   },
+  newVersionInfo: {
+    id: `${displayName}.newVersionInfo`,
+    defaultMessage: `{isNewAvailable, select, true {New version available. View release notes for version details.} other {You are already on the latest version of Colony Network.}}`,
+  },
+  viewReleaseNotes: {
+    id: `${displayName}.viewReleaseNotes`,
+    defaultMessage: 'View release notes',
+  },
 });
 
+const RELEASE_NOTES = 'https://github.com/JoinColony/colonyNetwork/releases';
+
 export const SidebarBanner: FC = () => {
   const { watch } = useFormContext();
   const [selectedAction, decisionMethod] = watch([
@@ -60,9 +70,6 @@ export const SidebarBanner: FC = () => {
   const canUpgrade = canColonyBeUpgraded(colony, colonyContractVersion);
   const isFieldDisabled = useIsFieldDisabled();
 
-  const showVersionUpToDateNotification =
-    selectedAction === Action.UpgradeColonyVersion && !canUpgrade;
-
   return (
     <>
       {selectedAction && (
@@ -82,13 +89,21 @@ export const SidebarBanner: FC = () => {
           </NotificationBanner>
         </div>
       ))}
-      {showVersionUpToDateNotification && (
-        <div className="mt-6">
-          <NotificationBanner icon={CheckCircle} status="success">
-            <FormattedMessage id="actionSidebar.upToDate" />
-          </NotificationBanner>
-        </div>
-      )}
+      <div className="mt-6">
+        <NotificationBanner
+          icon={PushPin}
+          status="success"
+          callToAction={
+            <a href={RELEASE_NOTES} target="_blank" rel="noreferrer">
+              {formatText(MSG.viewReleaseNotes)}
+            </a>
+          }
+        >
+          {formatText(MSG.newVersionInfo, {
+            isNewAvailable: canUpgrade,
+          })}
+        </NotificationBanner>
+      </div>
     </>
   );
 };

src/i18n/en.json

@@ -1133,7 +1133,6 @@
     "actionSidebar.amount": "Amount",
     "actionSidebar.value": "Value",
     "actionSidebar.currentVersion": "Current version",
-    "actionSidebar.upToDate": "Your Colony version is up to date",
     "actionSidebar.newVersion": "New version",
     "actionSidebar.notEnoughMembersWithPermissions": "There are not enough members in this or higher teams with the required permissions to approve this action. Select a different team, or assign more users with the required multi-sig permissions.",
     "actionSidebar.availableTokens": "Available tokens",

src/stories/common/CalamityBanner.stories.tsx

@@ -7,7 +7,7 @@ const calamityBannerItems: CalamityBannerItemProps[] = [
   {
     key: '1',
     linkProps: {
-      to: 'https://docs.colony.io/use/advanced-features/upgrade-colony-and-extensions',
+      to: 'https://github.com/JoinColony/colonyNetwork/releases',
       text: 'Learn more',
     },
     buttonProps: {
@@ -21,7 +21,7 @@ const calamityBannerItems: CalamityBannerItemProps[] = [
   {
     key: '2',
     linkProps: {
-      to: 'https://docs.colony.io/use/advanced-features/upgrade-colony-and-extensions',
+      to: 'https://github.com/JoinColony/colonyNetwork/releases',
       text: 'Learn more',
     },
     buttonProps: {