Sync URL search params with search term

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx

@@ -2,6 +2,7 @@
 import '../../eui-icons-cache'
 import { useModalActions, useModalIsOpen } from './modal.store'
 import { useSearchActions, useSearchTerm } from './search.store'
+import { useSyncSearchParams } from './useSyncURLSearchParams'
 import {
     EuiButton,
     EuiPortal,
@@ -29,6 +30,8 @@ export const SearchOrAskAiButton = () => {
     const isModalOpen = useModalIsOpen()
     const { openModal, closeModal, toggleModal } = useModalActions()
 
+    useSyncSearchParams()
+
     const positionCss = css`
         position: absolute;
         left: 50%;
@@ -61,7 +64,6 @@ export const SearchOrAskAiButton = () => {
             window.removeEventListener('keydown', handleKeydown)
         }
     }, [])
-
     return (
         <>
             <EuiButton

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx

@@ -17,7 +17,6 @@ export const SearchOrAskAiModal = () => {
     const searchTerm = useSearchTerm()
     const askAiTerm = useAskAiTerm()
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
-
     return (
         <div
             css={css`

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts

@@ -0,0 +1,41 @@
+import { useModalActions } from './modal.store'
+import { useSearchActions, useSearchTerm } from './search.store'
+import { useEffect, useState } from 'react'
+
+export const useSyncSearchParams = () => {
+    const searchTerm = useSearchTerm()
+    const { setSearchTerm, submitAskAiTerm } = useSearchActions()
+    const { openModal } = useModalActions()
+
+    const searchQueryParamKey = 'q'
+    const [isInitialized, setIsInitialized] = useState(false)
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search)
+        const urlQuery = params.get(searchQueryParamKey)
+        if (urlQuery) {
+            setSearchTerm(urlQuery)
+            submitAskAiTerm(urlQuery)
+        }
+        setIsInitialized(true)
+    }, [])
+
+    useEffect(() => {
+        if (!isInitialized) {
+            return
+        }
+        const url = new URL(window.location)
+        if (searchTerm) {
+            url.searchParams.set(searchQueryParamKey, searchTerm)
+        } else {
+            url.searchParams.delete(searchQueryParamKey)
+        }
+        window.history.replaceState({}, '', url)
+    }, [searchTerm, isInitialized])
+
+    useEffect(() => {
+        const url = new URL(window.location)
+        if (url.searchParams.has(searchQueryParamKey)) {
+            openModal()
+        }
+    }, [])
+}