From 1431123ea8e712a8d60fe952245460eacd3c3136 Mon Sep 17 00:00:00 2001
From: Ruben Thoms <69145689+rubenthoms@users.noreply.github.com>
Date: Fri, 11 Oct 2024 09:41:32 +0200
Subject: [PATCH] `Moved to Amsterdam` notification (#752)

---
 frontend/src/main.tsx                         | 31 ++++---
 .../TempMovedToAmsterdamNotifier.tsx          | 35 ++++++++
 frontend/src/tempMoved/WebvizSpinner/index.ts |  1 +
 .../WebvizSpinner/webvizSpinnerAmsterdam.css  | 85 +++++++++++++++++++
 .../WebvizSpinner/webvizSpinnerAmsterdam.tsx  | 42 +++++++++
 5 files changed, 183 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/tempMoved/TempMovedToAmsterdamNotifier.tsx
 create mode 100644 frontend/src/tempMoved/WebvizSpinner/index.ts
 create mode 100644 frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.css
 create mode 100644 frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.tsx

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bd15e2748..528747cd1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -6,6 +6,7 @@ import { CustomQueryClientProvider } from "@framework/internal/providers/QueryCl
 
 import App from "./App";
 import { GlobalErrorBoundary } from "./GlobalErrorBoundary";
+import { TempMovedToAmsterdamNotifier } from "./tempMoved/TempMovedToAmsterdamNotifier";
 
 /*
     If the `cleanStart` query parameter is given, 
@@ -28,14 +29,22 @@ if (!container) {
 
 const root = createRoot(container);
 
-root.render(
-    <React.StrictMode>
-        <GlobalErrorBoundary>
-            <AuthProvider>
-                <CustomQueryClientProvider>
-                    <App />
-                </CustomQueryClientProvider>
-            </AuthProvider>
-        </GlobalErrorBoundary>
-    </React.StrictMode>
-);
+if (window.location.hostname === "webviz.app.radix.equinor.com") {
+    root.render(
+        <React.StrictMode>
+            <TempMovedToAmsterdamNotifier />
+        </React.StrictMode>
+    );
+} else {
+    root.render(
+        <React.StrictMode>
+            <GlobalErrorBoundary>
+                <AuthProvider>
+                    <CustomQueryClientProvider>
+                        <App />
+                    </CustomQueryClientProvider>
+                </AuthProvider>
+            </GlobalErrorBoundary>
+        </React.StrictMode>
+    );
+}
diff --git a/frontend/src/tempMoved/TempMovedToAmsterdamNotifier.tsx b/frontend/src/tempMoved/TempMovedToAmsterdamNotifier.tsx
new file mode 100644
index 000000000..484bac86a
--- /dev/null
+++ b/frontend/src/tempMoved/TempMovedToAmsterdamNotifier.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import { WebvizSpinnerAmsterdam } from "./WebvizSpinner/webvizSpinnerAmsterdam";
+
+export function TempMovedToAmsterdamNotifier(): React.ReactNode {
+    const [timeLeft, setTimeLeft] = React.useState(10);
+
+    React.useEffect(() => {
+        let internalTimeLeft = 10;
+        const interval = setInterval(() => {
+            if (internalTimeLeft === 0) {
+                window.location.href = "https://webviz.app.c2.radix.equinor.com/";
+                return;
+            }
+            setTimeLeft((prevTimeLeft) => prevTimeLeft - 1);
+            internalTimeLeft--;
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="w-screen h-screen flex flex-col items-center justify-center gap-8">
+            <WebvizSpinnerAmsterdam size={100} />
+            <div className="text-lg font-bold">Webviz moved to Amsterdam</div>
+            <div>
+                You can now find us at:{" "}
+                <a href="https://webviz.app.c2.radix.equinor.com/" className="text-blue-600 underline">
+                    https://webviz.app.c2.radix.equinor.com/
+                </a>
+            </div>
+            <div>We are taking you to our new address in {timeLeft}s...</div>
+        </div>
+    );
+}
diff --git a/frontend/src/tempMoved/WebvizSpinner/index.ts b/frontend/src/tempMoved/WebvizSpinner/index.ts
new file mode 100644
index 000000000..a9bfe9a5c
--- /dev/null
+++ b/frontend/src/tempMoved/WebvizSpinner/index.ts
@@ -0,0 +1 @@
+export { WebvizSpinnerAmsterdam as WebvizSpinner } from "./webvizSpinnerAmsterdam";
diff --git a/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.css b/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.css
new file mode 100644
index 000000000..c83671324
--- /dev/null
+++ b/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.css
@@ -0,0 +1,85 @@
+.webviz-spinner-amsterdam {
+    position: relative;
+    perspective: 1000;
+}
+
+.webviz-spinner-amsterdam > div {
+    border-color: transparent;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(1) {
+    animation: spin1-amsterdam 1s linear infinite;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(2) {
+    animation: spin2-amsterdam 0.6s linear infinite;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(3) {
+    animation: spin3-amsterdam 0.8s linear infinite;
+}
+
+@keyframes spin1-amsterdam {
+    0% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(0deg);
+        border-top-color: #C8102E;
+        z-index: -2;
+    }
+    49% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(179deg);
+        border-top-color: #C8102E;
+        z-index: 0;
+    }
+    50% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(180deg);
+        border-top-color: #003DA5;
+        z-index: 2;
+    }
+    100% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(359deg);
+        border-top-color: #003DA5;
+        z-index: 0;
+    }
+}
+
+@keyframes spin2-amsterdam {
+    0% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(0deg);
+        border-top-color: #C8102E;
+    }
+    49% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(179deg);
+        border-top-color: #C8102E;
+    }
+    50% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(180deg);
+        border-top-color: #003DA5;
+    }
+    100% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(359deg);
+        border-top-color: #003DA5;
+    }
+}
+
+@keyframes spin3-amsterdam {
+    0% {
+        transform: rotateX(58deg) rotateZ(0deg);
+        border-top-color: #003DA5;
+        z-index: -1;
+    }
+    49% {
+        transform: rotateX(58deg) rotateZ(179deg);
+        border-top-color: #003DA5;
+        z-index: 0;
+    }
+    50% {
+        transform: rotateX(58deg) rotateZ(180deg);
+        border-top-color: #C8102E;
+        z-index: 1;
+    }
+    100% {
+        transform: rotateX(58deg) rotateZ(359deg);
+        border-top-color: #C8102E;
+        z-index: 0;
+    }
+}
diff --git a/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.tsx b/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.tsx
new file mode 100644
index 000000000..8ea38c47d
--- /dev/null
+++ b/frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import "./webvizSpinnerAmsterdam.css";
+
+export type WebvizSpinnerAmsterdamProps = {
+    size: number;
+};
+
+export const WebvizSpinnerAmsterdam: React.FC<WebvizSpinnerAmsterdamProps> = (props) => {
+    const borderWidth = props.size / 10;
+    return (
+        <div style={{ width: props.size, height: props.size }} className="webviz-spinner-amsterdam">
+            <div
+                className="rounded-full absolute border-t-[#003DA5]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 0,
+                    height: props.size - 0,
+                    top: 5,
+                }}
+            />
+            <div
+                className="rounded-full absolute border-t-[#003DA5]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 0,
+                    height: props.size - 0,
+                }}
+            />
+            <div
+                className="rounded-full absolute border-t-[#C8102E]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 8,
+                    height: props.size - 8,
+                    top: 12,
+                    left: 5,
+                }}
+            />
+        </div>
+    );
+};