Remove Copilot banner from footer (#58164)

data/ui.yml

@@ -69,11 +69,6 @@ search:
     general_title: There was an error loading search results.
     ai_title: There was an error loading Copilot.
     description: You can still use this field to search our docs.
-  cta:
-    heading: Get quick answers!
-    description: Ask Copilot your question.
-    dismiss: Dismiss
-    ask_copilot: Ask Copilot
 old_search:
   description: Enter a search term to find it in the GitHub Docs.
   placeholder: Search GitHub Docs

src/fixtures/fixtures/data/ui.yml

@@ -69,11 +69,6 @@ search:
     general_title: There was an error loading search results.
     ai_title: There was an error loading Copilot.
     description: You can still use this field to search our docs.
-  cta:
-    heading: Get quick answers!
-    description: Ask Copilot your question.
-    dismiss: Dismiss
-    ask_copilot: Ask Copilot
 old_search:
   description: Enter a search term to find it in the GitHub Docs.
   placeholder: Search GitHub Docs

src/frame/components/page-footer/SupportSection.module.scss

@@ -17,9 +17,9 @@
   }
 }
 
-// Large is 4 columns
+// Large is 3 columns
 @media (min-width: 1280px) {
   .supportGrid {
-    grid-template-columns: minmax(18rem, 1fr) repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }

src/frame/components/page-footer/SupportSection.tsx

@@ -7,8 +7,6 @@ import { useMainContext } from '@/frame/components/context/MainContext'
 import { useVersion } from '@/versions/components/useVersion'
 import { useRouter } from 'next/router'
 import { useTranslation } from '@/languages/components/useTranslation'
-import { AISearchCTAPopup } from '@/search/components/input/AISearchCTAPopup'
-import { useSearchOverlayContext } from '@/search/components/context/SearchOverlayContext'
 
 import styles from './SupportSection.module.scss'
 
@@ -17,7 +15,6 @@ export const SupportSection = () => {
   const { relativePath, enterpriseServerReleases } = useMainContext()
   const router = useRouter()
   const { t } = useTranslation('footer')
-  const { setIsSearchOpen } = useSearchOverlayContext()
 
   const isDeprecated =
     enterpriseServerReleases.isOldestReleaseDeprecated &&
@@ -29,7 +26,6 @@ export const SupportSection = () => {
   const showSurvey = !isDeprecated && !isSitePolicyDocs
   const showContribution = !isDeprecated && !isEarlyAccess && isEnglish
   const showSupport = true
-  const showCopilotCTA = !isDeprecated && !isEarlyAccess && isEnglish
 
   return (
     <section className="container-xl mt-lg-8 mt-6 px-3 px-md-6 no-print mx-auto">
@@ -42,14 +38,6 @@ export const SupportSection = () => {
           styles.supportGrid /* ← adds the grid rules */,
         )}
       >
-        {showCopilotCTA && (
-          <AISearchCTAPopup
-            isOpen
-            setIsSearchOpen={setIsSearchOpen}
-            isDismissible={false}
-            bannerType="footer"
-          />
-        )}
         {showSurvey && <Survey />}
         {showContribution && <Contribution />}
         {showSupport && <Support />}

src/search/components/input/AISearchCTAPopup.tsx

@@ -1,199 +0,0 @@
-import { useEffect, useRef } from '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'
-import { sendEvent } from '@/events/components/events'
-import { EventType } from '@/events/types'
-
-let previouslyFocused: HTMLElement | null = null
-
-export function AISearchCTAPopup({
-  isOpen,
-  dismiss,
-  setIsSearchOpen,
-  isDismissible = true,
-  bannerType = 'popover',
-  instanceId = '',
-}: {
-  isOpen: boolean
-  dismiss?: () => void
-  setIsSearchOpen: (value: boolean) => void
-  isDismissible?: boolean
-  bannerType?: 'popover' | 'footer'
-  instanceId?: string
-}) {
-  const { t } = useTranslation('search')
-  const { permanentDismiss } = useCTAPopoverContext()
-  const isLargeOrUp = useMinWidthBreakpoint('large')
-  const isTooSmallForCTA = useMaxWidthBreakpoint('293px')
-  let overlayRef = useRef<HTMLDivElement>(null)
-  let dismissButtonRef = useRef<HTMLButtonElement>(null)
-
-  // Analytics helper functions
-  const sendCTAAnalytics = (variation: 'dismiss' | 'ask_copilot') => {
-    const experimentName =
-      bannerType === 'footer' ? 'copilot_footer_banner' : 'copilot_popover_banner'
-    sendEvent({
-      type: EventType.experiment,
-      experiment_name: experimentName,
-      experiment_variation: variation,
-      experiment_success: true,
-    })
-  }
-
-  const openSearch = () => {
-    // Send analytics before taking action
-    sendCTAAnalytics('ask_copilot')
-    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) {
-      return
-    }
-    if (isOpen && overlayRef.current && dismissButtonRef.current) {
-      focusTrap(overlayRef.current, dismissButtonRef.current)
-      previouslyFocused = document.activeElement as HTMLElement | null
-    }
-  }, [isOpen, isTooSmallForCTA])
-
-  const onDismiss = () => {
-    if (isTooSmallForCTA) {
-      return
-    }
-    // Send analytics before taking action
-    sendCTAAnalytics('dismiss')
-    if (previouslyFocused) {
-      previouslyFocused.focus()
-    }
-    if (dismiss) {
-      dismiss()
-    }
-  }
-
-  useOnEscapePress(onDismiss)
-
-  if (isTooSmallForCTA) {
-    return null
-  }
-
-  const innerContent = (
-    <>
-      <img
-        src="/assets/images/search/copilot-action.png"
-        width="100%"
-        alt="The Copilot Icon in front of an explosion of color."
-      />
-      <Heading
-        as="h2"
-        id={`ai-search-cta-heading-${bannerType}${instanceId ? `-${instanceId}` : ''}`}
-        sx={{
-          fontSize: '16px',
-          fontWeight: 'bold',
-          marginTop: '12px',
-        }}
-      >
-        {t('search.cta.heading')}
-      </Heading>
-      <Text
-        id="ai-search-cta-description"
-        sx={{
-          display: 'block',
-          fontSize: '15px',
-          marginTop: '12px',
-        }}
-      >
-        {t('search.cta.description')}
-      </Text>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}
-      >
-        {isDismissible ? (
-          <Button
-            ref={dismissButtonRef}
-            aria-label="Dismiss"
-            sx={{
-              marginTop: '16px',
-              fontWeight: 'bold',
-            }}
-            onClick={onDismiss}
-          >
-            {t('search.cta.dismiss')}
-          </Button>
-        ) : null}
-        <Button
-          variant="primary"
-          sx={
-            isDismissible
-              ? {
-                  marginTop: '16px',
-                  marginLeft: '8px',
-                  fontWeight: 'bold',
-                }
-              : {
-                  marginTop: '16px',
-                  width: '100%',
-                }
-          }
-          onClick={openSearch}
-        >
-          {t('search.cta.ask_copilot')}
-        </Button>
-      </Box>
-    </>
-  )
-
-  // If not dismissible, it's not being used as a popover
-  if (!isDismissible) {
-    return (
-      <Box
-        sx={{
-          position: 'relative',
-          width: '270px',
-          border: '1px solid var(--borderColor-default, var(--color-border-default, #d0d7de))',
-          borderRadius: '6px',
-          padding: '16px',
-        }}
-      >
-        {innerContent}
-      </Box>
-    )
-  }
-
-  return (
-    <Popover
-      ref={overlayRef}
-      role="alertdialog"
-      aria-modal="true"
-      aria-labelledby={`ai-search-cta-heading-${bannerType}${instanceId ? `-${instanceId}` : ''}`}
-      aria-describedby="ai-search-cta-description"
-      open={isOpen}
-      caret={isLargeOrUp ? 'top' : 'top-right'}
-      sx={{
-        top: '55px',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        width: '270px',
-        // When in mobile (< large) the search bar collapses to a button on the RHS of the screen
-        // To align the popover with the button we need to move it to the left
-        marginLeft: isLargeOrUp ? 0 : -235,
-      }}
-    >
-      <Popover.Content
-        sx={{
-          width: '270px',
-        }}
-      >
-        {innerContent}
-      </Popover.Content>
-    </Popover>
-  )
-}