mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
# 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:
parent
db10db938a
commit
450f38e6b6
18 changed files with 58 additions and 54 deletions
|
@ -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} />
|
||||
);
|
||||
});
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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} />;
|
||||
});
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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} />
|
||||
);
|
||||
});
|
||||
|
|
|
@ -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} />
|
||||
);
|
||||
});
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -36,7 +36,6 @@ export {
|
|||
} from './labs';
|
||||
|
||||
export {
|
||||
defaultTheme$,
|
||||
getElasticLogo,
|
||||
getElasticOutline,
|
||||
isValidUrl,
|
||||
|
|
|
@ -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 })
|
||||
);
|
|
@ -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');
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue