Feature/refresh popup on version change

frontend/Dockerfile.prod

@@ -46,6 +46,13 @@ COPY nginx-prod/nginx.conf.template.no-ssl /etc/nginx/nginx.conf.template.no-ssl
 COPY nginx-prod/docker-entrypoint.sh /docker-entrypoint.sh
 
 # Add version information
+ARG APP_VERSION_TAG
+ARG APP_COMMIT
+ARG APP_BRANCH
+ENV VITE_APP_VERSION_TAG=$APP_VERSION_TAG
+ENV VITE_APP_COMMIT=$APP_COMMIT
+ENV VITE_APP_BRANCH=$APP_BRANCH
+ENV VITE_APP_BUILD_FILE="prod"
 RUN echo "{\"tag\": \"$VITE_APP_VERSION_TAG\", \"commit\": \"$VITE_APP_COMMIT\", \"branch\": \"$VITE_APP_BRANCH\", \"build_file\": \"$VITE_APP_BUILD_FILE\"}" > /usr/share/nginx/html/version.json
 
 # Give permissions to the entry script

frontend/package.json

@@ -57,6 +57,7 @@
     "react-router-dom": "^6.26.0",
     "react-select": "^5.8.0",
     "react-toastify": "^10.0.5",
+    "react-update-popup": "^2.1.1",
     "react18-json-view": "^0.2.9",
     "redux": "^4.2.1",
     "redux-form": "^8.3.10",

frontend/src/App.jsx

@@ -4,16 +4,20 @@ import { BrowserRouter } from "react-router-dom";
 import routes, { renderRoutes } from "routes";
 import Alert from "components/Alert/Alert";
 import { useTokenManager } from "hooks/useTokenManager";
+import { useVersionPopup } from "hooks/useVersionPopup";
 
 const App = () => {
   useTokenManager();
 
+  const { VersionPopup } = useVersionPopup();
+
   return (
     <>
       <Alert component="all" />
       <BrowserRouter basename={import.meta.env.VITE_APP_BASE_NAME}>
         {renderRoutes(routes)}
       </BrowserRouter>
+      <VersionPopup />
     </>
   );
 };

frontend/src/hooks/useVersionPopup.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { UpdateNotification } from "react-update-popup";
+// import "react-update-popup/dist/index.css";
+
+export const useVersionPopup = () => {
+  const [latestVersion, setLatestVersion] = useState(null);
+  const key_version = "last-frontend-version";
+
+  // Function that checks if there is a new version
+  const checkHasUpdate = async () => {
+    try {
+      const res = await fetch("/version.json", { cache: "no-store" });
+      const data = await res.json();
+
+      const storedVersion = localStorage.getItem(key_version);
+
+      if (!storedVersion) {
+        // First time load, store the version
+        localStorage.setItem(key_version, data.tag);
+        setLatestVersion(data.tag);
+        return false; // no popup on first load
+      }
+
+      if (storedVersion !== data.tag) {
+        setLatestVersion(data.tag);
+        return true; // new version: popup shows
+      }
+
+      return false; // same version
+    } catch (err) {
+      console.error("Error checking version:", err);
+      return false; // fallback
+    }
+  };
+
+  const onReload = () => {
+    if (latestVersion) {
+      localStorage.setItem(key_version, latestVersion);
+    }
+    window.location.reload(true);
+  };
+
+  const VersionPopup = () => (
+    <UpdateNotification
+      title="New Version Available"
+      description="There is a new version of the frontend. Refresh the page to update."
+      buttonText="Refresh"
+      refreshInterval={30_000} // every 30 seconds
+      checkHasUpdate={checkHasUpdate}
+      onReload={onReload}
+    />
+  );
+
+  return { VersionPopup };
+};
+
+export default useVersionPopup;