add privacy disclaimer to AI Search overlay (#55051)

Author: Ebonsignori

data/ui.yml

@@ -43,6 +43,7 @@ search:
     view_all_search_results: View more results
     no_results_found: No results found
     search_docs_with_query: Search docs for "{{query}}"
+    privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy">GitHub Privacy Statement</a> to review how GitHub collects and uses your data.
   ai:
     disclaimer: Copilot uses AI. Check for mistakes by reviewing the links in the response.
     references: References from these articles

src/fixtures/fixtures/data/ui.yml

@@ -43,6 +43,7 @@ search:
     view_all_search_results: View more results
     no_results_found: No results found
     search_docs_with_query: Search docs for "{{query}}"
+    privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy">GitHub Privacy Statement</a> to review how GitHub collects and uses your data.
   ai:
     disclaimer: Copilot uses AI. Check for mistakes by reviewing the links in the response.
     references: References from these articles

src/search/components/input/SearchOverlay.module.scss

@@ -73,6 +73,9 @@
   color: var(--fgColor-success, var(--fgColor-open, green)) !important;
   background-color: var(--overlay-bgColor);
   margin-right: 1em;
+  height: 22px !important;
+  font-weight: 700 !important;
+  border-color: unset !important;
 }
 
 .loadingContainer {

src/search/components/input/SearchOverlay.tsx

@@ -9,6 +9,7 @@ import {
   Overlay,
   Spinner,
   Stack,
+  Text,
   TextInput,
   Token,
 } from '@primer/react'
@@ -691,28 +692,50 @@ export function SearchOverlay({
           }}
         />
         <footer key="description" className={styles.footer}>
-          <Token
-            as="span"
-            text="Beta"
-            className={styles.betaToken}
+          <Box
             sx={{
-              backgroundColor: 'var(--overlay-bg-color)',
+              display: 'flex',
+              alignContent: 'start',
+              alignItems: 'start',
             }}
-          />
-          <Link
-            onClick={async () => {
-              if (await getIsStaff()) {
-                // Hubbers users use an internal discussion for feedback
-                window.open('https://github.com/github/docs-engineering/discussions/5295', '_blank')
-              } else {
-                // TODO: On ship date set this value
-                // window.open('TODO', '_blank')
-              }
-            }}
-            as="button"
           >
-            {t('search.overlay.give_feedback')}
-          </Link>
+            <Token
+              as="span"
+              text="Beta"
+              className={styles.betaToken}
+              sx={{
+                backgroundColor: 'var(--overlay-bg-color)',
+              }}
+            />
+            <Link
+              onClick={async () => {
+                if (await getIsStaff()) {
+                  // Hubbers users use an internal discussion for feedback
+                  window.open(
+                    'https://github.com/github/docs-engineering/discussions/5295',
+                    '_blank',
+                  )
+                } else {
+                  // TODO: On ship date set this value
+                  // window.open('TODO', '_blank')
+                }
+              }}
+              as="button"
+            >
+              {t('search.overlay.give_feedback')}
+            </Link>
+          </Box>
+          <Text
+            as="p"
+            sx={{
+              // eslint-disable-next-line primer-react/new-color-css-vars
+              color: 'var(--color-fg-muted)',
+              marginTop: 2,
+              marginBottom: 0,
+              fontSize: 'small',
+            }}
+            dangerouslySetInnerHTML={{ __html: t('search.overlay.privacy_disclaimer') }}
+          />
         </footer>
       </Overlay>
     </>