[Discover] Fix theme for Alerts popover (elastic#145390)

Closes elastic#143070 ## Summary This PR adds theme provider to the Alerts popover. Dark theme: <img width="534" alt="Screenshot 2022-11-16 at 16 37 49" src="https://user-images.githubusercontent.com/1415710/202226249-a46f6608-4f35-40ce-bfbf-847e9a7ba81a.png"> Light theme: <img width="531" alt="Screenshot 2022-11-16 at 16 38 17" src="https://user-images.githubusercontent.com/1415710/202226260-9e67a8dd-f6a4-40ff-ae28-2691b9a082bf.png"> Co-authored-by: Matthias Wilhelm <[email protected]>
kibanamachine · Nov 17, 2022 · e33392b · e33392b
1 parent 2f68c14
commit e33392b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx
@@ -81,6 +81,7 @@ export const getTopNavLinks = ({
     run: async (anchorElement: HTMLElement) => {
       openAlertsPopover({
         I18nContext: services.core.i18n.Context,
+        theme$: services.core.theme.theme$,
         anchorElement,
         searchSource: savedSearch.searchSource,
         services,

diff --git a/src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.tsx b/src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.tsx
@@ -8,11 +8,12 @@
 
 import React, { useCallback, useState, useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import { I18nStart } from '@kbn/core/public';
+import type { Observable } from 'rxjs';
+import type { CoreTheme, I18nStart } from '@kbn/core/public';
 import { EuiWrappingPopover, EuiContextMenu } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { DataView, ISearchSource } from '@kbn/data-plugin/common';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { DiscoverServices } from '../../../../build_services';
 import { updateSearchSource } from '../../utils/update_search_source';
 
@@ -177,6 +178,7 @@ function closeAlertsPopover() {
 
 export function openAlertsPopover({
   I18nContext,
+  theme$,
   anchorElement,
   searchSource,
   services,
@@ -185,6 +187,7 @@ export function openAlertsPopover({
   updateDataViewList,
 }: {
   I18nContext: I18nStart['Context'];
+  theme$: Observable<CoreTheme>;
   anchorElement: HTMLElement;
   searchSource: ISearchSource;
   services: DiscoverServices;
@@ -203,16 +206,18 @@ export function openAlertsPopover({
   const element = (
     <I18nContext>
       <KibanaContextProvider services={services}>
-        <AlertsPopover
-          onClose={closeAlertsPopover}
-          anchorElement={anchorElement}
-          searchSource={searchSource}
-          savedQueryId={savedQueryId}
-          adHocDataViews={adHocDataViews}
-          I18nContext={I18nContext}
-          services={services}
-          updateDataViewList={updateDataViewList}
-        />
+        <KibanaThemeProvider theme$={theme$}>
+          <AlertsPopover
+            onClose={closeAlertsPopover}
+            anchorElement={anchorElement}
+            searchSource={searchSource}
+            savedQueryId={savedQueryId}
+            adHocDataViews={adHocDataViews}
+            I18nContext={I18nContext}
+            services={services}
+            updateDataViewList={updateDataViewList}
+          />
+        </KibanaThemeProvider>
       </KibanaContextProvider>
     </I18nContext>
   );