Tweaks to showing new version available

- Added frontend translation for english
- Moved frontend api logic to hook and backend api space
- Added swagger schema for the new api endpoint
- Moved backend logic to its own internal file
- Added user agent header to github api check
- Added cypress integration test for version check api
- Added a memory cache item from github check to avoid hitting it too
  much

frontend/src/api/backend/checkVersion.ts

@@ -0,0 +1,8 @@
+import * as api from "./base";
+import type { VersionCheckResponse } from "./responseTypes";
+
+export async function checkVersion(): Promise<VersionCheckResponse> {
+	return await api.get({
+		url: "/version/check",
+	});
+}

frontend/src/api/backend/index.ts

@@ -1,3 +1,4 @@
+export * from "./checkVersion";
 export * from "./createAccessList";
 export * from "./createCertificate";
 export * from "./createDeadHost";

frontend/src/api/backend/responseTypes.ts

@@ -19,3 +19,9 @@ export interface ValidatedCertificateResponse {
 export interface LoginAsTokenResponse extends TokenResponse {
 	user: User;
 }
+
+export interface VersionCheckResponse {
+	current: string | null;
+	latest: string | null;
+	updateAvailable: boolean;
+}

frontend/src/components/SiteFooter.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useState } from "react";
-import { useHealth } from "src/hooks";
+import { useCheckVersion, 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 { data: versionData } = useCheckVersion();
 
 	const getVersion = () => {
 		if (!health.data) {
@@ -15,25 +13,6 @@ 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">
@@ -77,16 +56,16 @@ export function SiteFooter() {
 									{getVersion()}{" "}
 								</a>
 							</li>
-							{isNewVersionAvailable && latestVersion && (
+							{versionData?.updateAvailable && versionData?.latest && (
 								<li className="list-inline-item">
 									<a
-										href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
+										href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${versionData.latest}`}
 										className="link-warning fw-bold"
 										target="_blank"
 										rel="noopener"
-										title={`New version ${latestVersion} is available`}
+										title={`New version ${versionData.latest} is available`}
 									>
-										Update Available: ({latestVersion})
+										<T id="update-available" data={{ latestVersion: versionData.latest }} />
 									</a>
 								</li>
 							)}

frontend/src/hooks/index.ts

@@ -4,6 +4,7 @@ export * from "./useAuditLog";
 export * from "./useAuditLogs";
 export * from "./useCertificate";
 export * from "./useCertificates";
+export * from "./useCheckVersion";
 export * from "./useDeadHost";
 export * from "./useDeadHosts";
 export * from "./useDnsProviders";

frontend/src/hooks/useCheckVersion.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { checkVersion, type VersionCheckResponse } from "src/api/backend";
+
+const fetchVersion = () => checkVersion();
+
+const useCheckVersion = (options = {}) => {
+	return useQuery<VersionCheckResponse, Error>({
+		queryKey: ["version-check"],
+		queryFn: fetchVersion,
+		refetchOnWindowFocus: false,
+		retry: 5,
+		refetchInterval: 30 * 1000, // 30 seconds
+		staleTime: 5 * 60 * 1000, // 5 mins
+		...options,
+	});
+};
+
+export { fetchVersion, useCheckVersion };

frontend/src/locale/lang/en.json

@@ -197,6 +197,7 @@
   "streams.tcp": "TCP",
   "streams.udp": "UDP",
   "test": "Test",
+  "update-available": "Update Available: {latestVersion}",
   "user": "User",
   "user.change-password": "Change Password",
   "user.confirm-password": "Confirm Password",

frontend/src/locale/src/en.json

@@ -593,6 +593,9 @@
 	"test": {
 		"defaultMessage": "Test"
 	},
+	"update-available": {
+		"defaultMessage": "Update Available: {latestVersion}"
+	},
 	"user": {
 		"defaultMessage": "User"
 	},