[Dashboard] Added KibanaThemeProvider.

src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx

@@ -65,6 +65,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    theme: coreStart.theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx

@@ -56,6 +56,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    theme: coreStart.theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/actions/copy_to_dashboard_action.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { OverlayStart } from '../../../../../core/public';
+import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { dashboardCopyToDashboardAction } from '../../dashboard_strings';
 import { EmbeddableStateTransfer, IEmbeddable } from '../../services/embeddable';
 import { toMountPoint } from '../../services/kibana_react';
@@ -37,6 +37,7 @@ export class CopyToDashboardAction implements Action<CopyToDashboardActionContex
   public order = 1;
 
   constructor(
+    private theme: CoreStart['theme'],
     private overlays: OverlayStart,
     private stateTransfer: EmbeddableStateTransfer,
     private capabilities: DashboardCopyToCapabilities,
@@ -79,7 +80,8 @@ export class CopyToDashboardAction implements Action<CopyToDashboardActionContex
           capabilities={this.capabilities}
           dashboardId={(embeddable.parent as DashboardContainer).getInput().id}
           embeddable={embeddable}
-        />
+        />,
+        { theme$: this.theme.theme$ }
       ),
       {
         maxWidth: 400,

src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx

@@ -48,6 +48,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
+    theme: coreMock.createStart().theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/actions/export_csv_action.test.tsx

@@ -61,6 +61,7 @@ describe('Export CSV action', () => {
       uiActions: {} as any,
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
+      theme: coreStart.theme,
       presentationUtil: getStubPluginServices(),
       screenshotMode: screenshotModePluginMock.createSetupContract(),
     };

src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx

@@ -62,6 +62,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    theme: coreStart.theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };
@@ -90,7 +91,7 @@ beforeEach(async () => {
 });
 
 test('Notification is incompatible with Error Embeddables', async () => {
-  const action = new LibraryNotificationAction(unlinkAction);
+  const action = new LibraryNotificationAction(coreStart.theme, unlinkAction);
   const errorEmbeddable = new ErrorEmbeddable(
     'Wow what an awful error',
     { id: ' 404' },
@@ -100,19 +101,19 @@ test('Notification is incompatible with Error Embeddables', async () => {
 });
 
 test('Notification is shown when embeddable on dashboard has reference type input', async () => {
-  const action = new LibraryNotificationAction(unlinkAction);
+  const action = new LibraryNotificationAction(coreStart.theme, unlinkAction);
   embeddable.updateInput(await embeddable.getInputAsRefType());
   expect(await action.isCompatible({ embeddable })).toBe(true);
 });
 
 test('Notification is not shown when embeddable input is by value', async () => {
-  const action = new LibraryNotificationAction(unlinkAction);
+  const action = new LibraryNotificationAction(coreStart.theme, unlinkAction);
   embeddable.updateInput(await embeddable.getInputAsValueType());
   expect(await action.isCompatible({ embeddable })).toBe(false);
 });
 
 test('Notification is not shown when view mode is set to view', async () => {
-  const action = new LibraryNotificationAction(unlinkAction);
+  const action = new LibraryNotificationAction(coreStart.theme, unlinkAction);
   embeddable.updateInput(await embeddable.getInputAsRefType());
   embeddable.updateInput({ viewMode: ViewMode.VIEW });
   expect(await action.isCompatible({ embeddable })).toBe(false);

src/plugins/dashboard/public/application/actions/library_notification_action.tsx

@@ -9,7 +9,8 @@
 import React from 'react';
 
 import { Action, IncompatibleActionError } from '../../services/ui_actions';
-import { reactToUiComponent } from '../../services/kibana_react';
+import { CoreStart } from '../../../../../core/public';
+import { KibanaThemeProvider, reactToUiComponent } from '../../services/kibana_react';
 import {
   IEmbeddable,
   ViewMode,
@@ -32,7 +33,7 @@ export class LibraryNotificationAction implements Action<LibraryNotificationActi
   public readonly type = ACTION_LIBRARY_NOTIFICATION;
   public readonly order = 1;
 
-  constructor(private unlinkAction: UnlinkFromLibraryAction) {}
+  constructor(private theme: CoreStart['theme'], private unlinkAction: UnlinkFromLibraryAction) {}
 
   private displayName = dashboardLibraryNotification.getDisplayName();
 
@@ -45,13 +46,15 @@ export class LibraryNotificationAction implements Action<LibraryNotificationActi
   }) => {
     const { embeddable } = context;
     return (
-      <LibraryNotificationPopover
-        unlinkAction={this.unlinkAction}
-        displayName={this.displayName}
-        context={context}
-        icon={this.getIconType({ embeddable })}
-        id={this.id}
-      />
+      <KibanaThemeProvider theme$={this.theme.theme$}>
+        <LibraryNotificationPopover
+          unlinkAction={this.unlinkAction}
+          displayName={this.displayName}
+          context={context}
+          icon={this.getIconType({ embeddable })}
+          id={this.id}
+        />
+      </KibanaThemeProvider>
     );
   };
 

src/plugins/dashboard/public/application/actions/library_notification_popover.test.tsx

@@ -58,6 +58,7 @@ describe('LibraryNotificationPopover', () => {
       uiActions: {} as any,
       uiSettings: uiSettingsServiceMock.createStartContract(),
       http: coreStart.http,
+      theme: coreStart.theme,
       presentationUtil: getStubPluginServices(),
       screenshotMode: screenshotModePluginMock.createSetupContract(),
     };

src/plugins/dashboard/public/application/actions/open_replace_panel_flyout.tsx

@@ -47,7 +47,8 @@ export async function openReplacePanelFlyout(options: {
         savedObjectsFinder={savedObjectFinder}
         notifications={notifications}
         getEmbeddableFactories={getEmbeddableFactories}
-      />
+      />,
+      { theme$: core.theme.theme$ }
     ),
     {
       'data-test-subj': 'dashboardReplacePanel',

src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx

@@ -48,6 +48,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    theme: coreStart.theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx

@@ -57,6 +57,7 @@ beforeEach(async () => {
     uiActions: {} as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreStart.http,
+    theme: coreStart.theme,
     presentationUtil: getStubPluginServices(),
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/dashboard_router.tsx

@@ -20,7 +20,7 @@ import { DashboardListing } from './listing';
 import { dashboardStateStore } from './state';
 import { DashboardApp } from './dashboard_app';
 import { DashboardNoMatch } from './listing/dashboard_no_match';
-import { KibanaContextProvider } from '../services/kibana_react';
+import { KibanaContextProvider, KibanaThemeProvider } from '../services/kibana_react';
 import { addHelpMenuToAppChrome, DashboardSessionStorage } from './lib';
 import { createDashboardListingFilterUrl } from '../dashboard_constants';
 import { createDashboardEditUrl, DashboardConstants } from '../dashboard_constants';
@@ -226,26 +226,28 @@ export async function mountApp({
       <Provider store={dashboardStateStore}>
         <KibanaContextProvider services={dashboardServices}>
           <presentationUtil.ContextProvider>
-            <HashRouter>
-              <Switch>
-                <Route
-                  path={[
-                    DashboardConstants.CREATE_NEW_DASHBOARD_URL,
-                    `${DashboardConstants.VIEW_DASHBOARD_URL}/:id`,
-                  ]}
-                  render={renderDashboard}
-                />
-                <Route
-                  exact
-                  path={DashboardConstants.LANDING_PAGE_PATH}
-                  render={renderListingPage}
-                />
-                <Route exact path="/">
-                  <Redirect to={DashboardConstants.LANDING_PAGE_PATH} />
-                </Route>
-                <Route render={renderNoMatch} />
-              </Switch>
-            </HashRouter>
+            <KibanaThemeProvider theme$={core.theme.theme$}>
+              <HashRouter>
+                <Switch>
+                  <Route
+                    path={[
+                      DashboardConstants.CREATE_NEW_DASHBOARD_URL,
+                      `${DashboardConstants.VIEW_DASHBOARD_URL}/:id`,
+                    ]}
+                    render={renderDashboard}
+                  />
+                  <Route
+                    exact
+                    path={DashboardConstants.LANDING_PAGE_PATH}
+                    render={renderListingPage}
+                  />
+                  <Route exact path="/">
+                    <Redirect to={DashboardConstants.LANDING_PAGE_PATH} />
+                  </Route>
+                  <Route render={renderNoMatch} />
+                </Switch>
+              </HashRouter>
+            </KibanaThemeProvider>
           </presentationUtil.ContextProvider>
         </KibanaContextProvider>
       </Provider>

src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx

@@ -55,6 +55,7 @@ const options: DashboardContainerServices = {
   uiActions: {} as any,
   uiSettings: uiSettingsServiceMock.createStartContract(),
   http: coreMock.createStart().http,
+  theme: coreMock.createStart().theme,
   presentationUtil,
 };
 

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -36,6 +36,7 @@ import {
   KibanaContextProvider,
   KibanaReactContext,
   KibanaReactContextValue,
+  KibanaThemeProvider,
 } from '../../services/kibana_react';
 import { PLACEHOLDER_EMBEDDABLE } from './placeholder';
 import { DashboardAppCapabilities, DashboardContainerInput } from '../../types';
@@ -60,6 +61,7 @@ export interface DashboardContainerServices {
   uiSettings: IUiSettingsClient;
   embeddable: EmbeddableStart;
   uiActions: UiActionsStart;
+  theme: CoreStart['theme'];
   http: CoreStart['http'];
 }
 
@@ -259,9 +261,11 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.services}>
-          <this.services.presentationUtil.ContextProvider>
-            <DashboardViewport container={this} controlGroup={this.controlGroup} />
-          </this.services.presentationUtil.ContextProvider>
+          <KibanaThemeProvider theme$={this.services.theme.theme$}>
+            <this.services.presentationUtil.ContextProvider>
+              <DashboardViewport container={this} controlGroup={this.controlGroup} />
+            </this.services.presentationUtil.ContextProvider>
+          </KibanaThemeProvider>
         </KibanaContextProvider>
       </I18nProvider>,
       dom

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx

@@ -71,6 +71,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
     } as any,
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
+    theme: coreMock.createStart().theme,
     presentationUtil,
     screenshotMode: screenshotModePluginMock.createSetupContract(),
   };

src/plugins/dashboard/public/application/embeddable/placeholder/placeholder_embeddable.tsx

@@ -10,15 +10,25 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
+import { CoreStart } from 'src/core/public';
 import { Embeddable, EmbeddableInput, IContainer } from '../../../services/embeddable';
+import { KibanaThemeProvider } from '../../../services/kibana_react';
 
 export const PLACEHOLDER_EMBEDDABLE = 'placeholder';
 
+export interface PlaceholderEmbeddableServices {
+  theme: CoreStart['theme'];
+}
+
 export class PlaceholderEmbeddable extends Embeddable {
   public readonly type = PLACEHOLDER_EMBEDDABLE;
   private node?: HTMLElement;
 
-  constructor(initialInput: EmbeddableInput, parent?: IContainer) {
+  constructor(
+    initialInput: EmbeddableInput,
+    private readonly services: PlaceholderEmbeddableServices,
+    parent?: IContainer
+  ) {
     super(initialInput, {}, parent);
     this.input = initialInput;
   }
@@ -30,9 +40,11 @@ export class PlaceholderEmbeddable extends Embeddable {
 
     const classes = classNames('embPanel', 'embPanel-isLoading');
     ReactDOM.render(
-      <div className={classes}>
-        <EuiLoadingChart size="l" mono />
-      </div>,
+      <KibanaThemeProvider theme$={this.services.theme.theme$}>
+        <div className={classes}>
+          <EuiLoadingChart size="l" mono />
+        </div>
+      </KibanaThemeProvider>,
       node
     );
   }

src/plugins/dashboard/public/application/embeddable/placeholder/placeholder_embeddable_factory.ts

@@ -13,11 +13,17 @@ import {
   EmbeddableInput,
   IContainer,
 } from '../../../services/embeddable';
-import { PlaceholderEmbeddable, PLACEHOLDER_EMBEDDABLE } from './placeholder_embeddable';
+import {
+  PlaceholderEmbeddable,
+  PlaceholderEmbeddableServices,
+  PLACEHOLDER_EMBEDDABLE,
+} from './placeholder_embeddable';
 
 export class PlaceholderEmbeddableFactory implements EmbeddableFactoryDefinition {
   public readonly type = PLACEHOLDER_EMBEDDABLE;
 
+  constructor(private readonly getStartServices: () => Promise<PlaceholderEmbeddableServices>) {}
+
   public async isEditable() {
     return false;
   }
@@ -27,7 +33,8 @@ export class PlaceholderEmbeddableFactory implements EmbeddableFactoryDefinition
   }
 
   public async create(initialInput: EmbeddableInput, parent?: IContainer) {
-    return new PlaceholderEmbeddable(initialInput, parent);
+    const services = await this.getStartServices();
+    return new PlaceholderEmbeddable(initialInput, services, parent);
   }
 
   public getDisplayName() {

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx

@@ -49,6 +49,7 @@ function getProps(props?: Partial<DashboardViewportProps>): {
     application: applicationServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
     http: coreMock.createStart().http,
+    theme: coreMock.createStart().theme,
     embeddable: {
       getTriggerCompatibleActions: (() => []) as any,
       getEmbeddablePanel: jest.fn(),

src/plugins/dashboard/public/application/listing/confirm_overlays.tsx

@@ -20,7 +20,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 
-import { OverlayStart } from '../../../../../core/public';
+import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../services/kibana_react';
 import { createConfirmStrings, discardConfirmStrings } from '../../dashboard_strings';
 
@@ -43,6 +43,7 @@ export const confirmDiscardUnsavedChanges = (overlays: OverlayStart, discardCall
 
 export const confirmCreateWithUnsaved = (
   overlays: OverlayStart,
+  theme: CoreStart['theme'],
   startBlankCallback: () => void,
   contineCallback: () => void
 ) => {
@@ -105,7 +106,8 @@ export const confirmCreateWithUnsaved = (
             </EuiModalFooter>
           </div>
         </EuiOutsideClickDetector>
-      </EuiFocusTrap>
+      </EuiFocusTrap>,
+      { theme$: theme.theme$ }
     ),
     {
       'data-test-subj': 'dashboardCreateConfirmModal',