Merge branch 'main' into security/rules/146847-resizable-preview

.github/CODEOWNERS

@@ -496,6 +496,7 @@
 /x-pack/plugins/security_solution/public/common/components/navigation @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/common/components/news_feed @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/common/components/overview_description_list @elastic/security-threat-hunting-explore
+/x-pack/plugins/security_solution/public/common/components/page @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/common/components/sidebar_header @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/common/components/tables @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/common/components/top_n @elastic/security-threat-hunting-explore
@@ -1077,9 +1078,11 @@ src/plugins/chart_expressions/common @elastic/kibana-visualizations
 x-pack/packages/ml/agg_utils @elastic/ml-ui
 x-pack/packages/ml/aiops_components @elastic/ml-ui
 x-pack/packages/ml/aiops_utils @elastic/ml-ui
+x-pack/packages/ml/date_picker @elastic/ml-ui
 x-pack/packages/ml/is_defined @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
 x-pack/packages/ml/local_storage @elastic/ml-ui
 x-pack/packages/ml/nested_property @elastic/ml-ui
+x-pack/packages/ml/query_utils @elastic/ml-ui
 x-pack/packages/ml/string_hash @elastic/ml-ui
 x-pack/packages/ml/url_state @elastic/ml-ui

docs/management/connectors/action-types/tines.asciidoc

@@ -87,7 +87,7 @@ image::management/connectors/images/tines-webhook-url-fallback.png[Tines Webhook
 === Tines story library
 
 In order to simplify the integration with Elastic, Tines offers a set of pre-defined Elastic stories in the Story library.
-They can be found by searching for "Elastic" in the Tines Story library:
+They can be found by searching for "Elastic" in the https://www.tines.com/story-library?s=elastic[Tines Story library]:
 
 [role="screenshot"]
 image::management/connectors/images/tines_elastic_stories.png[Tines Elastic stories]

package.json

@@ -356,10 +356,12 @@
     "@kbn/logging-mocks": "link:packages/kbn-logging-mocks",
     "@kbn/mapbox-gl": "link:packages/kbn-mapbox-gl",
     "@kbn/ml-agg-utils": "link:x-pack/packages/ml/agg_utils",
+    "@kbn/ml-date-picker": "link:x-pack/packages/ml/date_picker",
     "@kbn/ml-is-defined": "link:x-pack/packages/ml/is_defined",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
     "@kbn/ml-local-storage": "link:x-pack/packages/ml/local_storage",
     "@kbn/ml-nested-property": "link:x-pack/packages/ml/nested_property",
+    "@kbn/ml-query-utils": "link:x-pack/packages/ml/query_utils",
     "@kbn/ml-string-hash": "link:x-pack/packages/ml/string_hash",
     "@kbn/ml-url-state": "link:x-pack/packages/ml/url_state",
     "@kbn/monaco": "link:packages/kbn-monaco",

tsconfig.base.json

@@ -838,6 +838,8 @@
       "@kbn/maps-plugin/*": ["x-pack/plugins/maps/*"],
       "@kbn/ml-agg-utils": ["x-pack/packages/ml/agg_utils"],
       "@kbn/ml-agg-utils/*": ["x-pack/packages/ml/agg_utils/*"],
+      "@kbn/ml-date-picker": ["x-pack/packages/ml/date_picker"],
+      "@kbn/ml-date-picker/*": ["x-pack/packages/ml/date_picker/*"],
       "@kbn/ml-is-defined": ["x-pack/packages/ml/is_defined"],
       "@kbn/ml-is-defined/*": ["x-pack/packages/ml/is_defined/*"],
       "@kbn/ml-is-populated-object": ["x-pack/packages/ml/is_populated_object"],
@@ -848,6 +850,8 @@
       "@kbn/ml-nested-property/*": ["x-pack/packages/ml/nested_property/*"],
       "@kbn/ml-plugin": ["x-pack/plugins/ml"],
       "@kbn/ml-plugin/*": ["x-pack/plugins/ml/*"],
+      "@kbn/ml-query-utils": ["x-pack/packages/ml/query_utils"],
+      "@kbn/ml-query-utils/*": ["x-pack/packages/ml/query_utils/*"],
       "@kbn/ml-string-hash": ["x-pack/packages/ml/string_hash"],
       "@kbn/ml-string-hash/*": ["x-pack/packages/ml/string_hash/*"],
       "@kbn/ml-url-state": ["x-pack/packages/ml/url_state"],

x-pack/.i18nrc.json

@@ -44,7 +44,7 @@
     "xpack.main": "legacy/plugins/xpack_main",
     "xpack.maps": ["plugins/maps"],
     "xpack.aiops": ["packages/ml/aiops_components", "plugins/aiops"],
-    "xpack.ml": ["plugins/ml"],
+    "xpack.ml": ["packages/ml/date_picker", "plugins/ml"],
     "xpack.monitoring": ["plugins/monitoring"],
     "xpack.osquery": ["plugins/osquery"],
     "xpack.painlessLab": "plugins/painless_lab",

x-pack/packages/ml/date_picker/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-date-picker
+
+Date picker related components to be used in UIs maintained by the @elastic/ml-ui team.

x-pack/packages/ml/date_picker/index.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export {
+  DatePickerContextProvider,
+  type DatePickerDependencies,
+} from './src/hooks/use_date_picker_context';
+export {
+  useRefreshIntervalUpdates,
+  useTimefilter,
+  useTimeRangeUpdates,
+} from './src/hooks/use_timefilter';
+export { DatePickerWrapper } from './src/components/date_picker_wrapper';
+export {
+  FullTimeRangeSelector,
+  type FullTimeRangeSelectorProps,
+} from './src/components/full_time_range_selector';
+export {
+  getTimeFilterRange,
+  type TimeRange,
+} from './src/services/full_time_range_selector_service';
+export { type GetTimeFieldRangeResponse } from './src/services/types';
+export { mlTimefilterRefresh$, type Refresh } from './src/services/timefilter_refresh_service';
+export { type FrozenTierPreference, FROZEN_TIER_PREFERENCE } from './src/storage';

x-pack/plugins/ml/public/application/components/navigation_menu/date_picker_wrapper/index.ts → x-pack/packages/ml/date_picker/jest.config.js

@@ -5,4 +5,8 @@
  * 2.0.
  */
 
-export { DatePickerWrapper } from './date_picker_wrapper';
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/date_picker'],
+};

