From fe5f5ebe2fdf145682ba7f49f84115d59736b2b9 Mon Sep 17 00:00:00 2001
From: Jody Clements <jody@neomorphic.co.uk>
Date: Tue, 29 Oct 2024 14:09:46 -0400
Subject: [PATCH] feat: Adds dev server banner, with debug switch.

---
 src/App.jsx                      |  6 +++++-
 src/components/DevSiteBanner.css | 23 +++++++++++++++++++++++
 src/components/DevSiteBanner.jsx | 30 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DevSiteBanner.css
 create mode 100644 src/components/DevSiteBanner.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 7bdbdea..29b1f27 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,6 +19,7 @@ import HelpDrawer from "./components/Help/HelpDrawer";
 import HelpContents from "./components/Help/HelpContents";
 import MaintenanceBanner from "./components/MaintenanceBanner";
 import DebugPanel from "./components/DebugPanel";
+import DevSiteBanner from "./components/DevSiteBanner";
 import Announcements from "./components/Announcements";
 import { useKonami } from "./libs/hooksLib";
 import { dataVersionFile } from "./libs/utils";
@@ -28,6 +29,8 @@ const { Header, Content, Footer } = Layout;
 const isInternalSite =
   process.env.REACT_APP_LEVEL && process.env.REACT_APP_LEVEL.match(/pre$/);
 
+const isDevSite = process.env.REACT_APP_LEVEL && process.env.REACT_APP_LEVEL.match(/dev$/);
+
 // Storage options used to load current.txt and config.json
 const storageOptions = {
   customPrefix: {
@@ -237,7 +240,8 @@ export default function App() {
           </a>
         </div>
       </Header>
-      <Content className="site-layout" style={{ marginTop: 86 }}>
+        { isDevSite ? <DevSiteBanner /> : null }
+      <Content className="site-layout" style={{ marginTop: isDevSite ? 96 : 86 }}>
         <div className="site-layout-background">
           <Announcements source={config.announcements} />
           {config.UNDER_MAINTENANCE ? <MaintenanceBanner /> : ""}
diff --git a/src/components/DevSiteBanner.css b/src/components/DevSiteBanner.css
new file mode 100644
index 0000000..b4399a1
--- /dev/null
+++ b/src/components/DevSiteBanner.css
@@ -0,0 +1,23 @@
+.devsite-banner {
+  text-align: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  justify-content: center;
+  top: 63px;
+  color: #555;
+  z-index: 1000;
+  width: 100%;
+  background-image: linear-gradient(45deg, #e3ebb9 25%, #f5baa6 25%, #f5baa6 50%, #e3ebb9 50%, #e3ebb9 75%, #f5baa6 75%, #f5baa6 100%);
+  background-size: 56.57px 56.57px;
+}
+
+.devsite-banner p {
+  text-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.7);
+}
diff --git a/src/components/DevSiteBanner.jsx b/src/components/DevSiteBanner.jsx
new file mode 100644
index 0000000..fce4f19
--- /dev/null
+++ b/src/components/DevSiteBanner.jsx
@@ -0,0 +1,30 @@
+import "./DevSiteBanner.css";
+import { useContext } from "react";
+import { Switch } from "antd";
+import { AppContext } from "../containers/AppContext";
+
+export default function DevSiteBanner() {
+  const { appState, setPermanent } = useContext(AppContext);
+
+  const handleShowDebug = () => {
+    setPermanent({ debug: !appState.debug });
+  };
+
+  return (
+    <div className="devsite-banner">
+      <p>
+        This is the development server. For the public release, please go to{" "}
+        <a href="https://neuronbridge.janelia.org">prod</a> | {" "}
+        { appState.isAdmin ? (
+        <Switch
+          checked={appState.debug}
+          onChange={handleShowDebug}
+          checkedChildren="debug enabled"
+          unCheckedChildren="debug disabled"
+          defaultChecked
+        />
+        ) : null }
+      </p>
+    </div>
+  );
+}