account for header notifications in Copilot Search UI (#55298)

Author: Ebonsignori

src/frame/components/context/SharedUIContext.tsx

@@ -0,0 +1,34 @@
+// For places where we might need to know the "state" of one component from another component
+// Useful for when the inheritance between the two components is too complicated for passing down props, or they aren't in the same tree
+
+import React, { createContext, useContext, useState } from 'react'
+
+type SharedUIContextType = {
+  hasOpenHeaderNotifications: boolean
+  setHasOpenHeaderNotifications: (value: boolean) => void
+}
+
+const SharedUIContext = createContext<SharedUIContextType | undefined>(undefined)
+
+export const useSharedUIContext = (): SharedUIContextType => {
+  const context = useContext(SharedUIContext)
+  if (!context) {
+    throw new Error('useSharedUIContext must be used within a SharedUIContextProvider')
+  }
+  return context
+}
+
+export const SharedUIContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [hasOpenHeaderNotifications, setHasOpenHeaderNotifications] = useState(false)
+
+  return (
+    <SharedUIContext.Provider
+      value={{
+        hasOpenHeaderNotifications: hasOpenHeaderNotifications,
+        setHasOpenHeaderNotifications: setHasOpenHeaderNotifications,
+      }}
+    >
+      {children}
+    </SharedUIContext.Provider>
+  )
+}

src/frame/components/page-header/HeaderNotifications.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { XIcon } from '@primer/octicons-react'
@@ -9,6 +10,7 @@ import { ExcludesNull } from 'src/frame/components/lib/ExcludesNull'
 import { useVersion } from 'src/versions/components/useVersion'
 import { useUserLanguage } from 'src/languages/components/useUserLanguage'
 import styles from './HeaderNotifications.module.scss'
+import { useSharedUIContext } from 'src/frame/components/context/SharedUIContext'
 
 enum NotificationType {
   RELEASE = 'RELEASE',
@@ -30,6 +32,7 @@ export const HeaderNotifications = () => {
   const page = mainContext.page!
   const { userLanguage, setUserLanguageCookie } = useUserLanguage()
   const { languages } = useLanguages()
+  const { setHasOpenHeaderNotifications } = useSharedUIContext()
 
   const { t } = useTranslation('header')
 
@@ -78,6 +81,10 @@ export const HeaderNotifications = () => {
       : null,
   ].filter(ExcludesNull)
 
+  useEffect(() => {
+    setHasOpenHeaderNotifications(allNotifications.length > 0)
+  }, [allNotifications, setHasOpenHeaderNotifications])
+
   return (
     <div data-container="notifications">
       {allNotifications.map(({ type, content, onClose }, i) => {

src/frame/pages/app.tsx

@@ -16,6 +16,7 @@ import {
   LanguageItem,
 } from 'src/languages/components/LanguagesContext'
 import { useTheme } from 'src/color-schemes/components/useTheme'
+import { SharedUIContextProvider } from 'src/frame/components/context/SharedUIContext'
 
 type MyAppProps = AppProps & {
   isDotComAuthenticated: boolean
@@ -138,7 +139,9 @@ const MyApp = ({ Component, pageProps, languagesContext, stagingName }: MyAppPro
         preventSSRMismatch
       >
         <LanguagesContext.Provider value={languagesContext}>
-          <Component {...pageProps} />
+          <SharedUIContextProvider>
+            <Component {...pageProps} />
+          </SharedUIContextProvider>
         </LanguagesContext.Provider>
       </ThemeProvider>
     </>

src/search/components/input/SearchOverlay.tsx

@@ -23,6 +23,7 @@ import {
   ArrowRightIcon,
   ArrowLeftIcon,
 } from '@primer/octicons-react'
+import { focusTrap } from '@primer/behaviors'
 
 import { useTranslation } from 'src/languages/components/useTranslation'
 import { useVersion } from 'src/versions/components/useVersion'
@@ -42,7 +43,7 @@ import { EventType } from '@/events/types'
 import { ASK_AI_EVENT_GROUP, SEARCH_OVERLAY_EVENT_GROUP } from '@/events/components/event-groups'
 import type { AIReference } from '../types'
 import type { AutocompleteSearchHit, GeneralSearchHit } from '@/search/types'
-import { focusTrap } from '@primer/behaviors'
+import { useSharedUIContext } from '@/frame/components/context/SharedUIContext'
 
 type Props = {
   searchOverlayOpen: boolean
@@ -89,6 +90,9 @@ export function SearchOverlay({
   const [aiReferences, setAIReferences] = useState<AIReference[]>([] as AIReference[])
   const [aiCouldNotAnswer, setAICouldNotAnswer] = useState<boolean>(false)
   const [showSpinner, setShowSpinner] = useState(false)
+  const [scrollPos, setScrollPos] = useState(0)
+
+  const { hasOpenHeaderNotifications } = useSharedUIContext()
 
   // Group all events between open / close of the overlay together
   const searchEventGroupId = useRef<string>('')
@@ -106,6 +110,19 @@ export function SearchOverlay({
   // Group all events within an "Ask AI" session together
   const askAIEventGroupId = useRef<string>('')
 
+  // When there is a notification above the header, we need to adjust the top position of the overlay to account for it
+  useEffect(() => {
+    if (hasOpenHeaderNotifications) {
+      const handleScroll = () => {
+        setScrollPos(window.scrollY)
+      }
+
+      window.addEventListener('scroll', handleScroll)
+      return () => window.removeEventListener('scroll', handleScroll)
+    }
+  }, [hasOpenHeaderNotifications])
+  const overlayTopValue = scrollPos > 72 ? '0px' : `${88 - scrollPos}px !important`
+
   const {
     autoCompleteOptions,
     searchLoading,
@@ -653,6 +670,14 @@ export function SearchOverlay({
         onClickOutside={onClose}
         anchorSide="inside-center"
         className={cx(styles.overlayContainer, 'position-fixed')}
+        // We need to override the top value of the overlay when there are header notifications
+        sx={
+          hasOpenHeaderNotifications
+            ? {
+                top: overlayTopValue,
+              }
+            : undefined
+        }
         role="dialog"
         aria-modal="true"
         aria-labelledby={overlayHeadingId}