fix: add stateful query bar hook

x-pack/plugins/security_solution/public/common/hooks/use_get_stateful_query_bar.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+import { useKibana } from '../lib/kibana';
+
+export const useGetStatefulQueryBar = () => {
+  const {
+    services: {
+      navigation: {
+        ui: { createTopNavWithCustomContext },
+      },
+      unifiedSearch,
+      customDataService,
+    },
+  } = useKibana();
+
+  const {
+    ui: { getCustomSearchBar },
+  } = unifiedSearch;
+
+  const CustomSearchBar = useMemo(
+    () =>
+      getCustomSearchBar({
+        data: customDataService,
+      }),
+    [customDataService, getCustomSearchBar]
+  );
+
+  const CustomStatefulTopNavKqlQueryBar = useMemo(() => {
+    const customUnifiedSearch = {
+      ...unifiedSearch,
+      ui: {
+        ...unifiedSearch.ui,
+        SearchBar: CustomSearchBar,
+        AggregateQuerySearchBar: CustomSearchBar,
+      },
+    };
+
+    return createTopNavWithCustomContext(customUnifiedSearch);
+  }, [CustomSearchBar, createTopNavWithCustomContext, unifiedSearch]);
+
+  return {
+    CustomStatefulTopNavKqlQueryBar,
+  };
+};