x-pack/packages/ml/date_picker/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-date-picker",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/date_picker/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/ml-date-picker",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/plugins/ml/public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.test.tsx → x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx

@@ -5,20 +5,24 @@
  * 2.0.
  */
 
-import { mount } from 'enzyme';
+import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import React from 'react';
 
 import { EuiSuperDatePicker } from '@elastic/eui';
 
 import { useUrlState } from '@kbn/ml-url-state';
+import type { UI_SETTINGS } from '@kbn/data-plugin/common';
 
-import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
-import { useToastNotificationService } from '../../../services/toast_notification_service';
+import { useDatePickerContext } from '../hooks/use_date_picker_context';
+import { mlTimefilterRefresh$ } from '../services/timefilter_refresh_service';
 
 import { DatePickerWrapper } from './date_picker_wrapper';
 
 jest.mock('@elastic/eui', () => {
+  const EuiButtonMock = jest.fn(() => {
+    return null;
+  });
   const EuiSuperDatePickerMock = jest.fn(() => {
     return null;
   });
@@ -29,6 +33,9 @@ jest.mock('@elastic/eui', () => {
     return <>{children}</>;
   });
   return {
+    useEuiBreakpoint: jest.fn(() => 'mediaQuery @media only screen and (max-width: 1199px)'),
+    useIsWithinMaxBreakpoint: jest.fn(() => false),
+    EuiButton: EuiButtonMock,
     EuiSuperDatePicker: EuiSuperDatePickerMock,
     EuiFlexGroup: EuiFlexGroupMock,
     EuiFlexItem: EuiFlexItemMock,
@@ -43,67 +50,82 @@ jest.mock('@kbn/ml-url-state', () => {
   };
 });
 
-jest.mock('../../../contexts/kibana/use_timefilter');
-
-jest.mock('../../../services/toast_notification_service');
-
-jest.mock('../../../contexts/kibana', () => ({
-  useMlKibana: () => {
+jest.mock('../hooks/use_timefilter', () => ({
+  useRefreshIntervalUpdates: jest.fn(),
+  useTimefilter: () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { of } = require('rxjs');
     return {
-      services: {
-        uiSettings: {
-          get: jest.fn().mockReturnValue([
-            {
-              from: 'now/d',
-              to: 'now/d',
-              display: 'Today',
-            },
-            {
-              from: 'now/w',
-              to: 'now/w',
-              display: 'This week',
-            },
-          ]),
+      getRefreshIntervalUpdate$: of(),
+    };
+  },
+  useTimeRangeUpdates: jest.fn(() => {
+    return { from: '', to: '' };
+  }),
+}));
+
+jest.mock('../hooks/use_date_picker_context', () => ({
+  useDatePickerContext: jest.fn(),
+}));
+
+const mockContextFactory = (addWarning: jest.Mock<void, []>) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { of } = require('rxjs');
+  const mockedUiSettingsKeys = {} as typeof UI_SETTINGS;
+  const mockedToMountPoint = jest.fn();
+  const mockedWrapWithTheme = jest.fn();
+
+  return () => ({
+    notifications: {
+      toasts: { addWarning },
+    },
+    uiSettings: {
+      get: jest.fn().mockReturnValue([
+        {
+          from: 'now/d',
+          to: 'now/d',
+          display: 'Today',
         },
-        data: {
-          query: {
-            timefilter: {
-              timefilter: {
-                getRefreshInterval: jest.fn(),
-                setRefreshInterval: jest.fn(),
-                getTime: jest.fn(() => {
-                  return { from: '', to: '' };
-                }),
-                isAutoRefreshSelectorEnabled: jest.fn(() => true),
-                isTimeRangeSelectorEnabled: jest.fn(() => true),
-                getRefreshIntervalUpdate$: jest.fn(),
-                getTimeUpdate$: jest.fn(),
-                getEnabledUpdated$: jest.fn(),
-              },
-              history: { get: jest.fn() },
-            },
-          },
+        {
+          from: 'now/w',
+          to: 'now/w',
+          display: 'This week',
         },
-        mlServices: {
-          httpService: {
-            getLoadingCount$: of(0),
+      ]),
+    },
+    data: {
+      query: {
+        timefilter: {
+          timefilter: {
+            getRefreshInterval: jest.fn(),
+            setRefreshInterval: jest.fn(),
+            getTime: jest.fn(() => {
+              return { from: '', to: '' };
+            }),
+            isAutoRefreshSelectorEnabled: jest.fn(() => true),
+            isTimeRangeSelectorEnabled: jest.fn(() => true),
+            getRefreshIntervalUpdate$: jest.fn(),
+            getTimeUpdate$: jest.fn(),
+            getEnabledUpdated$: jest.fn(),
           },
-        },
-        theme: {
-          theme$: of(),
+          history: { get: jest.fn() },
         },
       },
-    };
-  },
-}));
+    },
+    theme: {
+      theme$: of(),
+    },
+    uiSettingsKeys: mockedUiSettingsKeys,
+    toMountPoint: mockedToMountPoint,
+    wrapWithTheme: mockedWrapWithTheme,
+  });
+};
 
 const MockedEuiSuperDatePicker = EuiSuperDatePicker as jest.MockedFunction<
   typeof EuiSuperDatePicker
 >;
 
-describe('Navigation Menu: <DatePickerWrapper />', () => {
+describe('<DatePickerWrapper />', () => {
   beforeEach(() => {
     jest.useFakeTimers({ legacyFakeTimers: true });
     MockedEuiSuperDatePicker.mockClear();
@@ -113,12 +135,16 @@ describe('Navigation Menu: <DatePickerWrapper />', () => {
     jest.useRealTimers();
   });
 
-  test('Minimal initialization.', () => {
+  test('Minimal initialization.', async () => {
     const refreshListener = jest.fn();
     const refreshSubscription = mlTimefilterRefresh$.subscribe(refreshListener);
 
-    const wrapper = mount(<DatePickerWrapper />);
-    expect(wrapper.find(DatePickerWrapper)).toHaveLength(1);
+    const displayWarningSpy = jest.fn(() => {});
+
+    (useDatePickerContext as jest.Mock).mockImplementation(mockContextFactory(displayWarningSpy));
+
+    render(<DatePickerWrapper />);
+
     expect(refreshListener).toBeCalledTimes(0);
 
     refreshSubscription.unsubscribe();
@@ -130,9 +156,7 @@ describe('Navigation Menu: <DatePickerWrapper />', () => {
 
     const displayWarningSpy = jest.fn(() => {});
 
-    (useToastNotificationService as jest.Mock).mockReturnValueOnce({
-      displayWarningToast: displayWarningSpy,
-    });
+    (useDatePickerContext as jest.Mock).mockImplementation(mockContextFactory(displayWarningSpy));
 
     // act
     render(<DatePickerWrapper />);
@@ -151,9 +175,7 @@ describe('Navigation Menu: <DatePickerWrapper />', () => {
 
     const displayWarningSpy = jest.fn(() => {});
 
-    (useToastNotificationService as jest.Mock).mockReturnValueOnce({
-      displayWarningToast: displayWarningSpy,
-    });
+    (useDatePickerContext as jest.Mock).mockImplementation(mockContextFactory(displayWarningSpy));
 
     // act
     render(<DatePickerWrapper />);