[ML] Fixes dark mode in flyouts and modals

x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx

@@ -77,8 +77,7 @@ 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();
+  const mockedI18n = jest.fn();
 
   return () => ({
     notifications: {
@@ -121,8 +120,7 @@ const mockContextFactory = (addWarning: jest.Mock<void, []>) => {
       theme$: of(),
     },
     uiSettingsKeys: mockedUiSettingsKeys,
-    toMountPoint: mockedToMountPoint,
-    wrapWithTheme: mockedWrapWithTheme,
+    i18n: mockedI18n,
   });
 };
 

x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx

@@ -25,6 +25,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { TimeHistoryContract } from '@kbn/data-plugin/public';
 import { useUrlState } from '@kbn/ml-url-state';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 import { useRefreshIntervalUpdates, useTimeRangeUpdates } from '../hooks/use_timefilter';
 import { useDatePickerContext } from '../hooks/use_date_picker_context';
@@ -103,11 +104,10 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
   const {
     data,
     notifications: { toasts },
-    theme: { theme$ },
     uiSettings: config,
     uiSettingsKeys,
-    wrapWithTheme,
-    toMountPoint,
+    theme,
+    i18n: i18nStart,
   } = useDatePickerContext();
 
   const isWithinLBreakpoint = useIsWithinMaxBreakpoint('l');
@@ -184,23 +184,21 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
                   'The refresh interval in Advanced Settings is shorter than the minimum supported interval.',
               }),
           text: toMountPoint(
-            wrapWithTheme(
-              <EuiButton
-                onClick={setRefreshInterval.bind(null, {
-                  pause: refreshInterval.pause,
-                  value: DEFAULT_REFRESH_INTERVAL_MS,
-                })}
-              >
-                <FormattedMessage
-                  id="xpack.ml.datePicker.pageRefreshResetButton"
-                  defaultMessage="Set to {defaultInterval}"
-                  values={{
-                    defaultInterval: `${DEFAULT_REFRESH_INTERVAL_MS / 1000}s`,
-                  }}
-                />
-              </EuiButton>,
-              theme$
-            )
+            <EuiButton
+              onClick={setRefreshInterval.bind(null, {
+                pause: refreshInterval.pause,
+                value: DEFAULT_REFRESH_INTERVAL_MS,
+              })}
+            >
+              <FormattedMessage
+                id="xpack.ml.datePicker.pageRefreshResetButton"
+                defaultMessage="Set to {defaultInterval}"
+                values={{
+                  defaultInterval: `${DEFAULT_REFRESH_INTERVAL_MS / 1000}s`,
+                }}
+              />
+            </EuiButton>,
+            { theme, i18n: i18nStart }
           ),
         },
         { toastLifeTimeMs: 30000 }

x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx

@@ -9,9 +9,8 @@ import React, { createContext, useContext, type FC } from 'react';
 
 import type { UI_SETTINGS } from '@kbn/data-plugin/common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import type { CoreSetup, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
