Add theme$ to toMountPoint calls. Add implementation of `KibanaTh…

…emeProvider` to uptime application. (elastic#118965) Co-authored-by: Kibana Machine <[email protected]>
gbamparop · Jan 12, 2022 · ffc9baf · ffc9baf
1 parent dd90518
commit ffc9baf
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 48 deletions.
diff --git a/x-pack/plugins/uptime/public/apps/uptime_app.tsx b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
@@ -13,6 +13,7 @@ import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from 'kiba
 import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
 import {
   KibanaContextProvider,
+  KibanaThemeProvider,
   RedirectAppLinks,
 } from '../../../../../src/plugins/kibana_react/public';
 import { ClientPluginsSetup, ClientPluginsStart } from './plugin';
@@ -96,6 +97,7 @@ const Application = (props: UptimeAppProps) => {
   }, [canSave, renderGlobalHelpControls, setBadge]);
 
   kibanaService.core = core;
+  kibanaService.theme = props.appMountParameters.theme$;
 
   store.dispatch(setBasePath(basePath));
 
@@ -104,46 +106,48 @@ const Application = (props: UptimeAppProps) => {
   return (
     <EuiErrorBoundary>
       <i18nCore.Context>
-        <ReduxProvider store={store}>
-          <KibanaContextProvider
-            services={{
-              ...core,
-              ...plugins,
-              storage,
-              data: startPlugins.data,
-              inspector: startPlugins.inspector,
-              triggersActionsUi: startPlugins.triggersActionsUi,
-              observability: startPlugins.observability,
-            }}
-          >
-            <Router history={appMountParameters.history}>
-              <EuiThemeProvider darkMode={darkMode}>
-                <UptimeRefreshContextProvider>
-                  <UptimeSettingsContextProvider {...props}>
-                    <UptimeThemeContextProvider darkMode={darkMode}>
-                      <UptimeStartupPluginsContextProvider {...startPlugins}>
-                        <UptimeIndexPatternContextProvider data={startPlugins.data}>
-                          <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
-                            <RedirectAppLinks
-                              className={APP_WRAPPER_CLASS}
-                              application={core.application}
-                            >
-                              <InspectorContextProvider>
-                                <UptimeAlertsFlyoutWrapper />
-                                <PageRouter />
-                                <ActionMenu appMountParameters={appMountParameters} />
-                              </InspectorContextProvider>
-                            </RedirectAppLinks>
-                          </div>
-                        </UptimeIndexPatternContextProvider>
-                      </UptimeStartupPluginsContextProvider>
-                    </UptimeThemeContextProvider>
-                  </UptimeSettingsContextProvider>
-                </UptimeRefreshContextProvider>
-              </EuiThemeProvider>
-            </Router>
-          </KibanaContextProvider>
-        </ReduxProvider>
+        <KibanaThemeProvider theme$={props.appMountParameters.theme$}>
+          <ReduxProvider store={store}>
+            <KibanaContextProvider
+              services={{
+                ...core,
+                ...plugins,
+                storage,
+                data: startPlugins.data,
+                inspector: startPlugins.inspector,
+                triggersActionsUi: startPlugins.triggersActionsUi,
+                observability: startPlugins.observability,
+              }}
+            >
+              <Router history={appMountParameters.history}>
+                <EuiThemeProvider darkMode={darkMode}>
+                  <UptimeRefreshContextProvider>
+                    <UptimeSettingsContextProvider {...props}>
+                      <UptimeThemeContextProvider darkMode={darkMode}>
+                        <UptimeStartupPluginsContextProvider {...startPlugins}>
+                          <UptimeIndexPatternContextProvider data={startPlugins.data}>
+                            <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
+                              <RedirectAppLinks
+                                className={APP_WRAPPER_CLASS}
+                                application={core.application}
+                              >
+                                <InspectorContextProvider>
+                                  <UptimeAlertsFlyoutWrapper />
+                                  <PageRouter />
+                                  <ActionMenu appMountParameters={appMountParameters} />
+                                </InspectorContextProvider>
+                              </RedirectAppLinks>
+                            </div>
+                          </UptimeIndexPatternContextProvider>
+                        </UptimeStartupPluginsContextProvider>
+                      </UptimeThemeContextProvider>
+                    </UptimeSettingsContextProvider>
+                  </UptimeRefreshContextProvider>
+                </EuiThemeProvider>
+              </Router>
+            </KibanaContextProvider>
+          </ReduxProvider>
+        </KibanaThemeProvider>
       </i18nCore.Context>
     </EuiErrorBoundary>
   );

diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx
@@ -7,6 +7,8 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import type { Observable } from 'rxjs';
+import type { CoreTheme } from 'kibana/public';
 import {
   canCreateMLJobSelector,
   hasMLJobSelector,
@@ -29,7 +31,7 @@ import { useGetUrlParams } from '../../../hooks';
 import { getDynamicSettings } from '../../../state/actions/dynamic_settings';
 import { useMonitorId } from '../../../hooks';
 import { kibanaService } from '../../../state/kibana_service';
-import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public';
+import { toMountPoint, useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 
 interface Props {
@@ -42,13 +44,15 @@ const showMLJobNotification = (
   range: { to: string; from: string },
   success: boolean,
   awaitingNodeAssignment: boolean,
+  theme$?: Observable<CoreTheme>,
   error?: Error
 ) => {
   if (success) {
     kibanaService.toasts.addSuccess(
       {
         title: toMountPoint(
-          <p data-test-subj="uptimeMLJobSuccessfullyCreated">{labels.JOB_CREATED_SUCCESS_TITLE}</p>
+          <p data-test-subj="uptimeMLJobSuccessfullyCreated">{labels.JOB_CREATED_SUCCESS_TITLE}</p>,
+          { theme$ }
         ),
         text: toMountPoint(
           <p>
@@ -58,7 +62,8 @@ const showMLJobNotification = (
             <MLJobLink monitorId={monitorId} basePath={basePath} dateRange={range}>
               {labels.VIEW_JOB}
             </MLJobLink>
-          </p>
+          </p>,
+          { theme$ }
         ),
       },
       { toastLifeTimeMs: 10000 }
@@ -73,6 +78,7 @@ const showMLJobNotification = (
 };
 
 export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
+  const core = useKibana();
   const dispatch = useDispatch();
   const { data: hasMLJob, error } = useSelector(hasNewMLJobSelector);
   const isMLJobCreating = useSelector(isMLJobCreatingSelector);
@@ -111,7 +117,8 @@ export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
           basePath,
           { to: dateRangeEnd, from: dateRangeStart },
           true,
-          hasMLJob.awaitingNodeAssignment
+          hasMLJob.awaitingNodeAssignment,
+          core.services.theme?.theme$
         );
         const loadMLJob = (jobId: string) =>
           dispatch(getExistingMLJobAction.get({ monitorId: monitorId as string }));
@@ -128,6 +135,7 @@ export const MachineLearningFlyout: React.FC<Props> = ({ onClose }) => {
           { to: dateRangeEnd, from: dateRangeStart },
           false,
           false,
+          core.services.theme?.theme$,
           error as Error
         );
       }

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/alert_messages.tsx b/x-pack/plugins/uptime/public/lib/alert_types/alert_messages.tsx
@@ -5,13 +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 'kibana/public';
 import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
 import { ActionConnector } from '../../state/alerts/alerts';
 
-export const simpleAlertEnabled = (defaultActions: ActionConnector[]) => {
+export const simpleAlertEnabled = (
+  defaultActions: ActionConnector[],
+  theme$: Observable<CoreTheme>
+) => {
   return {
     title: i18n.translate('xpack.uptime.overview.alerts.enabled.success', {
       defaultMessage: 'Rule successfully enabled ',
@@ -23,7 +28,8 @@ export const simpleAlertEnabled = (defaultActions: ActionConnector[]) => {
         values={{
           actionConnectors: <strong>{defaultActions.map(({ name }) => name).join(', ')}</strong>,
         }}
-      />
+      />,
+      { theme$ }
     ),
   };
 };
diff --git a/x-pack/plugins/uptime/public/state/alerts/alerts.ts b/x-pack/plugins/uptime/public/state/alerts/alerts.ts
@@ -151,7 +151,7 @@ export function* fetchAlertsEffect() {
       yield put(createAlertAction.success(response));
 
       kibanaService.core.notifications.toasts.addSuccess(
-        simpleAlertEnabled(action.payload.defaultActions)
+        simpleAlertEnabled(action.payload.defaultActions, kibanaService.theme)
       );
       yield put(getMonitorAlertsAction.get());
     } catch (err) {

diff --git a/x-pack/plugins/uptime/public/state/kibana_service.ts b/x-pack/plugins/uptime/public/state/kibana_service.ts
@@ -5,12 +5,14 @@
  * 2.0.
  */
 
-import { CoreStart } from 'kibana/public';
+import type { Observable } from 'rxjs';
+import type { CoreStart, CoreTheme } from 'kibana/public';
 import { apiService } from './api/utils';
 
 class KibanaService {
   private static instance: KibanaService;
   private _core!: CoreStart;
+  private _theme!: Observable<CoreTheme>;
 
   public get core() {
     return this._core;
@@ -21,6 +23,14 @@ class KibanaService {
     apiService.http = this._core.http;
   }
 
+  public get theme() {
+    return this._theme;
+  }
+
+  public set theme(coreTheme: Observable<CoreTheme>) {
+    this._theme = coreTheme;
+  }
+
   public get toasts() {
     return this._core.notifications.toasts;
   }