Update: Banner for maintenance window (supabase#40668)

* updated to use notice banner

* added link to maintenance

* updated banner

* updated message from support

Author: awaseem

apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx

@@ -2,41 +2,41 @@ import { LOCAL_STORAGE_KEYS } from 'common'
 import { noop } from 'lodash'
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
 
-const MIDDLEWARE_OUTAGE_BANNER_KEY = LOCAL_STORAGE_KEYS.MIDDLEWARE_OUTAGE_BANNER
+const MAINTENANCE_WINDOW_BANNER_KEY = LOCAL_STORAGE_KEYS.MAINTENANCE_WINDOW_BANNER
 
 // [Joshen] This file is meant to be dynamic - update this as and when we need to use the NoticeBanner
 
 type AppBannerContextType = {
-  middlewareOutageBannerAcknowledged: boolean
-  onUpdateAcknowledged: (key: typeof MIDDLEWARE_OUTAGE_BANNER_KEY) => void
+  maintenanceWindowBannerAcknowledged: boolean
+  onUpdateAcknowledged: (key: typeof MAINTENANCE_WINDOW_BANNER_KEY) => void
 }
 
 const AppBannerContext = createContext<AppBannerContextType>({
-  middlewareOutageBannerAcknowledged: false,
+  maintenanceWindowBannerAcknowledged: false,
   onUpdateAcknowledged: noop,
 })
 
 export const useAppBannerContext = () => useContext(AppBannerContext)
 
 export const AppBannerContextProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [middlewareOutageBannerAcknowledged, setmiddlewareOutageBannerAcknowledged] =
+  const [maintenanceWindowBannerAcknowledged, setMaintenanceWindowBannerAcknowledged] =
     useState<boolean>(false)
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const acknowledged = localStorage.getItem(MIDDLEWARE_OUTAGE_BANNER_KEY) === 'true'
-      setmiddlewareOutageBannerAcknowledged(acknowledged)
+      const maintenanceAcknowledged = localStorage.getItem(MAINTENANCE_WINDOW_BANNER_KEY) === 'true'
+      setMaintenanceWindowBannerAcknowledged(maintenanceAcknowledged)
     }
   }, [])
 
   const value = {
-    middlewareOutageBannerAcknowledged,
-    onUpdateAcknowledged: (key: typeof MIDDLEWARE_OUTAGE_BANNER_KEY) => {
-      if (key === MIDDLEWARE_OUTAGE_BANNER_KEY) {
+    maintenanceWindowBannerAcknowledged,
+    onUpdateAcknowledged: (key: typeof MAINTENANCE_WINDOW_BANNER_KEY) => {
+      if (key === MAINTENANCE_WINDOW_BANNER_KEY) {
         if (typeof window !== 'undefined') {
-          window.localStorage.setItem(MIDDLEWARE_OUTAGE_BANNER_KEY, 'true')
+          window.localStorage.setItem(MAINTENANCE_WINDOW_BANNER_KEY, 'true')
         }
-        setmiddlewareOutageBannerAcknowledged(true)
+        setMaintenanceWindowBannerAcknowledged(true)
       }
     },
   }
@@ -45,6 +45,6 @@ export const AppBannerContextProvider = ({ children }: PropsWithChildren<{}>) =>
 }
 
 export const useIsNoticeBannerShown = () => {
-  const { middlewareOutageBannerAcknowledged } = useAppBannerContext()
-  return middlewareOutageBannerAcknowledged
+  const { maintenanceWindowBannerAcknowledged } = useAppBannerContext()
+  return maintenanceWindowBannerAcknowledged
 }

apps/studio/components/layouts/AppLayout/NoticeBanner.tsx

@@ -1,45 +1,65 @@
-import { ExternalLink } from 'lucide-react'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { useAppBannerContext } from 'components/interfaces/App/AppBannerWrapperContext'
-import { Button, WarningIcon } from 'ui'
+import { Button, WarningIcon, cn } from 'ui'
 
 // This file, like AppBannerWrapperContext.tsx, is meant to be dynamic - update this as and when we need to use the NoticeBanner
-// We can disable this banner after 16th May 2025 as the middleware outage is complete
+// We can disable this banner after 23rd November 2025 as the maintenance window is complete
 
 export const NoticeBanner = () => {
   const router = useRouter()
 
   const appBannerContext = useAppBannerContext()
-  const { middlewareOutageBannerAcknowledged, onUpdateAcknowledged } = appBannerContext
+  const { maintenanceWindowBannerAcknowledged, onUpdateAcknowledged } = appBannerContext
 
-  const acknowledged = middlewareOutageBannerAcknowledged
+  const acknowledged = maintenanceWindowBannerAcknowledged
 
   if (router.pathname.includes('sign-in') || acknowledged) {
     return null
   }
 
   return (
-    <div className="flex items-center justify-center gap-x-4 bg py-0.5 border transition text-foreground border-default">
-      <WarningIcon className="w-4 h-4" />
-      <p className="text-sm">
-        Brief Dashboard outage: May 16, 2025, 22:00–23:00 UTC (no impact to your apps)
-      </p>
-      <div className="flex items-center gap-x-1">
-        <Button asChild type="link" iconRight={<ExternalLink size={14} />}>
-          <a
+    <div
+      className={cn(
+        'relative bg-warning-300 dark:bg-warning-200 border-b border-muted py-1 flex items-center justify-center flex-shrink-0 px-0'
+      )}
+    >
+      <div className="absolute inset-y-0 left-0 right-0 overflow-hidden z-0">
+        <div
+          className="absolute inset-0 opacity-[0.8%]"
+          style={{
+            background: `repeating-linear-gradient(
+                  45deg,
+                  currentColor,
+                  currentColor 10px,
+                  transparent 10px,
+                  transparent 20px
+                )`,
+            maskImage: 'linear-gradient(to top, black, transparent)',
+            WebkitMaskImage: 'linear-gradient(to top, black, transparent)',
+          }}
+        />
+      </div>
+      <div className="items-center flex flex-row gap-3 z-[1]">
+        <WarningIcon className="z-[1] flex-shrink-0" />
+        <div className="flex-1 text-xs sm:text-sm z-[1] text-warning">
+          Urgent Dashboard and Management API maintenance currently in progress. For full details,{' '}
+          <Link
+            href="https://status.supabase.com/incidents/z0l2157y33xk"
             target="_blank"
             rel="noreferrer"
-            href="https://status.supabase.com/incidents/8k0ysqkhscfj"
+            className="opacity-75 hover:opacity-100 underline"
           >
-            Learn more
-          </a>
-        </Button>
+            check here
+          </Link>
+          .
+        </div>
         <Button
           type="text"
-          className="opacity-75"
+          className="opacity-75 z-[1] flex-shrink-0"
           onClick={() => {
-            onUpdateAcknowledged('middleware-outage-banner-2025-05-16')
+            onUpdateAcknowledged('maintenance-window-banner-2025-11-21')
           }}
         >
           Dismiss

packages/common/constants/local-storage.ts

@@ -67,7 +67,7 @@ export const LOCAL_STORAGE_KEYS = {
   // Notice banner keys
   FLY_POSTGRES_DEPRECATION_WARNING: 'fly-postgres-deprecation-warning-dismissed',
   API_KEYS_FEEDBACK_DISMISSED: (ref: string) => `supabase-api-keys-feedback-dismissed-${ref}`,
-  MIDDLEWARE_OUTAGE_BANNER: 'middleware-outage-banner-2025-05-16',
+  MAINTENANCE_WINDOW_BANNER: 'maintenance-window-banner-2025-11-21',
   REPORT_DATERANGE: 'supabase-report-daterange',
 
   // api keys view switcher for new and legacy api keys