From 85a1d560574053d8dc2783f5bbd9dc91a7188048 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Wed, 10 Apr 2024 12:27:38 -0700 Subject: [PATCH 1/2] [ObltSoln] Remove usage of deprecated React rendering utilities --- .../public/alerts/lib/alerts_toast.tsx | 16 +- .../application/hooks/use_alerts_modal.ts | 7 +- .../hooks/use_request_error_handler.tsx | 13 +- .../monitoring/public/application/index.tsx | 500 +++++++++--------- .../application/pages/access_denied/index.tsx | 4 +- .../elasticsearch/elasticsearch_template.tsx | 5 +- .../elasticsearch/ingest_pipeline_modal.tsx | 15 +- .../components/cluster/listing/listing.js | 23 +- x-pack/plugins/monitoring/tsconfig.json | 2 + .../observability_solution/apm/tsconfig.json | 4 +- .../public/application/index.tsx | 76 ++- .../public/application/types.ts | 4 + .../contexts/exploratory_view_config.tsx | 9 +- .../header/add_to_case_action.tsx | 8 +- .../hooks/use_lens_attributes.test.tsx | 3 +- .../obsv_exploratory_view.tsx | 4 +- .../shared/exploratory_view/rtl_helpers.tsx | 1 + .../exploratory_view/public/routes/index.tsx | 5 +- .../exploratory_view/tsconfig.json | 4 +- .../profiling/public/app.tsx | 7 +- .../profiling/tsconfig.json | 3 +- .../getting_started/use_simple_monitor.ts | 7 +- .../hooks/use_monitor_save.tsx | 14 +- .../monitor_list_table/delete_monitor.tsx | 15 +- .../management/show_sync_errors.tsx | 12 +- .../settings/global_params/delete_param.tsx | 14 +- .../browser_test_results.tsx | 8 +- .../simple_test_results.tsx | 9 +- .../state/monitor_list/toast_title.tsx | 6 +- .../public/apps/synthetics/synthetics_app.tsx | 151 +++--- .../synthetics/public/kibana_services.ts | 4 + .../synthetics/tsconfig.json | 5 +- .../public/legacy_uptime/app/uptime_app.tsx | 124 +++-- .../monitor/ml/ml_flyout_container.tsx | 14 +- .../lib/alert_types/alert_messages.tsx | 12 +- .../legacy_uptime/state/alerts/alerts.ts | 2 +- .../uptime/tsconfig.json | 5 +- .../ux/public/application/ux_app.tsx | 82 +-- .../app/rum_dashboard/utils/test_helper.tsx | 34 +- .../observability_solution/ux/tsconfig.json | 4 +- 40 files changed, 626 insertions(+), 609 deletions(-) diff --git a/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx b/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx index 4c2ed3f50c4e0d..3cef2c17224386 100644 --- a/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx +++ b/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx @@ -8,17 +8,16 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiLink } from '@elastic/eui'; -import type { Observable } from 'rxjs'; -import type { CoreTheme } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { Legacy } from '../../legacy_shims'; +import { MonitoringStartServices } from '../../types'; export interface EnableAlertResponse { isSufficientlySecure?: boolean; hasPermanentEncryptionKey?: boolean; } -const showApiKeyAndEncryptionError = (theme$?: Observable) => { +const showApiKeyAndEncryptionError = (services: MonitoringStartServices) => { const settingsUrl = Legacy.shims.docLinks.links.alerting.generalSettings; Legacy.shims.toastNotifications.addWarning({ @@ -40,7 +39,7 @@ const showApiKeyAndEncryptionError = (theme$?: Observable) => { })} , - { theme$ } + services ), }); }; @@ -58,11 +57,14 @@ const showAlertsCreatedConfirmation = () => { }); }; -export const showAlertsToast = (response: EnableAlertResponse, theme$?: Observable) => { +export const showAlertsToast = ( + response: EnableAlertResponse, + services: MonitoringStartServices +) => { const { isSufficientlySecure, hasPermanentEncryptionKey } = response; if (isSufficientlySecure === false || hasPermanentEncryptionKey === false) { - showApiKeyAndEncryptionError(theme$); + showApiKeyAndEncryptionError(services); } else { showAlertsCreatedConfirmation(); } diff --git a/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts b/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts index 5469d02895bfc0..c7c3295d44be1e 100644 --- a/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts +++ b/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts @@ -7,9 +7,10 @@ import { useKibana } from '@kbn/kibana-react-plugin/public'; import { useRequestErrorHandler } from './use_request_error_handler'; import { EnableAlertResponse, showAlertsToast } from '../../alerts/lib/alerts_toast'; +import { MonitoringStartServices } from '../../types'; export const useAlertsModal = () => { - const { services } = useKibana(); + const { services } = useKibana(); const handleRequestError = useRequestErrorHandler(); function shouldShowAlertsModal(alerts: {}) { @@ -38,9 +39,9 @@ export const useAlertsModal = () => { {} )!; window.localStorage.setItem('ALERTS_MODAL_DECISION_MADE', 'true'); - showAlertsToast(response, services.theme?.theme$); + showAlertsToast(response, services); } catch (err) { - await handleRequestError(err); + handleRequestError(err); } } diff --git a/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx b/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx index e5a3e4260ac2fb..11f152536b54ed 100644 --- a/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx +++ b/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx @@ -11,9 +11,10 @@ import { includes } from 'lodash'; import type { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser'; import { FormattedMessage } from '@kbn/i18n-react'; import { EuiButton, EuiSpacer, EuiText } from '@elastic/eui'; -import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { formatMsg } from '../../lib/format_msg'; -import { MonitoringStartPluginDependencies } from '../../types'; +import { MonitoringStartServices } from '../../types'; export function formatMonitoringError(err: IHttpFetchError) { if (err.response?.status && err.response?.status !== -1) { @@ -35,7 +36,7 @@ export function formatMonitoringError(err: IHttpFetchError) { } export const useRequestErrorHandler = () => { - const { services } = useKibana(); + const { services } = useKibana(); const history = useHistory(); return useCallback( (err: IHttpFetchError) => { @@ -64,7 +65,7 @@ export const useRequestErrorHandler = () => { /> , - { theme$: services.theme?.theme$ } + services ), }); } else { @@ -72,10 +73,10 @@ export const useRequestErrorHandler = () => { title: i18n.translate('xpack.monitoring.ajaxErrorHandler.requestErrorNotificationTitle', { defaultMessage: 'Monitoring Request Error', }), - text: toMountPoint(formatMonitoringError(err), { theme$: services.theme?.theme$ }), + text: toMountPoint(formatMonitoringError(err), services), }); } }, - [history, services.notifications?.toasts, services.theme] + [history, services] ); }; diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index b9fd25f60c3675..39969c550570e8 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -6,8 +6,8 @@ */ import { AppMountParameters, CoreStart, CoreTheme, MountPoint } from '@kbn/core/public'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import React from 'react'; import ReactDOM from 'react-dom'; import { Redirect } from 'react-router-dom'; @@ -21,7 +21,7 @@ import { CODE_PATH_KIBANA, CODE_PATH_LOGSTASH, } from '../../common/constants'; -import { MonitoringStartPluginDependencies } from '../types'; +import { MonitoringStartPluginDependencies, MonitoringStartServices } from '../types'; import { ExternalConfig, ExternalConfigContext } from './contexts/external_config_context'; import { GlobalStateProvider } from './contexts/global_state_context'; import { HeaderActionMenuContext } from './contexts/header_action_menu_context'; @@ -99,255 +99,253 @@ const MonitoringApp: React.FC<{ theme$: Observable; }> = ({ core, plugins, externalConfig, setHeaderActionMenu, theme$ }) => { const history = createPreserveQueryHistory(); - const darkMode = core.theme.getTheme().darkMode; + const startServices: MonitoringStartServices = { ...core, ...plugins }; return ( - - - - - - - - - - - - - - - - - - {/* ElasticSearch Views */} - - - - - - - - - - - - - - - - - - - - - {/* Kibana Views */} - - - - - - - {/* Beats Views */} - - - - - - - {/* Logstash Routes */} - - - - - - - - - - - - - - - {/* APM Views */} - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + {/* ElasticSearch Views */} + + + + + + + + + + + + + + + + + + + + + {/* Kibana Views */} + + + + + + + {/* Beats Views */} + + + + + + + {/* Logstash Routes */} + + + + + + + + + + + + + + + {/* APM Views */} + + + + + + + + + + + + + + + + + + ); }; diff --git a/x-pack/plugins/monitoring/public/application/pages/access_denied/index.tsx b/x-pack/plugins/monitoring/public/application/pages/access_denied/index.tsx index 2ad779588b6aff..839cf418123fb5 100644 --- a/x-pack/plugins/monitoring/public/application/pages/access_denied/index.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/access_denied/index.tsx @@ -13,12 +13,12 @@ import useInterval from 'react-use/lib/useInterval'; import { Redirect } from 'react-router-dom'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { ComponentProps } from '../../route_init'; -import { MonitoringStartPluginDependencies } from '../../../types'; +import { MonitoringStartServices } from '../../../types'; import { ExternalConfigContext } from '../../contexts/external_config_context'; export const AccessDeniedPage: React.FC = () => { const { isCcsEnabled } = useContext(ExternalConfigContext); - const { services } = useKibana(); + const { services } = useKibana(); const [hasAccess, setHasAccess] = useState(false); useInterval(() => { diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/elasticsearch_template.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/elasticsearch_template.tsx index b034478f720c3d..a1d2fc6ca2fe35 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/elasticsearch_template.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/elasticsearch_template.tsx @@ -8,9 +8,8 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { includes } from 'lodash'; -import { DashboardStart } from '@kbn/dashboard-plugin/public'; -import { FleetStart } from '@kbn/fleet-plugin/public'; import { EuiIcon, EuiToolTip } from '@elastic/eui'; +import { MonitoringStartServices } from '../../../types'; import { PageTemplate } from '../page_template'; import { TabMenuItem, PageTemplateProps } from '../page_template'; import { ML_SUPPORTED_LICENSES } from '../../../../common/constants'; @@ -24,7 +23,7 @@ export const ElasticsearchTemplate: React.FC = ({ cluster, ...props }) => { - const { services } = useKibana<{ dashboard?: DashboardStart; fleet?: FleetStart }>(); + const { services } = useKibana(); const tabs: TabMenuItem[] = [ { diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ingest_pipeline_modal.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ingest_pipeline_modal.tsx index 29207177d93ec8..a1b3e2805e8b59 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ingest_pipeline_modal.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/ingest_pipeline_modal.tsx @@ -6,13 +6,12 @@ */ import React, { useState } from 'react'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; -import type { CoreStart } from '@kbn/core/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui'; -import { DashboardStart } from '@kbn/dashboard-plugin/public'; -import { FleetStart, KibanaSavedObjectType } from '@kbn/fleet-plugin/public'; +import { KibanaSavedObjectType } from '@kbn/fleet-plugin/public'; +import { MonitoringStartServices } from '../../../types'; const INGEST_PIPELINE_DASHBOARD_ID = 'elasticsearch-metrics-ingest-pipelines'; @@ -22,9 +21,7 @@ const INGEST_PIPELINE_DASHBOARD_ID = 'elasticsearch-metrics-ingest-pipelines'; * @param services * @returns */ -export const ingestPipelineTabOnClick = async ( - services: Partial -) => { +export const ingestPipelineTabOnClick = async (services: MonitoringStartServices) => { const response = await services.fleet?.hooks.epm.getBulkAssets({ assetIds: [ { @@ -56,9 +53,7 @@ export const ingestPipelineTabOnClick = async ( canInstallPackages={!!services.fleet?.authz.integrations.installPackages} closeModal={() => ref.close()} />, - { - theme$: services.theme?.theme$, - } + services ) ); diff --git a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js index d4bc3e35296101..a10dbd1fd21980 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js @@ -28,7 +28,8 @@ import { AlertsStatus } from '../../../alerts/status'; import { STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../../common/constants'; import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link'; import './listing.scss'; -import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; const IsClusterSupported = ({ isSupported, children }) => { return isSupported ? children : '-'; @@ -260,7 +261,7 @@ const licenseWarning = (scope, { title, text }) => { }); }; -const handleClickIncompatibleLicense = (scope, theme$, clusterName) => { +const handleClickIncompatibleLicense = (scope, services, clusterName) => { licenseWarning(scope, { title: i18n.translate( 'xpack.monitoring.cluster.listing.incompatibleLicense.warningMessageTitle', @@ -294,12 +295,12 @@ const handleClickIncompatibleLicense = (scope, theme$, clusterName) => { />

, - { theme$ } + services ), }); }; -const handleClickInvalidLicense = (scope, theme$, clusterName) => { +const handleClickInvalidLicense = (scope, services, clusterName) => { const licensingPath = `${Legacy.shims.getBasePath()}/app/management/stack/license_management/home`; licenseWarning(scope, { @@ -340,7 +341,7 @@ const handleClickInvalidLicense = (scope, theme$, clusterName) => { />

, - { theme$ } + services ), }); }; @@ -404,16 +405,8 @@ export const Listing = ({ angular, clusters, sorting, pagination, onTableChange const { services } = useKibana(); const _changeCluster = partial(changeCluster, scope, globalState); - const _handleClickIncompatibleLicense = partial( - handleClickIncompatibleLicense, - scope, - services.theme.theme$ - ); - const _handleClickInvalidLicense = partial( - handleClickInvalidLicense, - scope, - services.theme.theme$ - ); + const _handleClickIncompatibleLicense = partial(handleClickIncompatibleLicense, scope, services); + const _handleClickInvalidLicense = partial(handleClickInvalidLicense, scope, services); const hasStandaloneCluster = !!clusters.find( (cluster) => cluster.cluster_uuid === STANDALONE_CLUSTER_CLUSTER_UUID ); diff --git a/x-pack/plugins/monitoring/tsconfig.json b/x-pack/plugins/monitoring/tsconfig.json index 112bf5f695b17c..6361f5beea6f00 100644 --- a/x-pack/plugins/monitoring/tsconfig.json +++ b/x-pack/plugins/monitoring/tsconfig.json @@ -44,6 +44,8 @@ "@kbn/logs-shared-plugin", "@kbn/alerts-as-data-utils", "@kbn/rule-data-utils", + "@kbn/react-kibana-mount", + "@kbn/react-kibana-context-render", ], "exclude": [ "target/**/*", diff --git a/x-pack/plugins/observability_solution/apm/tsconfig.json b/x-pack/plugins/observability_solution/apm/tsconfig.json index 0eaae3f970a316..c962ec00949702 100644 --- a/x-pack/plugins/observability_solution/apm/tsconfig.json +++ b/x-pack/plugins/observability_solution/apm/tsconfig.json @@ -113,7 +113,9 @@ "@kbn/shared-ux-utility", "@kbn/management-settings-components-field-row", "@kbn/shared-ux-markdown", - "@kbn/core-http-request-handler-context-server" + "@kbn/core-http-request-handler-context-server", + "@kbn/react-kibana-context-theme", + "@kbn/react-kibana-context-render" ], "exclude": ["target/**/*"] } diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/application/index.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/application/index.tsx index d496af2b23fb95..cda4cda9d86184 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/application/index.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/application/index.tsx @@ -5,14 +5,14 @@ * 2.0. */ -import { EuiErrorBoundary } from '@elastic/eui'; import React from 'react'; import ReactDOM from 'react-dom'; import { i18n } from '@kbn/i18n'; import { Router, Routes, Route } from '@kbn/shared-ux-router'; import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import { Storage } from '@kbn/kibana-utils-plugin/public'; import { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public'; @@ -20,7 +20,9 @@ import { PluginContext } from '../context/plugin_context'; import { routes } from '../routes'; import { ExploratoryViewPublicPluginsStart } from '../plugin'; -function App() { +export type StartServices = Pick; + +function App(props: { startServices: StartServices }) { return ( <> @@ -28,7 +30,7 @@ function App() { const path = key as keyof typeof routes; const { handler, exact } = routes[path]; const Wrapper = () => { - return handler(); + return handler({ startServices: props.startServices }); }; return ; })} @@ -50,8 +52,7 @@ export const renderApp = ({ usageCollection: UsageCollectionSetup; isDev?: boolean; }) => { - const { element, history, theme$ } = appMountParameters; - const i18nCore = core.i18n; + const { element, history } = appMountParameters; const isDarkMode = core.theme.getTheme().darkMode; core.chrome.setHelpExtension({ @@ -68,45 +69,38 @@ export const renderApp = ({ usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment; ReactDOM.render( - + - - + - - - - -
- - - -
- - - - - - + + +
+ + + +
+ + + + - , + , element ); return () => { diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/application/types.ts b/x-pack/plugins/observability_solution/exploratory_view/public/application/types.ts index e15e86c5f99e1c..2311b9c08407fb 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/application/types.ts +++ b/x-pack/plugins/observability_solution/exploratory_view/public/application/types.ts @@ -6,10 +6,12 @@ */ import type { + AnalyticsServiceStart, ApplicationStart, ChromeStart, DocLinksStart, HttpStart, + I18nStart, IUiSettingsClient, NotificationsStart, OverlayStart, @@ -48,6 +50,8 @@ export interface ObservabilityAppServices { share: SharePluginStart; stateTransfer: EmbeddableStateTransfer; storage: IStorageWrapper; + analytics: AnalyticsServiceStart; + i18n: I18nStart; theme: ThemeServiceStart; triggersActionsUi: TriggersAndActionsUIPublicPluginStart; uiSettings: IUiSettingsClient; diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/contexts/exploratory_view_config.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/contexts/exploratory_view_config.tsx index 08df78cd072a95..82e72bf29d7a17 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/contexts/exploratory_view_config.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/contexts/exploratory_view_config.tsx @@ -6,13 +6,15 @@ */ import React, { createContext, useContext, useState } from 'react'; -import { AppMountParameters } from '@kbn/core/public'; +import { AppMountParameters, CoreStart } from '@kbn/core/public'; import { i18n } from '@kbn/i18n'; import type { AppDataType, ConfigProps, ReportViewType, SeriesConfig } from '../types'; export type ReportConfigMap = Record SeriesConfig>>; -interface ExploratoryViewContextValue { +type StartServices = Pick; + +interface ExploratoryViewContextValue extends StartServices { dataTypes: Array<{ id: AppDataType; label: string }>; reportTypes: Array<{ reportType: ReportViewType | typeof SELECT_REPORT_TYPE; @@ -21,6 +23,7 @@ interface ExploratoryViewContextValue { reportConfigMap: ReportConfigMap; asPanel?: boolean; setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + // FIXME: use theme from CoreStart theme$: AppMountParameters['theme$']; isEditMode?: boolean; setIsEditMode?: React.Dispatch>; @@ -38,6 +41,7 @@ export function ExploratoryViewContextProvider({ setHeaderActionMenu, asPanel = true, theme$, + ...startServices }: { children: JSX.Element } & ExploratoryViewContextValue) { const [isEditMode, setIsEditMode] = useState(false); @@ -50,6 +54,7 @@ export function ExploratoryViewContextProvider({ theme$, isEditMode, setIsEditMode, + ...startServices, }; return ( diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/header/add_to_case_action.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/header/add_to_case_action.tsx index 590451eaea6ef0..8f91ee3c87cd6c 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/header/add_to_case_action.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/header/add_to_case_action.tsx @@ -8,7 +8,8 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useCallback, useEffect } from 'react'; -import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { CasesDeepLinkId, generateCaseViewPath, @@ -41,7 +42,6 @@ export function AddToCaseAction({ const { cases, application: { getUrlForApp }, - theme, } = kServices; const getToastText = useCallback( @@ -53,9 +53,9 @@ export function AddToCaseAction({ path: generateCaseViewPath({ detailName: theCase.id }), })} />, - { theme$: theme?.theme$ } + kServices ), - [getUrlForApp, theme?.theme$] + [getUrlForApp, kServices] ); const absoluteFromDate = parseRelativeDate(timeRange.from); diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx index 9f98d6b812e753..1581ffd4467130 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.test.tsx @@ -19,7 +19,7 @@ import * as useAppDataViewHook from './use_app_data_view'; import * as theme from '@kbn/observability-shared-plugin/public/hooks/use_theme'; import { dataTypes, obsvReportConfigMap, reportTypesList } from '../obsv_exploratory_view'; import { ExploratoryViewContextProvider } from '../contexts/exploratory_view_config'; -import { themeServiceMock } from '@kbn/core/public/mocks'; +import { coreMock, themeServiceMock } from '@kbn/core/public/mocks'; import * as lensHook from './use_lens_formula_helper'; import { lensPluginMock } from '@kbn/lens-plugin/public/mocks'; import { FormulaPublicApi } from '@kbn/lens-plugin/public'; @@ -76,6 +76,7 @@ describe('useExpViewTimeRange', function () { reportConfigMap={obsvReportConfigMap} setHeaderActionMenu={jest.fn()} theme$={themeServiceMock.createTheme$()} + {...coreMock.createStart()} > {children} diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/obsv_exploratory_view.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/obsv_exploratory_view.tsx index 795f6aaaf45a12..55b41a6aee6c87 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/obsv_exploratory_view.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/obsv_exploratory_view.tsx @@ -36,6 +36,7 @@ import { getMobileDeviceDistributionConfig } from './configurations/mobile/devic import { usePluginContext } from '../../../hooks/use_plugin_context'; import { getLogsKPIConfig } from './configurations/infra_logs/kpi_over_time_config'; import { getSingleMetricConfig } from './configurations/rum/single_metric_config'; +import { StartServices } from '../../../application'; export const dataTypes: Array<{ id: AppDataType; label: string }> = [ { @@ -108,7 +109,7 @@ export const obsvReportConfigMap = { [DataTypes.ALERTS]: [getAlertsKPIConfig, getAlertsSingleMetricConfig], }; -export function ObservabilityExploratoryView() { +export function ObservabilityExploratoryView(props: { startServices: StartServices }) { const { appMountParameters } = usePluginContext(); return ( @@ -119,6 +120,7 @@ export function ObservabilityExploratoryView() { reportConfigMap={obsvReportConfigMap} setHeaderActionMenu={appMountParameters.setHeaderActionMenu} theme$={appMountParameters.theme$} + {...props.startServices} > diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx index e89cd6d6d3afff..336c6eae6badb1 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx @@ -217,6 +217,7 @@ export function render( reportConfigMap={obsvReportConfigMap} setHeaderActionMenu={jest.fn()} theme$={themeServiceMock.createTheme$()} + {...defaultCore} > {ui} diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/routes/index.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/routes/index.tsx index 9ce0d5ec426626..0a7f2d54fad40e 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/routes/index.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/routes/index.tsx @@ -9,6 +9,7 @@ import * as t from 'io-ts'; import React from 'react'; import { jsonRt } from './json_rt'; import { ObservabilityExploratoryView } from '../components/shared/exploratory_view/obsv_exploratory_view'; +import { StartServices } from '../application'; export type RouteParams = DecodeParams; @@ -23,8 +24,8 @@ export interface Params { export const routes = { '/': { - handler: () => { - return ; + handler: ({ startServices }: { startServices: StartServices }) => { + return ; }, params: { query: t.partial({ diff --git a/x-pack/plugins/observability_solution/exploratory_view/tsconfig.json b/x-pack/plugins/observability_solution/exploratory_view/tsconfig.json index cdfeb258831a23..87002a070158a7 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/tsconfig.json +++ b/x-pack/plugins/observability_solution/exploratory_view/tsconfig.json @@ -39,7 +39,9 @@ "@kbn/observability-shared-plugin", "@kbn/core-ui-settings-browser-mocks", "@kbn/observability-ai-assistant-plugin", - "@kbn/shared-ux-link-redirect-app" + "@kbn/shared-ux-link-redirect-app", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-mount" ], "exclude": ["target/**/*"] } diff --git a/x-pack/plugins/observability_solution/profiling/public/app.tsx b/x-pack/plugins/observability_solution/profiling/public/app.tsx index f90c14ac7044fd..0b4cfbaaaa44c5 100644 --- a/x-pack/plugins/observability_solution/profiling/public/app.tsx +++ b/x-pack/plugins/observability_solution/profiling/public/app.tsx @@ -6,7 +6,8 @@ */ import { AppMountParameters, CoreSetup, CoreStart } from '@kbn/core/public'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { Storage } from '@kbn/kibana-utils-plugin/public'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; @@ -85,7 +86,7 @@ function App({ }, [coreStart, coreSetup, pluginsStart, pluginsSetup, profilingFetchServices]); return ( - + @@ -117,7 +118,7 @@ function App({ - + ); } diff --git a/x-pack/plugins/observability_solution/profiling/tsconfig.json b/x-pack/plugins/observability_solution/profiling/tsconfig.json index 381c6ab4c5d1f8..91adbf974c2f9e 100644 --- a/x-pack/plugins/observability_solution/profiling/tsconfig.json +++ b/x-pack/plugins/observability_solution/profiling/tsconfig.json @@ -53,7 +53,8 @@ "@kbn/security-plugin", "@kbn/shared-ux-utility", "@kbn/management-settings-components-field-row", - "@kbn/deeplinks-observability" + "@kbn/deeplinks-observability", + "@kbn/react-kibana-context-render" // add references to other TypeScript projects the plugin depends on // requiredPlugins from ./kibana.json diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/getting_started/use_simple_monitor.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/getting_started/use_simple_monitor.ts index d014891f53465e..e4015386ff3335 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/getting_started/use_simple_monitor.ts +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/getting_started/use_simple_monitor.ts @@ -56,23 +56,24 @@ export const useSimpleMonitor = ({ monitorData }: { monitorData?: SimpleFormData }, [monitorData]); useEffect(() => { + const { core, toasts } = kibanaService; const newMonitor = data as UpsertMonitorResponse; const hasErrors = data && 'attributes' in data && data.attributes.errors?.length > 0; if (hasErrors && !loading) { showSyncErrors( (data as { attributes: { errors: ServiceLocationErrors } })?.attributes.errors ?? [], serviceLocations, - kibanaService.toasts + core ); } if (!loading && status === FETCH_STATUS.FAILURE) { - kibanaService.toasts.addDanger({ + toasts.addDanger({ title: MONITOR_FAILURE_LABEL, toastLifeTimeMs: 3000, }); } else if (!loading && (newMonitor as EncryptedSyntheticsSavedMonitor)?.id) { - kibanaService.toasts.addSuccess({ + toasts.addSuccess({ title: MONITOR_SUCCESS_LABEL, toastLifeTimeMs: 3000, }); diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_save.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_save.tsx index ae847d9be069f3..4fa482eb63bbd1 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_save.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/hooks/use_monitor_save.tsx @@ -6,7 +6,7 @@ */ import { FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; -import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { useParams, useRouteMatch } from 'react-router-dom'; import React, { useEffect } from 'react'; import { useDispatch } from 'react-redux'; @@ -19,8 +19,6 @@ import { cleanMonitorListState, IHttpSerializedFetchError } from '../../../state import { useSyntheticsRefreshContext } from '../../../contexts'; export const useMonitorSave = ({ monitorData }: { monitorData?: SyntheticsMonitor }) => { - const core = useKibana(); - const theme$ = core.services.theme?.theme$; const dispatch = useDispatch(); const { refreshApp } = useSyntheticsRefreshContext(); const { monitorId } = useParams<{ monitorId: string }>(); @@ -44,8 +42,10 @@ export const useMonitorSave = ({ monitorData }: { monitorData?: SyntheticsMonito }, [monitorData]); useEffect(() => { + const { core, toasts } = kibanaService; + if (status === FETCH_STATUS.FAILURE && error) { - kibanaService.toasts.addError( + toasts.addError( { ...error, message: (error as unknown as IHttpSerializedFetchError).body.message ?? error.message, @@ -55,18 +55,18 @@ export const useMonitorSave = ({ monitorData }: { monitorData?: SyntheticsMonito } else if (status === FETCH_STATUS.SUCCESS && !loading) { refreshApp(); dispatch(cleanMonitorListState()); - kibanaService.toasts.addSuccess({ + toasts.addSuccess({ title: monitorId ? MONITOR_UPDATED_SUCCESS_LABEL : MONITOR_SUCCESS_LABEL, text: toMountPoint(

{monitorId ? MONITOR_UPDATED_SUCCESS_LABEL_SUBTEXT : MONITOR_SUCCESS_LABEL_SUBTEXT}

, - { theme$ } + core ), toastLifeTimeMs: 3000, }); } - }, [data, status, monitorId, loading, refreshApp, dispatch, theme$, error]); + }, [data, status, monitorId, loading, refreshApp, dispatch, error]); return { status, loading, isEdit }; }; diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx index da830b69e4f7d4..b16829fa5880a5 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/delete_monitor.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import { EuiCallOut, EuiConfirmModal, EuiLink, EuiSpacer } from '@elastic/eui'; import { FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -42,21 +42,25 @@ export const DeleteMonitor = ({ }, [configId, isDeleting]); useEffect(() => { + const { core, toasts } = kibanaService; if (!isDeleting) { return; } if (monitorDeleteStatus === FETCH_STATUS.FAILURE) { - kibanaService.toasts.addDanger( + toasts.addDanger( { title: toMountPoint( -

{labels.MONITOR_DELETE_FAILURE_LABEL}

+

+ {labels.MONITOR_DELETE_FAILURE_LABEL} +

, + core ), }, { toastLifeTimeMs: 3000 } ); } else if (monitorDeleteStatus === FETCH_STATUS.SUCCESS) { reloadPage(); - kibanaService.toasts.addSuccess( + toasts.addSuccess( { title: toMountPoint(

@@ -67,7 +71,8 @@ export const DeleteMonitor = ({ values: { name }, } )} -

+

, + core ), }, { toastLifeTimeMs: 3000 } diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/show_sync_errors.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/show_sync_errors.tsx index ee048593e5de1d..477639b7774a44 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/show_sync_errors.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/show_sync_errors.tsx @@ -7,18 +7,19 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; -import { IToasts } from '@kbn/core/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; +import { CoreStart } from '@kbn/core/public'; import { ServiceLocationErrors, ServiceLocations } from '../../../../../../common/runtime_types'; export const showSyncErrors = ( errors: ServiceLocationErrors, locations: ServiceLocations, - toasts: IToasts + core: CoreStart ) => { + const { notifications, ...startServices } = core; Object.values(errors).forEach((location) => { const { status: responseStatus, reason } = location.error || {}; - toasts.addWarning({ + notifications.toasts.addWarning({ title: i18n.translate('xpack.synthetics.monitorManagement.service.error.title', { defaultMessage: `Unable to sync monitor config`, }), @@ -48,7 +49,8 @@ export const showSyncErrors = ( : null}

) : null} - + , + startServices ), toastLifeTimeMs: 30000, }); diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx index 942afb91cfe48c..f2e86f077123d0 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import { EuiConfirmModal } from '@elastic/eui'; import { FETCH_STATUS, useFetcher } from '@kbn/observability-shared-plugin/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { i18n } from '@kbn/i18n'; import { useDispatch } from 'react-redux'; @@ -48,8 +48,10 @@ export const DeleteParam = ({ if (!isDeleting) { return; } + const { core, toasts } = kibanaService; + if (status === FETCH_STATUS.FAILURE) { - kibanaService.toasts.addDanger( + toasts.addDanger( { title: toMountPoint(

@@ -58,13 +60,14 @@ export const DeleteParam = ({ defaultMessage: 'Param {name} failed to delete.', values: { name }, })} -

