[Discover] Add new KibanaThemeProvider (#119784)

* [Discover] Add new KibanaThemeProvider * Wrap remaining components in KibanaThemeProvider * Fix failing unit test * Fix failing unit test * Add missing theme Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 3, 2021 · 680d0e1 · 680d0e1
1 parent 3fed3a4
commit 680d0e1
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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(
-          <MarkdownSimple>
-            {i18n.translate('discover.context.invalidTieBreakerFiledSetting', {
-              defaultMessage: 'Invalid tie breaker field setting',
-            })}
-          </MarkdownSimple>
+          wrapWithTheme(
+            <MarkdownSimple>
+              {i18n.translate('discover.context.invalidTieBreakerFiledSetting', {
+                defaultMessage: 'Invalid tie breaker field setting',
+              })}
+            </MarkdownSimple>,
+            theme$
+          )
         ),
       });
       return;
@@ -93,7 +97,7 @@ export function useContextAppFetch({
       setState(createError('anchorStatus', FailureReason.UNKNOWN, error));
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>),
+        text: toMountPoint(wrapWithTheme(<MarkdownSimple>{error.message}</MarkdownSimple>, 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(<MarkdownSimple>{error.message}</MarkdownSimple>),
+          text: toMountPoint(
+            wrapWithTheme(<MarkdownSimple>{error.message}</MarkdownSimple>, 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
@@ -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
@@ -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
@@ -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<CoreTheme>;
 }) {
   if (isOpen) {
     onClose();
@@ -139,7 +143,9 @@ export function openOptionsPopover({
 
   const element = (
     <I18nContext>
-      <OptionsPopover onClose={onClose} anchorElement={anchorElement} />
+      <KibanaThemeProvider theme$={theme$}>
+        <OptionsPopover onClose={onClose} anchorElement={anchorElement} />
+      </KibanaThemeProvider>
     </I18nContext>
   );
   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
@@ -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<CoreTheme>;
 }) {
   if (isOpen) {
     return;
@@ -35,7 +39,9 @@ export function showOpenSearchPanel({
   document.body.appendChild(container);
   const element = (
     <I18nContext>
-      <OpenSearchPanel onClose={onClose} onOpenSavedSearch={onOpenSavedSearch} />
+      <KibanaThemeProvider theme$={theme$}>
+        <OpenSearchPanel onClose={onClose} onOpenSavedSearch={onOpenSavedSearch} />
+      </KibanaThemeProvider>
     </I18nContext>
   );
   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
@@ -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(
-        <EuiCallOut color="warning" iconType="iInCircle" title={bannerMessage}>
-          <p data-test-subj="invalidRouteMessage">
-            <FormattedMessage
-              id="discover.noMatchRoute.bannerText"
-              defaultMessage="Discover application doesn't recognize this route: {route}"
-              values={{
-                route: history().location.state.referrer,
-              }}
-            />
-          </p>
-        </EuiCallOut>
+        wrapWithTheme(
+          <EuiCallOut color="warning" iconType="iInCircle" title={bannerMessage}>
+            <p data-test-subj="invalidRouteMessage">
+              <FormattedMessage
+                id="discover.noMatchRoute.bannerText"
+                defaultMessage="Discover application doesn't recognize this route: {route}"
+                values={{
+                  route: history().location.state.referrer,
+                }}
+              />
+            </p>
+          </EuiCallOut>,
+          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 <Redirect to={{ pathname: '/', state: { referrer: currentLocation } }} />;
 }
diff --git 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<DiscoverGridProps> &
   Partial<DocTableProps> & {
@@ -391,15 +392,17 @@ export class SavedSearchEmbeddable
       Array.isArray(searchProps.columns)
     ) {
       ReactDOM.render(
-        <FieldStatsTableSavedSearchEmbeddable
-          services={searchProps.services}
-          indexPattern={searchProps.indexPattern}
-          columns={searchProps.columns}
-          savedSearch={this.savedSearch}
-          filters={this.input.filters}
-          query={this.input.query}
-          onAddFilter={searchProps.onFilter}
-        />,
+        <KibanaThemeProvider theme$={searchProps.services.core.theme.theme$}>
+          <FieldStatsTableSavedSearchEmbeddable
+            services={searchProps.services}
+            indexPattern={searchProps.indexPattern}
+            columns={searchProps.columns}
+            savedSearch={this.savedSearch}
+            filters={this.input.filters}
+            query={this.input.query}
+            onAddFilter={searchProps.onFilter}
+          />
+        </KibanaThemeProvider>,
         domNode
       );
       return;
@@ -410,7 +413,14 @@ export class SavedSearchEmbeddable
       useLegacyTable,
       refs: domNode,
     };
-    ReactDOM.render(<SavedSearchEmbeddableComponent {...props} />, domNode);
+    if (searchProps.services) {
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={searchProps.services.core.theme.theme$}>
+          <SavedSearchEmbeddableComponent {...props} />
+        </KibanaThemeProvider>,
+        domNode
+      );
+    }
   }
 
   public reload() {