[unified search] optimize async chunk loading

packages/kbn-optimizer/limits.yml

@@ -177,7 +177,7 @@ pageLoadAssetSize:
   uiActionsEnhanced: 38494
   unifiedDocViewer: 25099
   unifiedHistogram: 19928
-  unifiedSearch: 71059
+  unifiedSearch: 23000
   upgradeAssistant: 81241
   uptime: 60000
   urlDrilldown: 30063

src/platform/plugins/shared/unified_search/public/actions/index.ts → src/platform/plugins/shared/unified_search/public/actions/actions_module.ts

@@ -7,6 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type { ApplyGlobalFilterActionContext } from './apply_filter_action';
-export { ACTION_GLOBAL_APPLY_FILTER } from './apply_filter_action';
-export { UPDATE_FILTER_REFERENCES_ACTION } from './update_filter_references_action';
+export { createFilterAction } from './apply_filter_action/apply_filter_action';
+export { createUpdateFilterReferencesAction } from './update_filter_references_action';

src/platform/plugins/shared/unified_search/public/actions/apply_filter_action.ts → src/platform/plugins/shared/unified_search/public/actions/apply_filter_action/apply_filter_action.tsx

@@ -7,25 +7,21 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { CoreSetup } from '@kbn/core/public';
+import { CoreStart } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { IncompatibleActionError, UiActionsActionDefinition } from '@kbn/ui-actions-plugin/public';
-// for cleanup esFilters need to fix the issue https://github.com/elastic/kibana/issues/131292
 import { FilterManager, TimefilterContract } from '@kbn/data-plugin/public';
-import type { Filter, RangeFilter } from '@kbn/es-query';
-import { getIndexPatterns } from '../services';
-import { applyFiltersPopover } from '../apply_filters';
-
-export const ACTION_GLOBAL_APPLY_FILTER = 'ACTION_GLOBAL_APPLY_FILTER';
+import type { Filter } from '@kbn/es-query';
+import { convertRangeFilterToTimeRange, extractTimeFilter } from '@kbn/es-query';
+import { getIndexPatterns } from '../../services';
+import { ApplyFiltersPopoverContent } from './apply_filter_popover_content';
+import { ACTION_GLOBAL_APPLY_FILTER } from '../constants';
 
 export interface ApplyGlobalFilterActionContext {
   filters: Filter[];
   timeFieldName?: string;
-  // Need to make this unknown to prevent circular dependencies.
-  // Apps using this property will need to cast to `IEmbeddable`.
-  // TODO: We should consider moving these commonly used types into a separate package to avoid circular dependencies
-  // https://github.com/elastic/kibana/issues/163994
   embeddable?: unknown;
   // controlledBy is an optional key in filter.meta that identifies the owner of a filter
   // Pass controlledBy to cleanup an existing filter(s) owned by embeddable prior to adding new filters
@@ -39,7 +35,7 @@ async function isCompatible(context: ApplyGlobalFilterActionContext) {
 export function createFilterAction(
   filterManager: FilterManager,
   timeFilter: TimefilterContract,
-  core: CoreSetup,
+  coreStart: CoreStart,
   id: string = ACTION_GLOBAL_APPLY_FILTER,
   type: string = ACTION_GLOBAL_APPLY_FILTER
 ): UiActionsActionDefinition<ApplyGlobalFilterActionContext> {
@@ -66,7 +62,6 @@ export function createFilterAction(
       let selectedFilters: Filter[] = filters;
 
       if (selectedFilters.length > 1) {
-        const [coreStart] = await core.getStartServices();
         const indexPatterns = await Promise.all(
           filters.map((filter) => {
             return getIndexPatterns().get(filter.meta.index!);
@@ -76,18 +71,18 @@ export function createFilterAction(
         const filterSelectionPromise: Promise<Filter[]> = new Promise((resolve) => {
           const overlay = coreStart.overlays.openModal(
             toMountPoint(
-              applyFiltersPopover(
-                filters,
-                indexPatterns,
-                () => {
+              <ApplyFiltersPopoverContent
+                indexPatterns={indexPatterns}
+                filters={filters}
+                onCancel={() => {
                   overlay.close();
                   resolve([]);
-                },
-                (filterSelection: Filter[]) => {
+                }}
+                onSubmit={(filterSelection: Filter[]) => {
                   overlay.close();
                   resolve(filterSelection);
-                }
-              ),
+                }}
+              />,
               coreStart
             ),
             {
@@ -109,23 +104,17 @@ export function createFilterAction(
       }
 
       if (timeFieldName) {
-        const { extractTimeFilter } = await import('@kbn/es-query');
         const { timeRangeFilter, restOfFilters } = extractTimeFilter(
           timeFieldName,
           selectedFilters
         );
         filterManager.addFilters(restOfFilters);
         if (timeRangeFilter) {
-          changeTimeFilter(timeFilter, timeRangeFilter);
+          timeFilter.setTime(convertRangeFilterToTimeRange(timeRangeFilter));
         }
       } else {
         filterManager.addFilters(selectedFilters);
       }
     },
   };
 }
-
-async function changeTimeFilter(timeFilter: TimefilterContract, filter: RangeFilter) {
-  const { convertRangeFilterToTimeRange } = await import('@kbn/es-query');
-  timeFilter.setTime(convertRangeFilterToTimeRange(filter));
-}

src/platform/plugins/shared/unified_search/public/apply_filters/apply_filter_popover_content.tsx → src/platform/plugins/shared/unified_search/public/actions/apply_filter_action/apply_filter_popover_content.tsx

@@ -28,7 +28,7 @@ import {
 } from '@kbn/data-plugin/public';
 import type { Filter } from '@kbn/es-query';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { FilterContent } from '../filter_badge';
+import { FilterContent } from '../../filter_badge';
 
 interface Props {
   filters: Filter[];
@@ -42,9 +42,7 @@ interface State {
   fieldLabel?: string;
 }
 
-// Needed for React.lazy
-// eslint-disable-next-line import/no-default-export
-export default class ApplyFiltersPopoverContent extends Component<Props, State> {
+export class ApplyFiltersPopoverContent extends Component<Props, State> {
   public static defaultProps = {
     filters: [],
   };

src/platform/plugins/shared/unified_search/public/apply_filters/index.ts → src/platform/plugins/shared/unified_search/public/actions/constants.ts

@@ -7,4 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { applyFiltersPopover } from './apply_filters_popover';
+export const ACTION_GLOBAL_APPLY_FILTER = 'ACTION_GLOBAL_APPLY_FILTER';
+export const UPDATE_FILTER_REFERENCES_ACTION = 'UPDATE_FILTER_REFERENCES_ACTION';

src/platform/plugins/shared/unified_search/public/actions/update_filter_references_action.ts

@@ -9,8 +9,7 @@
 
 import { ActionExecutionMeta, UiActionsActionDefinition } from '@kbn/ui-actions-plugin/public';
 import { FilterManager } from '@kbn/data-plugin/public';
-
-export const UPDATE_FILTER_REFERENCES_ACTION = 'UPDATE_FILTER_REFERENCES_ACTION';
+import { UPDATE_FILTER_REFERENCES_ACTION } from './constants';
 
 export interface UpdateFilterReferencesActionContext extends ActionExecutionMeta {
   /** The initial data view of the editable layer **/

src/platform/plugins/shared/unified_search/public/autocomplete/providers/kql_query_suggestion/field.tsx

@@ -10,6 +10,7 @@
 import { indexPatterns as indexPatternsUtils } from '@kbn/data-plugin/public';
 import type { DataViewField } from '@kbn/data-views-plugin/public';
 import { flatten } from 'lodash';
+import { escapeKuery } from '@kbn/es-query';
 import { sortPrefixFirst } from './sort_prefix_first';
 import { QuerySuggestionField, QuerySuggestionTypes } from '../query_suggestion_provider';
 import { KqlQuerySuggestionProvider } from './types';
@@ -56,7 +57,6 @@ export const setupGetFieldSuggestions: KqlQuerySuggestionProvider<QuerySuggestio
       }
     });
     const sortedFields = sortPrefixFirst(matchingFields.sort(keywordComparator), search, 'name');
-    const { escapeKuery } = await import('@kbn/es-query');
     const suggestions: QuerySuggestionField[] = sortedFields.map((field) => {
       const isNested = field.subType && field.subType.nested;
       const isSuggestionsAbstractionOn = !!suggestionsAbstraction?.fields?.[field.name];

src/platform/plugins/shared/unified_search/public/autocomplete/providers/kql_query_suggestion/index.ts

@@ -39,13 +39,14 @@ export const setupKqlQuerySuggestionProvider = (
     if (getSuggestionsByType) {
       return getSuggestionsByType;
     }
+
     const {
+      fromKueryExpression,
       setupGetFieldSuggestions,
       setupGetValueSuggestions,
       setupGetOperatorSuggestions,
       setupGetConjunctionSuggestions,
-    } = await import('./async_loads');
-    const { fromKueryExpression } = await import('@kbn/es-query');
+    } = await import('./kql_module');
 
     const providers = {
       field: setupGetFieldSuggestions(core),

src/platform/plugins/shared/unified_search/public/autocomplete/providers/kql_query_suggestion/async_loads.ts → src/platform/plugins/shared/unified_search/public/autocomplete/providers/kql_query_suggestion/kql_module.ts

@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+export { fromKueryExpression } from '@kbn/es-query';
 export { setupGetFieldSuggestions } from './field';
 export { setupGetValueSuggestions } from './value';
 export { setupGetOperatorSuggestions } from './operator';

src/platform/plugins/shared/unified_search/public/autocomplete/providers/value_suggestion_provider.ts

@@ -13,6 +13,7 @@ import { memoize } from 'lodash';
 import { UI_SETTINGS, ValueSuggestionsMethod } from '@kbn/data-plugin/common';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import type { TimefilterSetup } from '@kbn/data-plugin/public';
+import { buildQueryFromFilters } from '@kbn/es-query';
 import type { AutocompleteUsageCollector } from '../collectors';
 
 export type ValueSuggestionsGetFn = (args: ValueSuggestionsGetFnArgs) => Promise<any[]>;
@@ -125,7 +126,6 @@ export const setupValueSuggestionProvider = (
     const timeFilter = useTimeRange
       ? getAutocompleteTimefilter(timefilter, indexPattern)
       : undefined;
-    const { buildQueryFromFilters } = await import('@kbn/es-query');
     const filterQuery = timeFilter ? buildQueryFromFilters([timeFilter], indexPattern).filter : [];
     const filters = [...(boolFilter ? boolFilter : []), ...filterQuery];
     try {

src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_picker.tsx

@@ -107,7 +107,3 @@ export const DataViewPicker = ({
     />
   );
 };
-
-// React.lazy support
-// eslint-disable-next-line import/no-default-export
-export default DataViewPicker;

src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_selector.tsx

@@ -93,7 +93,3 @@ export const DataViewSelector = ({
     </Fragment>
   );
 };
-
-// React.lazy support
-// eslint-disable-next-line import/no-default-export
-export default DataViewSelector;

src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx

@@ -207,7 +207,3 @@ export function DataViewsList({
     </EuiSelectable>
   );
 }
-
-// React.lazy support
-// eslint-disable-next-line import/no-default-export
-export default DataViewsList;

src/platform/plugins/shared/unified_search/public/dataview_picker/index.tsx

@@ -16,7 +16,10 @@ export type { DataViewPickerProps } from './data_view_picker';
  * The Lazily-loaded `DataViewsList` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const DataViewsListLazy = React.lazy(() => import('./dataview_list'));
+export const DataViewsListLazy = React.lazy(async () => {
+  const { DataViewsList } = await import('../ui_module');
+  return { default: DataViewsList };
+});
 
 /**
  * A `DataViewsList` component that is wrapped by the `withSuspense` HOC. This component can
@@ -29,7 +32,10 @@ export const DataViewsList = withSuspense(DataViewsListLazy);
  * The Lazily-loaded `DataViewSelector` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const DataViewSelectorLazy = React.lazy(() => import('./data_view_selector'));
+export const DataViewSelectorLazy = React.lazy(async () => {
+  const { DataViewSelector } = await import('../ui_module');
+  return { default: DataViewSelector };
+});
 
 /**
  * A `DataViewSelector` component that is wrapped by the `withSuspense` HOC. This component can
@@ -42,7 +48,10 @@ export const DataViewSelector = withSuspense(DataViewSelectorLazy);
  * The Lazily-loaded `DataViewPicker` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const DataViewPickerLazy = React.lazy(() => import('./data_view_picker'));
+export const DataViewPickerLazy = React.lazy(async () => {
+  const { DataViewPicker } = await import('../ui_module');
+  return { default: DataViewPicker };
+});
 
 /**
  * A `DataViewPicker` component that is wrapped by the `withSuspense` HOC. This component can

src/platform/plugins/shared/unified_search/public/filter_badge/filter_badge.tsx

@@ -27,7 +27,7 @@ export interface FilterBadgeProps {
   readOnly?: boolean;
 }
 
-function FilterBadge({
+export function FilterBadge({
   filter,
   dataViews,
   valueLabel,
@@ -91,7 +91,3 @@ function FilterBadge({
     </EuiBadge>
   );
 }
-
-// React.lazy support
-// eslint-disable-next-line import/no-default-export
-export default FilterBadge;

src/platform/plugins/shared/unified_search/public/filter_badge/filter_badge_group.tsx

@@ -56,7 +56,3 @@ export function FilterBadgeGroup({
     </FilterBadgeErrorBoundary>
   );
 }
-
-// Needed for React.lazy
-// eslint-disable-next-line import/no-default-export
-export default FilterBadgeGroup;

src/platform/plugins/shared/unified_search/public/filter_badge/filter_content/filter_content.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import FilterContent from './filter_content';
+import { FilterContent } from './filter_content';
 import { render } from '@testing-library/react';
 import { phraseFilter } from '@kbn/data-plugin/common/stubs';
 

src/platform/plugins/shared/unified_search/public/filter_badge/filter_content/filter_content.tsx

@@ -98,7 +98,3 @@ export function FilterContent({ filter, valueLabel, fieldLabel, hideAlias }: Fil
       );
   }
 }
-
-// Needed for React.lazy
-// eslint-disable-next-line import/no-default-export
-export default FilterContent;

src/platform/plugins/shared/unified_search/public/filter_badge/filter_content/index.ts

@@ -14,7 +14,10 @@ import { withSuspense } from '@kbn/shared-ux-utility';
  * The Lazily-loaded `FilterContent` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const FilterContentLazy = React.lazy(() => import('./filter_content'));
+export const FilterContentLazy = React.lazy(async () => {
+  const { FilterContent } = await import('../../ui_module');
+  return { default: FilterContent };
+});
 
 /**
  * A `FilterContent` component that is wrapped by the `withSuspense` HOC. This component can

src/platform/plugins/shared/unified_search/public/filter_badge/index.ts

@@ -16,7 +16,10 @@ export { FilterContent, FilterContentLazy } from './filter_content';
  * The Lazily-loaded `FilterBadge` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const FilterBadgeLazy = React.lazy(() => import('./filter_badge'));
+export const FilterBadgeLazy = React.lazy(async () => {
+  const { FilterBadge } = await import('../ui_module');
+  return { default: FilterBadge };
+});
 
 /**
  * A `FilterBadge` component that is wrapped by the `withSuspense` HOC. This component can
@@ -29,7 +32,10 @@ export const FilterBadge = withSuspense(FilterBadgeLazy);
  * The Lazily-loaded `FilterBadgeGroup` component.  Consumers should use `React.Suspense` or
  * the withSuspense` HOC to load this component.
  */
-export const FilterBadgeGroupLazy = React.lazy(() => import('./filter_badge_group'));
+export const FilterBadgeGroupLazy = React.lazy(async () => {
+  const { FilterBadgeGroup } = await import('../ui_module');
+  return { default: FilterBadgeGroup };
+});
 
 /**
  * A `FilterBadgeGroup` component that is wrapped by the `withSuspense` HOC. This component can