diff --git a/src/plugins/discover/public/application/context/context_app.test.tsx b/src/plugins/discover/public/application/context/context_app.test.tsx index 7f78bb1c698ab..a31557124d49a 100644 --- a/src/plugins/discover/public/application/context/context_app.test.tsx +++ b/src/plugins/discover/public/application/context/context_app.test.tsx @@ -19,6 +19,7 @@ import { DiscoverServices } from '../../build_services'; import { indexPatternsMock } from '../../__mocks__/index_patterns'; import { act } from 'react-dom/test-utils'; import { uiSettingsMock } from '../../__mocks__/ui_settings'; +import { themeServiceMock } from '../../../../../core/public/mocks'; const mockFilterManager = createFilterManagerMock(); const mockNavigationPlugin = { ui: { TopNavMenu: mockTopNavMenu } }; @@ -60,7 +61,10 @@ describe('ContextApp test', () => { indexPatterns: indexPatternsMock, toastNotifications: { addDanger: () => {} }, navigation: mockNavigationPlugin, - core: { notifications: { toasts: [] } }, + core: { + notifications: { toasts: [] }, + theme: { theme$: themeServiceMock.createStartContract().theme$ }, + }, history: () => {}, fieldFormats: { getDefaultInstance: jest.fn(() => ({ convert: (value: unknown) => value })), diff --git a/src/plugins/discover/public/application/context/utils/use_context_app_fetch.test.ts b/src/plugins/discover/public/application/context/utils/use_context_app_fetch.test.ts index cd7bcd810dc39..0fc8bd99c021d 100644 --- a/src/plugins/discover/public/application/context/utils/use_context_app_fetch.test.ts +++ b/src/plugins/discover/public/application/context/utils/use_context_app_fetch.test.ts @@ -21,6 +21,7 @@ import { import { indexPatternWithTimefieldMock } from '../../../__mocks__/index_pattern_with_timefield'; import { createContextSearchSourceStub } from '../services/_stubs'; import { IndexPattern } from '../../../../../data_views/common'; +import { themeServiceMock } from '../../../../../../core/public/mocks'; const mockFilterManager = createFilterManagerMock(); @@ -60,7 +61,10 @@ const initDefaults = (tieBreakerFields: string[], indexPatternId = 'the-index-pa }, }, toastNotifications: { addDanger: dangerNotification }, - core: { notifications: { toasts: [] } }, + core: { + notifications: { toasts: [] }, + theme: { theme$: themeServiceMock.createStartContract().theme$ }, + }, history: () => {}, filterManager: mockFilterManager, uiSettings: { diff --git a/src/plugins/discover/public/application/context/utils/use_context_app_fetch.tsx b/src/plugins/discover/public/application/context/utils/use_context_app_fetch.tsx index e5ed24d475497..fc5718abb43f0 100644 --- a/src/plugins/discover/public/application/context/utils/use_context_app_fetch.tsx +++ b/src/plugins/discover/public/application/context/utils/use_context_app_fetch.tsx @@ -11,7 +11,7 @@ import { CONTEXT_TIE_BREAKER_FIELDS_SETTING } from '../../../../common'; import { DiscoverServices } from '../../../build_services'; import { fetchAnchor } from '../services/anchor'; import { fetchSurroundingDocs, SurrDocType } from '../services/context'; -import { MarkdownSimple, toMountPoint } from '../../../../../kibana_react/public'; +import { MarkdownSimple, toMountPoint, wrapWithTheme } from '../../../../../kibana_react/public'; import { IndexPattern, SortDirection } from '../../../../../data/public'; import { ContextFetchState, @@ -42,7 +42,8 @@ export function useContextAppFetch({ useNewFieldsApi, services, }: ContextAppFetchProps) { - const { uiSettings: config, data, toastNotifications, filterManager } = services; + const { uiSettings: config, data, toastNotifications, filterManager, core } = services; + const { theme$ } = core.theme; const searchSource = useMemo(() => { return data.search.searchSource.createEmpty(); @@ -70,11 +71,14 @@ export function useContextAppFetch({ toastNotifications.addDanger({ title: errorTitle, text: toMountPoint( - - {i18n.translate('discover.context.invalidTieBreakerFiledSetting', { - defaultMessage: 'Invalid tie breaker field setting', - })} - + wrapWithTheme( + + {i18n.translate('discover.context.invalidTieBreakerFiledSetting', { + defaultMessage: 'Invalid tie breaker field setting', + })} + , + theme$ + ) ), }); return; @@ -93,7 +97,7 @@ export function useContextAppFetch({ setState(createError('anchorStatus', FailureReason.UNKNOWN, error)); toastNotifications.addDanger({ title: errorTitle, - text: toMountPoint({error.message}), + text: toMountPoint(wrapWithTheme({error.message}, theme$)), }); } }, [ @@ -104,6 +108,7 @@ export function useContextAppFetch({ anchorId, searchSource, useNewFieldsApi, + theme$, ]); const fetchSurroundingRows = useCallback( @@ -135,7 +140,9 @@ export function useContextAppFetch({ setState(createError(statusKey, FailureReason.UNKNOWN, error)); toastNotifications.addDanger({ title: errorTitle, - text: toMountPoint({error.message}), + text: toMountPoint( + wrapWithTheme({error.message}, theme$) + ), }); } }, @@ -148,6 +155,7 @@ export function useContextAppFetch({ indexPattern, toastNotifications, useNewFieldsApi, + theme$, ] ); diff --git a/src/plugins/discover/public/application/index.tsx b/src/plugins/discover/public/application/index.tsx index f6c7d60ed7db8..55407835c0a4b 100644 --- a/src/plugins/discover/public/application/index.tsx +++ b/src/plugins/discover/public/application/index.tsx @@ -8,11 +8,11 @@ import { i18n } from '@kbn/i18n'; import { getServices } from '../kibana_services'; import { discoverRouter } from './discover_router'; -import { toMountPoint } from '../../../kibana_react/public'; +import { toMountPoint, wrapWithTheme } from '../../../kibana_react/public'; export const renderApp = (element: HTMLElement) => { const services = getServices(); - const { history: getHistory, capabilities, chrome, data } = services; + const { history: getHistory, capabilities, chrome, data, core } = services; const history = getHistory(); if (!capabilities.discover.save) { @@ -26,7 +26,9 @@ export const renderApp = (element: HTMLElement) => { iconType: 'glasses', }); } - const unmount = toMountPoint(discoverRouter(services, history))(element); + const unmount = toMountPoint(wrapWithTheme(discoverRouter(services, history), core.theme.theme$))( + element + ); return () => { unmount(); diff --git a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.ts b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.ts index 4b9d48a92e0f5..6e93bc40f7d7f 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.ts +++ b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.ts @@ -52,6 +52,7 @@ export const getTopNavLinks = ({ openOptionsPopover({ I18nContext: services.core.i18n.Context, anchorElement, + theme$: services.core.theme.theme$, }), testId: 'discoverOptionsButton', }; @@ -95,6 +96,7 @@ export const getTopNavLinks = ({ showOpenSearchPanel({ onOpenSavedSearch, I18nContext: services.core.i18n.Context, + theme$: services.core.theme.theme$, }), }; diff --git a/src/plugins/discover/public/application/main/components/top_nav/open_options_popover.tsx b/src/plugins/discover/public/application/main/components/top_nav/open_options_popover.tsx index 0d359c865220f..ea0cd804efec0 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/open_options_popover.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/open_options_popover.tsx @@ -8,7 +8,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { I18nStart } from 'kibana/public'; +import { CoreTheme, I18nStart } from 'kibana/public'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { @@ -22,8 +22,10 @@ import { EuiTextAlign, } from '@elastic/eui'; import './open_options_popover.scss'; +import { Observable } from 'rxjs'; import { DOC_TABLE_LEGACY } from '../../../../../common'; import { getServices } from '../../../../kibana_services'; +import { KibanaThemeProvider } from '../../../../../../kibana_react/public'; const container = document.createElement('div'); let isOpen = false; @@ -125,9 +127,11 @@ function onClose() { export function openOptionsPopover({ I18nContext, anchorElement, + theme$, }: { I18nContext: I18nStart['Context']; anchorElement: HTMLElement; + theme$: Observable; }) { if (isOpen) { onClose(); @@ -139,7 +143,9 @@ export function openOptionsPopover({ const element = ( - + + + ); ReactDOM.render(element, container); diff --git a/src/plugins/discover/public/application/main/components/top_nav/show_open_search_panel.tsx b/src/plugins/discover/public/application/main/components/top_nav/show_open_search_panel.tsx index 1a9bfd7e30c57..d506de357675a 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/show_open_search_panel.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/show_open_search_panel.tsx @@ -8,17 +8,21 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { I18nStart } from 'kibana/public'; +import { CoreTheme, I18nStart } from 'kibana/public'; +import { Observable } from 'rxjs'; import { OpenSearchPanel } from './open_search_panel'; +import { KibanaThemeProvider } from '../../../../../../kibana_react/public'; let isOpen = false; export function showOpenSearchPanel({ I18nContext, onOpenSavedSearch, + theme$, }: { I18nContext: I18nStart['Context']; onOpenSavedSearch: (id: string) => void; + theme$: Observable; }) { if (isOpen) { return; @@ -35,7 +39,9 @@ export function showOpenSearchPanel({ document.body.appendChild(container); const element = ( - + + + ); ReactDOM.render(element, container); diff --git a/src/plugins/discover/public/application/not_found/not_found_route.tsx b/src/plugins/discover/public/application/not_found/not_found_route.tsx index 80e4e5c8057f6..7b42e85584428 100644 --- a/src/plugins/discover/public/application/not_found/not_found_route.tsx +++ b/src/plugins/discover/public/application/not_found/not_found_route.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { EuiCallOut } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { Redirect } from 'react-router-dom'; -import { toMountPoint } from '../../../../kibana_react/public'; +import { toMountPoint, wrapWithTheme } from '../../../../kibana_react/public'; import { DiscoverServices } from '../../build_services'; import { getUrlTracker } from '../../kibana_services'; @@ -39,17 +39,20 @@ export function NotFoundRoute(props: NotFoundRouteProps) { bannerId = core.overlays.banners.replace( bannerId, toMountPoint( - -

- -

-
+ wrapWithTheme( + +

+ +

+
, + core.theme.theme$ + ) ) ); @@ -59,7 +62,7 @@ export function NotFoundRoute(props: NotFoundRouteProps) { core.overlays.banners.remove(bannerId); } }, 15000); - }, [core.overlays.banners, history, urlForwarding]); + }, [core.overlays.banners, history, urlForwarding, core.theme.theme$]); return ; } diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx index 4a7f0b1c36868..6d7e515e33fa4 100644 --- a/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx @@ -48,6 +48,7 @@ import { VIEW_MODE } from '../components/view_mode_toggle'; import { updateSearchSource } from './utils/update_search_source'; import { FieldStatsTableSavedSearchEmbeddable } from '../application/main/components/field_stats_table'; import { ElasticSearchHit } from '../types'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; export type SearchProps = Partial & Partial & { @@ -391,15 +392,17 @@ export class SavedSearchEmbeddable Array.isArray(searchProps.columns) ) { ReactDOM.render( - , + + + , domNode ); return; @@ -410,7 +413,14 @@ export class SavedSearchEmbeddable useLegacyTable, refs: domNode, }; - ReactDOM.render(, domNode); + if (searchProps.services) { + ReactDOM.render( + + + , + domNode + ); + } } public reload() {