- {isHomepageVersion ? null :
)
diff --git a/src/frame/components/page-header/Header.tsx b/src/frame/components/page-header/Header.tsx
index 73ae0756f47d..9d9d29e2ff61 100644
--- a/src/frame/components/page-header/Header.tsx
+++ b/src/frame/components/page-header/Header.tsx
@@ -20,10 +20,10 @@ import { HeaderSearchAndWidgets } from './HeaderSearchAndWidgets'
import { useInnerWindowWidth } from './hooks/useInnerWindowWidth'
import { EXPERIMENTS } from '@/events/components/experiments/experiments'
import { useShouldShowExperiment } from '@/events/components/experiments/useShouldShowExperiment'
-import { useQueryParam } from '@/frame/components/hooks/useQueryParam'
import { useMultiQueryParams } from '@/search/components/hooks/useMultiQueryParams'
import { SearchOverlayContainer } from '@/search/components/input/SearchOverlayContainer'
import { useCTAPopoverContext } from '@/frame/components/context/CTAContext'
+import { useSearchOverlayContext } from '@/search/components/context/SearchOverlayContext'
import styles from './Header.module.scss'
@@ -34,10 +34,6 @@ export const Header = () => {
const { currentVersion } = useVersion()
const { t } = useTranslation(['header'])
const isRestPage = currentProduct && currentProduct.id === 'rest'
- const { queryParam: isSearchOpen, setQueryParam: setIsSearchOpen } = useQueryParam(
- 'search-overlay-open',
- true,
- )
const { params, updateParams } = useMultiQueryParams()
const [scroll, setScroll] = useState(false)
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
@@ -52,6 +48,7 @@ export const Header = () => {
const returnFocusRef = useRef(null)
const searchButtonRef = useRef(null)
const { initializeCTA } = useCTAPopoverContext()
+ const { isSearchOpen, setIsSearchOpen } = useSearchOverlayContext()
const { showExperiment: showNewSearch, experimentLoading: newSearchLoading } =
useShouldShowExperiment(EXPERIMENTS.ai_search_experiment)
diff --git a/src/search/components/context/SearchOverlayContext.tsx b/src/search/components/context/SearchOverlayContext.tsx
new file mode 100644
index 000000000000..80f0bebecd9f
--- /dev/null
+++ b/src/search/components/context/SearchOverlayContext.tsx
@@ -0,0 +1,30 @@
+// Context to manage the state of the SearchOverlay
+import { createContext, useContext, PropsWithChildren } from 'react'
+import { useQueryParam } from '@/frame/components/hooks/useQueryParam'
+
+type SearchOverlayState = {
+ isSearchOpen: boolean
+ setIsSearchOpen: (open: boolean) => void
+}
+
+const SearchOverlayContext = createContext(undefined)
+
+export function SearchOverlayContextProvider({ children }: PropsWithChildren) {
+ const { queryParam: isSearchOpen, setQueryParam: setIsSearchOpen } = useQueryParam(
+ 'search-overlay-open',
+ true,
+ )
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const useSearchOverlayContext = () => {
+ const ctx = useContext(SearchOverlayContext)
+ if (!ctx)
+ throw new Error('useSearchOverlayContext must be used inside ')
+ return ctx
+}
diff --git a/src/search/components/input/AISearchCTAPopup.tsx b/src/search/components/input/AISearchCTAPopup.tsx
index de05812fce93..8ddd1a69fb1a 100644
--- a/src/search/components/input/AISearchCTAPopup.tsx
+++ b/src/search/components/input/AISearchCTAPopup.tsx
@@ -1,19 +1,37 @@
import { useEffect, useRef } from 'react'
-import { Text, Button, Heading, Popover, useOnEscapePress } from '@primer/react'
+import { Text, Button, Heading, Popover, useOnEscapePress, Box } from '@primer/react'
import { focusTrap } from '@primer/behaviors'
import { useTranslation } from '@/languages/components/useTranslation'
import { useMaxWidthBreakpoint, useMinWidthBreakpoint } from '../hooks/useBreakpoint'
+import { useCTAPopoverContext } from '@/frame/components/context/CTAContext'
let previouslyFocused: HTMLElement | null = null
-export function AISearchCTAPopup({ isOpen, dismiss }: { isOpen: boolean; dismiss: () => void }) {
+export function AISearchCTAPopup({
+ isOpen,
+ dismiss,
+ setIsSearchOpen,
+ isDismissible = true,
+}: {
+ isOpen: boolean
+ dismiss?: () => void
+ setIsSearchOpen: (value: boolean) => void
+ isDismissible?: boolean
+}) {
const { t } = useTranslation('search')
+ const { permanentDismiss } = useCTAPopoverContext()
const isLargeOrUp = useMinWidthBreakpoint('large')
const isTooSmallForCTA = useMaxWidthBreakpoint('293px')
let overlayRef = useRef(null)
let dismissButtonRef = useRef(null)
+ const openSearch = () => {
+ setIsSearchOpen(true)
+ // They engaged with the CTA, so let's not show this popup for them anymore
+ permanentDismiss()
+ }
+
// For a11y, focus trap the CTA and allow it to be closed with Escape
useEffect(() => {
if (isTooSmallForCTA) {
@@ -32,7 +50,9 @@ export function AISearchCTAPopup({ isOpen, dismiss }: { isOpen: boolean; dismiss
if (previouslyFocused) {
previouslyFocused.focus()
}
- dismiss()
+ if (dismiss) {
+ dismiss()
+ }
}
useOnEscapePress(onDismiss)
@@ -41,6 +61,92 @@ export function AISearchCTAPopup({ isOpen, dismiss }: { isOpen: boolean; dismiss
return null
}
+ const innerContent = (
+ <>
+ 
+
+ {t('search.cta.heading')}
+
+
+ {t('search.cta.description')}
+
+
+ {isDismissible ? (
+
+ ) : null}
+
+
+
+ )
+
+ // If not dismissible, it's not being used as a popover
+ if (!isDismissible) {
+ return (
+
+ {innerContent}
+
+ )
+ }
+
return (
-
-
- {t('search.cta.heading')}
-
-
- {t('search.cta.description')}
-
-
+ {innerContent}
)
diff --git a/src/search/components/input/SearchBarButton.tsx b/src/search/components/input/SearchBarButton.tsx
index 411f4de0d954..eef75d1c29d9 100644
--- a/src/search/components/input/SearchBarButton.tsx
+++ b/src/search/components/input/SearchBarButton.tsx
@@ -50,7 +50,7 @@ export function SearchBarButton({ isSearchOpen, setIsSearchOpen, params, searchB
{/* We don't want to show the input when overlay is open */}
{!isSearchOpen ? (
<>
- ({ index: { _index: indexAlias } }),
- flushBytes: 10_000_000, // stop before breaker trips
- concurrency: 2, // back-off a bit
+ flushBytes: 4 * 1024 * 1024, // 4MB - Prevents too large of a bulk request which results in a 429 from ES
+ concurrency: 2,
refreshOnCompletion: true,
timeout: '5m',
+ // We could use `retries` and `wait` here, but then we don't have as granular control over logging and when to retry
}),
{
attempts,
-
-
-
+ )}
+ {page.type && }
+ {page.documentType && }
+ {status && }
+
+ {/* OpenGraph data */}
+ {page.fullTitle && (
+ <>
+
+
+
+
+
+
+ )}
+ {/* Twitter Meta Tags */}
+
+
+
+
+ {page.introPlainText && }
+
+
+
+ Skip to main content
+
+
+
)
}
diff --git a/src/frame/components/page-footer/SupportSection.module.scss b/src/frame/components/page-footer/SupportSection.module.scss
new file mode 100644
index 000000000000..1bb704c2bc40
--- /dev/null
+++ b/src/frame/components/page-footer/SupportSection.module.scss
@@ -0,0 +1,25 @@
+.supportGrid {
+ display: grid;
+ gap: var(--base-size-4);
+
+ // Mobile is 1 column
+ grid-template-columns: 1fr;
+ grid-column-gap: 1rem;
+
+ grid-row-gap: 2rem;
+}
+
+// Medium is 2 columns
+@media (min-width: 768px) {
+ .supportGrid {
+ grid-template-columns: repeat(2, 1fr);
+ grid-row-gap: 1rem;
+ }
+}
+
+// Large is 4 columns
+@media (min-width: 1280px) {
+ .supportGrid {
+ grid-template-columns: minmax(18rem, 1fr) repeat(3, 1fr);
+ }
+}
diff --git a/src/frame/components/page-footer/SupportSection.tsx b/src/frame/components/page-footer/SupportSection.tsx
index bfaf4e2fc64b..147e000cc5be 100644
--- a/src/frame/components/page-footer/SupportSection.tsx
+++ b/src/frame/components/page-footer/SupportSection.tsx
@@ -7,12 +7,17 @@ import { useMainContext } from 'src/frame/components/context/MainContext'
import { useVersion } from 'src/versions/components/useVersion'
import { useRouter } from 'next/router'
import { useTranslation } from 'src/languages/components/useTranslation'
+import { AISearchCTAPopup } from '@/search/components/input/AISearchCTAPopup'
+import { useSearchOverlayContext } from '@/search/components/context/SearchOverlayContext'
+
+import styles from './SupportSection.module.scss'
export const SupportSection = () => {
const { currentVersion } = useVersion()
const { relativePath, enterpriseServerReleases } = useMainContext()
const router = useRouter()
const { t } = useTranslation('footer')
+ const { setIsSearchOpen } = useSearchOverlayContext()
const isDeprecated =
enterpriseServerReleases.isOldestReleaseDeprecated &&
@@ -24,47 +29,25 @@ export const SupportSection = () => {
const showSurvey = !isDeprecated && !isSitePolicyDocs
const showContribution = !isDeprecated && !isEarlyAccess && isEnglish
const showSupport = true
- const totalCols = Number(showSurvey) + Number(showContribution) + Number(showSupport)
+ const showCopilotCTA = !isDeprecated && !isEarlyAccess && isEnglish
return (
+ {isHomepageVersion ? null :
-
+
+
+
+
{t('support_heading')}
-
- {showSurvey && (
-
1 && 'col-lg-6',
- totalCols > 2 && 'col-xl-3',
- )}
- >
-
- )}
- {showContribution && (
- 1 && 'col-lg-6',
- totalCols > 2 && 'col-xl-4',
- totalCols > 2 && showSurvey && 'offset-xl-1',
- )}
- >
-
+
+ {/* CSS Grid container */}
+ 1 && 'col-lg-6',
- totalCols > 2 && 'col-xl-3',
- totalCols > 2 && (showSurvey || showContribution) && 'offset-xl-1',
- )}
- >
-
+ >
+ {showCopilotCTA && (
+
+
-