From acf0dfca9fa636ee940afe2581d2b3647bb47c17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?=
 <31612826+anders-kiaer@users.noreply.github.com>
Date: Thu, 10 Oct 2024 09:58:43 +0200
Subject: [PATCH 1/3] Pin GitHub action `ubuntu` run image version (#751)

---
 .github/workflows/webviz.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/webviz.yml b/.github/workflows/webviz.yml
index 2fbc2b3cd..f44ca539a 100644
--- a/.github/workflows/webviz.yml
+++ b/.github/workflows/webviz.yml
@@ -11,7 +11,7 @@ on:
 
 jobs:
   frontend:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
       - name: 📖 Checkout commit locally

From 56055dd53d89585d9453ef801ea205d852e245f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Herje?=
 <82032112+jorgenherje@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:55:11 +0200
Subject: [PATCH 2/3] Adjust color prop for Button-component (#750)

---
 frontend/src/lib/components/Button/button.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/Button/button.tsx b/frontend/src/lib/components/Button/button.tsx
index a24431fdb..0be1e793f 100644
--- a/frontend/src/lib/components/Button/button.tsx
+++ b/frontend/src/lib/components/Button/button.tsx
@@ -9,7 +9,7 @@ export type ButtonProps = {
     variant?: "text" | "outlined" | "contained";
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
-    color?: "primary" | "danger" | "success" | string;
+    color?: "primary" | "danger" | "success" | "secondary";
     size?: "small" | "medium" | "large";
 } & ButtonUnstyledProps;
 
@@ -32,27 +32,33 @@ export const Button = React.forwardRef((props: ButtonProps, ref: React.Forwarded
         if (color === "primary" || !color) {
             classNames.push("border-indigo-600", "text-indigo-600", "hover:bg-indigo-50");
         } else if (color === "danger") {
-            classNames.push(`text-red-600`, `border-red-600`, `hover:bg-red-50`);
+            classNames.push("border-red-600", "text-red-600", "hover:bg-red-50");
         } else if (color === "success") {
             classNames.push("border-green-600", "text-green-600", "hover:bg-green-50");
+        } else if (color === "secondary") {
+            classNames.push("border-slate-500", "text-slate-600", "hover:bg-slate-50");
         }
     } else if (variant === "contained") {
         classNames.push("border", "border-transparent", "text-white");
         if (color === "primary" || !color) {
             classNames.push("bg-indigo-600", "hover:bg-indigo-700");
         } else if (color === "danger") {
-            classNames.push(`bg-red-600`, `hover:bg-red-700`);
+            classNames.push("bg-red-600", "hover:bg-red-700");
         } else if (color === "success") {
             classNames.push("bg-green-600", "hover:bg-green-700");
+        } else if (color === "secondary") {
+            classNames.push("bg-slate-500", "hover:bg-slate-600");
         }
     } else {
         classNames.push("bg-transparent");
         if (color === "primary" || !color) {
             classNames.push("text-indigo-600", "hover:bg-indigo-100");
         } else if (color === "danger") {
-            classNames.push(`text-red-600`, `hover:bg-red-100`);
-        } else {
+            classNames.push("text-red-600", "hover:bg-red-100");
+        } else if (color === "success") {
             classNames.push("text-green-600", "hover:bg-green-100");
+        } else if (color === "secondary") {
+            classNames.push("text-slate-600", "hover:bg-slate-100");
         }
     }
 

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 3/3] `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>
+    );
+};