+import type { CoreSetup, I18nStart, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
 import type { HttpStart } from '@kbn/core/public';
-import type { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 /**
  * Date Picker Dependencies to be passed on via `DatePickerContextProvider`.
@@ -42,13 +41,9 @@ export interface DatePickerDependencies {
    */
   uiSettingsKeys: typeof UI_SETTINGS;
   /**
-   * helper to be used with notifications.
+   * Internationalisation service
    */
-  wrapWithTheme: typeof wrapWithTheme;
-  /**
-   * helper to be used with notifications.
-   */
-  toMountPoint: typeof toMountPoint;
+  i18n: I18nStart;
 }
 
 /**

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

@@ -25,7 +25,7 @@
     "@kbn/core",
     "@kbn/data-views-plugin",
     "@kbn/ml-is-populated-object",
-    "@kbn/kibana-react-plugin",
     "@kbn/ml-query-utils",
+    "@kbn/react-kibana-mount",
   ]
 }

x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_root.tsx

@@ -18,7 +18,6 @@ import { UrlStateProvider } from '@kbn/ml-url-state';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { DatePickerContextProvider, mlTimefilterRefresh$ } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 import { type Observable } from 'rxjs';
 import { DataSourceContext } from '../../hooks/use_data_source';
@@ -55,9 +54,7 @@ export const ChangePointDetectionAppState: FC<ChangePointDetectionAppStateProps>
   appDependencies,
 }) => {
   const datePickerDeps = {
-    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
 

x-pack/plugins/aiops/public/components/log_categorization/log_categorization_app_state.tsx

@@ -14,7 +14,6 @@ import { UrlStateProvider } from '@kbn/ml-url-state';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { DatePickerContextProvider } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 import { DataSourceContext } from '../../hooks/use_data_source';
 import type { AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
@@ -52,9 +51,7 @@ export const LogCategorizationAppState: FC<LogCategorizationAppStateProps> = ({
   }
 
   const datePickerDeps = {
-    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
 

x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx

@@ -12,14 +12,11 @@ import { pick } from 'lodash';
 import type { CoreStart } from '@kbn/core/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 
-import {
-  toMountPoint,
-  wrapWithTheme,
-  KibanaContextProvider,
-} from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { DataViewField, DataView } from '@kbn/data-views-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
-import { DatePickerContextProvider } from '@kbn/ml-date-picker';
+import { DatePickerContextProvider, type DatePickerDependencies } from '@kbn/ml-date-picker';
 import { StorageContextProvider } from '@kbn/ml-local-storage';
 import type { AiopsPluginStartDeps } from '../../types';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
@@ -34,7 +31,7 @@ export async function showCategorizeFlyout(
   coreStart: CoreStart,
   plugins: AiopsPluginStartDeps
 ): Promise<void> {
-  const { http, theme, overlays, application, notifications, uiSettings } = coreStart;
+  const { http, theme, overlays, application, notifications, uiSettings, i18n } = coreStart;
 
   return new Promise(async (resolve, reject) => {
     try {
@@ -49,38 +46,36 @@ export async function showCategorizeFlyout(
         http,
         theme,
         application,
+        i18n,
         ...plugins,
       };
-      const datePickerDeps = {
+      const datePickerDeps: DatePickerDependencies = {
         ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-        toMountPoint,
-        wrapWithTheme,
+        i18n,
         uiSettingsKeys: UI_SETTINGS,
       };
 
       const flyoutSession = overlays.openFlyout(
         toMountPoint(
-          wrapWithTheme(
-            <KibanaContextProvider
-              services={{
-                ...coreStart,
-              }}
-            >
-              <AiopsAppContext.Provider value={appDependencies}>
-                <DatePickerContextProvider {...datePickerDeps}>
-                  <StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
-                    <LogCategorizationFlyout
-                      dataView={dataView}
-                      savedSearch={null}
-                      selectedField={field}
-                      onClose={onFlyoutClose}
-                    />
-                  </StorageContextProvider>
-                </DatePickerContextProvider>
-              </AiopsAppContext.Provider>
-            </KibanaContextProvider>,
-            theme.theme$
-          )
+          <KibanaContextProvider
+            services={{
+              ...coreStart,
+            }}
+          >
+            <AiopsAppContext.Provider value={appDependencies}>
+              <DatePickerContextProvider {...datePickerDeps}>
+                <StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
+                  <LogCategorizationFlyout
+                    dataView={dataView}
+                    savedSearch={null}
+                    selectedField={field}
+                    onClose={onFlyoutClose}
+                  />
+                </StorageContextProvider>
+              </DatePickerContextProvider>
+            </AiopsAppContext.Provider>
+          </KibanaContextProvider>,
+          { theme, i18n }
         ),
         {
           'data-test-subj': 'aiopsCategorizeFlyout',

x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_app_state.tsx

@@ -15,7 +15,6 @@ import { UrlStateProvider } from '@kbn/ml-url-state';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { DatePickerContextProvider } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 import type { AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
@@ -58,9 +57,7 @@ export const LogRateAnalysisAppState: FC<LogRateAnalysisAppStateProps> = ({
   }
 
   const datePickerDeps = {
-    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
 

x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx

@@ -18,7 +18,6 @@ import { UrlStateProvider } from '@kbn/ml-url-state';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { DatePickerContextProvider } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 import { timeSeriesDataViewWarning } from '../../../application/utils/time_series_dataview_check';
 import { AiopsAppContext, type AiopsAppDependencies } from '../../../hooks/use_aiops_app_context';
@@ -81,9 +80,7 @@ export const LogRateAnalysisContentWrapper: FC<LogRateAnalysisContentWrapperProp
   }
 
   const datePickerDeps = {
-    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
 

x-pack/plugins/aiops/public/embeddable/embeddable_change_point_chart.tsx

@@ -13,7 +13,7 @@ import {
   EmbeddableOutput,
   IContainer,
 } from '@kbn/embeddable-plugin/public';
-import { KibanaThemeProvider, toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { ThemeServiceStart } from '@kbn/core-theme-browser';
 import { DataPublicPluginStart, UI_SETTINGS } from '@kbn/data-plugin/public';
 import { type CoreStart, IUiSettingsClient } from '@kbn/core/public';
@@ -95,9 +95,7 @@ export class EmbeddableChangePointChart extends AbstractEmbeddable<
     const I18nContext = this.deps.i18n.Context;
 
     const datePickerDeps = {
-      ...pick(this.deps, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-      toMountPoint,
-      wrapWithTheme,
+      ...pick(this.deps, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
       uiSettingsKeys: UI_SETTINGS,
     };
 

x-pack/plugins/aiops/public/hooks/use_aiops_app_context.ts

@@ -92,6 +92,10 @@ export interface AiopsAppDependencies {
    * Used to create lens embeddables.
    */
   lens: LensPublicStart;
+  /**
+   * Internationalisation service
+   */
+  i18n: CoreStart['i18n'];
   /**
    * Deps for unified fields stats.
    */

x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_app_state.tsx

@@ -15,12 +15,7 @@ import { UrlStateProvider } from '@kbn/ml-url-state';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { DatePickerContextProvider } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import {
-  KibanaContextProvider,
-  KibanaThemeProvider,
-  toMountPoint,
-  wrapWithTheme,
-} from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 
 import { DV_STORAGE_KEYS } from '../index_data_visualizer/types/storage';
 import { getCoreStart, getPluginsStart } from '../../kibana_services';
@@ -77,9 +72,7 @@ export const DataComparisonDetectionAppState: FC<DataComparisonDetectionAppState
     ...coreStart,
   };
   const datePickerDeps = {
-    ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
 

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/embeddables/grid_embeddable/grid_embeddable.tsx

@@ -22,7 +22,6 @@ import {
   IContainer,
 } from '@kbn/embeddable-plugin/public';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import type { Query } from '@kbn/es-query';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
@@ -221,9 +220,7 @@ export class DataVisualizerGridEmbeddable extends Embeddable<
 
     const services = { ...this.services[0], ...this.services[1] };
     const datePickerDeps = {
-      ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-      toMountPoint,
-      wrapWithTheme,
+      ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
       uiSettingsKeys: UI_SETTINGS,
     };
 

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/index_data_visualizer.tsx

@@ -13,12 +13,7 @@ import { isEqual } from 'lodash';
 import { encode } from '@kbn/rison';
 import { i18n } from '@kbn/i18n';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
-import {
-  KibanaContextProvider,
-  KibanaThemeProvider,
-  toMountPoint,
-  wrapWithTheme,
-} from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { StorageContextProvider } from '@kbn/ml-local-storage';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { getNestedProperty } from '@kbn/ml-nested-property';
@@ -302,9 +297,7 @@ export const IndexDataVisualizer: FC<{
     ...coreStart,
   };
   const datePickerDeps = {
-    ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-    toMountPoint,
-    wrapWithTheme,
+    ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };