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

Closes elastic/observability-error-backlog#808

Adds guard for invalid syntax inside the `search` URL param. The app
doesn't write an invalid search query into the URL when user enters it
in the field, but it's still possible to modify the URL directly, which
will crash the app when trying to read the parameter.

Author: mykolaharmash

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: '' })
+      );
+    });
   });
 });

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 '';
+  }
+}