[8.x] [presentation-utils] remove defaultTheme$ (#200044) (#200205)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[presentation-utils] remove defaultTheme$
(#200044)](https://github.com/elastic/kibana/pull/200044)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2024-11-14T15:43:56Z","message":"[presentation-utils]
remove defaultTheme$ (#200044)\n\nCloses
https://github.com/elastic/kibana/issues/200037\r\n\r\ndefaultTheme$ is
only used in storybooks. This PR removes defaultTheme$\r\nand replaces
it with theme$ available from core start
mock.","sha":"f3e773552d2f98d26afd8e9df866c812a5e6fdd7","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","v9.0.0","backport:version","v8.17.0"],"title":"[presentation-utils]
remove
defaultTheme$","number":200044,"url":"https://github.com/elastic/kibana/pull/200044","mergeCommit":{"message":"[presentation-utils]
remove defaultTheme$ (#200044)\n\nCloses
https://github.com/elastic/kibana/issues/200037\r\n\r\ndefaultTheme$ is
only used in storybooks. This PR removes defaultTheme$\r\nand replaces
it with theme$ available from core start
mock.","sha":"f3e773552d2f98d26afd8e9df866c812a5e6fdd7"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200044","number":200044,"mergeCommit":{"message":"[presentation-utils]
remove defaultTheme$ (#200044)\n\nCloses
https://github.com/elastic/kibana/issues/200037\r\n\r\ndefaultTheme$ is
only used in storybooks. This PR removes defaultTheme$\r\nand replaces
it with theme$ available from core start
mock.","sha":"f3e773552d2f98d26afd8e9df866c812a5e6fdd7"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <reese.nathan@elastic.co>
This commit is contained in:
Kibana Machine 2024-11-15 04:31:14 +11:00 committed by GitHub
parent db10db938a
commit 450f38e6b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 58 additions and 54 deletions

View file

@ -9,6 +9,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { Render } from '@kbn/presentation-util-plugin/public/__stories__';
import { getErrorRenderer } from '../error_renderer';
@ -17,5 +18,8 @@ storiesOf('renderers/error', module).add('default', () => {
const config = {
error: thrownError,
};
return <Render renderer={getErrorRenderer()} config={config} />;
return (
<Render renderer={getErrorRenderer(coreMock.createStart().theme.theme$)} config={config} />
);
});

View file

@ -17,7 +17,6 @@ import { i18n } from '@kbn/i18n';
import { withSuspense } from '@kbn/presentation-util-plugin/public';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { JSON } from '../../common';
import { LazyDebugRenderComponent } from '../components';
@ -38,8 +37,7 @@ const strings = {
};
export const getDebugRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<any> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<any> => ({
name: 'debug',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -21,7 +21,6 @@ import {
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { withSuspense } from '@kbn/presentation-util-plugin/public';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { ErrorRendererConfig } from '../../common/types';
import { LazyErrorRenderComponent } from '../components';
@ -39,8 +38,7 @@ const errorStrings = {
const ErrorComponent = withSuspense(LazyErrorRenderComponent);
export const getErrorRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<ErrorRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
name: 'error',
displayName: errorStrings.getDisplayName(),
help: errorStrings.getHelpDescription(),

View file

@ -9,6 +9,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { Render, waitFor } from '@kbn/presentation-util-plugin/public/__stories__';
import { getElasticLogo } from '@kbn/presentation-util-plugin/common';
import { getImageRenderer } from '../image_renderer';
@ -20,7 +21,14 @@ const Renderer = ({ elasticLogo }: { elasticLogo: string }) => {
mode: ImageMode.COVER,
};
return <Render renderer={getImageRenderer()} config={config} width="500px" height="500px" />;
return (
<Render
renderer={getImageRenderer(coreMock.createStart().theme.theme$)}
config={config}
width="500px"
height="500px"
/>
);
};
storiesOf('renderers/image', module).add(

View file

@ -17,7 +17,7 @@ import {
IInterpreterRenderHandlers,
} from '@kbn/expressions-plugin/common';
import { i18n } from '@kbn/i18n';
import { getElasticLogo, defaultTheme$, isValidUrl } from '@kbn/presentation-util-plugin/common';
import { getElasticLogo, isValidUrl } from '@kbn/presentation-util-plugin/common';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { ImageRendererConfig } from '../../common/types';
@ -34,8 +34,7 @@ const strings = {
};
export const getImageRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<ImageRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<ImageRendererConfig> => ({
name: 'image',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -9,6 +9,7 @@
import React, { CSSProperties } from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { Style } from '@kbn/expressions-plugin/common';
import { Render } from '@kbn/presentation-util-plugin/public/__stories__';
import { getMetricRenderer } from '../metric_renderer';
@ -37,6 +38,8 @@ const metricFontSpec: CSSProperties = {
color: '#b83c6f',
};
const theme$ = coreMock.createStart().theme.theme$;
storiesOf('renderers/Metric', module)
.add('with null metric', () => {
const config: MetricRendererConfig = {
@ -46,7 +49,7 @@ storiesOf('renderers/Metric', module)
label: '',
metricFormat: '',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with number metric', () => {
const config: MetricRendererConfig = {
@ -56,7 +59,7 @@ storiesOf('renderers/Metric', module)
label: '',
metricFormat: '',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with string metric', () => {
const config: MetricRendererConfig = {
@ -66,7 +69,7 @@ storiesOf('renderers/Metric', module)
label: '',
metricFormat: '',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with label', () => {
const config: MetricRendererConfig = {
@ -76,7 +79,7 @@ storiesOf('renderers/Metric', module)
label: 'Average price',
metricFormat: '',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with number metric and a specified format', () => {
const config: MetricRendererConfig = {
@ -86,7 +89,7 @@ storiesOf('renderers/Metric', module)
label: 'Average price',
metricFormat: '0.00%',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with formatted string metric and a specified format', () => {
const config: MetricRendererConfig = {
@ -96,7 +99,7 @@ storiesOf('renderers/Metric', module)
label: 'Total Revenue',
metricFormat: '$0a',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
})
.add('with invalid metricFont', () => {
const config: MetricRendererConfig = {
@ -106,5 +109,5 @@ storiesOf('renderers/Metric', module)
label: 'Total Revenue',
metricFormat: '$0a',
};
return <Render renderer={getMetricRenderer()} config={config} />;
return <Render renderer={getMetricRenderer(theme$)} config={config} />;
});

View file

@ -19,7 +19,6 @@ import {
import { i18n } from '@kbn/i18n';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { MetricRendererConfig } from '../../common/types';
const strings = {
@ -34,8 +33,7 @@ const strings = {
};
export const getMetricRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<MetricRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<MetricRendererConfig> => ({
name: 'metric',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -9,6 +9,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { Render } from '@kbn/presentation-util-plugin/public/__stories__';
import { getElasticLogo, getElasticOutline } from '@kbn/presentation-util-plugin/common';
import { waitFor } from '@kbn/presentation-util-plugin/public/__stories__';
@ -29,7 +30,13 @@ const Renderer = ({
emptyImage: elasticOutline,
};
return <Render renderer={getRepeatImageRenderer()} config={config} width="400px" />;
return (
<Render
renderer={getRepeatImageRenderer(coreMock.createStart().theme.theme$)}
config={config}
width="400px"
/>
);
};
storiesOf('enderers/repeatImage', module).add(

View file

@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n';
import { I18nProvider } from '@kbn/i18n-react';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$, getElasticOutline, isValidUrl } from '@kbn/presentation-util-plugin/common';
import { getElasticOutline, isValidUrl } from '@kbn/presentation-util-plugin/common';
import { RepeatImageRendererConfig } from '../../common/types';
const strings = {
@ -35,8 +35,7 @@ const strings = {
};
export const getRepeatImageRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<RepeatImageRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<RepeatImageRendererConfig> => ({
name: 'repeatImage',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -9,6 +9,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { getElasticOutline, getElasticLogo } from '@kbn/presentation-util-plugin/common';
import { Render, waitFor } from '@kbn/presentation-util-plugin/public/__stories__';
import { getRevealImageRenderer } from '..';
@ -27,7 +28,13 @@ const Renderer = ({
origin: Origin.LEFT,
percent: 0.45,
};
return <Render renderer={getRevealImageRenderer()} config={config} />;
return (
<Render
renderer={getRevealImageRenderer(coreMock.createStart().theme.theme$)}
config={config}
/>
);
};
storiesOf('renderers/revealImage', module).add(

View file

@ -20,7 +20,6 @@ import { i18n } from '@kbn/i18n';
import { I18nProvider } from '@kbn/i18n-react';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { RevealImageRendererConfig } from '../../common/types';
export const strings = {
@ -35,8 +34,7 @@ export const strings = {
};
export const getRevealImageRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<RevealImageRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<RevealImageRendererConfig> => ({
name: 'revealImage',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -10,6 +10,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Render } from '@kbn/presentation-util-plugin/public/__stories__';
import { coreMock } from '@kbn/core/public/mocks';
import { getProgressRenderer } from '../progress_renderer';
import { Progress } from '../../../common';
@ -30,5 +31,7 @@ storiesOf('renderers/progress', module).add('default', () => {
valueWeight: 15,
};
return <Render renderer={getProgressRenderer()} config={config} />;
return (
<Render renderer={getProgressRenderer(coreMock.createStart().theme.theme$)} config={config} />
);
});

View file

@ -9,6 +9,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { coreMock } from '@kbn/core/public/mocks';
import { Render } from '@kbn/presentation-util-plugin/public/__stories__';
import { getShapeRenderer } from '..';
import { Shape } from '../../../common/types';
@ -23,5 +24,7 @@ storiesOf('renderers/shape', module).add('default', () => {
maintainAspect: true,
};
return <Render renderer={getShapeRenderer()} config={config} />;
return (
<Render renderer={getShapeRenderer(coreMock.createStart().theme.theme$)} config={config} />
);
});

View file

@ -20,7 +20,6 @@ import { i18n } from '@kbn/i18n';
import { I18nProvider } from '@kbn/i18n-react';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { ProgressRendererConfig } from '../../common/types';
const strings = {
@ -35,8 +34,7 @@ const strings = {
};
export const getProgressRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<ProgressRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<ProgressRendererConfig> => ({
name: 'progress',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -20,7 +20,6 @@ import { i18n } from '@kbn/i18n';
import { I18nProvider } from '@kbn/i18n-react';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
import { ShapeRendererConfig } from '../../common/types';
const strings = {
@ -35,8 +34,7 @@ const strings = {
};
export const getShapeRenderer =
(theme$: Observable<CoreTheme> = defaultTheme$) =>
(): ExpressionRenderDefinition<ShapeRendererConfig> => ({
(theme$: Observable<CoreTheme>) => (): ExpressionRenderDefinition<ShapeRendererConfig> => ({
name: 'shape',
displayName: strings.getDisplayName(),
help: strings.getHelpDescription(),

View file

@ -36,7 +36,6 @@ export {
} from './labs';
export {
defaultTheme$,
getElasticLogo,
getElasticOutline,
isValidUrl,

View file

@ -1,15 +0,0 @@
/*
* 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import type { CoreTheme } from '@kbn/core/public';
import { Observable } from 'rxjs';
export const defaultTheme$: Observable<CoreTheme> = new Observable((subscriber) =>
subscriber.next({ darkMode: false })
);

View file

@ -11,7 +11,6 @@ export * from './dataurl';
export * from './httpurl';
export * from './resolve_dataurl';
export * from './url';
export { defaultTheme$ } from './default_theme';
export async function getElasticLogo() {
return await import('./elastic_logo');