From e2ea6cbb407f90aafa45283d91f1894843f801e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Srokosz?= <pawel.srokosz@cert.pl>
Date: Mon, 8 Jul 2024 16:22:28 +0200
Subject: [PATCH] Frontend: add warning banner when server version is different
 than client version (#950)

---
 mwdb/web/src/App.tsx                          | 11 ++++++++
 .../src/components/VersionMismatchWarning.tsx | 28 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 mwdb/web/src/components/VersionMismatchWarning.tsx

diff --git a/mwdb/web/src/App.tsx b/mwdb/web/src/App.tsx
index f657b555f..2d82b3fa7 100644
--- a/mwdb/web/src/App.tsx
+++ b/mwdb/web/src/App.tsx
@@ -5,6 +5,9 @@ import { ConfigContext } from "./commons/config";
 import { Extendable } from "./commons/plugins";
 import { ErrorBoundary } from "./commons/ui";
 import { AppRoutes } from "./commons/navigation/AppRoutes";
+import { VersionMismatchWarning } from "@mwdb-web/components/VersionMismatchWarning";
+
+import { version as clientVersion } from "../package.json";
 
 export function App() {
     const config = useContext(ConfigContext);
@@ -12,6 +15,14 @@ export function App() {
         <div className="App">
             <Navigation />
             <div className="content">
+                {config.isReady ? (
+                    <VersionMismatchWarning
+                        clientVersion={clientVersion}
+                        serverVersion={config.config.server_version}
+                    />
+                ) : (
+                    []
+                )}
                 <ErrorBoundary>
                     <Extendable ident="main">
                         {config.isReady ? <AppRoutes /> : []}
diff --git a/mwdb/web/src/components/VersionMismatchWarning.tsx b/mwdb/web/src/components/VersionMismatchWarning.tsx
new file mode 100644
index 000000000..87fcff00a
--- /dev/null
+++ b/mwdb/web/src/components/VersionMismatchWarning.tsx
@@ -0,0 +1,28 @@
+type VersionMismatchWarningProps = {
+    serverVersion?: string;
+    clientVersion: string;
+};
+
+function stripVersionTag(version: string): string {
+    // Strips possible version tag with Git revision
+    // e.g. 2.0.0-rc1+6b2f1c1a is converted to 2.0.0-rc1
+    return version.split("+")[0];
+}
+
+export function VersionMismatchWarning({
+    serverVersion,
+    clientVersion,
+}: VersionMismatchWarningProps) {
+    if (
+        !serverVersion ||
+        stripVersionTag(clientVersion) === stripVersionTag(serverVersion)
+    )
+        return <></>;
+    return (
+        <div className="alert alert-warning" role="alert">
+            Server version was recently updated to {serverVersion} while
+            currently loaded web application is {clientVersion}. Press CTRL+F5
+            to clear cache and reload the webpage.
+        </div>
+    );
+}