Merge with main, resolve conflicts, adds theme provider

elastic · Nov 24, 2021 · 8653a82 · 8653a82
2 parents 0bb4c7f + 7f2dbe5
commit 8653a82
Show file tree

Hide file tree

Showing 155 changed files with 2,973 additions and 1,357 deletions.
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.test.tsx b/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$}
         />
       );
 

diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/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}

diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx b/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$}
       />
     );
 

diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/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',
     });

diff --git a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx b/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 () => {

diff --git a/src/plugins/chart_expressions/expression_heatmap/kibana.json b/src/plugins/chart_expressions/expression_heatmap/kibana.json
@@ -10,7 +10,7 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["expressions", "fieldFormats", "charts", "visualizations", "presentationUtil", "data"],
-  "requiredBundles": ["kibanaUtils"],
+  "requiredBundles": ["kibanaUtils", "kibanaReact"],
   "optionalPlugins": [],
   "extraPublicDirs": ["common"]
 }
diff --git a/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
@@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
 import React, { memo } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import type { PersistedState } from '../../../../visualizations/public';
+import { ThemeServiceStart } from '../../../../../core/public';
+import { KibanaThemeProvider } from '../../../../kibana_react/public';
 import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers';
 import {
   EXPRESSION_HEATMAP_NAME,
@@ -23,7 +25,13 @@ import HeatmapComponent from '../components/heatmap_component';
 import './index.scss';
 const MemoizedChart = memo(HeatmapComponent);
 
-export const heatmapRenderer = (): ExpressionRenderDefinition<HeatmapExpressionProps> => ({
+interface ExpressioHeatmapRendererDependencies {
+  theme: ThemeServiceStart;
+}
+
+export const heatmapRenderer: (
+  deps: ExpressioHeatmapRendererDependencies
+) => ExpressionRenderDefinition<HeatmapExpressionProps> = ({ theme }) => ({
   name: EXPRESSION_HEATMAP_NAME,
   displayName: i18n.translate('expressionHeatmap.visualizationName', {
     defaultMessage: 'Heatmap',
@@ -42,18 +50,20 @@ export const heatmapRenderer = (): ExpressionRenderDefinition<HeatmapExpressionP
 
     const timeZone = getTimeZone(getUISettings());
     render(
-      <div className="heatmap-container" data-test-subj="heatmapChart">
-        <MemoizedChart
-          {...config}
-          onClickValue={onClickValue}
-          onSelectRange={onSelectRange}
-          timeZone={timeZone}
-          formatFactory={getFormatService().deserialize}
-          chartsThemeService={getThemeService()}
-          paletteService={getPaletteService()}
-          uiState={handlers.uiState as PersistedState}
-        />
-      </div>,
+      <KibanaThemeProvider theme$={theme.theme$}>
+        <div className="heatmap-container" data-test-subj="heatmapChart">
+          <MemoizedChart
+            {...config}
+            onClickValue={onClickValue}
+            onSelectRange={onSelectRange}
+            timeZone={timeZone}
+            formatFactory={getFormatService().deserialize}
+            chartsThemeService={getThemeService()}
+            paletteService={getPaletteService()}
+            uiState={handlers.uiState as PersistedState}
+          />
+        </div>
+      </KibanaThemeProvider>,
       domNode,
       () => {
         handlers.done();

diff --git a/src/plugins/chart_expressions/expression_heatmap/public/plugin.ts b/src/plugins/chart_expressions/expression_heatmap/public/plugin.ts
@@ -35,7 +35,7 @@ export class ExpressionHeatmapPlugin {
     expressions.registerFunction(heatmapFunction);
     expressions.registerFunction(heatmapLegendConfig);
     expressions.registerFunction(heatmapGridConfig);
-    expressions.registerRenderer(heatmapRenderer());
+    expressions.registerRenderer(heatmapRenderer({ theme: core.theme }));
   }
 
   public start(core: CoreStart, { fieldFormats }: ExpressionHeatmapPluginStart) {

diff --git a/src/plugins/chart_expressions/expression_metric/kibana.json b/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": []
 }
diff --git a/...lugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/...lugins/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} />;

diff --git a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/index.ts b/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';