[UnifiedSearch] Expose QueryStringInput via plugin contract (elastic#…

…173810) ## Summary Expose QueryStringInput via plugin contract this will make sure deps are handled by the component itself. --------- Co-authored-by: kibanamachine <[email protected]>
yuliacech · Jan 3, 2024 · 999d8fd · 999d8fd
1 parent 76e8121
commit 999d8fd
Show file tree

Hide file tree

Showing 30 changed files with 144 additions and 272 deletions.
diff --git a/src/plugins/unified_search/public/mocks/mocks.ts b/src/plugins/unified_search/public/mocks/mocks.ts
@@ -38,6 +38,7 @@ const createStartContract = (): Start => {
       SearchBar: jest.fn().mockReturnValue(null),
       AggregateQuerySearchBar: jest.fn().mockReturnValue(null),
       FiltersBuilderLazy: jest.fn(),
+      QueryStringInput: jest.fn().mockReturnValue('QueryStringInput'),
     },
   };
 };

diff --git a/src/plugins/unified_search/public/plugin.ts b/src/plugins/unified_search/public/plugin.ts
@@ -9,6 +9,7 @@ import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '@kbn/cor
 import { Storage, IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
 import { APPLY_FILTER_TRIGGER } from '@kbn/data-plugin/public';
+import { createQueryStringInput } from './query_string_input/get_query_string_input';
 import { UPDATE_FILTER_REFERENCES_TRIGGER, updateFilterReferencesTrigger } from './triggers';
 import { ConfigSchema } from '../config';
 import { setIndexPatterns, setTheme, setOverlays } from './services';
@@ -108,6 +109,18 @@ export class UnifiedSearchPublicPlugin
         getCustomSearchBar,
         AggregateQuerySearchBar: SearchBar,
         FiltersBuilderLazy,
+        QueryStringInput: createQueryStringInput({
+          data,
+          dataViews,
+          docLinks: core.docLinks,
+          http: core.http,
+          notifications: core.notifications,
+          storage: this.storage,
+          uiSettings: core.uiSettings,
+          unifiedSearch: {
+            autocomplete: autocompleteStart,
+          },
+        }),
       },
       autocomplete: autocompleteStart,
     };

diff --git a/src/plugins/unified_search/public/query_string_input/get_query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/get_query_string_input.tsx
@@ -0,0 +1,16 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { QueryStringInput, QueryStringInputProps } from '.';
+
+export function createQueryStringInput(deps: QueryStringInputProps['deps']) {
+  return (props: Omit<QueryStringInputProps, 'deps'>) => {
+    return <QueryStringInput {...props} deps={deps} />;
+  };
+}
diff --git a/src/plugins/unified_search/public/types.ts b/src/plugins/unified_search/public/types.ts
@@ -18,7 +18,7 @@ import { CoreStart, DocLinksStart } from '@kbn/core/public';
 import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
 import { AutocompleteSetup, AutocompleteStart } from './autocomplete';
-import type { IndexPatternSelectProps, StatefulSearchBarProps } from '.';
+import type { IndexPatternSelectProps, QueryStringInputProps, StatefulSearchBarProps } from '.';
 import type { FiltersBuilderProps } from './filters_builder/filters_builder';
 import { StatefulSearchBarDeps } from './search_bar/create_search_bar';
 