+

, + core ), }, { toastLifeTimeMs: 3000 } ); } else if (status === FETCH_STATUS.SUCCESS) { - kibanaService.toasts.addSuccess( + toasts.addSuccess( { title: toMountPoint(

@@ -72,7 +75,8 @@ export const DeleteParam = ({ defaultMessage: 'Param {name} deleted successfully.', values: { name }, })} -

+

, + core ), }, { toastLifeTimeMs: 3000 } diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/browser_test_results.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/browser_test_results.tsx index 5710ad7faaa42f..326e981d2c4e26 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/browser_test_results.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/browser_test_results.tsx @@ -7,7 +7,7 @@ import React, { Fragment, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { FormattedMessage } from '@kbn/i18n-react'; import { kibanaService } from '../../../../../utils/kibana_service'; import { useBrowserRunOnceMonitors } from '../hooks/use_browser_run_once_monitors'; @@ -38,8 +38,9 @@ export const BrowserTestRunResult = ({ }); useEffect(() => { + const { core, toasts } = kibanaService; if (retriesExceeded) { - kibanaService.toasts.addDanger( + toasts.addDanger( { text: FAILED_TO_SCHEDULE, title: toMountPoint( @@ -47,7 +48,8 @@ export const BrowserTestRunResult = ({ id="xpack.synthetics.manualTestRun.failedTest.name" defaultMessage="Manual test run failed for {name}" values={{ name }} - /> + />, + core ), }, { diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/simple_test_results.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/simple_test_results.tsx index 97dcd4cdd21474..f88b6b3483a438 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/simple_test_results.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/test_now_mode/manual_test_run_mode/simple_test_results.tsx @@ -6,7 +6,7 @@ */ import React, { useEffect } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { FAILED_TO_SCHEDULE } from './browser_test_results'; import { kibanaService } from '../../../../../utils/kibana_service'; import { useSimpleRunOnceMonitors } from '../hooks/use_simple_run_once_monitors'; @@ -25,7 +25,9 @@ export function SimpleTestResults({ name, testRunId, expectPings, onDone }: Prop useEffect(() => { if (retriesExceeded) { - kibanaService.toasts.addDanger( + const { core, toasts } = kibanaService; + + toasts.addDanger( { text: FAILED_TO_SCHEDULE, title: toMountPoint( @@ -33,7 +35,8 @@ export function SimpleTestResults({ name, testRunId, expectPings, onDone }: Prop id="xpack.synthetics.manualTestRun.failedTest.name" defaultMessage="Manual test run failed for {name}" values={{ name }} - /> + />, + core ), }, { diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/monitor_list/toast_title.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/monitor_list/toast_title.tsx index 0ff25d57737325..0083a5a75339f6 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/monitor_list/toast_title.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/monitor_list/toast_title.tsx @@ -5,9 +5,11 @@ * 2.0. */ -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; import React from 'react'; +import { toMountPoint } from '@kbn/react-kibana-mount'; +import { kibanaService } from '../../../../utils/kibana_service'; + export function toastTitle({ title, testAttribute }: { title: string; testAttribute?: string }) { - return toMountPoint(

{title}

); + return toMountPoint(

{title}

, kibanaService.core); } diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx index 9288395290fda8..93c45442695ad5 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx @@ -4,31 +4,33 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ + import React, { useEffect } from 'react'; import { Provider as ReduxProvider } from 'react-redux'; -import { Router } from '@kbn/shared-ux-router'; -import { EuiErrorBoundary } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; + import { APP_WRAPPER_CLASS } from '@kbn/core/public'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; -import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; +import { i18n } from '@kbn/i18n'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { InspectorContextProvider } from '@kbn/observability-shared-plugin/public'; -import { SyntheticsDataViewContextProvider } from './contexts/synthetics_data_view_context'; -import { SyntheticsAppProps } from './contexts'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; +import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; +import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; +import { Router } from '@kbn/shared-ux-router'; +import { kibanaService } from '../../utils/kibana_service'; +import { ActionMenu } from './components/common/header/action_menu'; +import { TestNowModeFlyoutContainer } from './components/test_now_mode/test_now_mode_flyout_container'; import { + SyntheticsAppProps, SyntheticsRefreshContextProvider, SyntheticsSettingsContextProvider, - SyntheticsThemeContextProvider, SyntheticsStartupPluginsContextProvider, + SyntheticsThemeContextProvider, } from './contexts'; - +import { SyntheticsDataViewContextProvider } from './contexts/synthetics_data_view_context'; import { PageRouter } from './routes'; -import { store, storage, setBasePath } from './state'; -import { kibanaService } from '../../utils/kibana_service'; -import { ActionMenu } from './components/common/header/action_menu'; -import { TestNowModeFlyoutContainer } from './components/test_now_mode/test_now_mode_flyout_container'; +import { setBasePath, storage, store } from './state'; const Application = (props: SyntheticsAppProps) => { const { @@ -36,7 +38,6 @@ const Application = (props: SyntheticsAppProps) => { canSave, core, darkMode, - i18n: i18nCore, plugins, renderGlobalHelpControls, setBadge, @@ -68,68 +69,66 @@ const Application = (props: SyntheticsAppProps) => { store.dispatch(setBasePath(basePath)); return ( - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + ); }; diff --git a/x-pack/plugins/observability_solution/synthetics/public/kibana_services.ts b/x-pack/plugins/observability_solution/synthetics/public/kibana_services.ts index eb125eb87c744b..9c3f641c29a80f 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/kibana_services.ts +++ b/x-pack/plugins/observability_solution/synthetics/public/kibana_services.ts @@ -7,9 +7,13 @@ import type { CoreStart } from '@kbn/core/public'; +type StartServices = Pick; + let coreStart: CoreStart; export function setStartServices(core: CoreStart) { coreStart = core; } +export const getStartServices = (): StartServices => coreStart; + export const getDocLinks = () => coreStart?.docLinks; diff --git a/x-pack/plugins/observability_solution/synthetics/tsconfig.json b/x-pack/plugins/observability_solution/synthetics/tsconfig.json index 5a552084919fea..71b989fe671a6c 100644 --- a/x-pack/plugins/observability_solution/synthetics/tsconfig.json +++ b/x-pack/plugins/observability_solution/synthetics/tsconfig.json @@ -86,7 +86,10 @@ "@kbn/serverless", "@kbn/repo-info", "@kbn/index-management-plugin", - "@kbn/license-management-plugin" + "@kbn/license-management-plugin", + "@kbn/react-kibana-mount", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-context-theme" ], "exclude": ["target/**/*"] } diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx index c82ac50a72594d..1f4be8fa943f03 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx @@ -7,11 +7,12 @@ import React, { useEffect } from 'react'; import { Provider as ReduxProvider } from 'react-redux'; import { Router } from '@kbn/shared-ux-router'; -import { EuiErrorBoundary } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from '@kbn/core/public'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; +import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { InspectorContextProvider } from '@kbn/observability-shared-plugin/public'; @@ -68,7 +69,6 @@ const Application = (props: UptimeAppProps) => { canSave, core, darkMode, - i18n: i18nCore, plugins, renderGlobalHelpControls, setBadge, @@ -99,66 +99,64 @@ const Application = (props: UptimeAppProps) => { store.dispatch(setBasePath(basePath)); return ( - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + ); }; diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/ml/ml_flyout_container.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/ml/ml_flyout_container.tsx index aeb779dca98837..88c571284306c2 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/ml/ml_flyout_container.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/monitor/ml/ml_flyout_container.tsx @@ -7,9 +7,8 @@ import React, { useContext, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import type { Observable } from 'rxjs'; -import type { CoreTheme } from '@kbn/core/public'; -import { toMountPoint, useKibana } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; import { canCreateMLJobSelector, hasMLJobSelector, @@ -43,7 +42,6 @@ const showMLJobNotification = ( range: { to: string; from: string }, success: boolean, awaitingNodeAssignment: boolean, - theme$?: Observable, error?: Error ) => { if (success) { @@ -51,7 +49,7 @@ const showMLJobNotification = ( { title: toMountPoint(

{labels.JOB_CREATED_SUCCESS_TITLE}

, - { theme$ } + kibanaService.core ), text: toMountPoint(

@@ -62,7 +60,7 @@ const showMLJobNotification = ( {labels.VIEW_JOB}

, - { theme$ } + kibanaService.core ), }, { toastLifeTimeMs: 10000 } @@ -116,8 +114,7 @@ export const MachineLearningFlyout: React.FC = ({ onClose }) => { basePath, { to: dateRangeEnd, from: dateRangeStart }, true, - hasMLJob.awaitingNodeAssignment, - core.services.theme?.theme$ + hasMLJob.awaitingNodeAssignment ); dispatch(getExistingMLJobAction.get({ monitorId: monitorId as string })); refreshApp(); @@ -134,7 +131,6 @@ export const MachineLearningFlyout: React.FC = ({ onClose }) => { { to: dateRangeEnd, from: dateRangeStart }, false, false, - core.services.theme?.theme$, error as Error ); } diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/lib/alert_types/alert_messages.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/lib/alert_types/alert_messages.tsx index 65bc0294fa03b7..daa3f7a64ac393 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/lib/alert_types/alert_messages.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/lib/alert_types/alert_messages.tsx @@ -5,24 +5,18 @@ * 2.0. */ -import type { Observable } from 'rxjs'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; -import type { CoreTheme } from '@kbn/core/public'; import { EuiLink, EuiSpacer, EuiText } from '@elastic/eui'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import type { Rule } from '@kbn/triggers-actions-ui-plugin/public'; import { ActionConnector } from '../../../../common/rules/types'; import { kibanaService } from '../../state/kibana_service'; import { getUrlForAlert } from './common'; -export const simpleAlertEnabled = ( - defaultActions: ActionConnector[], - theme$: Observable, - rule: Rule -) => { +export const simpleAlertEnabled = (defaultActions: ActionConnector[], rule: Rule) => { const alertUrl = getUrlForAlert(rule.id, kibanaService.core.http.basePath.get()); return { @@ -53,7 +47,7 @@ export const simpleAlertEnabled = ( })} , - { theme$ } + kibanaService.core ), }; }; diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/state/alerts/alerts.ts b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/state/alerts/alerts.ts index 4f6ced668dffb9..3470c0c534d642 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/state/alerts/alerts.ts +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/state/alerts/alerts.ts @@ -153,7 +153,7 @@ export function* fetchAlertsEffect() { yield put(createAlertAction.success(response)); kibanaService.core.notifications.toasts.addSuccess( - simpleAlertEnabled(action.payload.defaultActions, kibanaService.theme, response) + simpleAlertEnabled(action.payload.defaultActions, response) ); yield put(getMonitorAlertsAction.get()); } catch (err) { diff --git a/x-pack/plugins/observability_solution/uptime/tsconfig.json b/x-pack/plugins/observability_solution/uptime/tsconfig.json index 1a8494ac19c119..8fc38a304c26b2 100644 --- a/x-pack/plugins/observability_solution/uptime/tsconfig.json +++ b/x-pack/plugins/observability_solution/uptime/tsconfig.json @@ -73,7 +73,10 @@ "@kbn/core-saved-objects-server", "@kbn/observability-ai-assistant-plugin", "@kbn/shared-ux-link-redirect-app", - "@kbn/repo-info" + "@kbn/repo-info", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-context-theme", + "@kbn/react-kibana-mount" ], "exclude": ["target/**/*"] } diff --git a/x-pack/plugins/observability_solution/ux/public/application/ux_app.tsx b/x-pack/plugins/observability_solution/ux/public/application/ux_app.tsx index fa886ea1fbb3c8..ff4c5620701bcb 100644 --- a/x-pack/plugins/observability_solution/ux/public/application/ux_app.tsx +++ b/x-pack/plugins/observability_solution/ux/public/application/ux_app.tsx @@ -20,9 +20,10 @@ import { APP_WRAPPER_CLASS, } from '@kbn/core/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; +import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; import { KibanaContextProvider, - KibanaThemeProvider, useDarkMode, } from '@kbn/kibana-react-plugin/public'; @@ -129,51 +130,50 @@ export function UXAppRoot({ spaceId: string; }) { const { history } = appMountParameters; - const i18nCore = core.i18n; const plugins = { ...deps, maps }; createCallApmApi(core); return ( -
- - +
+ - - - + @@ -191,12 +191,12 @@ export function UXAppRoot({ - - - - - -
+ + + + +
+ ); } diff --git a/x-pack/plugins/observability_solution/ux/public/components/app/rum_dashboard/utils/test_helper.tsx b/x-pack/plugins/observability_solution/ux/public/components/app/rum_dashboard/utils/test_helper.tsx index 1cb31ba938626a..7786e3eb922111 100644 --- a/x-pack/plugins/observability_solution/ux/public/components/app/rum_dashboard/utils/test_helper.tsx +++ b/x-pack/plugins/observability_solution/ux/public/components/app/rum_dashboard/utils/test_helper.tsx @@ -7,26 +7,20 @@ import React from 'react'; import { render as testLibRender } from '@testing-library/react'; -import { CoreStart } from '@kbn/core/public'; import { of } from 'rxjs'; import { createMemoryHistory } from 'history'; import { Router } from '@kbn/shared-ux-router'; import { MemoryHistory } from 'history'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { coreMock } from '@kbn/core/public/mocks'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { UrlParamsProvider } from '../../../../context/url_params_context/url_params_context'; -export const core = { - http: { - basePath: { - prepend: jest.fn(), - }, - }, - uiSettings: { - get: (key: string) => true, - get$: (key: string) => of(true), - }, -} as unknown as CoreStart; +const core = coreMock.createStart(); +jest.spyOn(core.uiSettings, 'get').mockImplementation((_key: string) => true); +jest + .spyOn(core.uiSettings, 'get$') + .mockImplementation((_key: string) => of(true)); export const render = ( component: React.ReactNode, @@ -37,12 +31,12 @@ export const render = ( history.location.key = 'TestKeyForTesting'; return testLibRender( - - - - {component} - - - + + + + {component} + + + ); }; diff --git a/x-pack/plugins/observability_solution/ux/tsconfig.json b/x-pack/plugins/observability_solution/ux/tsconfig.json index aee39bbe0ea8f3..d90159e8d30d67 100644 --- a/x-pack/plugins/observability_solution/ux/tsconfig.json +++ b/x-pack/plugins/observability_solution/ux/tsconfig.json @@ -45,7 +45,9 @@ "@kbn/shared-ux-link-redirect-app", "@kbn/apm-data-view", "@kbn/spaces-plugin", - "@kbn/deeplinks-observability" + "@kbn/deeplinks-observability", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-context-theme" ], "exclude": ["target/**/*"] } From 32060fa6308df6e1088258a9ee7b0a6234b2c6d7 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 16 Apr 2024 18:11:06 +0000 Subject: [PATCH 2/2] [CI] Auto-commit changed files from 'node scripts/lint_ts_projects --fix' --- x-pack/plugins/observability_solution/apm/tsconfig.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/tsconfig.json b/x-pack/plugins/observability_solution/apm/tsconfig.json index c962ec00949702..1f1fd6c1c954ab 100644 --- a/x-pack/plugins/observability_solution/apm/tsconfig.json +++ b/x-pack/plugins/observability_solution/apm/tsconfig.json @@ -114,8 +114,6 @@ "@kbn/management-settings-components-field-row", "@kbn/shared-ux-markdown", "@kbn/core-http-request-handler-context-server", - "@kbn/react-kibana-context-theme", - "@kbn/react-kibana-context-render" ], "exclude": ["target/**/*"] }