From 5a154e17b3180986c852e2f4b8e5f607063fa725 Mon Sep 17 00:00:00 2001
From: Mykola Harmash <mykola.harmash@elastic.co>
Date: Mon, 18 May 2026 16:25:42 +0200
Subject: [PATCH 1/2] [Obs Onboarding] Fix app crash when parsing invalid
 syntax from search URL param

---
 .../onboarding_flow_form.test.tsx             | 25 ++++++++++++++-----
 .../onboarding_flow_form.tsx                  | 16 ++++++++++--
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.test.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.test.tsx
index 51a49db433dde..3844a9688e3a7 100644
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.test.tsx
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.test.tsx
@@ -40,16 +40,19 @@ jest.mock('../package_list/package_list', () => ({
   ),
 }));
 
-jest.mock('../package_list_search_form/package_list_search_form', () => ({
-  PackageListSearchForm: () => <div data-test-subj="package-search-form">Search Form</div>,
-}));
-
 const mockUseKibana = useKibana as jest.MockedFunction<typeof useKibana>;
 const mockUsePricingFeature = usePricingFeature as jest.MockedFunction<typeof usePricingFeature>;
+const mockPackageListSearchForm = jest.fn(({ searchQuery }: { searchQuery: string }) => (
+  <div data-test-subj="package-search-form">Search Form: {searchQuery}</div>
+));
+
+jest.mock('../package_list_search_form/package_list_search_form', () => ({
+  PackageListSearchForm: (props: { searchQuery: string }) => mockPackageListSearchForm(props),
+}));
 
-const renderWithProviders = (children: React.ReactNode) => {
+const renderWithProviders = (children: React.ReactNode, initialEntries: string[] = ['/']) => {
   return render(
-    <MemoryRouter>
+    <MemoryRouter initialEntries={initialEntries}>
       <I18nProvider>{children}</I18nProvider>
     </MemoryRouter>
   );
@@ -177,5 +180,15 @@ describe('OnboardingFlowForm', () => {
       expect(screen.getByText(/Search through other ways of ingesting data/)).toBeInTheDocument();
       expect(screen.getByTestId('package-search-form')).toBeInTheDocument();
     });
+
+    it('should pass empty searchQuery to search form when URL search is invalid KQL', () => {
+      mockUsePricingFeature.mockReturnValue(true);
+
+      renderWithProviders(<OnboardingFlowForm />, ['/?search=host:(']);
+
+      expect(mockPackageListSearchForm).toHaveBeenCalledWith(
+        expect.objectContaining({ searchQuery: '' })
+      );
+    });
   });
 });
diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
index e575d13a475c5..9fc2a9b2ee7c9 100644
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -21,6 +21,7 @@ import {
   useEuiTheme,
   EuiBadge,
   EuiFlexGrid,
+  EuiSearchBar,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 
@@ -143,11 +144,13 @@ export const OnboardingFlowForm: FunctionComponent = () => {
 
   const suggestedPackagesRef = useRef<HTMLDivElement | null>(null);
   const searchResultsRef = useRef<HTMLDivElement | null>(null);
-  const [integrationSearch, setIntegrationSearch] = useState(searchParams.get('search') ?? '');
+  const [integrationSearch, setIntegrationSearch] = useState(
+    parseSearchQuery(searchParams.get('search'))
+  );
   const { euiTheme } = useEuiTheme();
 
   useEffect(() => {
-    const searchParam = searchParams.get('search') ?? '';
+    const searchParam = parseSearchQuery(searchParams.get('search'));
     if (integrationSearch === searchParam) return;
     const entries: Record<string, string> = Object.fromEntries(searchParams.entries());
     if (integrationSearch) {
@@ -400,3 +403,12 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
     top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - offset,
   });
 }
+
+function parseSearchQuery(searchQuery: string | null) {
+  try {
+    EuiSearchBar.Query.parse(searchQuery ?? '');
+    return searchQuery;
+  } catch {
+    return '';
+  }
+}

From d4a5d3bdc8837367629b8a340973450c468a5fe5 Mon Sep 17 00:00:00 2001
From: Mykola Harmash <mykola.harmash@elastic.co>
Date: Tue, 19 May 2026 09:24:46 +0200
Subject: [PATCH 2/2] fixup! [Obs Onboarding] Fix app crash when parsing
 invalid syntax from search URL param

---
 .../application/onboarding_flow_form/onboarding_flow_form.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
index 9fc2a9b2ee7c9..feec48f953058 100644
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -405,6 +405,10 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
 }
 
 function parseSearchQuery(searchQuery: string | null) {
+  if (searchQuery === null) {
+    return '';
+  }
+
   try {
     EuiSearchBar.Query.parse(searchQuery ?? '');
     return searchQuery;