@@ -53,6 +53,7 @@ export interface UnifiedSearchPublicPluginStartUi {
   SearchBar: (props: StatefulSearchBarProps<Query>) => React.ReactElement;
   AggregateQuerySearchBar: AggQuerySearchBarComp;
   FiltersBuilderLazy: React.ComponentType<FiltersBuilderProps>;
+  QueryStringInput: React.ComponentType<Omit<QueryStringInputProps, 'deps'>>;
 }
 
 /**

diff --git a/src/plugins/vis_default_editor/kibana.jsonc b/src/plugins/vis_default_editor/kibana.jsonc
@@ -8,13 +8,13 @@
     "server": false,
     "browser": true,
     "requiredPlugins": [
-      "dataViews"
+      "dataViews",
+      "unifiedSearch",
     ],
     "optionalPlugins": [
       "visualizations"
     ],
     "requiredBundles": [
-      "unifiedSearch",
       "kibanaUtils",
       "kibanaReact",
       "data",

diff --git a/src/plugins/vis_default_editor/public/components/controls/filter.tsx b/src/plugins/vis_default_editor/public/components/controls/filter.tsx
@@ -12,7 +12,6 @@ import { i18n } from '@kbn/i18n';
 
 import type { Query } from '@kbn/es-query';
 import { IAggConfig } from '@kbn/data-plugin/public';
-import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 
@@ -45,14 +44,9 @@ function FilterRow({
   const { services } = useKibana<VisDefaultEditorKibanaServices>();
   const {
     data,
-    dataViews,
-    unifiedSearch,
-    usageCollection,
-    storage,
-    notifications,
-    http,
-    docLinks,
-    uiSettings,
+    unifiedSearch: {
+      ui: { QueryStringInput },
+    },
     appName,
   } = services;
 
@@ -117,17 +111,6 @@ function FilterRow({
           bubbleSubmitEvent={true}
           languageSwitcherPopoverAnchorPosition="leftDown"
           size="s"
-          deps={{
-            data,
-            dataViews,
-            unifiedSearch,
-            usageCollection,
-            storage,
-            notifications,
-            http,
-            docLinks,
-            uiSettings,
-          }}
           appName={appName}
         />
       </EuiFormRow>

diff --git a/src/plugins/vis_default_editor/public/types.ts b/src/plugins/vis_default_editor/public/types.ts
@@ -9,17 +9,15 @@
 import type { CoreStart, DocLinksStart } from '@kbn/core/public';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
-import type { AutocompleteStart } from '@kbn/unified-search-plugin/public';
+import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 
 export interface VisDefaultEditorKibanaServices {
   data: DataPublicPluginStart;
   dataViews: DataViewsPublicPluginStart;
   appName: string;
-  unifiedSearch: {
-    autocomplete: AutocompleteStart;
-  };
+  unifiedSearch: UnifiedSearchPublicPluginStart;
   usageCollection?: UsageCollectionStart;
   storage: IStorageWrapper;
   notifications: CoreStart['notifications'];

diff --git a/x-pack/plugins/apm/public/components/app/trace_explorer/trace_search_box/index.tsx b/x-pack/plugins/apm/public/components/app/trace_explorer/trace_search_box/index.tsx
@@ -13,9 +13,6 @@ import {
   EuiSelectOption,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { QueryStringInput } from '@kbn/unified-search-plugin/public';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { ApmPluginStartDeps } from '../../../../plugin';
 import {
   TraceSearchQuery,
   TraceSearchType,
@@ -54,11 +51,11 @@ export function TraceSearchBox({
   onQueryCommit,
   loading,
 }: Props) {
-  const { unifiedSearch, core, data, dataViews } = useApmPluginContext();
-  const { notifications, http, docLinks, uiSettings } = core;
   const {
-    services: { storage },
-  } = useKibana<ApmPluginStartDeps>();
+    unifiedSearch: {
+      ui: { QueryStringInput },
+    },
+  } = useApmPluginContext();
 
   const { dataView } = useApmDataView();
 
@@ -106,16 +103,6 @@ export function TraceSearchBox({
                           defaultMessage: 'APM',
                         }
                       )}
-                      deps={{
-                        unifiedSearch,
-                        notifications,
-                        http,
-                        docLinks,
-                        uiSettings,
-                        data,
-                        dataViews,
-                        storage,
-                      }}
                     />
                   </form>
                 )}

diff --git a/...applications/fleet/sections/agents/agent_details_page/components/agent_logs/query_bar.tsx b/...applications/fleet/sections/agents/agent_details_page/components/agent_logs/query_bar.tsx
@@ -9,7 +9,6 @@ import React, { memo, useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import type { FieldSpec } from '@kbn/data-plugin/common';
-import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 
 import { useStartServices } from '../../../../../hooks';
@@ -28,8 +27,12 @@ export const LogQueryBar: React.FunctionComponent<{
   isQueryValid: boolean;
   onUpdateQuery: (query: string, runQuery?: boolean) => void;
 }> = memo(({ query, isQueryValid, onUpdateQuery }) => {
-  const { data, notifications, http, docLinks, uiSettings, unifiedSearch, storage, dataViews } =
-    useStartServices();
+  const {
+    data,
+    unifiedSearch: {
+      ui: { QueryStringInput },
+    },
+  } = useStartServices();
   const [indexPatternFields, setIndexPatternFields] = useState<FieldSpec[]>();
 
   useEffect(() => {
@@ -81,7 +84,6 @@ export const LogQueryBar: React.FunctionComponent<{
         onUpdateQuery(newQuery.query as string, true);
       }}
       appName={i18n.translate('xpack.fleet.appTitle', { defaultMessage: 'Fleet' })}
-      deps={{ unifiedSearch, notifications, http, docLinks, uiSettings, data, dataViews, storage }}
     />
   );
 });
diff --git a/x-pack/plugins/graph/kibana.jsonc b/x-pack/plugins/graph/kibana.jsonc
@@ -27,7 +27,6 @@
       "spaces"
     ],
     "requiredBundles": [
-      "unifiedSearch",
       "kibanaUtils",
       "kibanaReact"
     ]

diff --git a/x-pack/plugins/graph/public/components/search_bar.test.tsx b/x-pack/plugins/graph/public/components/search_bar.test.tsx
@@ -30,41 +30,51 @@ import { ReactWrapper } from 'enzyme';
 import { createMockGraphStore } from '../state_management/mocks';
 import { Provider } from 'react-redux';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
+import { createQueryStringInput } from '@kbn/unified-search-plugin/public/query_string_input/get_query_string_input';
+import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
+import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
+import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
 
 jest.mock('../services/source_modal', () => ({ openSourceModal: jest.fn() }));
 
 const waitForIndexPatternFetch = () => new Promise((r) => setTimeout(r));
 
 function getServiceMocks() {
-  return {
-    uiSettings: {
-      get: (key: string) => {
-        return 10;
+  const docLinks = {
+    links: {
+      query: {
+        kueryQuerySyntax: '',
       },
-    } as IUiSettingsClient,
+    },
+  } as DocLinksStart;
+  const uiSettings = {
+    get: (key: string) => {
+      return 10;
+    },
+  } as IUiSettingsClient;
+
+  return {
     savedObjects: {} as SavedObjectsStart,
     savedObjectsManagement: {} as SavedObjectsManagementPluginStart,
-    notifications: {} as NotificationsStart,
-    docLinks: {
-      links: {
-        query: {
-          kueryQuerySyntax: '',
-        },
-      },
-    } as DocLinksStart,
-    http: {} as HttpStart,
     overlays: {} as OverlayStart,
-    storage: {
-      get: () => {},
-    },
-    data: {
-      query: {
-        savedQueries: {},
-      },
-    },
     unifiedSearch: {
-      autocomplete: {
-        hasQuerySuggestions: () => false,
+      ui: {
+        QueryStringInput: createQueryStringInput({
+          docLinks,
+          uiSettings,
+          storage: {
+            get: () => {},
+            set: () => {},
+            remove: () => {},
+            clear: () => {},
+          } as IStorageWrapper,
+          data: dataPluginMock.createStartContract(),
+          unifiedSearch: unifiedSearchPluginMock.createStartContract(),
+          notifications: {} as NotificationsStart,
+          http: {} as HttpStart,
+          dataViews: dataViewPluginMocks.createStartContract(),
+        }),
       },
     },
   };

diff --git a/x-pack/plugins/graph/public/components/search_bar.tsx b/x-pack/plugins/graph/public/components/search_bar.tsx
@@ -7,16 +7,18 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiToolTip } from '@elastic/eui';
 import React, { useState, useEffect } from 'react';
-
 import { i18n } from '@kbn/i18n';
 import { connect } from 'react-redux';
 import { toElasticsearchQuery, fromKueryExpression, Query } from '@kbn/es-query';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { TooltipWrapper } from '@kbn/visualization-utils';
-import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { IUnifiedSearchPluginServices } from '@kbn/unified-search-plugin/public/types';
+import {
+  IUnifiedSearchPluginServices,
+  UnifiedSearchPublicPluginStart,
+} from '@kbn/unified-search-plugin/public/types';
 import { ContentManagementPublicStart } from '@kbn/content-management-plugin/public';
+
 import { IndexPatternSavedObject, IndexPatternProvider, WorkspaceField } from '../types';
 import { openSourceModal } from '../services/source_modal';
 import {
@@ -96,19 +98,19 @@ export function SearchBarComponent(props: SearchBarStateProps & SearchBarProps)
   }, [currentDatasource, indexPatternProvider, onIndexPatternChange]);
 
   const kibana = useKibana<
-    IUnifiedSearchPluginServices & { contentManagement: ContentManagementPublicStart }
+    IUnifiedSearchPluginServices & {
+      contentManagement: ContentManagementPublicStart;
+      unifiedSearch: UnifiedSearchPublicPluginStart;
+    }
   >();
+
   const { services, overlays } = kibana;
   const {
     uiSettings,
     appName,
-    unifiedSearch,
-    data,
-    dataViews,
-    storage,
-    notifications,
-    http,
-    docLinks,
+    unifiedSearch: {
+      ui: { QueryStringInput },
+    },
     contentManagement,
   } = services;
   if (!overlays) return null;
@@ -178,16 +180,6 @@ export function SearchBarComponent(props: SearchBarStateProps & SearchBarProps)
             query={query}
             onChange={setQuery}
             appName={appName}
-            deps={{
-              unifiedSearch,
-              data,
-              dataViews,
-              storage,
-              notifications,
-              http,
-              docLinks,
-              uiSettings,
-            }}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/ml/kibana.jsonc b/x-pack/plugins/ml/kibana.jsonc
@@ -55,8 +55,7 @@
       "lens",
       "maps",
       "savedObjectsFinder",
-      "usageCollection",
-      "unifiedSearch"
+      "usageCollection"
     ],
     "extraPublicDirs": ["common"]
   }