[Presentation/Expression] Remove usage of deprecated React rendering utilities (#181599)

## Summary Partially addresses https://github.com/elastic/kibana-team/issues/805 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This focuses on code within **Expression** components. <img width="1196" alt="image" src="7f8d3707-94f0-4746-8dd5-dd858ce027f9"> ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-23 09:19:04 -04:00 · 2024-05-01 21:23:29 -07:00 · 2024-05-01 21:23:29 -07:00 · 7d97184065
commit 7d97184065
parent de41a8115a
21 changed files with 141 additions and 110 deletions
--- a/src/plugins/expression_error/kibana.jsonc
+++ b/src/plugins/expression_error/kibana.jsonc
@ -11,8 +11,6 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredBundles": []
  }
 }
--- a/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx
+++ b/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx
@ -6,18 +6,19 @@
 * Side Public License, v 1.
 */

-import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { CoreTheme } from '@kbn/core/public';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 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 { LazyDebugRenderComponent } from '../components';
 import { JSON } from '../../common';
+import { LazyDebugRenderComponent } from '../components';

 const Debug = withSuspense(LazyDebugRenderComponent);

@ -45,9 +46,13 @@ export const getDebugRenderer =
    render(domNode, config, handlers) {
      handlers.onDestroy(() => unmountComponentAtNode(domNode));
      render(
-        <KibanaThemeProvider theme$={theme$}>
-          <Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />
-        </KibanaThemeProvider>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode
      );
    },
--- a/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx
+++ b/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx
@ -9,15 +9,16 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { CoreTheme } from '@kbn/core/public';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+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';
@ -53,11 +54,15 @@ export const getErrorRenderer =
      });

      render(
-        <KibanaThemeProvider theme$={theme$}>
-          <I18nProvider>
-            <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-          </I18nProvider>
-        </KibanaThemeProvider>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <I18nProvider>
+                <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+              </I18nProvider>
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode
      );
    },
--- a/src/plugins/expression_error/tsconfig.json
+++ b/src/plugins/expression_error/tsconfig.json
@ -14,9 +14,10 @@
    "@kbn/presentation-util-plugin",
    "@kbn/expressions-plugin",
    "@kbn/i18n",
-    "@kbn/kibana-react-plugin",
-    "@kbn/i18n-react",
    "@kbn/shared-ux-markdown",
+    "@kbn/react-kibana-context-theme",
+    "@kbn/i18n-react",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/src/plugins/expression_image/kibana.jsonc
+++ b/src/plugins/expression_image/kibana.jsonc
@ -11,8 +11,6 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredBundles": []
  }
 }
--- a/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx
+++ b/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx
@ -5,18 +5,20 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { Observable } from 'rxjs';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { Observable } from 'rxjs';
-import { CoreTheme } from '@kbn/core/public';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { getElasticLogo, defaultTheme$, 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';

 const strings = {
@ -58,9 +60,13 @@ export const getImageRenderer =
      });

      render(
-        <KibanaThemeProvider theme$={theme$}>
-          <div style={style} />
-        </KibanaThemeProvider>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <div style={style} />
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode,
        () => handlers.done()
      );
--- a/src/plugins/expression_image/tsconfig.json
+++ b/src/plugins/expression_image/tsconfig.json
@ -16,7 +16,8 @@
    "@kbn/expressions-plugin",
    "@kbn/expect",
    "@kbn/i18n",
-    "@kbn/kibana-react-plugin",
+    "@kbn/react-kibana-context-theme",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/src/plugins/expression_metric/kibana.jsonc
+++ b/src/plugins/expression_metric/kibana.jsonc
@ -11,8 +11,6 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredBundles": []
  }
 }
--- a/src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx
+++ b/src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx
@ -5,18 +5,19 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React, { CSSProperties } from 'react';
-import { Observable } from 'rxjs';
-import { CoreTheme } from '@kbn/core/public';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { EuiErrorBoundary } from '@elastic/eui';
+import { Observable } from 'rxjs';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-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 { MetricRendererConfig } from '../../common/types';

