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() {