[Alerting][UI] Using KibanaThemeProvider (#121415)

* Using KibanaThemeProvider

* Fixing types

x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -7,11 +7,12 @@
 
 import React, { lazy } from 'react';
 import { Switch, Route, Redirect, Router } from 'react-router-dom';
-import { ChromeBreadcrumb, CoreStart, ScopedHistory } from 'kibana/public';
+import { ChromeBreadcrumb, CoreStart, CoreTheme, ScopedHistory } from 'kibana/public';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n-react';
-import useObservable from 'react-use/lib/useObservable';
+import { Observable } from 'rxjs';
 import { KibanaFeature } from '../../../features/common';
+import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 import { Section, routeToRuleDetails, legacyRouteToRuleDetails } from './constants';
 import { ActionTypeRegistryContract, RuleTypeRegistryContract } from '../types';
 import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';
@@ -21,7 +22,6 @@ import type { SpacesPluginStart } from '../../../spaces/public';
 
 import { suspendedComponentWithProps } from './lib/suspended_component_with_props';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
-import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 
 import { setSavedObjectsClient } from '../common/lib/data_apis';
 import { KibanaContextProvider } from '../common/lib/kibana';
@@ -44,6 +44,7 @@ export interface TriggersAndActionsUiServices extends CoreStart {
   history: ScopedHistory;
   kibanaFeatures: KibanaFeature[];
   element: HTMLElement;
+  theme$: Observable<CoreTheme>;
 }
 
 export const renderApp = (deps: TriggersAndActionsUiServices) => {
@@ -55,21 +56,20 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { savedObjects, uiSettings } = deps;
+  const { savedObjects, theme$ } = deps;
   const sections: Section[] = ['rules', 'connectors'];
-  const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
 
   const sectionsRegex = sections.join('|');
   setSavedObjectsClient(savedObjects.client);
   return (
     <I18nProvider>
-      <EuiThemeProvider darkMode={isDarkMode}>
+      <KibanaThemeProvider theme$={theme$}>
         <KibanaContextProvider services={{ ...deps }}>
           <Router history={deps.history}>
             <AppWithoutRouter sectionsRegex={sectionsRegex} />
           </Router>
         </KibanaContextProvider>
-      </EuiThemeProvider>
+      </KibanaThemeProvider>
     </I18nProvider>
   );
 };

x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts

@@ -8,7 +8,11 @@
 import React from 'react';
 import { chartPluginMock } from '../../../../../../../src/plugins/charts/public/mocks';
 import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
-import { coreMock, scopedHistoryMock } from '../../../../../../../src/core/public/mocks';
+import {
+  coreMock,
+  scopedHistoryMock,
+  themeServiceMock,
+} from '../../../../../../../src/core/public/mocks';
 import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { TriggersAndActionsUiServices } from '../../../application/app';
 import { RuleTypeRegistryContract, ActionTypeRegistryContract } from '../../../types';
@@ -45,6 +49,7 @@ export const createStartServicesMock = (): TriggersAndActionsUiServices => {
     element: {
       style: { cursor: 'pointer' },
     } as unknown as HTMLElement,
+    theme$: themeServiceMock.createTheme$(),
   } as TriggersAndActionsUiServices;
 };
 

x-pack/plugins/triggers_actions_ui/public/plugin.ts

@@ -152,6 +152,7 @@ export class Plugin
           spaces: pluginsStart.spaces,
           isCloud: Boolean(plugins.cloud?.isCloudEnabled),
           element: params.element,
+          theme$: params.theme$,
           storage: new Storage(window.localStorage),
           setBreadcrumbs: params.setBreadcrumbs,
           history: params.history,