[9.3] [Obs Onboarding] Fix app crash when parsing invalid syntax from search URL param (#269741)

x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.test.tsx

@@ -38,16 +38,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>
   );
@@ -175,5 +178,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: '' })
+      );
+    });
   });
 });

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,16 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
     top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - offset,
   });
 }
+
+function parseSearchQuery(searchQuery: string | null) {
+  if (searchQuery === null) {
+    return '';
+  }
+
+  try {
+    EuiSearchBar.Query.parse(searchQuery ?? '');
+    return searchQuery;
+  } catch {
+    return '';
+  }
+}