Add theme provider to VisEditors react roots

src/plugins/advanced_settings/public/management_app/advanced_settings.test.tsx

@@ -18,7 +18,11 @@ import {
 } from '../../../../core/public';
 import { FieldSetting } from './types';
 import { AdvancedSettings } from './advanced_settings';
-import { notificationServiceMock, docLinksServiceMock } from '../../../../core/public/mocks';
+import {
+  notificationServiceMock,
+  docLinksServiceMock,
+  themeServiceMock,
+} from '../../../../core/public/mocks';
 import { ComponentRegistry } from '../component_registry';
 import { Search } from './components/search';
 
@@ -251,6 +255,7 @@ describe('AdvancedSettings', () => {
         dockLinks={docLinksServiceMock.createStartContract().links}
         uiSettings={mockConfig().core.uiSettings}
         componentRegistry={new ComponentRegistry().start}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -273,6 +278,7 @@ describe('AdvancedSettings', () => {
         dockLinks={docLinksServiceMock.createStartContract().links}
         uiSettings={mockConfig().core.uiSettings}
         componentRegistry={new ComponentRegistry().start}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -299,6 +305,7 @@ describe('AdvancedSettings', () => {
           dockLinks={docLinksServiceMock.createStartContract().links}
           uiSettings={mockConfig().core.uiSettings}
           componentRegistry={new ComponentRegistry().start}
+          theme={themeServiceMock.createStartContract().theme$}
         />
       );
 

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -19,6 +19,7 @@ import {
   DocLinksStart,
   ToastsStart,
   ScopedHistory,
+  ThemeServiceStart,
 } from '../../../../core/public';
 import { url } from '../../../kibana_utils/public';
 
@@ -41,6 +42,7 @@ interface AdvancedSettingsProps {
   uiSettings: IUiSettingsClient;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
+  theme: ThemeServiceStart['theme$'];
   componentRegistry: ComponentRegistry['start'];
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
 }
@@ -270,6 +272,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
           toasts={this.props.toasts}
           trackUiMetric={this.props.trackUiMetric}
           queryText={query.text}
+          theme={this.props.theme}
         />
         <PageFooter
           toasts={this.props.toasts}

src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test/jest';
 import { UiSettingsType } from '../../../../../../core/public';
+import { themeServiceMock } from '../../../../../../core/public/mocks';
 
 import { findTestSubject } from '@elastic/eui/lib/test';
 
@@ -127,6 +128,7 @@ describe('Form', () => {
         enableSaving={true}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -146,6 +148,7 @@ describe('Form', () => {
         enableSaving={false}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -165,6 +168,7 @@ describe('Form', () => {
         enableSaving={true}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -184,6 +188,7 @@ describe('Form', () => {
         enableSaving={true}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -203,6 +208,7 @@ describe('Form', () => {
         enableSaving={false}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
     (wrapper.instance() as Form).setState({
@@ -233,6 +239,7 @@ describe('Form', () => {
         enableSaving={false}
         toasts={toasts}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
     (wrapper.instance() as Form).setState({
@@ -269,6 +276,7 @@ describe('Form', () => {
         enableSaving={false}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 
@@ -297,6 +305,7 @@ describe('Form', () => {
         enableSaving={false}
         toasts={{} as any}
         dockLinks={{} as any}
+        theme={themeServiceMock.createStartContract().theme$}
       />
     );
 

src/plugins/advanced_settings/public/management_app/components/form/form.tsx

@@ -26,8 +26,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { isEmpty } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
-import { toMountPoint } from '../../../../../kibana_react/public';
-import { DocLinksStart, ToastsStart } from '../../../../../../core/public';
+import { KibanaThemeProvider, toMountPoint } from '../../../../../kibana_react/public';
+import { DocLinksStart, ThemeServiceStart, ToastsStart } from '../../../../../../core/public';
 
 import { getCategoryName } from '../../lib';
 import { Field, getEditableValue } from '../field';
@@ -46,6 +46,7 @@ interface FormProps {
   enableSaving: boolean;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
+  theme: ThemeServiceStart['theme$'];
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
   queryText?: string;
 }
@@ -191,7 +192,7 @@ export class Form extends PureComponent<FormProps> {
         defaultMessage: 'One or more settings require you to reload the page to take effect.',
       }),
       text: toMountPoint(
-        <>
+        <KibanaThemeProvider theme$={this.props.theme}>
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
             <EuiFlexItem grow={false}>
               <EuiButton size="s" onClick={() => window.location.reload()}>
@@ -201,7 +202,7 @@ export class Form extends PureComponent<FormProps> {
               </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </>
+        </KibanaThemeProvider>
       ),
       color: 'success',
     });

src/plugins/advanced_settings/public/management_app/mount_management_section.tsx

@@ -14,6 +14,7 @@ import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
 
 import { LocationDescriptor } from 'history';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
 import { url } from '../../../kibana_utils/public';
 import { ManagementAppMountParams } from '../../../management/public';
 import { UsageCollectionSetup } from '../../../usage_collection/public';
@@ -70,25 +71,28 @@ export async function mountManagementSection(
   chrome.docTitle.change(title);
 
   ReactDOM.render(
-    <I18nProvider>
-      <Router history={params.history}>
-        <Switch>
-          {/* TODO: remove route param (`query`) in 7.13 */}
-          <Route path={`/:${QUERY}`}>{(props) => <Redirect to={redirectUrl(props)} />}</Route>
-          <Route path="/">
-            <AdvancedSettings
-              history={params.history}
-              enableSaving={canSave}
-              toasts={notifications.toasts}
-              dockLinks={docLinks.links}
-              uiSettings={uiSettings}
-              componentRegistry={componentRegistry}
-              trackUiMetric={trackUiMetric}
-            />
-          </Route>
-        </Switch>
-      </Router>
-    </I18nProvider>,
+    <KibanaThemeProvider theme$={params.theme$}>
+      <I18nProvider>
+        <Router history={params.history}>
+          <Switch>
+            {/* TODO: remove route param (`query`) in 7.13 */}
+            <Route path={`/:${QUERY}`}>{(props) => <Redirect to={redirectUrl(props)} />}</Route>
+            <Route path="/">
+              <AdvancedSettings
+                history={params.history}
+                enableSaving={canSave}
+                toasts={notifications.toasts}
+                dockLinks={docLinks.links}
+                uiSettings={uiSettings}
+                theme={params.theme$}
+                componentRegistry={componentRegistry}
+                trackUiMetric={trackUiMetric}
+              />
+            </Route>
+          </Switch>
+        </Router>
+      </I18nProvider>
+    </KibanaThemeProvider>,
     params.element
   );
   return () => {

src/plugins/chart_expressions/expression_metric/kibana.json

@@ -10,6 +10,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["expressions", "fieldFormats", "charts", "visualizations", "presentationUtil"],
-  "requiredBundles": ["kibanaUtils"],
+  "requiredBundles": ["kibanaUtils", "kibanaReact"],
   "optionalPlugins": []
 }

src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx

@@ -8,11 +8,12 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { from } from 'rxjs';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import { Datatable, DatatableColumn } from '../../../../expressions';
 import { Render } from '../../../../presentation_util/public/__stories__';
 import { ColorMode, CustomPaletteState } from '../../../../charts/common';
-import { metricVisRenderer } from '../expression_renderers';
+import { getMetricVisRenderer } from '../expression_renderers';
 import { MetricStyle, MetricVisRenderConfig, visType } from '../../common/types';
 
 const palette: CustomPaletteState = {
@@ -117,6 +118,8 @@ const containerSize = {
   height: '700px',
 };
 
+const metricVisRenderer = getMetricVisRenderer({ theme$: from([{ darkMode: false }]) });
+
 storiesOf('renderers/visMetric', module)
   .add('Default', () => {
     return <Render renderer={metricVisRenderer} config={config} {...containerSize} />;

src/plugins/chart_expressions/expression_metric/public/expression_renderers/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { metricVisRenderer } from './metric_vis_renderer';
+export { getMetricVisRenderer } from './metric_vis_renderer';

src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx

@@ -9,36 +9,44 @@
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
+import { ThemeServiceStart } from 'kibana/public';
+import { KibanaThemeProvider } from '../../../../kibana_react/public';
 import { VisualizationContainer } from '../../../../visualizations/public';
 import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers';
 import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig } from '../../common';
 
 // @ts-ignore
 const MetricVisComponent = lazy(() => import('../components/metric_component'));
 
-export const metricVisRenderer: () => ExpressionRenderDefinition<MetricVisRenderConfig> = () => ({
-  name: EXPRESSION_METRIC_NAME,
-  displayName: 'metric visualization',
-  reuseDomNode: true,
-  render: async (domNode, { visData, visConfig }, handlers) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getMetricVisRenderer = (
+  theme: ThemeServiceStart
+): (() => ExpressionRenderDefinition<MetricVisRenderConfig>) => {
+  return () => ({
+    name: EXPRESSION_METRIC_NAME,
+    displayName: 'metric visualization',
+    reuseDomNode: true,
+    render: async (domNode, { visData, visConfig }, handlers) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(
-      <VisualizationContainer
-        className="mtrVis"
-        showNoResult={!visData.rows?.length}
-        handlers={handlers}
-      >
-        <MetricVisComponent
-          visData={visData}
-          visParams={visConfig}
-          renderComplete={handlers.done}
-          fireEvent={handlers.event}
-        />
-      </VisualizationContainer>,
-      domNode
-    );
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <VisualizationContainer
+            className="mtrVis"
+            showNoResult={!visData.rows?.length}
+            handlers={handlers}
+          >
+            <MetricVisComponent
+              visData={visData}
+              visParams={visConfig}
+              renderComplete={handlers.done}
+              fireEvent={handlers.event}
+            />
+          </VisualizationContainer>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+};

src/plugins/chart_expressions/expression_metric/public/plugin.ts

@@ -11,7 +11,7 @@ import { CoreSetup, CoreStart, Plugin } from '../../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../../expressions/public';
 import { metricVisFunction } from '../common';
 import { setFormatService, setPaletteService } from './services';
-import { metricVisRenderer } from './expression_renderers';
+import { getMetricVisRenderer } from './expression_renderers';
 import { FieldFormatsStart } from '../../../field_formats/public';
 
 /** @internal */
@@ -29,7 +29,7 @@ export interface ExpressionMetricPluginStart {
 export class ExpressionMetricPlugin implements Plugin<void, void> {
   public setup(core: CoreSetup, { expressions, charts }: ExpressionMetricPluginSetup) {
     expressions.registerFunction(metricVisFunction);
-    expressions.registerRenderer(metricVisRenderer);
+    expressions.registerRenderer(getMetricVisRenderer(core.theme));
     charts.palettes.getPalettes().then((palettes) => {
       setPaletteService(palettes);
     });

src/plugins/chart_expressions/expression_tagcloud/kibana.json

@@ -5,7 +5,7 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["expressions", "visualizations", "charts", "presentationUtil", "fieldFormats"],
-  "requiredBundles": ["kibanaUtils"],
+  "requiredBundles": ["kibanaUtils", "kibanaReact"],
   "optionalPlugins": [],
   "owner": {
     "name": "Vis Editors",

src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/theme.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { from } from 'rxjs';
+
+export const theme = {
+  theme$: from([{ darkMode: false }]),
+};