From d1d1062b5277c2b6db8fbe32efc0ef1b41373560 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 12:19:49 +0100 Subject: [PATCH 1/8] start add theme provider --- .../vis_types/pie/public/pie_renderer.tsx | 29 +++++++------- src/plugins/vis_types/pie/public/plugin.ts | 9 ++++- .../table/public/table_vis_renderer.tsx | 25 ++++++------ .../vis_types/timelion/public/plugin.ts | 5 ++- .../timelion/public/timelion_vis_renderer.tsx | 20 +++++----- .../public/application/editor_controller.tsx | 25 ++++++------ .../vis_types/timeseries/public/plugin.ts | 1 + .../public/timeseries_vis_renderer.tsx | 38 ++++++++++--------- 8 files changed, 88 insertions(+), 64 deletions(-) diff --git a/src/plugins/vis_types/pie/public/pie_renderer.tsx b/src/plugins/vis_types/pie/public/pie_renderer.tsx index e8fb6311904a68..1467f76bd43fd9 100644 --- a/src/plugins/vis_types/pie/public/pie_renderer.tsx +++ b/src/plugins/vis_types/pie/public/pie_renderer.tsx @@ -12,6 +12,7 @@ import { I18nProvider } from '@kbn/i18n/react'; import { ExpressionRenderDefinition } from '../../../expressions/public'; import { VisualizationContainer } from '../../../visualizations/public'; import type { PersistedState } from '../../../visualizations/public'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { VisTypePieDependencies } from './plugin'; import { RenderValue, vislibPieName } from './pie_fn'; @@ -43,19 +44,21 @@ export const getPieVisRenderer: ( render( - - - + + + + + , domNode ); diff --git a/src/plugins/vis_types/pie/public/plugin.ts b/src/plugins/vis_types/pie/public/plugin.ts index 12be6dd5de10fa..5de26975896ee6 100644 --- a/src/plugins/vis_types/pie/public/plugin.ts +++ b/src/plugins/vis_types/pie/public/plugin.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { CoreSetup, DocLinksStart } from 'src/core/public'; +import { CoreSetup, DocLinksStart, ThemeServiceStart } from 'src/core/public'; import { VisualizationsSetup } from '../../../visualizations/public'; import { Plugin as ExpressionsPublicPlugin } from '../../../expressions/public'; import { ChartsPluginSetup } from '../../../charts/public'; @@ -35,7 +35,11 @@ export interface VisTypePiePluginStartDependencies { export interface VisTypePieDependencies { theme: ChartsPluginSetup['theme']; palettes: ChartsPluginSetup['palettes']; - getStartDeps: () => Promise<{ data: DataPublicPluginStart; docLinks: DocLinksStart }>; + getStartDeps: () => Promise<{ + data: DataPublicPluginStart; + docLinks: DocLinksStart; + kibanaTheme: ThemeServiceStart; + }>; } export class VisTypePiePlugin { @@ -49,6 +53,7 @@ export class VisTypePiePlugin { return { data: deps.data, docLinks: coreStart.docLinks, + kibanaTheme: coreStart.theme, }; }; const trackUiMetric = usageCollection?.reportUiCounter.bind(usageCollection, 'vis_type_pie'); diff --git a/src/plugins/vis_types/table/public/table_vis_renderer.tsx b/src/plugins/vis_types/table/public/table_vis_renderer.tsx index e9f2002b71062c..09c6c57150e621 100644 --- a/src/plugins/vis_types/table/public/table_vis_renderer.tsx +++ b/src/plugins/vis_types/table/public/table_vis_renderer.tsx @@ -13,6 +13,7 @@ import { CoreStart } from 'kibana/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { ExpressionRenderDefinition } from '../../../expressions/common/expression_renderers'; import { TableVisRenderValue } from './table_vis_fn'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; const TableVisualizationComponent = lazy(() => import('./components/table_visualization')); @@ -30,18 +31,20 @@ export const getTableVisRenderer: ( visData.table?.rows.length === 0 || (!visData.table && visData.tables.length === 0); render( - - + - , + showNoResult={showNoResult} + > + + + , domNode ); }, diff --git a/src/plugins/vis_types/timelion/public/plugin.ts b/src/plugins/vis_types/timelion/public/plugin.ts index d37e15a9938b8b..fb2b1df6f522e0 100644 --- a/src/plugins/vis_types/timelion/public/plugin.ts +++ b/src/plugins/vis_types/timelion/public/plugin.ts @@ -13,6 +13,7 @@ import type { PluginInitializerContext, IUiSettingsClient, HttpSetup, + ThemeServiceStart, } from 'kibana/public'; import type { Plugin as ExpressionsPlugin } from 'src/plugins/expressions/public'; import type { @@ -37,6 +38,7 @@ export interface TimelionVisDependencies extends Partial { uiSettings: IUiSettingsClient; http: HttpSetup; timefilter: TimefilterContract; + theme: ThemeServiceStart; } /** @internal */ @@ -71,13 +73,14 @@ export class TimelionVisPlugin constructor(public initializerContext: PluginInitializerContext) {} public setup( - { uiSettings, http }: CoreSetup, + { uiSettings, http, theme }: CoreSetup, { expressions, visualizations, data, charts }: TimelionVisSetupDependencies ) { const dependencies: TimelionVisDependencies = { http, uiSettings, timefilter: data.query.timefilter.timefilter, + theme, }; expressions.registerFunction(() => getTimelionVisualizationConfig(dependencies)); diff --git a/src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx b/src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx index 633f15a9824ea6..1ee88e06bad8b4 100644 --- a/src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx +++ b/src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx @@ -10,7 +10,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { ExpressionRenderDefinition } from 'src/plugins/expressions'; -import { KibanaContextProvider } from '../../../kibana_react/public'; +import { KibanaContextProvider, KibanaThemeProvider } from '../../../kibana_react/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { TimelionVisDependencies } from './plugin'; import { TimelionRenderValue } from './timelion_vis_fn'; @@ -58,14 +58,16 @@ export const getTimelionVisRenderer: ( render( - - - + + + + + , domNode ); diff --git a/src/plugins/vis_types/timeseries/public/application/editor_controller.tsx b/src/plugins/vis_types/timeseries/public/application/editor_controller.tsx index 2f5ee2b8a631d2..ffe1c90132360f 100644 --- a/src/plugins/vis_types/timeseries/public/application/editor_controller.tsx +++ b/src/plugins/vis_types/timeseries/public/application/editor_controller.tsx @@ -12,9 +12,10 @@ import type { EventEmitter } from 'events'; import type { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; import type { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public'; -import { getUISettings, getI18n } from '../services'; +import { getUISettings, getI18n, getCoreStart } from '../services'; import { VisEditor } from './components/vis_editor_lazy'; import type { TimeseriesVisParams } from '../types'; +import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public'; export const TSVB_EDITOR_NAME = 'tsvbEditor'; @@ -31,16 +32,18 @@ export class EditorController implements IEditorController { render( - + + + , this.el ); diff --git a/src/plugins/vis_types/timeseries/public/plugin.ts b/src/plugins/vis_types/timeseries/public/plugin.ts index d6d83caa6eb0f0..3d75c914826ce8 100644 --- a/src/plugins/vis_types/timeseries/public/plugin.ts +++ b/src/plugins/vis_types/timeseries/public/plugin.ts @@ -56,6 +56,7 @@ export class MetricsPlugin implements Plugin { expressions.registerRenderer( getTimeseriesVisRenderer({ uiSettings: core.uiSettings, + theme: core.theme, }) ); setUISettings(core.uiSettings); diff --git a/src/plugins/vis_types/timeseries/public/timeseries_vis_renderer.tsx b/src/plugins/vis_types/timeseries/public/timeseries_vis_renderer.tsx index 9edc05893e24f4..93d3fd08b3efe1 100644 --- a/src/plugins/vis_types/timeseries/public/timeseries_vis_renderer.tsx +++ b/src/plugins/vis_types/timeseries/public/timeseries_vis_renderer.tsx @@ -11,7 +11,7 @@ import { get } from 'lodash'; import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; -import { IUiSettingsClient } from 'kibana/public'; +import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public'; import { VisualizationContainer, PersistedState } from '../../../visualizations/public'; @@ -21,6 +21,7 @@ import { isVisTableData } from '../common/vis_data_utils'; import type { TimeseriesVisParams } from './types'; import type { ExpressionRenderDefinition } from '../../../expressions/common'; import type { TimeseriesRenderValue } from './metrics_fn'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; const TimeseriesVisualization = lazy( () => import('./application/components/timeseries_visualization') @@ -37,7 +38,8 @@ const checkIfDataExists = (visData: TimeseriesVisData | {}, model: TimeseriesVis export const getTimeseriesVisRenderer: (deps: { uiSettings: IUiSettingsClient; -}) => ExpressionRenderDefinition = ({ uiSettings }) => ({ + theme: ThemeServiceStart; +}) => ExpressionRenderDefinition = ({ uiSettings, theme }) => ({ name: 'timeseries_vis', reuseDomNode: true, render: async (domNode, config, handlers) => { @@ -54,22 +56,24 @@ export const getTimeseriesVisRenderer: (deps: { render( - - + - + showNoResult={showNoResult} + error={get(visData, [model.id, 'error'])} + > + + + , domNode, () => { From 841f554f7d61405aa29805d92ecc0af9fa735ebf Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 16:21:31 +0100 Subject: [PATCH 2/8] add theme context to all react roots --- .../mount_management_section.tsx | 41 ++--- .../public/expression_renderers/index.ts | 2 +- .../metric_vis_renderer.tsx | 58 ++++--- .../expression_metric/public/plugin.ts | 4 +- .../tagcloud_renderer.tsx | 47 +++--- .../expression_tagcloud/public/plugin.ts | 4 +- .../public/default_editor_controller.tsx | 50 +++--- .../vis_default_editor/public/plugin.ts | 2 + .../vis_default_editor/public/services.ts | 12 ++ .../vega/public/vega_vis_renderer.tsx | 19 ++- src/plugins/vis_types/vislib/public/plugin.ts | 3 +- .../vis_types/vislib/public/services.ts | 3 + .../vis_types/vislib/public/vis_renderer.tsx | 9 +- .../vislib/partials/touchdown_template.tsx | 18 ++- src/plugins/vis_types/xy/public/plugin.ts | 1 + .../vis_types/xy/public/vis_renderer.tsx | 34 ++-- .../embeddable/disabled_lab_embeddable.tsx | 9 +- .../embeddable/visualize_embeddable.tsx | 11 +- src/plugins/visualizations/public/services.ts | 3 + .../public/wizard/show_new_vis.tsx | 58 +++---- .../visualize/public/application/index.tsx | 22 +-- .../lens/public/app_plugin/mounter.tsx | 43 ++--- .../datatable_visualization/expression.tsx | 30 ++-- .../public/datatable_visualization/index.ts | 3 +- .../datatable_visualization/visualization.tsx | 20 ++- .../lens/public/embeddable/embeddable.tsx | 52 +++--- .../public/embeddable/embeddable_factory.ts | 5 +- .../heatmap_visualization/expression.tsx | 31 ++-- .../public/heatmap_visualization/index.ts | 3 +- .../heatmap_visualization/visualization.tsx | 20 ++- .../indexpattern_datasource/indexpattern.tsx | 148 ++++++++++-------- .../metric_visualization/expression.tsx | 14 +- .../lens/public/metric_visualization/index.ts | 4 +- .../metric_visualization/visualization.tsx | 12 +- .../public/pie_visualization/expression.tsx | 29 ++-- .../lens/public/pie_visualization/index.ts | 3 +- .../pie_visualization/visualization.tsx | 20 ++- x-pack/plugins/lens/public/plugin.ts | 1 + .../public/xy_visualization/expression.tsx | 39 +++-- .../lens/public/xy_visualization/index.ts | 8 +- .../public/xy_visualization/visualization.tsx | 36 +++-- 41 files changed, 552 insertions(+), 379 deletions(-) create mode 100644 src/plugins/vis_default_editor/public/services.ts 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 index 3a4ec83e28963b..1990d8f2c51cdd 100644 --- 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,27 @@ export async function mountManagementSection( chrome.docTitle.change(title); ReactDOM.render( - - - - {/* TODO: remove route param (`query`) in 7.13 */} - {(props) => } - - - - - - , + + + + + {/* TODO: remove route param (`query`) in 7.13 */} + {(props) => } + + + + + + + , params.element ); return () => { 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 index b4fb6cea84aa35..98a987db2fd433 100644 --- 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'; diff --git a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx index 6c3c7696fca402..94ac0cdc3d12c7 100644 --- a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -9,6 +9,8 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; import { VisualizationContainer } from '../../../../visualizations/public'; import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig } from '../../common'; @@ -16,29 +18,35 @@ import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig } from '../../common'; // @ts-ignore const MetricVisComponent = lazy(() => import('../components/metric_component')); -export const metricVisRenderer: () => ExpressionRenderDefinition = () => ({ - 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) => { + return () => ({ + name: EXPRESSION_METRIC_NAME, + displayName: 'metric visualization', + reuseDomNode: true, + render: async (domNode, { visData, visConfig }, handlers) => { + handlers.onDestroy(() => { + unmountComponentAtNode(domNode); + }); - render( - - - , - domNode - ); - }, -}); + render( + + + + + , + domNode + ); + }, + }); +}; diff --git a/src/plugins/chart_expressions/expression_metric/public/plugin.ts b/src/plugins/chart_expressions/expression_metric/public/plugin.ts index 6053cba597b4b7..f941b4a9e2f221 100644 --- a/src/plugins/chart_expressions/expression_metric/public/plugin.ts +++ b/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 { 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); }); diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx index 294371b3a57030..9fa3e96143e35f 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx @@ -11,6 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; import { ClassNames } from '@emotion/react'; import { i18n } from '@kbn/i18n'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; import { VisualizationContainer } from '../../../../visualizations/public'; import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers'; import { ExpressioTagcloudRendererDependencies } from '../plugin'; @@ -36,7 +37,7 @@ const TagCloudChart = lazy(() => import('../components/tagcloud_component')); export const tagcloudRenderer: ( deps: ExpressioTagcloudRendererDependencies -) => ExpressionRenderDefinition = ({ palettes }) => ({ +) => ExpressionRenderDefinition = ({ palettes, theme }) => ({ name: EXPRESSION_NAME, displayName: strings.getDisplayName(), help: strings.getHelpDescription(), @@ -50,27 +51,29 @@ export const tagcloudRenderer: ( const showNoResult = config.visData.rows.length === 0; render( - - - {({ css, cx }) => ( - - - - )} - - , + + + + {({ css, cx }) => ( + + + + )} + + + , domNode ); }, diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts b/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts index 5a8bcc8aa64bb1..9385ab3b267722 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts +++ b/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { CoreSetup, CoreStart, Plugin } from '../../../../core/public'; +import { CoreSetup, CoreStart, Plugin, ThemeServiceStart } from '../../../../core/public'; import { ExpressionsStart, ExpressionsSetup } from '../../../expressions/public'; import { ChartsPluginSetup } from '../../../charts/public'; import { tagcloudRenderer } from './expression_renderers'; @@ -22,6 +22,7 @@ interface SetupDeps { /** @internal */ export interface ExpressioTagcloudRendererDependencies { palettes: ChartsPluginSetup['palettes']; + theme: ThemeServiceStart; } interface StartDeps { @@ -39,6 +40,7 @@ export class ExpressionTagcloudPlugin public setup(core: CoreSetup, { expressions, charts }: SetupDeps): ExpressionTagcloudPluginSetup { const rendererDependencies: ExpressioTagcloudRendererDependencies = { palettes: charts.palettes, + theme: core.theme, }; expressions.registerFunction(tagcloudFunction); expressions.registerRenderer(tagcloudRenderer(rendererDependencies)); diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx index 0de5d4a9df1206..0d87e0a7f3fafd 100644 --- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx +++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx @@ -13,6 +13,8 @@ import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui'; import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; import { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { getTheme } from './services'; // @ts-ignore const DefaultEditor = lazy(() => import('./default_editor')); @@ -27,29 +29,31 @@ class DefaultEditorController implements IEditorController { render(props: EditorRenderProps) { render( - - - - - } - > - - - , + + + + + + } + > + + + + , this.el ); } diff --git a/src/plugins/vis_default_editor/public/plugin.ts b/src/plugins/vis_default_editor/public/plugin.ts index fd0d69bf297b61..5e67712e94856b 100644 --- a/src/plugins/vis_default_editor/public/plugin.ts +++ b/src/plugins/vis_default_editor/public/plugin.ts @@ -10,6 +10,7 @@ import { CoreSetup, Plugin } from 'kibana/public'; import { VisualizePluginSetup } from '../../visualize/public'; import { DefaultEditorController } from './default_editor_controller'; +import { setTheme } from './services'; export interface VisDefaultEditorSetupDependencies { visualize: VisualizePluginSetup; @@ -19,6 +20,7 @@ export class VisDefaultEditorPlugin implements Plugin { public setup(core: CoreSetup, { visualize }: VisDefaultEditorSetupDependencies) { + setTheme(core.theme); if (visualize) { visualize.visEditorsRegistry.registerDefault(DefaultEditorController); } diff --git a/src/plugins/vis_default_editor/public/services.ts b/src/plugins/vis_default_editor/public/services.ts new file mode 100644 index 00000000000000..d76fbc4542f4c9 --- /dev/null +++ b/src/plugins/vis_default_editor/public/services.ts @@ -0,0 +1,12 @@ +/* + * 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 { ThemeServiceStart } from 'kibana/public'; +import { createGetterSetter } from '../../kibana_utils/common'; + +export const [getTheme, setTheme] = createGetterSetter('ThemeService'); diff --git a/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx b/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx index 77af6dfdcf0429..a91b268a1752d9 100644 --- a/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx +++ b/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx @@ -10,6 +10,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { ExpressionRenderDefinition } from 'src/plugins/expressions'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { VegaVisualizationDependencies } from './plugin'; import { RenderValue } from './vega_fn'; @@ -26,14 +27,16 @@ export const getVegaVisRenderer: ( }); render( - - - , + + + + + , domNode ); }, diff --git a/src/plugins/vis_types/vislib/public/plugin.ts b/src/plugins/vis_types/vislib/public/plugin.ts index 07e9b72aa429f3..ba73e653e6a350 100644 --- a/src/plugins/vis_types/vislib/public/plugin.ts +++ b/src/plugins/vis_types/vislib/public/plugin.ts @@ -17,7 +17,7 @@ import { LEGACY_PIE_CHARTS_LIBRARY } from '../../pie/common/index'; import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn'; import { createPieVisFn } from './pie_fn'; import { visLibVisTypeDefinitions, pieVisTypeDefinition } from './vis_type_vislib_vis_types'; -import { setFormatService, setDataActions } from './services'; +import { setFormatService, setDataActions, setTheme } from './services'; import { getVislibVisRenderer } from './vis_renderer'; /** @internal */ @@ -60,5 +60,6 @@ export class VisTypeVislibPlugin public start(core: CoreStart, { data }: VisTypeVislibPluginStartDependencies) { setFormatService(data.fieldFormats); setDataActions(data.actions); + setTheme(core.theme); } } diff --git a/src/plugins/vis_types/vislib/public/services.ts b/src/plugins/vis_types/vislib/public/services.ts index 21fb77a4d41ca7..7afe16867bab48 100644 --- a/src/plugins/vis_types/vislib/public/services.ts +++ b/src/plugins/vis_types/vislib/public/services.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { ThemeServiceStart } from 'kibana/public'; import { createGetterSetter } from '../../../kibana_utils/public'; import { DataPublicPluginStart } from '../../../data/public'; @@ -15,3 +16,5 @@ export const [getDataActions, setDataActions] = export const [getFormatService, setFormatService] = createGetterSetter< DataPublicPluginStart['fieldFormats'] >('vislib data.fieldFormats'); + +export const [getTheme, setTheme] = createGetterSetter('vislib theme service'); diff --git a/src/plugins/vis_types/vislib/public/vis_renderer.tsx b/src/plugins/vis_types/vislib/public/vis_renderer.tsx index 04c4c3cedc9d22..1fad6c63944475 100644 --- a/src/plugins/vis_types/vislib/public/vis_renderer.tsx +++ b/src/plugins/vis_types/vislib/public/vis_renderer.tsx @@ -9,6 +9,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; import { ExpressionRenderDefinition } from '../../../expressions/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { ChartsPluginSetup } from '../../../charts/public'; @@ -44,9 +45,11 @@ export const getVislibVisRenderer: ( handlers.onDestroy(() => unmountComponentAtNode(domNode)); render( - - - , + + + + + , domNode ); }, diff --git a/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx b/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx index 731fbed7482c48..4338b0bc99ccaf 100644 --- a/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx +++ b/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx @@ -9,6 +9,8 @@ import React from 'react'; import ReactDOM from 'react-dom/server'; import { EuiIcon } from '@elastic/eui'; +import { KibanaThemeProvider } from '../../../../../kibana_react/public'; +import { getTheme } from '../../services'; interface Props { wholeBucket: boolean; @@ -16,12 +18,14 @@ interface Props { export const touchdownTemplate = ({ wholeBucket }: Props) => { return ReactDOM.renderToStaticMarkup( -

- - - {wholeBucket ? 'Part of this bucket' : 'This area'} may contain partial data. The selected - time range does not fully cover it. - -

+ +

+ + + {wholeBucket ? 'Part of this bucket' : 'This area'} may contain partial data. The selected + time range does not fully cover it. + +

+ ); }; diff --git a/src/plugins/vis_types/xy/public/plugin.ts b/src/plugins/vis_types/xy/public/plugin.ts index 0f1de387161e30..9f81d6848d2e56 100644 --- a/src/plugins/vis_types/xy/public/plugin.ts +++ b/src/plugins/vis_types/xy/public/plugin.ts @@ -72,6 +72,7 @@ export class VisTypeXyPlugin expressions.registerRenderer( getXYVisRenderer({ uiSettings: core.uiSettings, + theme: core.theme, }) ); expressions.registerFunction(expressionFunctions.visTypeXyVisFn); diff --git a/src/plugins/vis_types/xy/public/vis_renderer.tsx b/src/plugins/vis_types/xy/public/vis_renderer.tsx index 77727761015a74..1fba921ab62751 100644 --- a/src/plugins/vis_types/xy/public/vis_renderer.tsx +++ b/src/plugins/vis_types/xy/public/vis_renderer.tsx @@ -9,8 +9,9 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; -import { IUiSettingsClient } from 'kibana/public'; +import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { VisualizationContainer } from '../../../visualizations/public'; import type { PersistedState } from '../../../visualizations/public'; import type { ExpressionRenderDefinition } from '../../../expressions/public'; @@ -32,7 +33,8 @@ function shouldShowNoResultsMessage(visData: any, visType: XyVisType): boolean { export const getXYVisRenderer: (deps: { uiSettings: IUiSettingsClient; -}) => ExpressionRenderDefinition = ({ uiSettings }) => ({ + theme: ThemeServiceStart; +}) => ExpressionRenderDefinition = ({ uiSettings, theme }) => ({ name: visName, displayName: 'XY visualization', reuseDomNode: true, @@ -41,19 +43,21 @@ export const getXYVisRenderer: (deps: { handlers.onDestroy(() => unmountComponentAtNode(domNode)); render( - - - - - , + + + + + + + , domNode ); }, diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_embeddable.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_embeddable.tsx index 99bd06bbc412e2..b363553e6c9b2c 100644 --- a/src/plugins/visualizations/public/embeddable/disabled_lab_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/disabled_lab_embeddable.tsx @@ -8,11 +8,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { Embeddable, EmbeddableOutput } from '../../../../plugins/embeddable/public'; import { DisabledLabVisualization } from './disabled_lab_visualization'; import { VisualizeInput } from './visualize_embeddable'; import { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; +import { getTheme } from '../services'; export class DisabledLabEmbeddable extends Embeddable { private domNode?: HTMLElement; @@ -26,7 +28,12 @@ export class DisabledLabEmbeddable extends Embeddable, domNode); + ReactDOM.render( + + + , + domNode + ); } } diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx index 37365fd613e5a2..3a248732eac0c3 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx @@ -12,6 +12,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { render } from 'react-dom'; import { EuiLoadingChart } from '@elastic/eui'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { VISUALIZE_EMBEDDABLE_TYPE } from './constants'; import { IndexPattern, @@ -38,7 +39,7 @@ import { ExpressionAstExpression, } from '../../../../plugins/expressions/public'; import { Vis, SerializedVis } from '../vis'; -import { getExpressions, getUiActions } from '../services'; +import { getExpressions, getTheme, getUiActions } from '../services'; import { VIS_EVENT_TO_TRIGGER } from './events'; import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory'; import { SavedObjectAttributes } from '../../../../core/types'; @@ -303,9 +304,11 @@ export class VisualizeEmbeddable super.render(this.domNode); render( -
- -
, + +
+ +
+ , this.domNode ); diff --git a/src/plugins/visualizations/public/services.ts b/src/plugins/visualizations/public/services.ts index 95f5fa02c09a85..37aea45fa3f589 100644 --- a/src/plugins/visualizations/public/services.ts +++ b/src/plugins/visualizations/public/services.ts @@ -15,6 +15,7 @@ import type { OverlayStart, SavedObjectsStart, DocLinksStart, + ThemeServiceStart, } from '../../../core/public'; import type { TypesStart } from './vis_types'; import { createGetterSetter } from '../../../plugins/kibana_utils/public'; @@ -27,6 +28,8 @@ import type { SpacesPluginStart } from '../../../../x-pack/plugins/spaces/public export const [getUISettings, setUISettings] = createGetterSetter('UISettings'); +export const [getTheme, setTheme] = createGetterSetter('Theme'); + export const [getCapabilities, setCapabilities] = createGetterSetter('Capabilities'); export const [getHttp, setHttp] = createGetterSetter('Http'); diff --git a/src/plugins/visualizations/public/wizard/show_new_vis.tsx b/src/plugins/visualizations/public/wizard/show_new_vis.tsx index 76fabdedae48d1..c8c945c08db811 100644 --- a/src/plugins/visualizations/public/wizard/show_new_vis.tsx +++ b/src/plugins/visualizations/public/wizard/show_new_vis.tsx @@ -10,6 +10,7 @@ import React, { lazy, Suspense } from 'react'; import ReactDOM from 'react-dom'; import { EuiPortal, EuiProgress } from '@elastic/eui'; import { I18nProvider } from '@kbn/i18n/react'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { getHttp, getSavedObjects, @@ -19,6 +20,7 @@ import { getApplication, getEmbeddable, getDocLinks, + getTheme, } from '../services'; import type { BaseVisType } from '../vis_types'; @@ -61,33 +63,35 @@ export function showNewVisModal({ document.body.appendChild(container); const element = ( - - - - - } - > - - - + + + + + + } + > + + + + ); ReactDOM.render(element, container); diff --git a/src/plugins/visualize/public/application/index.tsx b/src/plugins/visualize/public/application/index.tsx index 8a7936c7bc44ca..c3bc01deff020b 100644 --- a/src/plugins/visualize/public/application/index.tsx +++ b/src/plugins/visualize/public/application/index.tsx @@ -11,7 +11,7 @@ import ReactDOM from 'react-dom'; import { Router } from 'react-router-dom'; import { AppMountParameters } from 'kibana/public'; -import { KibanaContextProvider } from '../../../kibana_react/public'; +import { KibanaContextProvider, KibanaThemeProvider } from '../../../kibana_react/public'; import { VisualizeApp } from './app'; import { VisualizeServices } from './types'; import { addHelpMenuToAppChrome, addBadgeToAppChrome } from './utils'; @@ -28,15 +28,17 @@ export const renderApp = ( } const app = ( - - - - - - - - - + + + + + + + + + + + ); ReactDOM.render(app, element); diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx index 958f36d227cc6b..bb6d573653964a 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx @@ -31,7 +31,10 @@ import { import { ACTION_VISUALIZE_LENS_FIELD } from '../../../../../src/plugins/ui_actions/public'; import { LensAttributeService } from '../lens_attribute_service'; import { LensAppServices, RedirectToOriginProps, HistoryLocationState } from './types'; -import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; +import { + KibanaContextProvider, + KibanaThemeProvider, +} from '../../../../../src/plugins/kibana_react/public'; import { makeConfigureStore, navigateAway, @@ -254,24 +257,26 @@ export async function mountApp( const PresentationUtilContext = getPresentationUtilContext(); render( - - - - - - - } - /> - - - - - - - , + + + + + + + + } + /> + + + + + + + + , params.element ); return () => { diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx index 03691d56ee56a7..b3d4f95faadd9f 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx @@ -12,8 +12,9 @@ import { I18nProvider } from '@kbn/i18n/react'; import type { IAggType } from 'src/plugins/data/public'; import { PaletteRegistry } from 'src/plugins/charts/public'; -import { IUiSettingsClient } from 'kibana/public'; +import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public'; import { ExpressionRenderDefinition } from 'src/plugins/expressions'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { DatatableComponent } from './components/table_basic'; import type { ILensInterpreterRenderHandlers } from '../types'; @@ -25,6 +26,7 @@ export const getDatatableRenderer = (dependencies: { getType: Promise<(name: string) => IAggType>; paletteService: PaletteRegistry; uiSettings: IUiSettingsClient; + theme: ThemeServiceStart; }): ExpressionRenderDefinition => ({ name: 'lens_datatable_renderer', displayName: i18n.translate('xpack.lens.datatable.visualizationName', { @@ -69,18 +71,20 @@ export const getDatatableRenderer = (dependencies: { } ReactDOM.render( - - - , + + + + + , domNode, () => { handlers.done(); diff --git a/x-pack/plugins/lens/public/datatable_visualization/index.ts b/x-pack/plugins/lens/public/datatable_visualization/index.ts index 51f1f54cc03ce2..5ab970e84d0438 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/index.ts +++ b/x-pack/plugins/lens/public/datatable_visualization/index.ts @@ -34,6 +34,7 @@ export class DatatableVisualization { expressions.registerRenderer(() => getDatatableRenderer({ formatFactory, + theme: core.theme, getType: core .getStartServices() .then(([_, { data: dataStart }]) => dataStart.search.aggs.types.get), @@ -42,7 +43,7 @@ export class DatatableVisualization { }) ); - return getDatatableVisualization({ paletteService: palettes }); + return getDatatableVisualization({ paletteService: palettes, theme: core.theme }); }); } } diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index a953da4c380f03..b0204e3a4ad51e 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -11,6 +11,8 @@ import { Ast } from '@kbn/interpreter/common'; import { I18nProvider } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import type { PaletteRegistry } from 'src/plugins/charts/public'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { SuggestionRequest, Visualization, @@ -39,8 +41,10 @@ const visualizationLabel = i18n.translate('xpack.lens.datatable.label', { export const getDatatableVisualization = ({ paletteService, + theme, }: { paletteService: PaletteRegistry; + theme: ThemeServiceStart; }): Visualization => ({ id: 'lnsDatatable', @@ -294,9 +298,11 @@ export const getDatatableVisualization = ({ }, renderDimensionEditor(domElement, props) { render( - - - , + + + + + , domElement ); }, @@ -403,9 +409,11 @@ export const getDatatableVisualization = ({ renderToolbar(domElement, props) { render( - - - , + + + + + , domElement ); }, diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx index 2960e74efe97f2..da4a97049a519f 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable.tsx @@ -27,6 +27,7 @@ import { map, distinctUntilChanged, skip } from 'rxjs/operators'; import fastIsEqual from 'fast-deep-equal'; import { UsageCollectionSetup } from 'src/plugins/usage_collection/public'; import { METRIC_TYPE } from '@kbn/analytics'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { ExpressionRendererEvent, ReactExpressionRendererType, @@ -58,7 +59,7 @@ import { import { IndexPatternsContract } from '../../../../../src/plugins/data/public'; import { getEditPath, DOC_TYPE, PLUGIN_ID } from '../../common'; -import { IBasePath } from '../../../../../src/core/public'; +import { IBasePath, ThemeServiceStart } from '../../../../../src/core/public'; import { LensAttributeService } from '../lens_attribute_service'; import type { ErrorMessage } from '../editor_frame_service/types'; import { getLensInspectorService, LensInspector } from '../lens_inspector_service'; @@ -111,6 +112,7 @@ export interface LensEmbeddableDeps { capabilities: { canSaveVisualizations: boolean; canSaveDashboards: boolean }; usageCollection?: UsageCollectionSetup; spaces?: SpacesPluginStart; + theme: ThemeServiceStart; } const getExpressionFromDocument = async ( @@ -399,29 +401,31 @@ export class Embeddable const input = this.getInput(); render( - { - this.logError('runtime'); - }} - />, + + { + this.logError('runtime'); + }} + /> + , domNode ); } diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_factory.ts b/x-pack/plugins/lens/public/embeddable/embeddable_factory.ts index 811f391e32f9af..63b07affcb9ed0 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_factory.ts +++ b/x-pack/plugins/lens/public/embeddable/embeddable_factory.ts @@ -5,7 +5,7 @@ * 2.0. */ -import type { Capabilities, HttpSetup } from 'kibana/public'; +import type { Capabilities, HttpSetup, ThemeServiceStart } from 'kibana/public'; import { i18n } from '@kbn/i18n'; import { RecursiveReadonly } from '@kbn/utility-types'; import { Ast } from '@kbn/interpreter/common'; @@ -42,6 +42,7 @@ export interface LensEmbeddableStartServices { ) => Promise<{ ast: Ast | null; errors: ErrorMessage[] | undefined }>; visualizationMap: VisualizationMap; spaces?: SpacesPluginStart; + theme: ThemeServiceStart; } export class EmbeddableFactory implements EmbeddableFactoryDefinition { @@ -94,6 +95,7 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition { indexPatternService, capabilities, usageCollection, + theme, inspector, spaces, } = await this.getStartServices(); @@ -117,6 +119,7 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition { canSaveVisualizations: Boolean(capabilities.visualize.save), }, usageCollection, + theme, spaces, }, input, diff --git a/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx b/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx index 84c8f987f524d3..9f3ab2b164d748 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/expression.tsx @@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n'; import { I18nProvider } from '@kbn/i18n/react'; import ReactDOM from 'react-dom'; import React from 'react'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { IInterpreterRenderHandlers } from '../../../../../src/plugins/expressions'; import type { LensBrushEvent, LensFilterEvent } from '../types'; import type { FormatFactory } from '../../common'; @@ -22,6 +24,7 @@ export const getHeatmapRenderer = (dependencies: { chartsThemeService: ChartsPluginSetup['theme']; paletteService: PaletteRegistry; timeZone: string; + kibanaTheme: ThemeServiceStart; }) => ({ name: LENS_HEATMAP_RENDERER, displayName: i18n.translate('xpack.lens.heatmap.visualizationName', { @@ -43,19 +46,21 @@ export const getHeatmapRenderer = (dependencies: { }; ReactDOM.render( - - { - - } - , + + + { + + } + + , domNode, () => { handlers.done(); diff --git a/x-pack/plugins/lens/public/heatmap_visualization/index.ts b/x-pack/plugins/lens/public/heatmap_visualization/index.ts index 3ac3f769e4b5f2..b2722c88b2a64f 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/index.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/index.ts @@ -35,9 +35,10 @@ export class HeatmapVisualization { chartsThemeService: charts.theme, paletteService: palettes, timeZone, + kibanaTheme: core.theme, }) ); - return getHeatmapVisualization({ paletteService: palettes }); + return getHeatmapVisualization({ paletteService: palettes, theme: core.theme }); }); } } diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx index aa053d4aea06d6..b5cc1d71d6b7f4 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx @@ -11,6 +11,8 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { Ast } from '@kbn/interpreter/common'; import { Position } from '@elastic/charts'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; import { PaletteRegistry } from '../../../../../src/plugins/charts/public'; import type { OperationMetadata, Visualization } from '../types'; import type { HeatmapVisualizationState } from './types'; @@ -39,6 +41,7 @@ const groupLabelForHeatmap = i18n.translate('xpack.lens.heatmapVisualization.hea interface HeatmapVisualizationDeps { paletteService: PaletteRegistry; + theme: ThemeServiceStart; } function getAxisName(axis: 'x' | 'y') { @@ -95,6 +98,7 @@ function computePaletteParams(params: CustomPaletteParams) { export const getHeatmapVisualization = ({ paletteService, + theme, }: HeatmapVisualizationDeps): Visualization => ({ id: LENS_HEATMAP_ID, @@ -258,18 +262,22 @@ export const getHeatmapVisualization = ({ renderDimensionEditor(domElement, props) { render( - - - , + + + + + , domElement ); }, renderToolbar(domElement, props) { render( - - - , + + + + + , domElement ); }, diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx index fc9e2c7ed44a89..ef791887873e4a 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx @@ -46,7 +46,10 @@ import { isColumnInvalid, isDraggedField, normalizeOperationDataType } from './u import { LayerPanel } from './layerpanel'; import { GenericIndexPatternColumn, getErrorMessages, insertNewColumn } from './operations'; import { IndexPatternField, IndexPatternPrivateState, IndexPatternPersistedState } from './types'; -import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; +import { + KibanaContextProvider, + KibanaThemeProvider, +} from '../../../../../src/plugins/kibana_react/public'; import { DataPublicPluginStart } from '../../../../../src/plugins/data/public'; import { VisualizeFieldContext } from '../../../../../src/plugins/ui_actions/public'; import { mergeLayer } from './state_helpers'; @@ -224,18 +227,20 @@ export function getIndexPatternDatasource({ props: DatasourceDataPanelProps ) { render( - - - , + + + + + , domElement ); }, @@ -285,21 +290,26 @@ export function getIndexPatternDatasource({ const columnLabelMap = indexPatternDatasource.uniqueLabels(props.state); render( - - - - - , + + + + + + + , domElement ); }, @@ -311,30 +321,32 @@ export function getIndexPatternDatasource({ const columnLabelMap = indexPatternDatasource.uniqueLabels(props.state); render( - - - - - , + + + + + + + , domElement ); }, @@ -344,21 +356,23 @@ export function getIndexPatternDatasource({ props: DatasourceLayerPanelProps ) => { render( - { - changeLayerIndexPattern({ - indexPatternId, - setState: props.setState, - state: props.state, - layerId: props.layerId, - onError: onIndexPatternLoadError, - replaceIfPossible: true, - storage, - indexPatternsService, - }); - }} - {...props} - />, + + { + changeLayerIndexPattern({ + indexPatternId, + setState: props.setState, + state: props.state, + layerId: props.layerId, + onError: onIndexPatternLoadError, + replaceIfPossible: true, + storage, + indexPatternsService, + }); + }} + {...props} + /> + , domElement ); }, diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx index fd4b4f20c5c50a..2ec46cf28d87d1 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx @@ -9,7 +9,8 @@ import './expression.scss'; import { I18nProvider } from '@kbn/i18n/react'; import React from 'react'; import ReactDOM from 'react-dom'; -import { IUiSettingsClient } from 'kibana/public'; +import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { ExpressionRenderDefinition, IInterpreterRenderHandlers, @@ -29,7 +30,8 @@ export type { MetricChartProps, MetricState, MetricConfig } from '../../common/e export const getMetricChartRenderer = ( formatFactory: FormatFactory, - uiSettings: IUiSettingsClient + uiSettings: IUiSettingsClient, + theme: ThemeServiceStart ): ExpressionRenderDefinition => ({ name: 'lens_metric_chart_renderer', displayName: 'Metric chart', @@ -38,9 +40,11 @@ export const getMetricChartRenderer = ( reuseDomNode: true, render: (domNode: Element, config: MetricChartProps, handlers: IInterpreterRenderHandlers) => { ReactDOM.render( - - - , + + + + + , domNode, () => { handlers.done(); diff --git a/x-pack/plugins/lens/public/metric_visualization/index.ts b/x-pack/plugins/lens/public/metric_visualization/index.ts index bff5f71f8ba1df..508535b57bdfbb 100644 --- a/x-pack/plugins/lens/public/metric_visualization/index.ts +++ b/x-pack/plugins/lens/public/metric_visualization/index.ts @@ -27,7 +27,9 @@ export class MetricVisualization { const { getMetricVisualization, getMetricChartRenderer } = await import('../async_services'); const palettes = await charts.palettes.getPalettes(); - expressions.registerRenderer(() => getMetricChartRenderer(formatFactory, core.uiSettings)); + expressions.registerRenderer(() => + getMetricChartRenderer(formatFactory, core.uiSettings, core.theme) + ); return getMetricVisualization({ paletteService: palettes }); }); } diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 63da7c4b443174..d9abf512c65249 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -10,6 +10,8 @@ import { i18n } from '@kbn/i18n'; import { I18nProvider } from '@kbn/i18n/react'; import { render } from 'react-dom'; import { Ast } from '@kbn/interpreter/common'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { ColorMode } from '../../../../../src/plugins/charts/common'; import { PaletteRegistry } from '../../../../../src/plugins/charts/public'; import { getSuggestions } from './metric_suggestions'; @@ -73,8 +75,10 @@ const toExpression = ( }; export const getMetricVisualization = ({ paletteService, + theme, }: { paletteService: PaletteRegistry; + theme: ThemeServiceStart; }): Visualization => ({ id: 'lnsMetric', @@ -191,9 +195,11 @@ export const getMetricVisualization = ({ renderDimensionEditor(domElement, props) { render( - - - , + + + + + , domElement ); }, diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx index d26289450bd0fb..453f011540a601 100644 --- a/x-pack/plugins/lens/public/pie_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/expression.tsx @@ -13,6 +13,8 @@ import type { IInterpreterRenderHandlers, ExpressionRenderDefinition, } from 'src/plugins/expressions/public'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { LensFilterEvent } from '../types'; import { PieComponent } from './render_function'; import type { FormatFactory } from '../../common'; @@ -23,6 +25,7 @@ export const getPieRenderer = (dependencies: { formatFactory: FormatFactory; chartsThemeService: ChartsPluginSetup['theme']; paletteService: PaletteRegistry; + kibanaTheme: ThemeServiceStart; }): ExpressionRenderDefinition => ({ name: 'lens_pie_renderer', displayName: i18n.translate('xpack.lens.pie.visualizationName', { @@ -37,18 +40,20 @@ export const getPieRenderer = (dependencies: { }; ReactDOM.render( - - - , + + + + + , domNode, () => { handlers.done(); diff --git a/x-pack/plugins/lens/public/pie_visualization/index.ts b/x-pack/plugins/lens/public/pie_visualization/index.ts index b4670b3b9c9dd2..ce54f53c1cc93f 100644 --- a/x-pack/plugins/lens/public/pie_visualization/index.ts +++ b/x-pack/plugins/lens/public/pie_visualization/index.ts @@ -37,9 +37,10 @@ export class PieVisualization { formatFactory, chartsThemeService: charts.theme, paletteService: palettes, + kibanaTheme: core.theme, }) ); - return getPieVisualization({ paletteService: palettes }); + return getPieVisualization({ paletteService: palettes, kibanaTheme: core.theme }); }); } } diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx index ea89ef0bfb8549..108f22a4669c6a 100644 --- a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx @@ -10,6 +10,8 @@ import { render } from 'react-dom'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import type { PaletteRegistry } from 'src/plugins/charts/public'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { Visualization, OperationMetadata, AccessorConfig } from '../types'; import { toExpression, toPreviewExpression } from './to_expression'; import type { PieLayerState, PieVisualizationState } from '../../common/expressions'; @@ -37,8 +39,10 @@ const numberMetricOperations = (op: OperationMetadata) => export const getPieVisualization = ({ paletteService, + kibanaTheme, }: { paletteService: PaletteRegistry; + kibanaTheme: ThemeServiceStart; }): Visualization => ({ id: 'lnsPie', @@ -226,9 +230,11 @@ export const getPieVisualization = ({ }, renderDimensionEditor(domElement, props) { render( - - - , + + + + + , domElement ); }, @@ -254,9 +260,11 @@ export const getPieVisualization = ({ renderToolbar(domElement, props) { render( - - - , + + + + + , domElement ); }, diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts index fb0a922c7e9a29..0a6f6e4bb91577 100644 --- a/x-pack/plugins/lens/public/plugin.ts +++ b/x-pack/plugins/lens/public/plugin.ts @@ -216,6 +216,7 @@ export class LensPlugin { usageCollection, inspector: plugins.inspector, spaces: plugins.spaces, + theme: core.theme, }; }; diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index 60d0fe85ed5460..78bcd41464cd35 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -43,6 +43,8 @@ import type { import { IconType } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { RenderMode } from 'src/plugins/expressions'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { ILensInterpreterRenderHandlers, LensFilterEvent, LensBrushEvent } from '../types'; import type { LensMultiTable, FormatFactory } from '../../common'; import { layerTypes } from '../../common'; @@ -134,6 +136,7 @@ export const getXyChartRenderer = (dependencies: { paletteService: PaletteRegistry; timeZone: string; useLegacyTimeAxis: boolean; + kibanaTheme: ThemeServiceStart; }): ExpressionRenderDefinition => ({ name: 'lens_xy_chart_renderer', displayName: 'XY chart', @@ -156,23 +159,25 @@ export const getXyChartRenderer = (dependencies: { }; ReactDOM.render( - - - , + + + + + , domNode, () => handlers.done() ); diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts index 8ac9076919dd9a..9697ba149e16e0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/index.ts +++ b/x-pack/plugins/lens/public/xy_visualization/index.ts @@ -39,9 +39,15 @@ export class XyVisualization { paletteService: palettes, timeZone: getTimeZone(core.uiSettings), useLegacyTimeAxis, + kibanaTheme: core.theme, }) ); - return getXyVisualization({ paletteService: palettes, fieldFormats, useLegacyTimeAxis }); + return getXyVisualization({ + paletteService: palettes, + fieldFormats, + useLegacyTimeAxis, + kibanaTheme: core.theme, + }); }); } } diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx index 0ba74f4b8bb3a6..67a8179ce6df84 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx @@ -13,6 +13,8 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { PaletteRegistry } from 'src/plugins/charts/public'; import { FieldFormatsStart } from 'src/plugins/field_formats/public'; +import { ThemeServiceStart } from 'kibana/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { getSuggestions } from './xy_suggestions'; import { XyToolbar, DimensionEditor } from './xy_config_panel'; import { LayerHeader } from './xy_config_panel/layer_header'; @@ -99,10 +101,12 @@ export const getXyVisualization = ({ paletteService, fieldFormats, useLegacyTimeAxis, + kibanaTheme, }: { paletteService: PaletteRegistry; fieldFormats: FieldFormatsStart; useLegacyTimeAxis: boolean; + kibanaTheme: ThemeServiceStart; }): Visualization => ({ id: 'lnsXY', @@ -565,31 +569,37 @@ export const getXyVisualization = ({ renderLayerHeader(domElement, props) { render( - - - , + + + + + , domElement ); }, renderToolbar(domElement, props) { render( - - - , + + + + + , domElement ); }, renderDimensionEditor(domElement, props) { render( - - - , + + + + + , domElement ); }, From 7fee75458fa1a8b55dd2d2733c95c4a5dbe9672e Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 16:37:01 +0100 Subject: [PATCH 3/8] also pass theme to mountpoint --- .../management_app/advanced_settings.tsx | 3 ++ .../management_app/components/form/form.tsx | 9 ++--- .../mount_management_section.tsx | 1 + .../components/visualize_no_match.tsx | 34 ++++++++++--------- .../utils/use/use_visualize_app_state.tsx | 12 +++++-- 5 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx index 1391312df5231a..c0decf516fbad3 100644 --- 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 void; queryText?: string; } @@ -191,7 +192,7 @@ export class Form extends PureComponent { defaultMessage: 'One or more settings require you to reload the page to take effect.', }), text: toMountPoint( - <> + window.location.reload()}> @@ -201,7 +202,7 @@ export class Form extends PureComponent { - + ), 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 index 1990d8f2c51cdd..423296dfb7b84a 100644 --- a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx +++ b/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx @@ -84,6 +84,7 @@ export async function mountManagementSection( toasts={notifications.toasts} dockLinks={docLinks.links} uiSettings={uiSettings} + theme={params.theme$} componentRegistry={componentRegistry} trackUiMetric={trackUiMetric} /> diff --git a/src/plugins/visualize/public/application/components/visualize_no_match.tsx b/src/plugins/visualize/public/application/components/visualize_no_match.tsx index ad993af4300861..0077230cff11c4 100644 --- a/src/plugins/visualize/public/application/components/visualize_no_match.tsx +++ b/src/plugins/visualize/public/application/components/visualize_no_match.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCallOut, EuiLink } from '@elastic/eui'; -import { useKibana, toMountPoint } from '../../../../kibana_react/public'; +import { useKibana, toMountPoint, KibanaThemeProvider } from '../../../../kibana_react/public'; import { VisualizeServices } from '../types'; import { VisualizeConstants } from '../visualize_constants'; @@ -35,21 +35,23 @@ export const VisualizeNoMatch = () => { bannerId = services.overlays.banners.replace( bannerId, toMountPoint( - -

- - {services.history.location.pathname} - - ), - }} - /> -

- + + +

+ + {services.history.location.pathname} + + ), + }} + /> +

+ + ) ); diff --git a/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx b/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx index e8f163e30b153a..dca1791d44149a 100644 --- a/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx +++ b/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx @@ -12,7 +12,11 @@ import { map } from 'rxjs/operators'; import { EventEmitter } from 'events'; import { i18n } from '@kbn/i18n'; -import { MarkdownSimple, toMountPoint } from '../../../../../kibana_react/public'; +import { + KibanaThemeProvider, + MarkdownSimple, + toMountPoint, +} from '../../../../../kibana_react/public'; import { migrateLegacyQuery } from '../migrate_legacy_query'; import { esFilters, connectToQueryState } from '../../../../../data/public'; import { @@ -121,7 +125,11 @@ export const useVisualizeAppState = ( title: i18n.translate('visualize.visualizationLoadingFailedErrorMessage', { defaultMessage: 'Failed to load the visualization', }), - text: toMountPoint({error.message}), + text: toMountPoint( + + {error.message} + + ), }); services.history.replace( From b97aeb3c7f3b20aac57cf65b4aa64ddf08540934 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 16:51:13 +0100 Subject: [PATCH 4/8] fix kibana.jsons --- .../public/expression_renderers/metric_vis_renderer.tsx | 2 +- src/plugins/chart_expressions/expression_tagcloud/kibana.json | 2 +- .../vis_default_editor/public/default_editor_controller.tsx | 2 +- src/plugins/vis_types/pie/kibana.json | 2 +- src/plugins/vis_types/vega/public/vega_vis_renderer.tsx | 2 +- src/plugins/vis_types/vislib/kibana.json | 2 +- src/plugins/vis_types/xy/kibana.json | 2 +- src/plugins/visualizations/kibana.json | 2 +- .../plugins/lens/public/heatmap_visualization/visualization.tsx | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx index 94ac0cdc3d12c7..f6cc73c366e4e4 100644 --- a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -10,7 +10,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { ThemeServiceStart } from 'kibana/public'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/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'; diff --git a/src/plugins/chart_expressions/expression_tagcloud/kibana.json b/src/plugins/chart_expressions/expression_tagcloud/kibana.json index b1c3c1f0203663..37a7e3be843b29 100755 --- a/src/plugins/chart_expressions/expression_tagcloud/kibana.json +++ b/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", diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx index 0d87e0a7f3fafd..293190fe56bfd0 100644 --- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx +++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx @@ -13,7 +13,7 @@ import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui'; import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; import { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { KibanaThemeProvider } from '../../kibana_react/public'; import { getTheme } from './services'; // @ts-ignore diff --git a/src/plugins/vis_types/pie/kibana.json b/src/plugins/vis_types/pie/kibana.json index b3a5c1fc8aa078..52e02024ec31c7 100644 --- a/src/plugins/vis_types/pie/kibana.json +++ b/src/plugins/vis_types/pie/kibana.json @@ -4,7 +4,7 @@ "ui": true, "server": true, "requiredPlugins": ["charts", "data", "expressions", "visualizations", "usageCollection"], - "requiredBundles": ["visDefaultEditor"], + "requiredBundles": ["visDefaultEditor", "kibanaReact"], "extraPublicDirs": ["common/index"], "owner": { "name": "Vis Editors", diff --git a/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx b/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx index a91b268a1752d9..e6a39f5a18e837 100644 --- a/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx +++ b/src/plugins/vis_types/vega/public/vega_vis_renderer.tsx @@ -10,7 +10,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { ExpressionRenderDefinition } from 'src/plugins/expressions'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { VegaVisualizationDependencies } from './plugin'; import { RenderValue } from './vega_fn'; diff --git a/src/plugins/vis_types/vislib/kibana.json b/src/plugins/vis_types/vislib/kibana.json index dfefa11cb06e51..f4bceb80d8c9ed 100644 --- a/src/plugins/vis_types/vislib/kibana.json +++ b/src/plugins/vis_types/vislib/kibana.json @@ -4,7 +4,7 @@ "server": true, "ui": true, "requiredPlugins": ["charts", "data", "expressions", "visualizations"], - "requiredBundles": ["kibanaUtils", "visDefaultEditor", "visTypeXy", "visTypePie", "fieldFormats"], + "requiredBundles": ["kibanaUtils", "visDefaultEditor", "visTypeXy", "visTypePie", "fieldFormats", "kibanaReact"], "owner": { "name": "Vis Editors", "githubTeam": "kibana-vis-editors" diff --git a/src/plugins/vis_types/xy/kibana.json b/src/plugins/vis_types/xy/kibana.json index 1606af5944ad36..a37393b2439d4b 100644 --- a/src/plugins/vis_types/xy/kibana.json +++ b/src/plugins/vis_types/xy/kibana.json @@ -4,7 +4,7 @@ "ui": true, "server": true, "requiredPlugins": ["charts", "data", "expressions", "visualizations", "usageCollection"], - "requiredBundles": ["kibanaUtils", "visDefaultEditor"], + "requiredBundles": ["kibanaUtils", "visDefaultEditor", "kibanaReact"], "extraPublicDirs": ["common/index"], "owner": { "name": "Vis Editors", diff --git a/src/plugins/visualizations/kibana.json b/src/plugins/visualizations/kibana.json index 32430c9d4e4fd6..5152ddff40890f 100644 --- a/src/plugins/visualizations/kibana.json +++ b/src/plugins/visualizations/kibana.json @@ -12,7 +12,7 @@ "savedObjects" ], "optionalPlugins": ["usageCollection", "spaces", "savedObjectsTaggingOss"], - "requiredBundles": ["kibanaUtils", "discover"], + "requiredBundles": ["kibanaUtils", "discover", "kibanaReact"], "extraPublicDirs": ["common/constants", "common/prepare_log_table", "common/expression_functions"], "owner": { "name": "Vis Editors", diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx index b5cc1d71d6b7f4..86b895ef1261c7 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx @@ -12,7 +12,7 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { Ast } from '@kbn/interpreter/common'; import { Position } from '@elastic/charts'; import { ThemeServiceStart } from 'kibana/public'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { PaletteRegistry } from '../../../../../src/plugins/charts/public'; import type { OperationMetadata, Visualization } from '../types'; import type { HeatmapVisualizationState } from './types'; From 4311f7bbf6da19b854d96b8a927cdfc17e2770bb Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 16:59:49 +0100 Subject: [PATCH 5/8] fix tests --- .../public/management_app/advanced_settings.test.tsx | 9 ++++++++- .../public/management_app/components/form/form.test.tsx | 9 +++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) 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 index b897c1c73b89b4..91f4a5e6be471e 100644 --- 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/components/form/form.test.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx index 2fbee2d57ebe6d..a371831dcb0070 100644 --- 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$} /> ); From 01a0332d2a0249cb1908b6282b3d8ee37b5b4e04 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 20:06:33 +0100 Subject: [PATCH 6/8] fix tests --- .../expression_metric/kibana.json | 2 +- .../__stories__/metric_renderer.stories.tsx | 5 +++- .../public/__mocks__/theme.ts | 13 ++++++++++ .../vis_types/vislib/public/vis_renderer.tsx | 2 +- .../visualization.test.tsx | 2 ++ .../public/embeddable/embeddable.test.tsx | 22 ++++++++++++++++- .../visualization.test.ts | 24 +++++++++++++++++-- .../lens/public/metric_visualization/index.ts | 2 +- .../visualization.test.ts | 2 ++ .../pie_visualization/visualization.test.ts | 2 ++ .../xy_visualization/to_expression.test.ts | 2 ++ .../xy_visualization/visualization.test.ts | 2 ++ .../xy_visualization/xy_suggestions.test.ts | 2 ++ 13 files changed, 75 insertions(+), 7 deletions(-) create mode 100644 src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/theme.ts diff --git a/src/plugins/chart_expressions/expression_metric/kibana.json b/src/plugins/chart_expressions/expression_metric/kibana.json index c662dc13103233..dec818b1f17dfb 100755 --- 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/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx index 748ef15a6c9c9c..18f97f23538c2a 100644 --- a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx +++ b/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 ; diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/theme.ts b/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/theme.ts new file mode 100644 index 00000000000000..d64fa429d5684c --- /dev/null +++ b/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 }]), +}; diff --git a/src/plugins/vis_types/vislib/public/vis_renderer.tsx b/src/plugins/vis_types/vislib/public/vis_renderer.tsx index 1fad6c63944475..906c8efb69cf2b 100644 --- a/src/plugins/vis_types/vislib/public/vis_renderer.tsx +++ b/src/plugins/vis_types/vislib/public/vis_renderer.tsx @@ -9,7 +9,7 @@ import React, { lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { KibanaThemeProvider } from '../../../kibana_react/public'; import { ExpressionRenderDefinition } from '../../../expressions/public'; import { VisualizationContainer } from '../../../visualizations/public'; import { ChartsPluginSetup } from '../../../charts/public'; diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx index 64d5a6f8f25a67..0c9091a7f4ca3a 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx @@ -18,6 +18,7 @@ import { } from '../types'; import { chartPluginMock } from 'src/plugins/charts/public/mocks'; import { layerTypes } from '../../common'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; function mockFrame(): FramePublicAPI { return { @@ -28,6 +29,7 @@ function mockFrame(): FramePublicAPI { const datatableVisualization = getDatatableVisualization({ paletteService: chartPluginMock.createPaletteRegistry(), + theme: themeServiceMock.createStartContract(), }); describe('Datatable Visualization', () => { diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx index 59d6325e1c0ce8..4300b67856d8a3 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable.test.tsx @@ -18,7 +18,7 @@ import { Query, TimeRange, Filter, IndexPatternsContract } from 'src/plugins/dat import { Document } from '../persistence'; import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; import { VIS_EVENT_TO_TRIGGER } from '../../../../../src/plugins/visualizations/public/embeddable'; -import { coreMock, httpServiceMock } from '../../../../../src/core/public/mocks'; +import { coreMock, httpServiceMock, themeServiceMock } from '../../../../../src/core/public/mocks'; import { IBasePath } from '../../../../../src/core/public'; import { AttributeService, ViewMode } from '../../../../../src/plugins/embeddable/public'; import { LensAttributeService } from '../lens_attribute_service'; @@ -126,6 +126,7 @@ describe('embeddable', () => { }, inspector: inspectorPluginMock.createStartContract(), getTrigger, + theme: themeServiceMock.createStartContract(), visualizationMap: {}, documentToExpression: () => Promise.resolve({ @@ -168,6 +169,7 @@ describe('embeddable', () => { capabilities: { canSaveDashboards: true, canSaveVisualizations: true }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -213,6 +215,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -260,6 +263,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -303,6 +307,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -343,6 +348,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -386,6 +392,7 @@ describe('embeddable', () => { capabilities: { canSaveDashboards: true, canSaveVisualizations: true }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -436,6 +443,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -484,6 +492,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -539,6 +548,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -595,6 +605,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -654,6 +665,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -697,6 +709,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -740,6 +753,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -783,6 +797,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -841,6 +856,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -915,6 +931,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -964,6 +981,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -1013,6 +1031,7 @@ describe('embeddable', () => { }, getTrigger, visualizationMap: {}, + theme: themeServiceMock.createStartContract(), documentToExpression: () => Promise.resolve({ ast: { @@ -1082,6 +1101,7 @@ describe('embeddable', () => { canSaveVisualizations: true, }, getTrigger, + theme: themeServiceMock.createStartContract(), visualizationMap: { [visDocument.visualizationType as string]: { onEditAction: onEditActionMock, diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts index 91b90e11470fc1..653254afb32bf2 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts @@ -23,6 +23,7 @@ import type { HeatmapVisualizationState } from './types'; import type { DatasourcePublicAPI, Operation } from '../types'; import { chartPluginMock } from 'src/plugins/charts/public/mocks'; import { layerTypes } from '../../common'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; function exampleState(): HeatmapVisualizationState { return { @@ -46,6 +47,7 @@ function exampleState(): HeatmapVisualizationState { } const paletteService = chartPluginMock.createPaletteRegistry(); +const theme = themeServiceMock.createStartContract(); describe('heatmap', () => { let frame: ReturnType; @@ -56,7 +58,7 @@ describe('heatmap', () => { describe('#intialize', () => { test('returns a default state', () => { - expect(getHeatmapVisualization({ paletteService }).initialize(() => 'l1')).toEqual({ + expect(getHeatmapVisualization({ paletteService, theme }).initialize(() => 'l1')).toEqual({ layerId: 'l1', layerType: layerTypes.DATA, title: 'Empty Heatmap chart', @@ -79,7 +81,10 @@ describe('heatmap', () => { test('returns persisted state', () => { expect( - getHeatmapVisualization({ paletteService }).initialize(() => 'test-layer', exampleState()) + getHeatmapVisualization({ paletteService, theme }).initialize( + () => 'test-layer', + exampleState() + ) ).toEqual(exampleState()); }); }); @@ -117,6 +122,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getConfiguration({ state, frame, layerId: 'first' }) ).toEqual({ groups: [ @@ -174,6 +180,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getConfiguration({ state, frame, layerId: 'first' }) ).toEqual({ groups: [ @@ -226,6 +233,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getConfiguration({ state, frame, layerId: 'first' }) ).toEqual({ groups: [ @@ -280,6 +288,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).setDimension({ prevState, layerId: 'first', @@ -304,6 +313,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).removeDimension({ prevState, layerId: 'first', @@ -322,6 +332,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getSupportedLayers() ).toHaveLength(1); }); @@ -336,6 +347,7 @@ describe('heatmap', () => { }; const instance = getHeatmapVisualization({ paletteService, + theme, }); expect(instance.getLayerType('test-layer', state)).toEqual(layerTypes.DATA); expect(instance.getLayerType('foo', state)).toBeUndefined(); @@ -372,6 +384,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).toExpression(state, datasourceLayers, attributes) ).toEqual({ type: 'expression', @@ -459,6 +472,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).toExpression(state, datasourceLayers, attributes) ).toEqual(null); }); @@ -490,6 +504,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).toPreviewExpression!(state, datasourceLayers) ).toEqual({ type: 'expression', @@ -568,6 +583,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getErrorMessages(mockState) ).toEqual(undefined); }); @@ -580,6 +596,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getErrorMessages(mockState) ).toEqual([ { @@ -612,6 +629,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getWarningMessages!(mockState, frame) ).toEqual(undefined); }); @@ -632,6 +650,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getWarningMessages!(mockState, frame) ).toEqual(undefined); }); @@ -657,6 +676,7 @@ describe('heatmap', () => { expect( getHeatmapVisualization({ paletteService, + theme, }).getWarningMessages!(mockState, frame) ).toHaveLength(1); }); diff --git a/x-pack/plugins/lens/public/metric_visualization/index.ts b/x-pack/plugins/lens/public/metric_visualization/index.ts index 508535b57bdfbb..8740a3af5435ca 100644 --- a/x-pack/plugins/lens/public/metric_visualization/index.ts +++ b/x-pack/plugins/lens/public/metric_visualization/index.ts @@ -30,7 +30,7 @@ export class MetricVisualization { expressions.registerRenderer(() => getMetricChartRenderer(formatFactory, core.uiSettings, core.theme) ); - return getMetricVisualization({ paletteService: palettes }); + return getMetricVisualization({ paletteService: palettes, theme: core.theme }); }); } } diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index 889b711739fb31..bba08c1aa24422 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -13,6 +13,7 @@ import { generateId } from '../id_generator'; import { DatasourcePublicAPI, FramePublicAPI } from '../types'; import { chartPluginMock } from 'src/plugins/charts/public/mocks'; import { ColorMode } from 'src/plugins/charts/common'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; jest.mock('../id_generator'); @@ -36,6 +37,7 @@ function mockFrame(): FramePublicAPI { const metricVisualization = getMetricVisualization({ paletteService: chartPluginMock.createPaletteRegistry(), + theme: themeServiceMock.createStartContract(), }); describe('metric_visualization', () => { diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.test.ts b/x-pack/plugins/lens/public/pie_visualization/visualization.test.ts index cdbd4802976279..86ac635e36068d 100644 --- a/x-pack/plugins/lens/public/pie_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/pie_visualization/visualization.test.ts @@ -11,6 +11,7 @@ import { layerTypes } from '../../common'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { FramePublicAPI } from '../types'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; jest.mock('../id_generator'); @@ -18,6 +19,7 @@ const LAYER_ID = 'l1'; const pieVisualization = getPieVisualization({ paletteService: chartPluginMock.createPaletteRegistry(), + kibanaTheme: themeServiceMock.createStartContract(), }); function getExampleState(): PieVisualizationState { diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts index 033e324a5d02d2..ea4db04080f651 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts @@ -14,11 +14,13 @@ import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { layerTypes } from '../../common'; import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks'; import { defaultReferenceLineColor } from './color_assignment'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; describe('#toExpression', () => { const xyVisualization = getXyVisualization({ paletteService: chartPluginMock.createPaletteRegistry(), fieldFormats: fieldFormatsServiceMock.createStartContract(), + kibanaTheme: themeServiceMock.createStartContract(), useLegacyTimeAxis: false, }); let mockDatasource: ReturnType; diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts index 029cfe8ecbe400..086e05b3e4622f 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts @@ -16,6 +16,7 @@ import { LensIconChartBar } from '../assets/chart_bar'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks'; import { Datatable } from 'src/plugins/expressions'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; function exampleState(): State { return { @@ -41,6 +42,7 @@ const xyVisualization = getXyVisualization({ paletteService: paletteServiceMock, fieldFormats: fieldFormatsMock, useLegacyTimeAxis: false, + kibanaTheme: themeServiceMock.createStartContract(), }); describe('xy_visualization', () => { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index fb2dd7aa85f367..d7b48553ce73aa 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -14,6 +14,7 @@ import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks' import { PaletteOutput } from 'src/plugins/charts/public'; import { layerTypes } from '../../common'; import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks'; +import { themeServiceMock } from '../../../../../src/core/public/mocks'; jest.mock('../id_generator'); @@ -21,6 +22,7 @@ const xyVisualization = getXyVisualization({ paletteService: chartPluginMock.createPaletteRegistry(), fieldFormats: fieldFormatsServiceMock.createStartContract(), useLegacyTimeAxis: false, + kibanaTheme: themeServiceMock.createStartContract(), }); describe('xy_suggestions', () => { From 4fce592b0370339de40953d322d74778daad577a Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 22 Nov 2021 20:24:57 +0100 Subject: [PATCH 7/8] fix tagcloud renderer --- .../public/expression_renderers/tagcloud_renderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx index 9fa3e96143e35f..4b58c1dfb6c90c 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx @@ -11,7 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; import { ClassNames } from '@emotion/react'; import { i18n } from '@kbn/i18n'; -import { KibanaThemeProvider } from 'src/plugins/kibana_react/public'; +import { KibanaThemeProvider } from '../../../../kibana_react/public'; import { VisualizationContainer } from '../../../../visualizations/public'; import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers'; import { ExpressioTagcloudRendererDependencies } from '../plugin'; From eb8d8e14f7979486c1225659c47dc0519f3fea59 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 23 Nov 2021 09:09:19 +0100 Subject: [PATCH 8/8] fix service and stories --- .../__stories__/tagcloud_renderer.stories.tsx | 19 ++++++++++++------- src/plugins/visualizations/public/plugin.ts | 2 ++ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx index 1e0dc2600d1a19..eca35918d72898 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx @@ -12,6 +12,7 @@ import { tagcloudRenderer } from '../expression_renderers'; import { Render } from '../../../../presentation_util/public/__stories__'; import { TagcloudRendererConfig } from '../../common/types'; import { palettes } from '../__mocks__/palettes'; +import { theme } from '../__mocks__/theme'; const config: TagcloudRendererConfig = { visType: 'tagcloud', @@ -66,13 +67,17 @@ const containerSize = { storiesOf('renderers/tag_cloud_vis', module) .add('Default', () => { return ( - tagcloudRenderer({ palettes })} config={config} {...containerSize} /> + tagcloudRenderer({ palettes, theme })} + config={config} + {...containerSize} + /> ); }) .add('With log scale', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visParams: { ...config.visParams, scale: 'log' } }} {...containerSize} /> @@ -81,7 +86,7 @@ storiesOf('renderers/tag_cloud_vis', module) .add('With square root scale', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visParams: { ...config.visParams, scale: 'square root' } }} {...containerSize} /> @@ -90,7 +95,7 @@ storiesOf('renderers/tag_cloud_vis', module) .add('With right angled orientation', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visParams: { ...config.visParams, orientation: 'right angled' } }} {...containerSize} /> @@ -99,7 +104,7 @@ storiesOf('renderers/tag_cloud_vis', module) .add('With multiple orientations', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visParams: { ...config.visParams, orientation: 'multiple' } }} {...containerSize} /> @@ -108,7 +113,7 @@ storiesOf('renderers/tag_cloud_vis', module) .add('With hidden label', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visParams: { ...config.visParams, showLabel: false } }} {...containerSize} /> @@ -117,7 +122,7 @@ storiesOf('renderers/tag_cloud_vis', module) .add('With empty results', () => { return ( tagcloudRenderer({ palettes })} + renderer={() => tagcloudRenderer({ palettes, theme })} config={{ ...config, visData: { ...config.visData, rows: [] } }} {...containerSize} /> diff --git a/src/plugins/visualizations/public/plugin.ts b/src/plugins/visualizations/public/plugin.ts index 60c50d018252b5..4e671a145cc718 100644 --- a/src/plugins/visualizations/public/plugin.ts +++ b/src/plugins/visualizations/public/plugin.ts @@ -25,6 +25,7 @@ import { setEmbeddable, setDocLinks, setSpaces, + setTheme, } from './services'; import { VISUALIZE_EMBEDDABLE_TYPE, @@ -147,6 +148,7 @@ export class VisualizationsPlugin setUISettings(core.uiSettings); setUsageCollector(usageCollection); + setTheme(core.theme); expressions.registerFunction(rangeExpressionFunction); expressions.registerFunction(visDimensionExpressionFunction);