@ -49,17 +50,19 @@ export const getMetricRenderer =
      });

      render(
-        <EuiErrorBoundary>
-          <KibanaThemeProvider theme$={theme$}>
-            <MetricComponent
-              label={config.label}
-              labelFont={config.labelFont ? (config.labelFont.spec as CSSProperties) : {}}
-              metric={config.metric}
-              metricFont={config.metricFont ? (config.metricFont.spec as CSSProperties) : {}}
-              metricFormat={config.metricFormat}
-            />
-          </KibanaThemeProvider>
-        </EuiErrorBoundary>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <MetricComponent
+                label={config.label}
+                labelFont={config.labelFont ? (config.labelFont.spec as CSSProperties) : {}}
+                metric={config.metric}
+                metricFont={config.metricFont ? (config.metricFont.spec as CSSProperties) : {}}
+                metricFormat={config.metricFormat}
+              />
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode,
        () => handlers.done()
      );
--- a/src/plugins/expression_metric/tsconfig.json
+++ b/src/plugins/expression_metric/tsconfig.json
@ -15,7 +15,8 @@
    "@kbn/presentation-util-plugin",
    "@kbn/expressions-plugin",
    "@kbn/i18n",
-    "@kbn/kibana-react-plugin",
+    "@kbn/react-kibana-context-theme",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/src/plugins/expression_repeat_image/kibana.jsonc
+++ b/src/plugins/expression_repeat_image/kibana.jsonc
@ -11,8 +11,6 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredBundles": []
  }
 }
--- a/src/plugins/expression_repeat_image/public/expression_renderers/repeat_image_renderer.tsx
+++ b/src/plugins/expression_repeat_image/public/expression_renderers/repeat_image_renderer.tsx
@ -5,19 +5,20 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { EuiErrorBoundary } from '@elastic/eui';
-import { CoreTheme } from '@kbn/core/public';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
-import { CoreSetup } from '@kbn/core/public';
+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 { RepeatImageRendererConfig } from '../../common/types';

@ -57,13 +58,15 @@ export const getRepeatImageRenderer =
      });

      render(
-        <EuiErrorBoundary>
-          <KibanaThemeProvider theme$={theme$}>
-            <I18nProvider>
-              <RepeatImageComponent onLoaded={handlers.done} {...settings} parentNode={domNode} />
-            </I18nProvider>
-          </KibanaThemeProvider>
-        </EuiErrorBoundary>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <I18nProvider>
+                <RepeatImageComponent onLoaded={handlers.done} {...settings} parentNode={domNode} />
+              </I18nProvider>
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode
      );
    },
--- a/src/plugins/expression_repeat_image/tsconfig.json
+++ b/src/plugins/expression_repeat_image/tsconfig.json
@ -14,8 +14,9 @@
    "@kbn/presentation-util-plugin",
    "@kbn/expressions-plugin",
    "@kbn/i18n",
+    "@kbn/react-kibana-context-theme",
    "@kbn/i18n-react",
-    "@kbn/kibana-react-plugin",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/src/plugins/expression_reveal_image/kibana.jsonc
+++ b/src/plugins/expression_reveal_image/kibana.jsonc
@ -11,8 +11,6 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredBundles": []
  }
 }
--- a/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx
+++ b/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx
@ -5,19 +5,20 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { EuiErrorBoundary } from '@elastic/eui';
-import { CoreTheme } from '@kbn/core/public';
-import { I18nProvider } from '@kbn/i18n-react';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+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';

@ -50,13 +51,15 @@ export const getRevealImageRenderer =
      });

      render(
-        <EuiErrorBoundary>
-          <KibanaThemeProvider theme$={theme$}>
-            <I18nProvider>
-              <RevealImageComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-            </I18nProvider>
-          </KibanaThemeProvider>
-        </EuiErrorBoundary>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <I18nProvider>
+                <RevealImageComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+              </I18nProvider>
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode
      );
    },
