[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)](#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":"[email protected]"},"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 <[email protected]>

src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx

@@ -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} />
+  );
 });

src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx

@@ -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(),

src/plugins/expression_error/public/expression_renderers/error_renderer.tsx

@@ -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(),

src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx

@@ -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(

src/plugins/expression_image/public/expression_renderers/image_renderer.tsx

@@ -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(),

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

@@ -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} />;
   });

src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx

@@ -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(),

src/plugins/expression_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx

@@ -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(

src/plugins/expression_repeat_image/public/expression_renderers/repeat_image_renderer.tsx

@@ -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(),

src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx

@@ -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(

src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx

@@ -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(),

src/plugins/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx

@@ -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} />
+  );
 });

src/plugins/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx

@@ -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} />
+  );
 });

src/plugins/expression_shape/public/expression_renderers/progress_renderer.tsx

@@ -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(),

src/plugins/expression_shape/public/expression_renderers/shape_renderer.tsx

@@ -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(),

src/plugins/presentation_util/common/index.ts

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

src/plugins/presentation_util/common/lib/utils/index.ts

@@ -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');