From 09fe1a7ac01b2011b1f6c71adb0562b906bfa3f6 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Fri, 3 Dec 2021 17:31:43 +0100
Subject: [PATCH] feat: Add optional banner to frontend via config entry
 (solves #128)

---
 api/config.py.example                         |  1 +
 frontend/src/App.module.less                  | 29 ++++++++++++++++---
 frontend/src/{App.js => App.tsx}              |  8 ++++-
 frontend/src/components/Page/Page.module.less |  1 +
 frontend/src/config.ts                        |  4 +++
 5 files changed, 38 insertions(+), 5 deletions(-)
 rename frontend/src/{App.js => App.tsx} (95%)

diff --git a/api/config.py.example b/api/config.py.example
index 5cdcf63..faca230 100644
--- a/api/config.py.example
+++ b/api/config.py.example
@@ -37,6 +37,7 @@ FRONTEND_CONFIG = {
     "imprintUrl": "https://example.com/imprint",
     "privacyPolicyUrl": "https://example.com/privacy",
     "mapHome": {"zoom": 6, "longitude": 10.2, "latitude": 51.3},
+    "banner": {"text": "This is a test installation.", "style": "warning"},
 }
 
 # If the API should serve generated tiles, this is the path where the tiles are
diff --git a/frontend/src/App.module.less b/frontend/src/App.module.less
index 58debe8..be1b03a 100644
--- a/frontend/src/App.module.less
+++ b/frontend/src/App.module.less
@@ -1,8 +1,6 @@
 @import 'styles.less';
 
 :global(#root) {
-  padding-top: @menuHeight;
-
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -72,7 +70,10 @@
   }
 }
 
-.menu {
+.menu.menu {
+  flex: 0 0 auto;
+  margin: 0;
+
   > :global(.ui.container) {
     height: @menuHeight;
     align-items: stretch;
@@ -81,7 +82,10 @@
   align-items: center;
   justify-content: center;
   color: white;
-  flex: 1 0 auto;
+  border-radius: 0;
+  border-right: 0;
+  border-left: 0;
+  border-top: 0;
 
   ul {
     margin: 0;
@@ -106,3 +110,20 @@
     }
   }
 }
+
+.banner {
+  padding: 8px;
+  z-index: 100;
+  border-bottom: 1px solid #DDD;
+
+  &.warning {
+    background: #FFD54F;
+    border-color: #FBC02D;
+    color: #263238;
+  }
+  &.info {
+    background: #4FC3F7;
+    border-color: #0D47A1;
+    color: #0D47A1;
+  }
+}
diff --git a/frontend/src/App.js b/frontend/src/App.tsx
similarity index 95%
rename from frontend/src/App.js
rename to frontend/src/App.tsx
index 360c28a..c2edc73 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {List, Grid, Container, Menu, Header, Dropdown} from 'semantic-ui-react'
 import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
@@ -50,6 +51,10 @@ function DropdownItemForLink({navigate, ...props}) {
   )
 }
 
+function Banner({text, style = 'warning'}: {text: string, style: 'warning' | 'info'}) {
+  return <div className={classnames(styles.banner, styles[style])}>{text}</div>
+}
+
 const App = connect((state) => ({login: state.login}))(function App({login}) {
   const config = useConfig()
   const apiVersion = useObservable(() => from(api.get('/info')).pipe(pluck('version')))
@@ -60,7 +65,8 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
 
   return config ? (
     <Router basename={config.basename}>
-      <Menu fixed="top" className={styles.menu}>
+      {config?.banner && <Banner {...config.banner} />}
+      <Menu className={styles.menu}>
         <Container>
           <Link to="/" component={MenuItemForLink} header className={styles.pageTitle}>
             OpenBikeSensor
diff --git a/frontend/src/components/Page/Page.module.less b/frontend/src/components/Page/Page.module.less
index b89ac27..a8d6178 100644
--- a/frontend/src/components/Page/Page.module.less
+++ b/frontend/src/components/Page/Page.module.less
@@ -3,6 +3,7 @@
 .page {
   margin-top: 32px;
   margin-bottom: 32px;
+  flex: 1 0 auto;
 }
 
 .small {
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 6b6f4f1..8d10065 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -20,6 +20,10 @@ export interface Config {
   obsMapSource?: MapSoure
   imprintUrl?: string
   privacyPolicyUrl?: string
+  banner?: {
+    text: string
+    style?: "warning" | "info"
+  }
 }
 
 async function loadConfig(): Promise<Config> {