From af440aae4b55e3090dc6a7983105fd98e16402ab Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Wed, 23 Aug 2023 11:47:18 +0100 Subject: [PATCH] [ML] Fixes dark mode in flyouts and modals (#164399) A recent EUI change has caused a problem with the theme when using the deprecated `toMountPoint` inside `overlays.openFlyout` to create flyouts. This causes the contents of the rendered flyout to not know the current theme, this is obvious when running in dark mode. The fix is to switch to the non-deprecated version of `toMountPoint`. Flyouts: Create anomaly detection job from Lens flyout in Dashboard. Anomaly swim lane and anomaly chart job embeddables job selection flyout in Dashboard. Log pattern analysis flyout in Discover. Modals: Trained models start deployment modal. Trained models force stop deployment modal. Trained models stop deployment modal when there are multiple deployments. Misc: Page not found banner. Jobs list header, which contains the settings button. DFA clone job warning toast when the original data view no longer exists. Components in ml's date picker package Fixes https://github.com/elastic/kibana/issues/164379 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dima Arnautov --- .../components/date_picker_wrapper.test.tsx | 6 +- .../src/components/date_picker_wrapper.tsx | 38 +++++------ .../src/hooks/use_date_picker_context.tsx | 11 +--- x-pack/packages/ml/date_picker/tsconfig.json | 2 +- .../change_point_detection_root.tsx | 5 +- .../log_categorization_app_state.tsx | 5 +- .../log_categorization/show_flyout.tsx | 57 ++++++++-------- .../log_rate_analysis_app_state.tsx | 5 +- .../log_rate_analysis_content_wrapper.tsx | 5 +- .../embeddable_change_point_chart.tsx | 6 +- .../public/hooks/use_aiops_app_context.ts | 4 ++ .../data_comparison_app_state.tsx | 11 +--- .../grid_embeddable/grid_embeddable.tsx | 5 +- .../index_data_visualizer.tsx | 11 +--- .../components/log_rate_analysis.tsx | 3 +- .../aiops/change_point_detection.tsx | 1 + .../application/aiops/log_categorization.tsx | 1 + .../application/aiops/log_rate_analysis.tsx | 1 + x-pack/plugins/ml/public/application/app.tsx | 11 +--- .../header_menu_portal/header_menu_portal.tsx | 6 +- .../action_clone/clone_action_name.tsx | 66 +++++++++---------- .../model_management/deployment_setup.tsx | 58 ++++++++-------- .../model_management/force_stop_dialog.tsx | 32 +++++---- .../model_management/model_actions.tsx | 14 ++-- .../application/routing/use_active_route.tsx | 9 +-- .../anomaly_charts_setup_flyout.tsx | 41 ++++++------ .../anomaly_swimlane_setup_flyout.tsx | 43 ++++++------ .../common/resolve_job_selection.tsx | 40 +++++------ .../job_creation/common/create_flyout.tsx | 48 +++++++------- .../flyout.tsx | 4 +- x-pack/plugins/ml/tsconfig.json | 1 + .../components/wizard/wizard.tsx | 5 +- 32 files changed, 249 insertions(+), 306 deletions(-) diff --git a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx index 7383cfc78ba7c..f9d189167df9b 100644 --- a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx +++ b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.test.tsx @@ -77,8 +77,7 @@ const mockContextFactory = (addWarning: jest.Mock) => { // 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) => { theme$: of(), }, uiSettingsKeys: mockedUiSettingsKeys, - toMountPoint: mockedToMountPoint, - wrapWithTheme: mockedWrapWithTheme, + i18n: mockedI18n, }); }; diff --git a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx index 562b49f42991e..8d500f7d1a815 100644 --- a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx +++ b/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 = (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 = (props) => { 'The refresh interval in Advanced Settings is shorter than the minimum supported interval.', }), text: toMountPoint( - wrapWithTheme( - - - , - theme$ - ) + + + , + { theme, i18n: i18nStart } ), }, { toastLifeTimeMs: 30000 } diff --git a/x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx b/x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx index 19e59b58d392d..28ad6a12de745 100644 --- a/x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx +++ b/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; } /** diff --git a/x-pack/packages/ml/date_picker/tsconfig.json b/x-pack/packages/ml/date_picker/tsconfig.json index ca83d94a598c1..d85c1a4cf4613 100644 --- a/x-pack/packages/ml/date_picker/tsconfig.json +++ b/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", ] } diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_root.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_root.tsx index 0e5c23ac21010..dd2380fedfa32 100644 --- a/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_root.tsx +++ b/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 appDependencies, }) => { const datePickerDeps = { - ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']), - toMountPoint, - wrapWithTheme, + ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']), uiSettingsKeys: UI_SETTINGS, }; diff --git a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_app_state.tsx b/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_app_state.tsx index ab52ab99266f3..a7c9bc17b6fe9 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_app_state.tsx +++ b/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 = ({ } const datePickerDeps = { - ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']), - toMountPoint, - wrapWithTheme, + ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']), uiSettingsKeys: UI_SETTINGS, }; diff --git a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx index 16ef28ef75fc0..5890bd8a2f74d 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx +++ b/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 { - 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( - - - - - - - - - , - theme.theme$ - ) + + + + + + + + + , + { theme, i18n } ), { 'data-test-subj': 'aiopsCategorizeFlyout', diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_app_state.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_app_state.tsx index 1bbca85e83e09..212d0465b9cc0 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_app_state.tsx +++ b/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 = ({ } const datePickerDeps = { - ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']), - toMountPoint, - wrapWithTheme, + ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']), uiSettingsKeys: UI_SETTINGS, }; diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx index 80babf7530d02..ec258081d840d 100644 --- a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx +++ b/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 = ({ r 'unifiedSearch', 'theme', 'lens', + 'i18n', ])} /> diff --git a/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx b/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx index d5d2f24276cb6..65ec83b2cabbf 100644 --- a/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx +++ b/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx @@ -63,6 +63,7 @@ export const ChangePointDetectionPage: FC = () => { 'presentationUtil', 'embeddable', 'cases', + 'i18n', ]), fieldStats: { useFieldStatsTrigger, FieldStatsFlyoutProvider }, }} diff --git a/x-pack/plugins/ml/public/application/aiops/log_categorization.tsx b/x-pack/plugins/ml/public/application/aiops/log_categorization.tsx index 93e08b0871313..81412a726c1fa 100644 --- a/x-pack/plugins/ml/public/application/aiops/log_categorization.tsx +++ b/x-pack/plugins/ml/public/application/aiops/log_categorization.tsx @@ -54,6 +54,7 @@ export const LogCategorizationPage: FC = () => { 'unifiedSearch', 'theme', 'lens', + 'i18n', ])} /> )} diff --git a/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx b/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx index 527c442df2c1a..1d9f4e7d92c4a 100644 --- a/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx +++ b/x-pack/plugins/ml/public/application/aiops/log_rate_analysis.tsx @@ -57,6 +57,7 @@ export const LogRateAnalysisPage: FC = () => { 'unifiedSearch', 'theme', 'lens', + 'i18n', ])} /> )} diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx index 9a1e7169bebe3..ca1a398de1cbf 100644 --- a/x-pack/plugins/ml/public/application/app.tsx +++ b/x-pack/plugins/ml/public/application/app.tsx @@ -15,12 +15,7 @@ import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public'; import { DatePickerContextProvider } from '@kbn/ml-date-picker'; import { Storage } from '@kbn/kibana-utils-plugin/public'; 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 { StorageContextProvider } from '@kbn/ml-local-storage'; import useLifecycles from 'react-use/lib/useLifecycles'; import useObservable from 'react-use/lib/useObservable'; @@ -128,9 +123,7 @@ const App: FC = ({ coreStart, deps, appMountParams }) => { if (!licenseReady || !mlCapabilities) return null; const datePickerDeps = { - ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings']), - toMountPoint, - wrapWithTheme, + ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']), uiSettingsKeys: UI_SETTINGS, }; diff --git a/x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx b/x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx index e3190e626a3bd..79d09619a0780 100644 --- a/x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx +++ b/x-pack/plugins/ml/public/application/components/header_menu_portal/header_menu_portal.tsx @@ -7,7 +7,8 @@ import React, { FC, ReactNode, useContext, useEffect, useMemo } from 'react'; import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal'; -import { KibanaContextProvider, toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { useMlKibana } from '../../contexts/kibana'; import { MlPageControlsContext } from '../ml_page'; @@ -17,6 +18,7 @@ export interface HeaderMenuPortalProps { export const HeaderMenuPortal: FC = ({ children }) => { const { services } = useMlKibana(); + const { theme, i18n } = services; const { setHeaderActionMenu } = useContext(MlPageControlsContext); @@ -32,7 +34,7 @@ export const HeaderMenuPortal: FC = ({ children }) => { , - { theme$: services.theme.theme$ } + { theme, i18n } ); return mount(element); }); diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_action_name.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_action_name.tsx index 6e455e9e87d99..099062232a1b7 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_action_name.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_action_name.tsx @@ -10,7 +10,6 @@ import React, { FC } from 'react'; import { cloneDeep, isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; import { extractErrorMessage } from '@kbn/ml-error-utils'; import { isClassificationAnalysis, @@ -19,6 +18,7 @@ import { DEFAULT_RESULTS_FIELD, type DataFrameAnalyticsConfig, } from '@kbn/ml-data-frame-analytics-utils'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { DeepReadonly } from '../../../../../../../common/types/common'; import { useMlKibana, useNavigateToPath } from '../../../../../contexts/kibana'; import { DEFAULT_NUM_TOP_FEATURE_IMPORTANCE_VALUES } from '../../hooks/use_create_analytics_form'; @@ -414,9 +414,9 @@ export const useNavigateToWizardWithClonedJob = () => { http: { basePath }, application: { capabilities }, theme, + i18n: i18nStart, }, } = useMlKibana(); - const theme$ = theme.theme$; const navigateToPath = useNavigateToPath(); const canCreateDataView = capabilities.savedObjectsManagement.edit === true || capabilities.indexPatterns.save === true; @@ -434,38 +434,36 @@ export const useNavigateToWizardWithClonedJob = () => { } else { toasts.addDanger({ title: toMountPoint( - wrapWithTheme( - <> - - {canCreateDataView ? ( - - - - - ), - }} - /> - - ) : null} - , - theme$ - ) + <> + + {canCreateDataView ? ( + + + + + ), + }} + /> + + ) : null} + , + { theme, i18n: i18nStart } ), }); } diff --git a/x-pack/plugins/ml/public/application/model_management/deployment_setup.tsx b/x-pack/plugins/ml/public/application/model_management/deployment_setup.tsx index f7dfab5847718..3ac6960af55ca 100644 --- a/x-pack/plugins/ml/public/application/model_management/deployment_setup.tsx +++ b/x-pack/plugins/ml/public/application/model_management/deployment_setup.tsx @@ -27,11 +27,10 @@ import { EuiSelect, EuiSpacer, } from '@elastic/eui'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; -import type { Observable } from 'rxjs'; -import type { CoreTheme, OverlayStart } from '@kbn/core/public'; +import type { I18nStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { css } from '@emotion/react'; import { numberValidator } from '@kbn/ml-agg-utils'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { isCloudTrial } from '../services/ml_server_info'; import { composeValidators, @@ -497,7 +496,12 @@ export const StartUpdateDeploymentModal: FC = ({ * @param theme$ */ export const getUserInputModelDeploymentParamsProvider = - (overlays: OverlayStart, theme$: Observable, startModelDeploymentDocUrl: string) => + ( + overlays: OverlayStart, + theme: ThemeServiceStart, + i18nStart: I18nStart, + startModelDeploymentDocUrl: string + ) => ( model: ModelItem, initialParams?: ThreadingParams, @@ -507,30 +511,28 @@ export const getUserInputModelDeploymentParamsProvider = try { const modalSession = overlays.openModal( toMountPoint( - wrapWithTheme( - { - modalSession.close(); - - const resultConfig = { ...config }; - if (resultConfig.priority === 'low') { - resultConfig.numOfAllocations = 1; - resultConfig.threadsPerAllocations = 1; - } - - resolve(resultConfig); - }} - onClose={() => { - modalSession.close(); - resolve(); - }} - />, - theme$ - ) + { + modalSession.close(); + + const resultConfig = { ...config }; + if (resultConfig.priority === 'low') { + resultConfig.numOfAllocations = 1; + resultConfig.threadsPerAllocations = 1; + } + + resolve(resultConfig); + }} + onClose={() => { + modalSession.close(); + resolve(); + }} + />, + { theme, i18n: i18nStart } ) ); } catch (e) { diff --git a/x-pack/plugins/ml/public/application/model_management/force_stop_dialog.tsx b/x-pack/plugins/ml/public/application/model_management/force_stop_dialog.tsx index 4721ddb898fa3..c0200b366e6ef 100644 --- a/x-pack/plugins/ml/public/application/model_management/force_stop_dialog.tsx +++ b/x-pack/plugins/ml/public/application/model_management/force_stop_dialog.tsx @@ -15,10 +15,10 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; -import type { OverlayStart, ThemeServiceStart } from '@kbn/core/public'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; +import type { I18nStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { isPopulatedObject } from '@kbn/ml-is-populated-object'; import { isDefined } from '@kbn/ml-is-defined'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import type { ModelItem } from './models_list'; interface ForceStopModelConfirmDialogProps { @@ -165,26 +165,24 @@ export const StopModelDeploymentsConfirmDialog: FC + (overlays: OverlayStart, theme: ThemeServiceStart, i18nStart: I18nStart) => async (forceStopModel: ModelItem): Promise => { return new Promise(async (resolve, reject) => { try { const modalSession = overlays.openModal( toMountPoint( - wrapWithTheme( - { - modalSession.close(); - reject(); - }} - onConfirm={(deploymentIds: string[]) => { - modalSession.close(); - resolve(deploymentIds); - }} - />, - theme.theme$ - ) + { + modalSession.close(); + reject(); + }} + onConfirm={(deploymentIds: string[]) => { + modalSession.close(); + resolve(deploymentIds); + }} + />, + { theme, i18n: i18nStart } ) ); } catch (e) { diff --git a/x-pack/plugins/ml/public/application/model_management/model_actions.tsx b/x-pack/plugins/ml/public/application/model_management/model_actions.tsx index 9cd0794d1b488..5f234a42c4734 100644 --- a/x-pack/plugins/ml/public/application/model_management/model_actions.tsx +++ b/x-pack/plugins/ml/public/application/model_management/model_actions.tsx @@ -54,6 +54,7 @@ export function useModelActions({ application: { navigateToUrl, capabilities }, overlays, theme, + i18n: i18nStart, docLinks, mlServices: { mlApiServices }, }, @@ -93,14 +94,19 @@ export function useModelActions({ }, [mlApiServices]); const getUserConfirmation = useMemo( - () => getUserConfirmationProvider(overlays, theme), - [overlays, theme] + () => getUserConfirmationProvider(overlays, theme, i18nStart), + [i18nStart, overlays, theme] ); const getUserInputModelDeploymentParams = useMemo( () => - getUserInputModelDeploymentParamsProvider(overlays, theme.theme$, startModelDeploymentDocUrl), - [overlays, theme.theme$, startModelDeploymentDocUrl] + getUserInputModelDeploymentParamsProvider( + overlays, + theme, + i18nStart, + startModelDeploymentDocUrl + ), + [overlays, theme, i18nStart, startModelDeploymentDocUrl] ); const isBuiltInModel = useCallback( diff --git a/x-pack/plugins/ml/public/application/routing/use_active_route.tsx b/x-pack/plugins/ml/public/application/routing/use_active_route.tsx index d3dd543f3ecdb..3974b13eb51de 100644 --- a/x-pack/plugins/ml/public/application/routing/use_active_route.tsx +++ b/x-pack/plugins/ml/public/application/routing/use_active_route.tsx @@ -8,9 +8,10 @@ import { useLocation, useRouteMatch } from 'react-router-dom'; import { keyBy } from 'lodash'; import React, { useEffect, useMemo, useRef } from 'react'; -import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public'; +import { useExecutionContext } from '@kbn/kibana-react-plugin/public'; import { EuiCallOut } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { PLUGIN_ID } from '../../../common/constants/app'; import { useMlKibana } from '../contexts/kibana'; import type { MlRoute } from './router'; @@ -23,7 +24,7 @@ export const useActiveRoute = (routesList: MlRoute[]): MlRoute => { const { pathname } = useLocation(); const { - services: { executionContext, overlays, theme }, + services: { executionContext, overlays, theme, i18n }, } = useMlKibana(); /** @@ -77,7 +78,7 @@ export const useActiveRoute = (routesList: MlRoute[]): MlRoute => { />

, - { theme$: theme.theme$ } + { theme, i18n } ) ); @@ -89,7 +90,7 @@ export const useActiveRoute = (routesList: MlRoute[]): MlRoute => { }, 15000); } }, - [activeRoute, overlays, theme, pathname] + [activeRoute, overlays, theme, pathname, i18n] ); useExecutionContext(executionContext, { diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx index a4417faa8e100..92aea068c5b15 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/anomaly_charts_setup_flyout.tsx @@ -7,7 +7,7 @@ import React from 'react'; import type { CoreStart } from '@kbn/core/public'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { extractInfluencers } from '../../../common/util/job_utils'; import { VIEW_BY_JOB_LABEL } from '../../application/explorer/explorer_constants'; import { getDefaultExplorerChartsPanelTitle } from './anomaly_charts_embeddable'; @@ -21,7 +21,7 @@ export async function resolveEmbeddableAnomalyChartsUserInput( coreStart: CoreStart, input?: AnomalyChartsEmbeddableInput ): Promise> { - const { http, overlays } = coreStart; + const { http, overlays, theme, i18n } = coreStart; const { getJobs } = mlApiServicesProvider(new HttpService(http)); @@ -32,28 +32,25 @@ export async function resolveEmbeddableAnomalyChartsUserInput( const { jobs } = await getJobs({ jobId: jobIds.join(',') }); const influencers = extractInfluencers(jobs); influencers.push(VIEW_BY_JOB_LABEL); - const { theme$ } = coreStart.theme; const modalSession = overlays.openModal( toMountPoint( - wrapWithTheme( - { - modalSession.close(); - resolve({ - jobIds, - title: panelTitle, - maxSeriesToPlot, - }); - }} - onCancel={() => { - modalSession.close(); - reject(); - }} - />, - theme$ - ) + { + modalSession.close(); + resolve({ + jobIds, + title: panelTitle, + maxSeriesToPlot, + }); + }} + onCancel={() => { + modalSession.close(); + reject(); + }} + />, + { theme, i18n } ) ); } catch (error) { diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx index 12073abb5d95f..dc2ca931cc805 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx @@ -7,7 +7,7 @@ import React from 'react'; import type { CoreStart } from '@kbn/core/public'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { extractInfluencers } from '../../../common/util/job_utils'; import { VIEW_BY_JOB_LABEL } from '../../application/explorer/explorer_constants'; import { AnomalySwimlaneInitializer } from './anomaly_swimlane_initializer'; @@ -21,7 +21,7 @@ export async function resolveAnomalySwimlaneUserInput( coreStart: CoreStart, input?: AnomalySwimlaneEmbeddableInput ): Promise> { - const { http, overlays } = coreStart; + const { http, overlays, theme, i18n } = coreStart; const { getJobs } = mlApiServicesProvider(new HttpService(http)); @@ -32,29 +32,26 @@ export async function resolveAnomalySwimlaneUserInput( const { jobs } = await getJobs({ jobId: jobIds.join(',') }); const influencers = extractInfluencers(jobs); influencers.push(VIEW_BY_JOB_LABEL); - const { theme$ } = coreStart.theme; const modalSession = overlays.openModal( toMountPoint( - wrapWithTheme( - { - modalSession.close(); - resolve({ - jobIds, - title: explicitInput.panelTitle, - ...explicitInput, - }); - }} - onCancel={() => { - modalSession.close(); - reject(); - }} - />, - theme$ - ) + { + modalSession.close(); + resolve({ + jobIds, + title: explicitInput.panelTitle, + ...explicitInput, + }); + }} + onCancel={() => { + modalSession.close(); + reject(); + }} + />, + { theme, i18n } ) ); } catch (error) { diff --git a/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx b/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx index f1b84a7d046c0..00c4a02d4e929 100644 --- a/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx +++ b/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx @@ -9,14 +9,11 @@ import moment from 'moment'; import { takeUntil, distinctUntilChanged, skip } from 'rxjs/operators'; import { from } from 'rxjs'; import React from 'react'; -import { - KibanaContextProvider, - toMountPoint, - wrapWithTheme, -} from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { getInitialGroupsMap } from '../../application/components/job_selector/job_selector'; import { getMlGlobalServices } from '../../application/app'; -import { JobId } from '../../../common/types/anomaly_detection_jobs'; +import type { JobId } from '../../../common/types/anomaly_detection_jobs'; import { JobSelectorFlyout } from './components/job_selector_flyout'; /** @@ -35,6 +32,7 @@ export async function resolveJobSelection( http, uiSettings, theme, + i18n, application: { currentAppId$ }, } = coreStart; @@ -71,23 +69,19 @@ export async function resolveJobSelection( const flyoutSession = coreStart.overlays.openFlyout( toMountPoint( - wrapWithTheme( - - - , - theme.theme$ - ) + + + , + { theme, i18n } ), { 'data-test-subj': 'mlFlyoutJobSelector', diff --git a/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx b/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx index c6a580c544584..7fd5f9e86fca8 100644 --- a/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx +++ b/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx @@ -8,11 +8,8 @@ import React from 'react'; import { takeUntil, distinctUntilChanged, skip } from 'rxjs/operators'; import { from } from 'rxjs'; -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 { SharePluginStart } from '@kbn/share-plugin/public'; import type { DataPublicPluginStart } from '@kbn/data-plugin/public'; import type { CoreStart } from '@kbn/core/public'; @@ -34,7 +31,8 @@ export function createFlyout( ): Promise { const { http, - theme: { theme$ }, + theme, + i18n, overlays, application: { currentAppId$ }, } = coreStart; @@ -48,27 +46,25 @@ export function createFlyout( const flyoutSession = overlays.openFlyout( toMountPoint( - wrapWithTheme( - + { + onFlyoutClose(); + resolve(); }} - > - { - onFlyoutClose(); - resolve(); - }} - /> - , - theme$ - ) + /> + , + { theme, i18n } ), { 'data-test-subj': 'mlFlyoutLayerSelector', diff --git a/x-pack/plugins/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx b/x-pack/plugins/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx index aebba425a633c..06420c071c220 100644 --- a/x-pack/plugins/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx +++ b/x-pack/plugins/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx @@ -18,7 +18,6 @@ import { EuiTitle, EuiSpacer, EuiText, - useEuiTheme, } from '@elastic/eui'; import { Layer } from './layer'; @@ -32,7 +31,6 @@ interface Props { } export const LensLayerSelectionFlyout: FC = ({ onClose, embeddable }) => { - const { euiTheme } = useEuiTheme(); const { services: { data, lens }, } = useMlFromLensKibanaContext(); @@ -72,7 +70,7 @@ export const LensLayerSelectionFlyout: FC = ({ onClose, embeddable }) => /> - + {layerResults.map((layer, i) => ( ))} diff --git a/x-pack/plugins/ml/tsconfig.json b/x-pack/plugins/ml/tsconfig.json index ff3b8076a8ba1..57811ff1201fe 100644 --- a/x-pack/plugins/ml/tsconfig.json +++ b/x-pack/plugins/ml/tsconfig.json @@ -103,5 +103,6 @@ "@kbn/content-management-plugin", "@kbn/ml-in-memory-table", "@kbn/presentation-util-plugin", + "@kbn/react-kibana-mount", ], } diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx index da4bcd1d1c6bd..a26866452ff3f 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/wizard/wizard.tsx @@ -17,7 +17,6 @@ import { Storage } from '@kbn/kibana-utils-plugin/public'; import { StorageContextProvider } from '@kbn/ml-local-storage'; import { UrlStateProvider } from '@kbn/ml-url-state'; import { UI_SETTINGS } from '@kbn/data-plugin/common'; -import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats'; import type { RuntimeMappings } from '@kbn/ml-runtime-field-utils'; @@ -228,9 +227,7 @@ export const Wizard: FC = React.memo(({ cloneConfig, searchItems }) const stepsConfig = [stepDefine, stepDetails, stepCreate]; const datePickerDeps = { - ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']), - toMountPoint, - wrapWithTheme, + ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']), uiSettingsKeys: UI_SETTINGS, };