[Security Solution] Discover Timeline Integration URL Sync + Fixes

packages/kbn-unified-field-list/src/components/field_list/field_list.tsx

@@ -56,7 +56,14 @@ export const FieldList: React.FC<FieldListProps> = ({
       css={containerStyle}
       className={className}
     >
-      {isProcessing && <EuiProgress size="xs" color="accent" position="absolute" />}
+      {isProcessing && (
+        <EuiProgress
+          size="xs"
+          color="accent"
+          position="absolute"
+          data-test-subj="fieldListLoading"
+        />
+      )}
       {!!prepend && <EuiFlexItem grow={false}>{prepend}</EuiFlexItem>}
       <EuiFlexItem grow={true}>{children}</EuiFlexItem>
       {!!append && <EuiFlexItem grow={false}>{append}</EuiFlexItem>}

src/plugins/data/public/mocks.ts

@@ -33,6 +33,7 @@ const createStartContract = (): Start => {
     actions: {
       createFiltersFromValueClickAction: jest.fn().mockResolvedValue(['yes']),
       createFiltersFromRangeSelectAction: jest.fn(),
+      createFiltersFromMultiValueClickAction: jest.fn(),
     },
     datatableUtilities: createDatatableUtilitiesMock(),
     search: searchServiceMock.createStartContract(),

src/plugins/data/public/plugin.ts

@@ -34,6 +34,7 @@ import {
 import {
   createFiltersFromValueClickAction,
   createFiltersFromRangeSelectAction,
+  createFiltersFromMultiValueClickAction,
   createMultiValueClickActionDefinition,
   createValueClickActionDefinition,
   createSelectRangeActionDefinition,
@@ -167,6 +168,7 @@ export class DataPublicPlugin
       actions: {
         createFiltersFromValueClickAction,
         createFiltersFromRangeSelectAction,
+        createFiltersFromMultiValueClickAction,
       },
       datatableUtilities,
       fieldFormats,

src/plugins/data/public/types.ts

@@ -17,7 +17,11 @@ import { ScreenshotModePluginStart } from '@kbn/screenshot-mode-plugin/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import { ManagementSetup } from '@kbn/management-plugin/public';
 import { DatatableUtilitiesService } from '../common';
-import { createFiltersFromRangeSelectAction, createFiltersFromValueClickAction } from './actions';
+import {
+  createFiltersFromMultiValueClickAction,
+  createFiltersFromRangeSelectAction,
+  createFiltersFromValueClickAction,
+} from './actions';
 import type { ISearchSetup, ISearchStart } from './search';
 import { QuerySetup, QueryStart } from './query';
 import { DataViewsContract } from './data_views';
@@ -55,6 +59,7 @@ export interface DataPublicPluginSetup {
 export interface DataPublicPluginStartActions {
   createFiltersFromValueClickAction: typeof createFiltersFromValueClickAction;
   createFiltersFromRangeSelectAction: typeof createFiltersFromRangeSelectAction;
+  createFiltersFromMultiValueClickAction: typeof createFiltersFromMultiValueClickAction;
 }
 
 /**

src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx

@@ -231,7 +231,11 @@ const IndexPatternEditorFlyoutContentComponent = ({
 
   return (
     <FlyoutPanels.Group flyoutClassName={'indexPatternEditorFlyout'} maxWidth={1180}>
-      <FlyoutPanels.Item className="fieldEditor__mainFlyoutPanel" border="right">
+      <FlyoutPanels.Item
+        className="fieldEditor__mainFlyoutPanel"
+        data-test-subj="indexPatternEditorFlyout"
+        border="right"
+      >
         <EuiTitle data-test-subj="flyoutTitle">
           <h2>{editData ? editorTitleEditMode : editorTitle}</h2>
         </EuiTitle>

src/plugins/discover/public/application/main/components/layout/discover_documents.tsx

@@ -283,7 +283,13 @@ function DiscoverDocumentsComponent({
         </>
       )}
       {isDataLoading && (
-        <EuiProgress size="xs" color="accent" position="absolute" css={progressStyle} />
+        <EuiProgress
+          data-test-subj="discoverDataGridUpdating"
+          size="xs"
+          color="accent"
+          position="absolute"
+          css={progressStyle}
+        />
       )}
     </EuiFlexItem>
   );

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx

@@ -25,6 +25,9 @@ import {
 import { createMockUnifiedHistogramApi } from '@kbn/unified-histogram-plugin/public/mocks';
 import { checkHitCount, sendErrorTo } from '../../hooks/use_saved_search_messages';
 import type { InspectorAdapters } from '../../hooks/use_inspector';
+import { UnifiedHistogramCustomization } from '../../../../customizations/customization_types/histogram_customization';
+import { useDiscoverCustomization } from '../../../../customizations';
+import { DiscoverCustomizationId } from '../../../../customizations/customization_service';
 
 const mockData = dataPluginMock.createStartContract();
 let mockQueryState = {
@@ -71,6 +74,19 @@ jest.mock('../../hooks/use_saved_search_messages', () => {
     sendErrorTo: jest.fn(originalModule.sendErrorTo),
   };
 });
+jest.mock('../../../../customizations', () => ({
+  ...jest.requireActual('../../../../customizations'),
+  useDiscoverCustomization: jest.fn(),
+}));
+
+let mockUseCustomizations = false;
+
+const mockHistogramCustomization: UnifiedHistogramCustomization = {
+  id: 'unified_histogram',
+  onFilter: jest.fn(),
+  onBrushEnd: jest.fn(),
+  withDefaultActions: true,
+};
 
 const mockCheckHitCount = checkHitCount as jest.MockedFunction<typeof checkHitCount>;
 
@@ -126,6 +142,23 @@ describe('useDiscoverHistogram', () => {
     return { hook, initialProps };
   };
 
+  beforeEach(() => {
+    mockUseCustomizations = false;
+    jest.clearAllMocks();
+
+    (useDiscoverCustomization as jest.Mock).mockImplementation((id: DiscoverCustomizationId) => {
+      if (!mockUseCustomizations) {
+        return undefined;
+      }
+      switch (id) {
+        case 'unified_histogram':
+          return mockHistogramCustomization;
+        default:
+          throw new Error(`Unknown customization id: ${id}`);
+      }
+    });
+  });
+
   describe('initialization', () => {
     it('should return the expected parameters from getCreationOptions', async () => {
       const { hook } = await renderUseDiscoverHistogram();
@@ -403,4 +436,19 @@ describe('useDiscoverHistogram', () => {
       expect(api.refetch).not.toHaveBeenCalled();
     });
   });
+
+  describe('customization', () => {
+    test('should use custom values provided by customization fwk ', async () => {
+      mockUseCustomizations = true;
+      const stateContainer = getStateContainer();
+      const { hook } = await renderUseDiscoverHistogram({ stateContainer });
+
+      expect(hook.result.current.onFilter).toEqual(mockHistogramCustomization.onFilter);
+      expect(hook.result.current.onBrushEnd).toEqual(mockHistogramCustomization.onBrushEnd);
+      expect(hook.result.current.withDefaultActions).toEqual(
+        mockHistogramCustomization.withDefaultActions
+      );
+      expect(hook.result.current.disabledActions).toBeUndefined();
+    });
+  });
 });

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts

@@ -26,6 +26,7 @@ import {
 } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import type { RequestAdapter } from '@kbn/inspector-plugin/common';
+import { useDiscoverCustomization } from '../../../../customizations';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { getUiActions } from '../../../../kibana_services';
 import { FetchStatus } from '../../../types';
@@ -299,6 +300,8 @@ export const useDiscoverHistogram = ({
 
   const dataView = useInternalStateSelector((state) => state.dataView!);
 
+  const histogramCustomization = useDiscoverCustomization('unified_histogram');
+
   return {
     ref,
     getCreationOptions,
@@ -309,6 +312,10 @@ export const useDiscoverHistogram = ({
     timeRange,
     relativeTimeRange,
     columns,
+    onFilter: histogramCustomization?.onFilter,
+    onBrushEnd: histogramCustomization?.onBrushEnd,
+    withDefaultActions: histogramCustomization?.withDefaultActions,
+    disabledActions: histogramCustomization?.disabledActions,
   };
 };
 

src/plugins/discover/public/application/main/discover_main_route.tsx

@@ -64,10 +64,12 @@ export function DiscoverMainRoute({
     dataViewEditor,
   } = services;
   const { id: savedSearchId } = useParams<DiscoverLandingParams>();
+
   const stateContainer = useSingleton<DiscoverStateContainer>(() =>
     getDiscoverStateContainer({
       history,
       services,
+      mode,
     })
   );
   const { customizationService, isInitialized: isCustomizationServiceInitialized } =

src/plugins/discover/public/application/main/services/discover_state.ts

@@ -26,7 +26,7 @@ import { merge } from 'rxjs';
 import { AggregateQuery, Query, TimeRange } from '@kbn/es-query';
 import { loadSavedSearch as loadSavedSearchFn } from './load_saved_search';
 import { restoreStateFromSavedSearch } from '../../../services/saved_searches/restore_from_saved_search';
-import { FetchStatus } from '../../types';
+import { DiscoverDisplayMode, FetchStatus } from '../../types';
 import { changeDataView } from '../hooks/utils/change_data_view';
 import { buildStateSubscribe } from '../hooks/utils/build_state_subscribe';
 import { addLog } from '../../../utils/add_log';
@@ -64,6 +64,11 @@ interface DiscoverStateContainerParams {
    * core ui settings service
    */
   services: DiscoverServices;
+  /*
+   * mode in which discover is running
+   *
+   * */
+  mode?: DiscoverDisplayMode;
 }
 
 export interface LoadParams {
@@ -188,6 +193,7 @@ export interface DiscoverStateContainer {
 export function getDiscoverStateContainer({
   history,
   services,
+  mode = 'standalone',
 }: DiscoverStateContainerParams): DiscoverStateContainer {
   const storeInSessionStorage = services.uiSettings.get('state:storeInSessionStorage');
   const toasts = services.core.notifications.toasts;
@@ -198,6 +204,7 @@ export function getDiscoverStateContainer({
   const stateStorage = createKbnUrlStateStorage({
     useHash: storeInSessionStorage,
     history,
+    useHashQuery: mode !== 'embedded',
     ...(toasts && withNotifyOnErrors(toasts)),
   });
 

src/plugins/discover/public/build_services.ts

@@ -7,7 +7,6 @@
  */
 
 import { History } from 'history';
-import { memoize } from 'lodash';
 
 import {
   Capabilities,
@@ -52,6 +51,7 @@ import type { LensPublicStart } from '@kbn/lens-plugin/public';
 import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import type { ContentClient } from '@kbn/content-management-plugin/public';
+import { memoize } from 'lodash';
 import type { ServerlessPluginStart } from '@kbn/serverless/public';
 import { getHistory } from './kibana_services';
 import { DiscoverStartPlugins } from './plugin';

src/plugins/discover/public/components/discover_container/discover_container.test.tsx

@@ -39,7 +39,7 @@ const TestComponent = (props: Partial<DiscoverContainerInternalProps>) => {
   return (
     <DiscoverContainerInternal
       overrideServices={props.overrideServices ?? mockOverrideService}
-      customize={props.customize ?? customizeMock}
+      customizationCallbacks={props.customizationCallbacks ?? [customizeMock]}
       isDev={props.isDev ?? false}
       scopedHistory={props.scopedHistory ?? (history() as ScopedHistory<unknown>)}
       getDiscoverServices={getDiscoverServicesMock}

src/plugins/discover/public/components/discover_container/discover_container.tsx

@@ -27,8 +27,9 @@ export interface DiscoverContainerInternalProps {
   overrideServices: Partial<DiscoverServices>;
   getDiscoverServices: () => Promise<DiscoverServices>;
   scopedHistory: ScopedHistory;
-  customize: CustomizationCallback;
+  customizationCallbacks: CustomizationCallback[];
   isDev: boolean;
+  isLoading?: boolean;
 }
 
 const discoverContainerWrapperCss = css`
@@ -45,12 +46,12 @@ const discoverContainerWrapperCss = css`
 export const DiscoverContainerInternal = ({
   overrideServices,
   scopedHistory,
-  customize,
+  customizationCallbacks,
   isDev,
   getDiscoverServices,
+  isLoading = false,
 }: DiscoverContainerInternalProps) => {
   const [discoverServices, setDiscoverServices] = useState<DiscoverServices | undefined>();
-  const customizationCallbacks = useMemo(() => [customize], [customize]);
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
@@ -68,7 +69,7 @@ export const DiscoverContainerInternal = ({
     return { ...discoverServices, ...overrideServices };
   }, [discoverServices, overrideServices]);
 
-  if (!initialized || !services) {
+  if (!initialized || !services || isLoading) {
     return (
       <EuiFlexGroup css={discoverContainerWrapperCss}>
         <LoadingIndicator type="spinner" />

src/plugins/discover/public/components/discover_grid/discover_grid.tsx

@@ -604,7 +604,7 @@ export const DiscoverGrid = ({
 
   if (!rowCount && isLoading) {
     return (
-      <div className="euiDataGrid__loading">
+      <div className="euiDataGrid__loading" data-test-subj="discoverDataGridLoading">
         <EuiText size="xs" color="subdued">
           <EuiLoadingSpinner />
           <EuiSpacer size="s" />

src/plugins/discover/public/customizations/customization_service.ts

@@ -7,9 +7,16 @@
  */
 
 import { filter, map, Observable, startWith, Subject } from 'rxjs';
-import type { SearchBarCustomization, TopNavCustomization } from './customization_types';
+import type {
+  SearchBarCustomization,
+  TopNavCustomization,
+  UnifiedHistogramCustomization,
+} from './customization_types';
 
-export type DiscoverCustomization = SearchBarCustomization | TopNavCustomization;
+export type DiscoverCustomization =
+  | SearchBarCustomization
+  | TopNavCustomization
+  | UnifiedHistogramCustomization;
 
 export type DiscoverCustomizationId = DiscoverCustomization['id'];
 

src/plugins/discover/public/customizations/customization_types/histogram_customization.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 type { UnifiedHistogramContainerProps } from '@kbn/unified-histogram-plugin/public';
+
+interface UnifiedHistogramCustomizationId {
+  id: 'unified_histogram';
+}
+
+export type UnifiedHistogramCustomization = UnifiedHistogramCustomizationId &
+  Pick<
+    UnifiedHistogramContainerProps,
+    'onFilter' | 'onBrushEnd' | 'withDefaultActions' | 'disabledActions'
+  >;

src/plugins/discover/public/customizations/customization_types/index.ts

@@ -8,3 +8,4 @@
 
 export * from './search_bar_customization';
 export * from './top_nav_customization';
+export * from './histogram_customization';

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -439,7 +439,7 @@ export const CodeEditor: React.FC<Props> = ({
   const { CopyButton } = useCopy({ isCopyable, value });
 
   return (
-    <div className="kibanaCodeEditor" onKeyDown={onKeyDown}>
+    <div className="kibanaCodeEditor" onKeyDown={onKeyDown} data-test-subj="kibanaCodeEditor">
       {renderPrompt()}
 
       <FullScreenDisplay>

src/plugins/unified_histogram/public/chart/chart.test.tsx

@@ -103,6 +103,7 @@ async function mountComponent({
     onResetChartHeight: jest.fn(),
     onChartHiddenChange: jest.fn(),
     onTimeIntervalChange: jest.fn(),
+    withDefaultActions: undefined,
   };
 
   let instance: ReactWrapper = {} as ReactWrapper;