Add info banner (#489)

* add info banner * store banner state in cookie * rename Banner.tsx * update snapshots * update banner text * update banner * update snapshots
ElectronicBabylonianLiterature · Jul 10, 2024 · 5e4972d · 5e4972d
1 parent c0af223
commit 5e4972d
Show file tree

Hide file tree

Showing 14 changed files with 1,001 additions and 0 deletions.
diff --git a/src/Header.css b/src/Header.css
@@ -44,3 +44,9 @@
 #menu-lines {
   padding: 0 40px;
 }
+
+.Header__info-banner {
+  padding-left: 0;
+  padding-right: 0;
+  max-width: 1200px;
+}
diff --git a/src/InfoBanner.tsx b/src/InfoBanner.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import Alert from 'react-bootstrap/Alert'
+import './Header.css'
+import { Container } from 'react-bootstrap'
+import { set as setCookie, get as getCookie } from 'es-cookie'
+
+function InfoBanner(): JSX.Element | null {
+  const initialState = getCookie('eblShowInfoBanner') !== 'false'
+  const [show, setShow] = useState(initialState)
+
+  const midnight = new Date()
+  midnight.setHours(23, 59, 59)
+
+  return show ? (
+    <Container fluid className="Header__info-banner">
+      <Alert
+        variant="warning"
+        onClose={() => {
+          setShow(false)
+          setCookie('eblShowInfoBanner', 'false', { expires: midnight })
+        }}
+        dismissible
+      >
+        <strong>Scheduled Maintenance Notice:</strong> On{' '}
+        <strong>Monday, July 15, 2024, from 10:00 AM to 12:00 PM CEST</strong>,
+        the eBL servers will be undergoing scheduled maintenance. During this
+        time, you will not be able to log in or make any changes to records. The
+        maintenance may also cause temporary service interruptions. Registered
+        users will receive an email notification once the maintenance is
+        complete.
+      </Alert>
+    </Container>
+  ) : null
+}
+
+export default InfoBanner
diff --git a/src/about/ui/__snapshots__/about.test.tsx.snap b/src/about/ui/__snapshots__/about.test.tsx.snap
@@ -8,6 +8,39 @@ exports[`Snapshot 1`] = `
     <div
       class="main__content"
     >
+      <div
+        class="Header__info-banner container-fluid"
+      >
+        <div
+          class="fade alert alert-warning alert-dismissible show"
+          role="alert"
+        >
+          <button
+            class="close"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+            >
+              ×
+            </span>
+            <span
+              class="sr-only"
+            >
+              Close alert
+            </span>
+          </button>
+          <strong>
+            Scheduled Maintenance Notice:
+          </strong>
+           On
+           
+          <strong>
+            Monday, July 15, 2024, from 10:00 AM to 12:00 PM CEST
+          </strong>
+          , the eBL servers will be undergoing scheduled maintenance. During this time, you will not be able to log in or make any changes to records. The maintenance may also cause temporary service interruptions. Registered users will receive an email notification once the maintenance is complete.
+        </div>
+      </div>
       <header
         class="main__header"
       >

diff --git a/src/common/AppContent.tsx b/src/common/AppContent.tsx
@@ -6,6 +6,7 @@ import _ from 'lodash'
 import Breadcrumbs, { Crumb } from 'common/Breadcrumbs'
 
 import './AppContent.sass'
+import Banner from 'InfoBanner'
 
 interface Props {
   crumbs?: readonly Crumb[]
@@ -31,6 +32,7 @@ export default function AppContent({
       })}
     >
       <div className="main__content">
+        <Banner />
         <header className="main__header">
           <Breadcrumbs className="main__breadcrumbs" crumbs={crumbs} />
           <h2 className="main__heading">{title || _.last(crumbs)?.text}</h2>