From 6220f990c4fc1c6d9735531fc54759109ab84afe Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 23 Apr 2025 17:35:58 +0100
Subject: [PATCH] Add update available widget

---
 .../@node-red/editor-client/src/js/red.js     | 19 ++++++++++++++++++-
 .../editor-client/src/js/ui/palette-editor.js |  6 +++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index d723101e4..c2afd74cd 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -317,6 +317,7 @@ var RED = (function() {
 
     function completeLoad(showProjectWelcome) {
         var persistentNotifications = {};
+        let updateAvailableWidget = null
         RED.comms.subscribe("notification/#",function(topic,msg) {
             var parts = topic.split("/");
             var notificationId = parts[1];
@@ -358,7 +359,23 @@ var RED = (function() {
                 });
                 return;
             }
-
+            if (notificationId === "update-available") {
+                if (!updateAvailableWidget) {
+                    updateAvailableWidget = $('<button type="button" class="red-ui-footer-button red-ui-update-status"></button>').text(RED._("telemetry.updateAvailable"));
+                    updateAvailableWidget.on("click", function (evt) {
+                        window.open(`https://github.com/node-red/node-red/releases/tag/${msg.version}`, "_blank");
+                    });
+                    const tooltip = RED.popover.tooltip(updateAvailableWidget, function () {
+                        return RED._("telemetry.updateAvailableDesc", msg)
+                    });
+                    RED.statusBar.add({
+                        id: "red-ui-status-update-available",
+                        align: "right",
+                        element: updateAvailableWidget
+                    });
+                    setTimeout(() => { tooltip.open(); setTimeout(() => tooltip.close(), 7000) }, 1000)
+                }
+            }
             if (msg.text) {
                 msg.default = msg.text;
                 var text = RED._(msg.text,msg);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 3926ca430..9ed9e9bb7 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -1525,7 +1525,7 @@ RED.palette.editor = (function() {
         });
 
         RED.statusBar.add({
-            id: "update",
+            id: "red-ui-status-package-update",
             align: "right",
             element: updateStatusWidget
         });
@@ -1560,11 +1560,11 @@ RED.palette.editor = (function() {
 
     function updateStatus(opts) {
         if (opts.count) {
-            RED.statusBar.show("update");
+            RED.statusBar.show("red-ui-status-package-update");
             updateStatusWidget.empty();
             $('<span><i class="fa fa-cube"></i> ' + opts.count + '</span>').appendTo(updateStatusWidget);
         } else {
-            RED.statusBar.hide("update");
+            RED.statusBar.hide("red-ui-status-package-update");
         }
     }