From 7e417040df54b44bf7dff73c5d42bf85e93f0fa0 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Tue, 2 Sep 2025 14:14:31 +0200 Subject: [PATCH 1/3] Sync URL search params with search term --- .../SearchOrAskAi/SearchOrAskAiButton.tsx | 9 ++-- .../SearchOrAskAi/SearchOrAskAiModal.tsx | 1 - .../SearchOrAskAi/useSyncURLSearchParams.ts | 41 +++++++++++++++++++ 3 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx index 23ab5b61c..3e633aef2 100644 --- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx +++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx @@ -14,7 +14,8 @@ import { } from '@elastic/eui' import { css } from '@emotion/react' import * as React from 'react' -import { useEffect, Suspense, lazy } from 'react' +import { useEffect, Suspense, lazy, useState } from 'react' +import { useSyncSearchParams } from "./useSyncURLSearchParams"; // Lazy load the modal component const SearchOrAskAiModal = lazy(() => @@ -25,9 +26,12 @@ const SearchOrAskAiModal = lazy(() => export const SearchOrAskAiButton = () => { const searchTerm = useSearchTerm() - const { clearSearchTerm } = useSearchActions() + const { clearSearchTerm } = + useSearchActions() const isModalOpen = useModalIsOpen() const { openModal, closeModal, toggleModal } = useModalActions() + + useSyncSearchParams(); const positionCss = css` position: absolute; @@ -61,7 +65,6 @@ export const SearchOrAskAiButton = () => { window.removeEventListener('keydown', handleKeydown) } }, []) - return ( <> { const searchTerm = useSearchTerm() const askAiTerm = useAskAiTerm() const { setSearchTerm, submitAskAiTerm } = useSearchActions() - return (
{ + 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() + } + }, []) +}; From 5c151f4eee2255ede74b60d0cf92a90a73ef846c Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Tue, 2 Sep 2025 14:20:12 +0200 Subject: [PATCH 2/3] Remove unused import --- .../Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx index 3e633aef2..233c1321b 100644 --- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx +++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx @@ -14,7 +14,7 @@ import { } from '@elastic/eui' import { css } from '@emotion/react' import * as React from 'react' -import { useEffect, Suspense, lazy, useState } from 'react' +import { useEffect, Suspense, lazy } from 'react' import { useSyncSearchParams } from "./useSyncURLSearchParams"; // Lazy load the modal component From 651056037c1a71b48f731d2b3be6402a6b2d59e5 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Tue, 2 Sep 2025 14:20:26 +0200 Subject: [PATCH 3/3] Run prettier --- .../web-components/SearchOrAskAi/SearchOrAskAiButton.tsx | 9 ++++----- .../SearchOrAskAi/useSyncURLSearchParams.ts | 8 ++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx index 233c1321b..bc07aa8a5 100644 --- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx +++ b/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, @@ -15,7 +16,6 @@ import { import { css } from '@emotion/react' import * as React from 'react' import { useEffect, Suspense, lazy } from 'react' -import { useSyncSearchParams } from "./useSyncURLSearchParams"; // Lazy load the modal component const SearchOrAskAiModal = lazy(() => @@ -26,12 +26,11 @@ const SearchOrAskAiModal = lazy(() => export const SearchOrAskAiButton = () => { const searchTerm = useSearchTerm() - const { clearSearchTerm } = - useSearchActions() + const { clearSearchTerm } = useSearchActions() const isModalOpen = useModalIsOpen() const { openModal, closeModal, toggleModal } = useModalActions() - - useSyncSearchParams(); + + useSyncSearchParams() const positionCss = css` position: absolute; diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts index 8fa3dc038..e468e907f 100644 --- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts +++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts @@ -1,6 +1,6 @@ -import { useEffect, useState } from "react"; -import { useSearchActions, useSearchTerm } from "./search.store"; -import { useModalActions } from "./modal.store"; +import { useModalActions } from './modal.store' +import { useSearchActions, useSearchTerm } from './search.store' +import { useEffect, useState } from 'react' export const useSyncSearchParams = () => { const searchTerm = useSearchTerm() @@ -38,4 +38,4 @@ export const useSyncSearchParams = () => { openModal() } }, []) -}; +}