--- a/src/plugins/expression_reveal_image/tsconfig.json
+++ b/src/plugins/expression_reveal_image/tsconfig.json
@ -14,8 +14,9 @@
    "@kbn/presentation-util-plugin",
    "@kbn/expressions-plugin",
    "@kbn/i18n",
+    "@kbn/react-kibana-context-theme",
    "@kbn/i18n-react",
-    "@kbn/kibana-react-plugin",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/src/plugins/expression_shape/kibana.jsonc
+++ b/src/plugins/expression_shape/kibana.jsonc
@ -11,9 +11,7 @@
      "expressions",
      "presentationUtil"
    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ],
+    "requiredBundles": [],
    "extraPublicDirs": [
      "common"
    ]
--- a/src/plugins/expression_shape/public/expression_renderers/progress_renderer.tsx
+++ b/src/plugins/expression_shape/public/expression_renderers/progress_renderer.tsx
@ -5,19 +5,20 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { EuiErrorBoundary } from '@elastic/eui';
-import { CoreTheme } from '@kbn/core/public';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
-import { CoreSetup } from '@kbn/core/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 { ProgressRendererConfig } from '../../common/types';

@ -50,13 +51,15 @@ export const getProgressRenderer =
      });

      render(
-        <EuiErrorBoundary>
-          <KibanaThemeProvider theme$={theme$}>
-            <I18nProvider>
-              <ProgressComponent {...config} parentNode={domNode} onLoaded={handlers.done} />
-            </I18nProvider>
-          </KibanaThemeProvider>
-        </EuiErrorBoundary>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <I18nProvider>
+                <ProgressComponent {...config} parentNode={domNode} onLoaded={handlers.done} />
+              </I18nProvider>
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
        domNode
      );
    },
--- a/src/plugins/expression_shape/public/expression_renderers/shape_renderer.tsx
+++ b/src/plugins/expression_shape/public/expression_renderers/shape_renderer.tsx
@ -5,19 +5,20 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { EuiErrorBoundary } from '@elastic/eui';
-import { CoreTheme } from '@kbn/core/public';
-import { I18nProvider } from '@kbn/i18n-react';
+
+import { CoreSetup, CoreTheme } from '@kbn/core/public';
 import {
  ExpressionRenderDefinition,
  IInterpreterRenderHandlers,
 } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { CoreSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+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';

@ -50,13 +51,16 @@ export const getShapeRenderer =
      });

      render(
-        <EuiErrorBoundary>
-          <KibanaThemeProvider theme$={theme$}>
-            <I18nProvider>
-              <ShapeComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-            </I18nProvider>
-          </KibanaThemeProvider>
-        </EuiErrorBoundary>,
+        <KibanaErrorBoundaryProvider analytics={undefined}>
+          <KibanaErrorBoundary>
+            <KibanaThemeProvider theme={{ theme$ }}>
+              <I18nProvider>
+                <ShapeComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+              </I18nProvider>
+            </KibanaThemeProvider>
+          </KibanaErrorBoundary>
+        </KibanaErrorBoundaryProvider>,
+
        domNode
      );
    },
--- a/src/plugins/expression_shape/tsconfig.json
+++ b/src/plugins/expression_shape/tsconfig.json
@ -15,8 +15,9 @@
    "@kbn/presentation-util-plugin",
    "@kbn/expressions-plugin",
    "@kbn/i18n",
+    "@kbn/react-kibana-context-theme",
    "@kbn/i18n-react",
-    "@kbn/kibana-react-plugin",
+    "@kbn/shared-ux-error-boundary",
  ],
  "exclude": [
    "target/**/*",
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@ -17,6 +17,11 @@ import { plot } from '../canvas_plugin_src/renderers/plot';
 import { pie } from '../canvas_plugin_src/renderers/pie';
 import { getMarkdownRenderer } from '../canvas_plugin_src/renderers/markdown';

+/**
+ * FIXME: Render function factories require stateful dependencies to be
+ * injected. Without them, we can not provide proper theming, i18n, or
+ * telemetry when fatal errors occur during rendering.
+ */
 const unboxFactory = (factory) => factory();

 const renderFunctionsFactories = [