Merge pull request #4906 from sopex/develop

Available upgrade notification

frontend/src/components/SiteFooter.tsx

@@ -1,8 +1,11 @@
+import { useEffect, useState } from "react";
 import { useHealth } from "src/hooks";
 import { T } from "src/locale";
 
 export function SiteFooter() {
 	const health = useHealth();
+	const [latestVersion, setLatestVersion] = useState<string | null>(null);
+	const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
 
 	const getVersion = () => {
 		if (!health.data) {
@@ -12,6 +15,25 @@ export function SiteFooter() {
 		return `v${v.major}.${v.minor}.${v.revision}`;
 	};
 
+	useEffect(() => {
+		const checkForUpdates = async () => {
+			try {
+				const response = await fetch("/api/version/check");
+				if (response.ok) {
+					const data = await response.json();
+					setLatestVersion(data.latest);
+					setIsNewVersionAvailable(data.updateAvailable);
+				}
+			} catch (error) {
+				console.debug("Could not check for updates:", error);
+			}
+		};
+
+		if (health.data) {
+			checkForUpdates();
+		}
+	}, [health.data]);
+
 	return (
 		<footer className="footer d-print-none py-3">
 			<div className="container-xl">
@@ -55,6 +77,19 @@ export function SiteFooter() {
 									{getVersion()}{" "}
 								</a>
 							</li>
+							{isNewVersionAvailable && latestVersion && (
+								<li className="list-inline-item">
+									<a
+										href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
+										className="link-warning fw-bold"
+										target="_blank"
+										rel="noopener"
+										title={`New version ${latestVersion} is available`}
+									>
+										Update Available: ({latestVersion})
+									</a>
+								</li>
+							)}
 						</ul>
 					</div>
 				</div>