Frontend: add warning banner when server version is different than cl…

…ient version (#950)

mwdb/web/src/App.tsx

@@ -5,13 +5,24 @@ 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);
     return (
         <div className="App">
             <Navigation />
             <div className="content">
+                {config.isReady ? (
+                    <VersionMismatchWarning
+                        clientVersion={clientVersion}
+                        serverVersion={config.config.server_version}
+                    />
+                ) : (
+                    []
+                )}
                 <ErrorBoundary>
                     <Extendable ident="main">
                         {config.isReady ? <AppRoutes /> : []}

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>
+    );
+}