Add a maintenance mode banner

2024-08-28 12:08:29 +08:00
parent 47dc66b44d
commit c1f46e70b2
6 changed files with 89 additions and 41 deletions
--- a/packages/web/components/elements/MaintenanceBanner.tsx
+++ b/packages/web/components/elements/MaintenanceBanner.tsx
@ -0,0 +1,42 @@
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { CloseButton } from './CloseButton'
+import { HStack, SpanBox } from './LayoutPrimitives'
+
+export const MaintenanceBanner = () => {
+  const [
+    showMaintenanceMode,
+    setShowMaintenanceMode,
+    isLoadingShowMaintenanceMode,
+  ] = usePersistedState({
+    key: 'show-maintenance-mode',
+    isSessionStorage: false,
+    initialValue: true,
+  })
+  return (
+    <>
+      {!isLoadingShowMaintenanceMode && showMaintenanceMode && (
+        <HStack
+          css={{
+            p: '5px',
+            width: '100%',
+            position: 'fixed',
+            bg: '#FF5733',
+            color: '#FFFFFF',
+            zIndex: '100',
+          }}
+          alignment="center"
+          distribution="center"
+        >
+          Omnivore will be undergoing maintenance for 30 minutes at 04:00 UTC,
+          during that time the website and APIs will be unavailable.
+          <SpanBox css={{ width: '50px' }} />
+          <CloseButton
+            close={() => {
+              setShowMaintenanceMode(false)
+            }}
+          />
+        </HStack>
+      )}
+    </>
+  )
+}
--- a/packages/web/components/nav-containers/HomeContainer.tsx
+++ b/packages/web/components/nav-containers/HomeContainer.tsx
@ -181,8 +181,9 @@ type NavigationContextType = {
  dispatch: React.Dispatch<Action>
 }

-const NavigationContext =
-  createContext<NavigationContextType | undefined>(undefined)
+const NavigationContext = createContext<NavigationContextType | undefined>(
+  undefined
+)

 export const useNavigation = (): NavigationContextType => {
  const context = useContext(NavigationContext)
--- a/packages/web/components/templates/AuthLayout.tsx
+++ b/packages/web/components/templates/AuthLayout.tsx
@ -1,4 +1,5 @@
 import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
 import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
@ -11,6 +12,7 @@ type ProfileLayoutProps = {
 export function AuthLayout(props: ProfileLayoutProps): JSX.Element {
  return (
    <>
+      <MaintenanceBanner />
      <VStack
        alignment="center"
        distribution="center"
--- a/packages/web/components/templates/LoginLayout.tsx
+++ b/packages/web/components/templates/LoginLayout.tsx
@ -10,10 +10,12 @@ import type { LoginFormProps } from './LoginForm'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'

 import featureFullWidthImage from '../../public/static/images/login/login-feature-image-full.png'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'

 export function LoginLayout(props: LoginFormProps): JSX.Element {
  return (
    <>
+      <MaintenanceBanner />
      <MediumBreakpointBox
        smallerLayoutNode={<MobileLoginLayout {...props} />}
        largerLayoutNode={<MediumLoginLayout {...props} />}
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@ -1,7 +1,6 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
 import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { useRouter } from 'next/router'
@ -19,10 +18,12 @@ import { List } from '@phosphor-icons/react'
 import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
 import { AddLinkModal } from './AddLinkModal'
 import useWindowDimensions from '../../lib/hooks/useGetWindowDimensions'
-import { useAddItem } from '../../lib/networking/library_items/useLibraryItems'
 import { useHandleAddUrl } from '../../lib/hooks/useHandleAddUrl'
 import { useGetViewer } from '../../lib/networking/viewer/useGetViewer'
 import { useQueryClient } from '@tanstack/react-query'
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { CloseButton } from '../elements/CloseButton'
+import { MaintenanceBanner } from '../elements/MaintenanceBanner'

 export type NavigationSection =
  | 'home'
@ -109,15 +110,6 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
  }, [showLogout])

  const { logout } = useLogout()
-  // if (isLoading) {
-  //   return (
-  //     <HStack
-  //       css={{ width: '100vw', height: '100vh' }}
-  //       distribution="start"
-  //       alignment="start"
-  //     ></HStack>
-  //   )
-  // }

  return (
    <HStack
@ -126,6 +118,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
      alignment="start"
    >
      <PageMetaData path={props.section} title={props.title} />
+      <MaintenanceBanner />
      <Header
        menuOpen={props.showNavigationMenu}
        toggleMenu={() => {
--- a/yarn.lock
+++ b/yarn.lock
@ -5073,6 +5073,15 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-announce@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-announce/-/react-announce-0.2.0.tgz#dcacff8aa61deda7c7ba6b7227f645036151086c"
+  integrity sha512-Ccn4nKF2nLeHZ2XAay154qy9/oXxLdC3vhzGhsQpF4gkSG8wd5dHgVhoBtKUEWf2QYro9oLqP6B9DkY09MRBew==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-arrow@1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@ -5140,6 +5149,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context@0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875"
@ -5413,6 +5427,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "1.0.2"

+"@radix-ui/react-primitive@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-progress@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.1.tgz#49ec2f729a67ba3b580a90356fc1d871466a4212"
@ -5488,6 +5509,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.1"

+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@^1.0.1":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.2.tgz#e3d1b9fe18b6b1173aadc8b8e6efdc96a28a70f8"
@ -5576,6 +5604,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@radix-ui/react-use-previous@0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@ -29395,7 +29428,7 @@ string-template@~0.2.1:
  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
  integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=

-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -29421,15 +29454,6 @@ string-width@^1.0.1:
    is-fullwidth-code-point "^2.0.0"
    strip-ansi "^4.0.0"

-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@ -29584,7 +29608,7 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -29619,13 +29643,6 @@ strip-ansi@^6.0.0:
  dependencies:
    ansi-regex "^5.0.0"

-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.0:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@ -32325,7 +32342,7 @@ workerpool@6.2.1:
  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
  integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -32351,15 +32368,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"